https://docs.github.com/en/rest/markdown/markdown?apiVersion=2022-11-28#render-a-markdown-document--parameters

1 . access tokenの作成

access token：

Githubの個別リポジトリではなくユーザー設定のSettings/Developer Settings
- access tokenは「fine-grained tokens」を使用

権限の付与

これをしないとfetchするときにエラーが出る

/fine-grained-token/edit/Repository Access/Only select repositories/ からMarkdownをfetchしたいrepositoryを選択
Permissions/add permissions で ActionsとContent を選択し双方ともに read / write を許可

2. Markdownのfetch

必要なライブラリ：下２つは直接的には関係無いがMarkdownの表示用

npm install @octokit/core

npm i react-markdown
npm install -D @tailwindcss/typography

page.tsx ：

import { Octokit } from "@octokit/core";

---

  const octokit = new Octokit({
    auth: process.env.GITHUB_ACCESS_TOKEN, // 作成したaccess-token
  });

  const { data } = await octokit.request(
    "GET /repos/{owner}/{repo}/contents/{path}"
  );

"GET /repos/{owner}/{repo}/contents/{path}"：{} の中は自分で書き込む部分
- {owner}/{repo}はリポジトリのまま
- {path} ：リポジトリのルートにあるREADME.mdをfetchしたいなら {path} をREADME.mdに、ルート/docs の中にあるなら docs/README.mdとする

contentのデコード

  const content = Buffer.from(data.content, 'base64').toString('utf-8');

Base64 文字列をバイナリデータ（Buffer）に変換し、バイト列をUTF-8文字列に変換
これでREADME.mdの内容がそのまま取得できる

デコード

３つのデコードの説明

atob：

ブラウザ環境 で動作する
Base64 でエンコードされた文字列をデコードする
文字列を扱うため、バイナリデータの処理には向かない

クライアントコンポーネントで使う

Buffer：Buffer.from(...).toString("utf-8")

Node.js 環境 で動作する
Base64 のエンコード・デコードができる
バイナリデータを扱える（テキストだけでなく、画像やファイルデータにも対応）
utf-8 や hex など、複数のエンコーディング方式を扱える

サーバーコンポーネントで使う（Nodejsで動作）

decodeURIComponent：URLエンコードされた文字列をデコード

URLエンコードでは、文字列に含まれる特殊文字（例えば、空白や&、=）などを、 %20（空白）や %3D（=）のような形式に変換します

contentの表示

  const content = Buffer.from(data.content, 'base64').toString('utf-8');

  return (
    <div className="prose">
      <ReactMarkdown>{content}</ReactMarkdown>
    </div>
  );
};

必要なライブラリで react-markdown としたのは、デコード後の文字列をHTMLとしてparseして表示するため
prose ：Tailwindのproseを使うと見た目がキレイになる

// globals.css

@plugin "@tailwindcss/typography";

Markdown内の画像や動画

画像の表示

privateリポジトリは画像の表示ができない
- 画像のURL自体は https://github.com/user-attachments/assets/ のような形式で取得できているが、altの内容がブラウザに表示されるだけ

対策：

publicリポジトリにする

動画

動画をMarkdownに埋め込むことはできるが外部リンクで開かれる
gifに変換したところで容易に100mbを超える（ = Githubにpushできない）

対策：

webmは容量が小さいので、外部ストレージにwebmを保存し[alt](storageUrl) としてMarkdown内で取得するのが良い

Github：Markdownの取得

Github：Markdownの取得