feat(docs): Gatsby への移行 (#1384)

package.json

@@ -23,7 +23,6 @@
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "eslint": "8.57.0",
-    "eslint-config-next": "14.2.7",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-markdown": "^5.0.0",

packages/docs/.eslintrc.yml

@@ -1,14 +1,21 @@
 env:
+  browser: true
   node: true
   es2021: true
 extends:
-  - 'next/core-web-vitals'
   - 'prettier'
-  - plugin:mdx/recommended
+  - 'eslint:recommended'
+  - 'plugin:mdx/recommended'
+  - 'plugin:@typescript-eslint/recommended'
+  - 'plugin:react/recommended'
+  - 'plugin:mdx/recommended'
 plugins:
   - '@typescript-eslint'
+  - 'react'
 rules:
   'max-params': 'error'
 settings:
   'mdx/code-blocks': true
+  react:
+    version: 'detect'
 root: true

packages/docs/.gitignore

@@ -0,0 +1,3 @@
+# gatsby built
+.cache
+public/

packages/docs/gatsby-config.mjs

@@ -0,0 +1,51 @@
+// @ts-check
+// NOTE: this file must be a `.mjs` file due to that `remark-gfm` supports only ES Modules and the limitations of `gatsby-config`: https://www.gatsbyjs.com/docs/how-to/custom-configuration/es-modules/#current-limitations
+import { dirname } from 'path';
+import remarkGfm from 'remark-gfm';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+/**
+ * @type {import('gatsby').GatsbyConfig}
+ */
+const config = {
+  siteMetadata: {
+    title: 'OreOreBot2 Documents',
+    siteUrl: 'https://haracho.approvers.dev/'
+  },
+  graphqlTypegen: true,
+  plugins: [
+    {
+      resolve: 'gatsby-plugin-manifest',
+      options: {
+        icon: 'assets/haracho.png'
+      }
+    },
+    {
+      resolve: 'gatsby-plugin-mdx',
+      options: {
+        gatsbyRemarkPlugins: [
+          {
+            resolve: 'gatsby-remark-autolink-headers',
+            options: {
+              offsetY: '78'
+            }
+          }
+        ],
+        mdxOptions: {
+          remarkPlugins: [remarkGfm]
+        }
+      }
+    },
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'pages',
+        path: `${__dirname}/pages`
+      }
+    }
+  ]
+};
+
+export default config;

packages/docs/gatsby-node.ts

@@ -0,0 +1,101 @@
+import type { GatsbyNode } from 'gatsby';
+import path from 'node:path';
+
+import { Page } from './src/types';
+
+export const createPages: GatsbyNode['createPages'] = async (api) => {
+  // get mdx pages
+  type Content = {
+    url: string;
+    title: string;
+    items?: Content[];
+  };
+  const res = await api.graphql<{
+    allMdx: {
+      nodes: {
+        body: string;
+        tableOfContents: {
+          items?: Content[];
+        };
+        parent: {
+          dir: string;
+          relativePath: string;
+          absolutePath: string;
+        };
+        frontmatter: {
+          title: string;
+        };
+      }[];
+    };
+  }>(`
+    {
+      allMdx {
+        nodes {
+          body
+          tableOfContents
+          parent {
+            ... on File {
+              dir
+              relativePath
+              absolutePath
+            }
+          }
+          frontmatter {
+            title
+          }
+        }
+      }
+    }
+  `);
+  if (res.errors) {
+    api.reporter.panicOnBuild('querying mdx pages failed');
+    return;
+  }
+
+  const pages = res.data?.allMdx.nodes!.map(
+    ({
+      body,
+      parent: { dir, relativePath, absolutePath },
+      frontmatter: { title },
+      tableOfContents
+    }): Page => ({
+      body,
+      dir,
+      uri: '/' + relativePath.replace(/(index)?\.mdx$/, ''),
+      absolutePath,
+      title,
+      headings: tableOfContents.items
+    })
+  );
+
+  // group pages by its directory
+  const childrenByPath: Record<string, Page[]> = {};
+  for (const page of pages) {
+    const superPath = page.absolutePath.endsWith('/index.mdx')
+      ? path.dirname(page.dir)
+      : page.dir;
+    if (!childrenByPath[superPath]) {
+      childrenByPath[superPath] = [];
+    }
+    childrenByPath[superPath].push(page);
+  }
+
+  const componentPath = path.resolve('src/templates/entry.jsx');
+  for (const page of pages) {
+    const { body, dir, uri, absolutePath, title, headings } = page;
+
+    const siblings = childrenByPath[path.dirname(dir)] ?? [];
+    const children = childrenByPath[dir] ?? [];
+    api.actions.createPage({
+      path: uri,
+      component: `${componentPath}?__contentFilePath=${absolutePath}`,
+      context: {
+        body,
+        title,
+        siblings,
+        children,
+        headings
+      }
+    });
+  }
+};

packages/docs/package.json

@@ -1,26 +1,34 @@
 {
   "name": "@oreorebot2/docs",
   "version": "1.0.0",
-  "main": "index.js",
+  "private": true,
   "repository": "https://github.com/approvers/OreOreBot2",
   "author": "approvers <[email protected]>",
   "description": "新生はらちょドキュメントサイト",
   "license": "MIT",
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "lint": "next lint",
-    "format": "prettier --write \"./src/**/*.{js,ts,jsx,tsx,md,mdx}\"",
-    "lint-staged": "lint-staged"
+    "dev": "gatsby develop",
+    "build": "gatsby build",
+    "lint": "eslint --ignore-path .gitignore \"./{src,pages}/**/*.{js,ts,jsx,tsx,md,mdx}\"",
+    "format": "prettier --write \"./{src,pages}/**/*.{js,ts,jsx,tsx,md,mdx}\""
   },
   "dependencies": {
-    "next": "^14.0.0",
-    "nextra": "^2.2.14",
-    "nextra-theme-docs": "^2.2.14",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@mdx-js/mdx": "^3.0.1",
+    "@mdx-js/react": "^3.0.1",
+    "gatsby": "^5.13.7",
+    "gatsby-omni-font-loader": "^2.0.2",
+    "gatsby-plugin-manifest": "^5.13.1",
+    "gatsby-plugin-mdx": "^5.13.1",
+    "gatsby-remark-autolink-headers": "^6.13.1",
+    "gatsby-source-filesystem": "^5.13.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "remark-gfm": "^3.0.0"
   },
   "devDependencies": {
-    "@types/react": "18.2.60"
+    "@typescript-eslint/eslint-plugin": "^8.4.0",
+    "@typescript-eslint/parser": "^8.4.0",
+    "eslint-plugin-mdx": "^3.1.5",
+    "eslint-plugin-react": "^7.35.1"
   }
 }

packages/docs/src/pages/development/emoji-seq.mdx → packages/docs/pages/development/emoji-seq.mdx

@@ -1,3 +1,7 @@
+---
+title: 'EmojiSeq に新しい言葉を追加する'
+---
+
 # EmojiSeq に新しい言葉を追加する
 
 このページでは、**ある特定の言葉に対して、予め設定していたリアクションを返す機能 EmojiSeq** に新しいパターンを追加する方法について紹介します。

packages/docs/src/pages/development/index.mdx → packages/docs/pages/development/index.mdx

@@ -1,3 +1,7 @@
+---
+title: '開発ガイド'
+---
+
 # 開発ガイド
 
 新生はらちょ 開発ガイドへようこそ

packages/docs/src/pages/development/meme.mdx → packages/docs/pages/development/meme.mdx

@@ -1,4 +1,6 @@
-import { Callout } from 'nextra-theme-docs';
+---
+title: '新しいミームを追加する'
+---
 
 # 新しいミームを追加する
 
@@ -50,11 +52,8 @@ export const n: MemeTemplate<never, never> = {
 - `['hoge']` - `!hoge` というコマンドで実行できます。
 - `['hoge', 'fuga']` - `!hoge` と `!fuga` というコマンドで実行できます。
 
-<Callout type="warning">
-
-他のミームとは重複しないようにしてください。
-
-</Callout>
+> [!WARNING]
+> 他のミームとは重複しないようにしてください。
 
 #### `MemeTemplate.description`
 
@@ -70,11 +69,8 @@ export const n: MemeTemplate<never, never> = {
 };
 ```
 
-<Callout type="info">
-
-引数で変わるところを `〜` で表現するとわかりやすいです。
-
-</Callout>
+> [!TIP]
+> 引数で変わるところを `〜` で表現するとわかりやすいです。
 
 #### `MemeTemplate.flagsKeys`
 
@@ -84,13 +80,16 @@ export const n: MemeTemplate<never, never> = {
 const takopiFlags = ['f'] as const;
 const takopiOptions = ['c'] as const;
 export const takopi: MemeTemplate<
-  typeof takopiFlags[number],
-  typeof takopiOptions[number]
+  (typeof takopiFlags)[number],
+  (typeof takopiOptions)[number]
 > = {
   commandNames: ['takopi'],
   description:
     '「〜、出して」\n`-f` で教員と自分の名前の位置を反対にします。\n`-c <教員の名前> <出すもの>`で教員の名前も変更可能です。',
   flagsKeys: takopiFlags,
+  optionsKeys: takopiOptions
+  // ...
+};
 ```
 
 #### `MemeTemplate.optionsKeys`
@@ -101,14 +100,16 @@ export const takopi: MemeTemplate<
 const takopiFlags = ['f'] as const;
 const takopiOptions = ['c'] as const;
 export const takopi: MemeTemplate<
-  typeof takopiFlags[number],
-  typeof takopiOptions[number]
+  (typeof takopiFlags)[number],
+  (typeof takopiOptions)[number]
 > = {
   commandNames: ['takopi'],
   description:
     '「〜、出して」\n`-f` で教員と自分の名前の位置を反対にします。\n`-c <教員の名前> <出すもの>`で教員の名前も変更可能です。',
   flagsKeys: takopiFlags,
-  optionsKeys: takopiOptions,
+  optionsKeys: takopiOptions
+  // ...
+};
 ```
 
 #### `MemeTemplate.errorMessage`
@@ -121,7 +122,9 @@ export const n: MemeTemplate<never, never> = {
   description: '〜Nった',
   flagsKeys: [],
   optionsKeys: [],
-  errorMessage: 'このままだと <@521958252280545280> みたいに留年しちゃう....',
+  errorMessage: 'このままだと <@521958252280545280> みたいに留年しちゃう....'
+  // ...
+};
 ```
 
 ### ミームを登録する