Zenn の Scraps 的なものを GitHub Issues を CMS として実現する

要件 ​

• 逐次、タイムライン的な形で更新できる
• Markdown で入力できる
• クローズできる
• タグをつけられる
  • ブログ記事と共有する
    • https://www.codingfeline.com/tags/ にまとめて表示できる
• ブログ本体のデプロイ毎に GitHub API を使いすぎないようにする
  • Issue の更新トリガーで JSON を生成するような感じがよさそ
• 並び順は作成の降順？
• 各コメントにアンカーつけたい

• しかし、JSON生成ロジックを Scrap 管理用レポジトリに入れてしまうとコードが分散してしまう
  • Custom Action を yshrsmz.github.io の方に作成し、それをこのレポジトリから使う？
  • issues トリガーで、issue 単位の JSON を作成/更新 -> コミット -> push トリガーでブログ更新
    • https://docs.github.com/ja/actions/using-workflows/events-that-trigger-workflows#issues
  • PAT が必要になるが、まあ致し方なし
  • reusable workflow として共有できそう
    • https://docs.github.com/en/actions/using-workflows/reusing-workflows#access-to-reusable-workflows

repository_dispatch するか、 yshrsmz.github.io を clone & push するか

repository_dispatch だと各レポジトリで PAT が必要になるから、 clone & push のほうが楽ぽい

ページネーション、これでいけるらしい

const comments = await octokit.paginate(
    octokit.rest.issues.listComments,
    {
      ...repo,
      issue_number: issueNumber,
      per_page: 10,
    },
    (response) => response.data,
  )

commit は git config が必要 credential は @actions/core に token を与えると persist してくれる

vitepress で JSON からページを描画するには

• dynamic routing 用の設定ファイル
  • https://vitepress.dev/guide/routing#dynamic-routes
• data loader
  • https://vitepress.dev/guide/data-loading#data-from-local-files
  • https://vitepress.dev/guide/cms

が必要

• paths loader は本文を content として渡すことができるが、html か Markdown を想定しているようなので、今回の用途には合わない
• data loader を別で作る必要あり
  • GitHub REST Api は issue や comment を plain text で返すので、 data loader で MarkdownIt をかませる必要あり

import { createMarkdownRenderer, type SiteConfig } from 'vitepress'

export default {
  watch: ['data/scraps/*.json'],
  async load(watchedFiles: string[]) {
    // config は VITEPRESS_CONFIG
    const config: SiteConfig = (global as any).VITEPRESS_CONFIG

    const md = await createMarkdownRenderer(
      // ...
    )

    return watchedFiles
      .map((file) => readFileSync(file, 'utf-8'))
      .map<Scrap>((json) => JSON.parse(json))
      .map((scrap) => {
        return {
          ...scrap,
          body: md.render(scrap.body),
          comments: ... // comments の body も md.render() する
        }
      })
  }
}

echo '${{ needs.create-scrap.outputs.output }}' > ./packages/blog/data/scraps/${{ github.event.issue.number }}.json

だと、JSON に含まれる single quote が消えてしまう 🤔

一度環境変数に入れてあげればいけそう

- run: |
    echo $SCRAP_JSON > ./packages/blog/data/scraps/${{ github.event.issue.number }}.json
  env:
    SCRAP_JSON: ${{ needs.create-scrap.outputs.output }}

変数パターンだと連続したスペースがまとめられちゃってそう。インデントが崩れる。

double quote で囲ってあげるといける

  - run: |
-     echo $SCRAP_JSON > ./packages/blog/data/scraps/${{ github.event.issue.number }}.json
+     echo "$SCRAP_JSON" > ./packages/blog/data/scraps/${{ github.event.issue.number }}.json
    env:
      SCRAP_JSON: ${{ needs.create-scrap.outputs.output }}

• bash - Why does my shell script choke on whitespace or other special characters? - Unix & Linux Stack Exchange

アンカーは issue/comment の node_id を使うと良さそう。 node_id は GraphQL API の id に相当するので、将来的に(あるかどうか知らんけど) GraphQL API に乗り換えるとしたらはかどりそ

• グローバルノードIDの利用 - GitHub Docs

残作業

• 対象 issue の限定方法
  • 指定の label がついた issue を exclude するか include するか
• ↑の方法で後日更新されて対象に含まれなくなった issue をどうやって削除するか
• Scrap/各コメントの作成日,　更新日時の表示

除外設定のラベルをつけるのがよさそ そっちなら余計なラベルをフィルターする処理も不要

一通りできた https://github.com/yshrsmz/yshrsmz.github.io/pull/129