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.gitConnect 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 previewREADME.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로 만들려고 초안)
---
ここから本文を書く이미지 삽입 관련하여,
- GitHub 레파지토리 내에 화상을 배치하는 방법 파일 사이즈 3 메가 제한 images 에 넣고 절대 경로로 지정할 것.
#올바른 지정 방법   #잘못된 지정 방법   - 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
- conclusionMarkdown 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.orgplugins 에 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]
- 궁금점 실시간 편집은?!
- 일본 기술 문서 가이드 텍스트 린터 버전이다. 뿌리에 해당한다. https://efcl.info/2016/07/13/textlint-rule-preset-ja-technical-writing/
규칙 관련. 아 배고프다.
- 읽기 쉬운 글을 쓰는 10 가지 팁 https://note.com/notemag/n/n0e4bc242c5b6
Action-Textlint -- 2023/02 : 템플릿
[2023-07-13 Thu 05:56] https://github.com/tsuyoshicho/action-textlint
액션을 프로젝트 템플릿으로 제공.
디노 전체 교정 환경 구축
[2023-07-27 Thu 11:15] 노드 말고 디노 기반으로 내가 만든 디노 플러그인까지 넣어서 리뷰도그 및 일본에서 말하는 최상위 환경 동작 확인