Notes #BrainDump
#라이팅허브: 린터 깃허브 엑션 연동

#라이팅허브: 린터 깃허브 엑션 연동

2023-07-23 Note github linter notes textlint zenn

How to Zenn and Textlint Github Action

  • Related Pages

TL;DR

[2023-08-31 Thu 14:12]

  • 젠을 사용하여 깃허브 저장소 연동하여 글 관리
  • 텍스트린트를 저장소에 추가하여 실시간 교정 : 텍스트 에디터
  • 깃허브 액션을 이용한 글 관리 및 교열 워크플로우

STEP-01 : Zenn Github Repo with Zenn-Cli

[2023-07-11 Tue 13:28] https://zenn.dev/zenn/articles/install-zenn-cli

git clone git@github.com:junghan0611/zenn-blog.git

Connect Zenn and Github Repo on Browser

[2023-07-11 Tue 13:29] https://zenn.dev/zenn/articles/connect-to-github

리포 등록하면 로컬 텍스트 에디터에서 글쓰기 가능. 리포 등록하면 리포 변경이 바로 젠에 반영 된다.

만들고 연결했다. 공개 또는 비공개 다 가능하다.

https://github.com/junghan0611/zenn-blog

빈껍데기를 만들어서 연결한 것이다. 아래와 같은 리포에 가면 잘 구성된 예제를 볼 수 있다. 아무튼 껍데기에서 시작한다. https://github.com/Yuhta28/zenn-blog

Install Zenn-Cli with NPM

[2023-07-11 Tue 13:44]

로컬 프로젝트로 설정하고

npm init --yes
npm install zenn-cli

npx zenn init

# npm install zenn-cli@latest

그럼 다음과 같이 메시지가 나온다. 일본어로 나온다.

Generating README.md skipped.

  🎉  Done!
  早速コンテンツを作成しましょう
  즉시 콘텐츠를 만들어 봅시다.

  👇  新しい記事を作成する
  👇  새 아티클 만들기
  $ zenn new:article

  👇  新しい本を作成する
  $ zenn new:book

  👇  投稿をプレビューする
  $ zenn preview

README.md .gitignore, articles, books 이렇게 생긴다. 오케이.

Learn from Zenn-Cli Guide Document

[2023-07-11 Tue 14:03] https://zenn.dev/zenn/articles/zenn-cli-guide 큰 어려움은 없다. 다음으로 나아가자.

Articles : 기사를 관리하는 방법

[2023-07-11 Tue 14:45]

articles 폴더에 Markdown 파일을 만들면 된다. 샘플로 젠 문서 폴더를 확인하라고 한다. https://github.com/zenn-dev/zenn-docs

아티클을 만들어본다. slug 를 지정하지 않으면 랜덤 값이 들어간다. 지정해주는게 좋겠다.


# npx zenn new:article
npx zenn new:article --slug first-zenn-article
---
title: "" #기사의 제목
emoji: "😸" #아이 캐치로 사용되는 그림 문자(1글자만)
type: "tech" #tech:기술 기사/idea:아이디어 기사
topics: [] #태그.["markdown","rust","aws"]과 같이 지정한다
published: true #공개 설정(false로 만들려고 초안)
---
ここから本文を書く

이미지 삽입 관련하여,

  1. GitHub 레파지토리 내에 화상을 배치하는 방법 파일 사이즈 3 메가 제한 images 에 넣고 절대 경로로 지정할 것.
       #올바른 지정 방법

   ![](/images/example-image1.png)
   ![](/images/example-article-1/image1.png)

   #잘못된 지정 방법

   ![](../images/example-image1.png)
   ![](//images/example-image1.png)
  2. Gyazo 등의 외부 서비스에 업로드한 이미지의 URL 을 붙인다 https://gyazo.com/captures https://imgur.com/user/gtgkjh/favorites

미리 보기는

npx zenn preview

작성 후 공개 할 때는 published true 로 변경하고 깃허브에 푸시 한다.

공개 예약도 가능하다.

published: true #true를 지정한다
published_at: 2050-06-12 09:03 #미래의 일시를 지정하는

이저 날짜로 설정하여 공개하려면 과거 날짜로 지정하면 된다. 다만, 공개 일시는 한 번만 설정 가능하다.

글 수정해서 깃허브에 푸시하면 젠에도 반영이 된다. 단, Slug 를 변경하면 다른 파일로 인식 된다.

삭제는? 깃허브에서 파일 삭제한다고 해서 젠에서 지워지지 않는다.

데시보드 https://zenn.dev/dashboard 에서 삭제를 해야 한다.

Books : 책을 관리하는 방법

[2023-07-11 Tue 14:45]

글을 모으다 보면 결국 책으로 정리하게 된다.

디렉토리 구성의 예

#구체적인 사례
books
└── my-awesome-book
    ├── config.yaml
    ├── cover.png
    ├── example1.md
    ├── example2.md
    └── example3.md

설정 파일의 예

title: "책의 제목"
summary: "책 소개 글"
topics: ["markdown", "zenn", "react"] #토픽(5개까지)
published: true #false라고 초안
price: 0 #유료의 경우 200~5000
chapters:
  - example1 #챕터 1
  - example2 #챕터 2
  - example3 #챕터 3

각 챕터 파일의 경우

---
title: "제목"
free: true
---

챕터의 순서를 정하려면, 설정 파일에 나열 한다. introduction.md 파일이 있다는 것을 전제한다.

# config.yaml
...省略...
chapters:
  - introduction
  - results
  - conclusion

Markdown Guide and Zenn Tips

[2023-08-29 Tue 17:08] 문서로 만들어서 올렸다.

[2023-07-11 Tue 15:27] https://zenn.dev/zenn/articles/markdown-guide

STEP-02: Simple Textlint Sample : Obsidian Vscode Emacs : 실시간 교열

[2023-08-31 Thu 14:12] 아래 제대로 정리가 안되어 있긴 하지만. 여기에서 필요한 것은 텍스트린트 입문이다. 젠 저장소에 린터를 붙여서 교정해보는 것 이다. 단순한 수준에서 체험 정도. 여기서 텍스트 에디터가 들어간다.

  • flycheck - 실시간 교정

[2023-07-07 Fri 09:58] 일단 영어 샘플 테스트를 이맥스로 붙여 보자. 이맥스에 넣어주자.

simple workspace

따라하기로 쉽게 경험할 수 있다. 기본은 md, txt 파일인데 오그 파일 지원해보자.

suppoerted file formats

[2023-07-07 Fri 13:45] md txt 말고 다른 포멧을 지원. 특히 org 파일. 어떻게?! https://github.com/textlint/textlint#supported-file-formats

org 만 테스트 해본다.

https://github.com/kijimaD/textlint-plugin-org

여기에서 열심히 만들고 있네. 일본 사람이네. 마스터님이시네. 굉장하구만! 그건 그거고 제대로 동작하겠네 만든 사람을 보니까.

$ npm install --save-dev textlint-plugin-org
$ npx textlint file.org

plugins 에 org 를 넣고 검사 해본다.

test ja

[2023-07-07 Fri 10:17] 일본어 테스트 해보자. 왜?! 이게 한글 지원 기준점이 될 것이니까.

https://github.com/textlint/textlint/wiki/Collection-of-textlint-rule 문서가 기준이 된다.

결국 각각이 기능이 있고, 묶어서 스타일 시트가 된다. 구글 기술 문서 스타일이라던가 각각이 그렇게 엮여 있다.

https://github.com/hata6502/textlint-rule-ja-simple-user-dictionary 실행해 볼 필요가 없겠다. 그것 보다는 어떻게 룰을 만들 것인가가 중요하다.

룰을 만드려면?!

룰을 만드는 방법과 규칙 중복되는 것들과 한글에 필요한 룰 자바스크립트로 만드는 것. 좋다.

룰을 텍스트린트의 일부로 동작하는 코드다. 형식에 맞게 만들어야 동작한다.

문서에서 따라 해보기 를 해봐야 겠다. 배포 할 것은 아니지만 일단 동작이 가능해야 한다.

vscode-emacs-textlint 실시간 교정 환경 구축

[2023-07-27 Thu 11:07]

Vscode - Textlint :: 실시간 검사

[2023-07-13 Thu 06:05] https://qiita.com/takasp/items/22f7f72b691fda30aea2

특별한 것은 없다. 설정이 잡혀있는 경우 텍스트린트가 동작한다. 괜찮네. Flycheck 사용하는 것과 똑같다.

Emacs - Textlint :: 실시간 검사

flycheck 잘 된다

STEP-03 Github Action 활용 교열 리뷰 워크플로우

[2023-08-31 Thu 14:18] 글을 일단 쓰고 자동화 툴을 이용하는 방법. 팀워크로 같이 편집하기도 좋고. 기록 관리도 좋고.

문법 다른 부분을 커버할 수 있는가? 다른 것은 모르겠고 디테일이랑 힌트만 처리할 수 있으면 커버 된다. 액션 으로 넣어야 할 것이 무엇인가?!

  • 텍스트린터 넣는다
  • 일본 글 보면서 따라하기 후 샘플 구성 만들어 본다.
  • reviewdog

아래 글을 기반으로 정리. https://zenn.dev/yuta28/articles/blog-lint-ci-reviewdog

이러한 과정의 목적은 깃에 푸시하고 나서 액션에서 교정 검사를 하고 리포트 하는 것이다. 당연히 필요하겠지만 나는 오프라인에서 내 문서를 실시간으로 교정하길 원한다.

23-07-13 6:08 AM 무엇을 할 것인가? 잠시만. 엑션 테스트가 의미?! 무슨 처리를?! 되는 것을 가정하고 룰을 정리하고 하나씩 만들어야 하지 않을까? 일본일들이 바라는 기준 중에 우리에 가져올 게 있는지도 볼일이다.

Github Action + Textlint + Reviewdog

[2023-07-12 Wed 09:57]

규칙 관련. 아 배고프다.

Action-Textlint – 2023/02 : 템플릿

[2023-07-13 Thu 05:56] https://github.com/tsuyoshicho/action-textlint

액션을 프로젝트 템플릿으로 제공.

NEXT 디노 전체 교정 환경 구축

[2023-07-27 Thu 11:15] 노드 말고 디노 기반으로 내가 만든 디노 플러그인까지 넣어서 리뷰도그 및 일본에서 말하는 최상위 환경 동작 확인

Related-Notes

References

마지막 수정일자
#깃허브#DENO