[add] Static example pages for Lark Wiki documents (#8)

TechQuery · web-flow · commit 8090002e3c6d · 2025-08-05T13:31:01.000+08:00
diff --git a/.dockerignore b/.dockerignore
@@ -1,6 +1,6 @@
 README.md
 node_modules/
-.eslintrc.json
+eslint.config.ts
 .next/
 .vercel/
 start.sh
diff --git a/.env b/.env
@@ -6,5 +6,6 @@ NEXT_PUBLIC_SENTRY_DSN =
 SENTRY_ORG =
 SENTRY_PROJECT = 
 
-NEXT_PUBLIC_LARK_API_HOST = https://open.larksuite.com/open-apis/
-NEXT_PUBLIC_LARK_APP_ID =
+NEXT_PUBLIC_LARK_API_HOST = https://open.feishu.cn/open-apis/
+NEXT_PUBLIC_LARK_APP_ID = cli_a2c7771153f8900c
+NEXT_PUBLIC_LARK_WIKI_URL = https://idea2app.feishu.cn/wiki/space/7318346900506181660
diff --git a/README.md b/README.md
@@ -123,7 +123,7 @@ pnpm container
 [17]: https://pullrequestbadge.com/
 [18]: https://code.visualstudio.com/
 [19]: https://github.com/new?template_name=Lark-Next-Bootstrap-ts&template_owner=idea2app
-[20]: https://github.com/idea2app/Lark-Next-Bootstrap-ts/blob/80967ed49045af9dbcf4d3695a2c39d53a6f71f1/.github/workflows/pull-request.yml#L9-L11
+[20]: https://github.com/idea2app/Lark-Next-Bootstrap-ts/blob/afa51fad3b16e598bf3b10010b2dc47405b016a3/.github/workflows/main.yml#L9-L11
 [21]: https://github.com/idea2app/Lark-Next-Bootstrap-ts/blob/363e023e5dd472c8ea53ec96eac25ec5122e667b/.github/workflows/Lark-notification.yml#L39
 [22]: https://github.com/idea2app/Lark-Next-Bootstrap-ts/settings/secrets/actions
 [23]: https://github.com/idea2app/Lark-Next-Bootstrap-ts/issues/new/choose
diff --git a/components/Navigator/MainNavigator.tsx b/components/Navigator/MainNavigator.tsx
@@ -28,6 +28,8 @@ export const MainNavigator: FC = observer(() => {
           <Nav className="me-auto">
             <Nav.Link href="/article">{t('article')}</Nav.Link>
 
+            <Nav.Link href="/wiki">{t('wiki')}</Nav.Link>
+
             <Nav.Link href="/component">{t('component')}</Nav.Link>
 
             <Nav.Link href="/pagination">{t('pagination')}</Nav.Link>
diff --git a/eslint.config.ts b/eslint.config.ts
@@ -1,6 +1,5 @@
 import cspellPlugin from '@cspell/eslint-plugin';
 import eslint from '@eslint/js';
-// @ts-expect-error eslint-plugin-next doesn't come with TypeScript definitions
 import nextPlugin from '@next/eslint-plugin-next';
 import stylistic from '@stylistic/eslint-plugin';
 import eslintConfigPrettier from 'eslint-config-prettier';
@@ -53,6 +52,7 @@ export default tsEslint.config(
         warnOnUnsupportedTypeScriptVersion: false,
       },
     },
+    // @ts-expect-error https://github.com/vercel/next.js/issues/81695
     rules: {
       // spellchecker
       '@cspell/spellchecker': [
diff --git a/models/Base.ts b/models/Base.ts
@@ -7,6 +7,7 @@ import { DataObject } from 'mobx-restful';
 import { buildURLData } from 'web-utility';
 
 import { GITHUB_TOKEN, LARK_API_HOST } from './configuration';
+
 export const larkClient = new HTTPClient({
   baseURI: LARK_API_HOST,
   responseType: 'json',
diff --git a/models/Document.ts b/models/Document.ts
@@ -0,0 +1,10 @@
+import { DocumentModel } from 'mobx-lark';
+
+import { lark } from '../pages/api/Lark/core';
+import { LarkWikiDomain } from './configuration';
+
+export class MyDocumentModel extends DocumentModel {
+  client = lark.client;
+}
+
+export default new MyDocumentModel(LarkWikiDomain);
diff --git a/models/Wiki.ts b/models/Wiki.ts
@@ -0,0 +1,10 @@
+import { WikiNodeModel } from 'mobx-lark';
+
+import { lark } from '../pages/api/Lark/core';
+import { LarkWikiDomain, LarkWikiId } from './configuration';
+
+export class MyWikiNodeModel extends WikiNodeModel {
+  client = lark.client;
+}
+
+export default new MyWikiNodeModel(LarkWikiDomain, LarkWikiId);
diff --git a/models/configuration.ts b/models/configuration.ts
@@ -21,3 +21,8 @@ export const LarkAppMeta = {
   id: process.env.NEXT_PUBLIC_LARK_APP_ID!,
   secret: process.env.LARK_APP_SECRET!,
 };
+
+const { hostname, pathname } = new URL(process.env.NEXT_PUBLIC_LARK_WIKI_URL!);
+
+export const LarkWikiDomain = hostname;
+export const LarkWikiId = pathname.split('/').pop()!;
diff --git a/package.json b/package.json
@@ -10,88 +10,88 @@
     "@editorjs/code": "^2.9.3",
     "@editorjs/editorjs": "^2.30.8",
     "@editorjs/header": "^2.8.8",
-    "@editorjs/image": "^2.10.2",
+    "@editorjs/image": "^2.10.3",
     "@editorjs/link": "^2.6.2",
     "@editorjs/list": "^2.0.8",
     "@editorjs/paragraph": "^2.11.7",
     "@editorjs/quote": "^2.7.6",
-    "@koa/router": "^13.1.0",
+    "@koa/router": "^14.0.0",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@next/mdx": "^15.3.3",
-    "@sentry/nextjs": "^9.30.0",
+    "@next/mdx": "^15.4.5",
+    "@sentry/nextjs": "^10.1.0",
     "copy-webpack-plugin": "^13.0.0",
-    "core-js": "^3.43.0",
+    "core-js": "^3.45.0",
     "editorjs-html": "^4.0.5",
     "file-type": "^21.0.0",
     "formidable": "^3.5.4",
     "idea-react": "^2.0.0-rc.13",
     "jsonwebtoken": "^9.0.2",
-    "koa": "^2.16.1",
+    "koa": "^3.0.1",
     "koajax": "^3.1.2",
-    "less": "^4.3.0",
+    "less": "^4.4.0",
     "less-loader": "^12.3.0",
     "lodash": "^4.17.21",
-    "marked": "^15.0.12",
+    "marked": "^16.1.2",
     "mime": "^4.0.7",
     "mobx": "^6.13.7",
     "mobx-github": "^0.3.11",
     "mobx-i18n": "^0.7.1",
-    "mobx-lark": "^2.2.0",
+    "mobx-lark": "^2.4.0",
     "mobx-react": "^9.2.0",
-    "mobx-react-helper": "^0.4.1",
+    "mobx-react-helper": "^0.5.1",
     "mobx-restful": "^2.1.0",
     "mobx-restful-table": "^2.5.2",
-    "next": "^15.3.3",
+    "next": "^15.4.5",
     "next-pwa": "~5.6.0",
-    "next-ssr-middleware": "^1.0.1",
+    "next-ssr-middleware": "^1.0.2",
     "next-with-less": "^3.0.1",
     "prismjs": "^1.30.0",
-    "react": "^19.1.0",
+    "react": "^19.1.1",
     "react-bootstrap": "^2.10.10",
     "react-bootstrap-editor": "^2.1.1",
-    "react-dom": "^19.1.0",
+    "react-dom": "^19.1.1",
     "react-editor-js": "^2.1.0",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.1",
     "remark-mdx-frontmatter": "^5.2.0",
-    "undici": "^7.10.0",
-    "web-utility": "^4.4.3",
-    "webpack": "^5.99.9",
+    "undici": "^7.13.0",
+    "web-utility": "^4.5.1",
+    "webpack": "^5.101.0",
     "yaml": "^2.8.0"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-decorators": "^7.27.1",
-    "@babel/plugin-transform-typescript": "^7.27.1",
+    "@babel/plugin-proposal-decorators": "^7.28.0",
+    "@babel/plugin-transform-typescript": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
-    "@cspell/eslint-plugin": "^9.1.1",
-    "@eslint/compat": "^1.3.0",
+    "@cspell/eslint-plugin": "^9.2.0",
+    "@eslint/compat": "^1.3.1",
     "@eslint/eslintrc": "^3.3.1",
-    "@eslint/js": "^9.29.0",
-    "@next/eslint-plugin-next": "^15.3.3",
+    "@eslint/js": "^9.32.0",
+    "@next/eslint-plugin-next": "^15.4.5",
     "@softonus/prettier-plugin-duplicate-remover": "^1.1.2",
-    "@stylistic/eslint-plugin": "^4.4.1",
+    "@stylistic/eslint-plugin": "^5.2.2",
     "@types/eslint-config-prettier": "^6.11.3",
     "@types/formidable": "^3.4.5",
-    "@types/koa": "^2.15.0",
+    "@types/koa": "^3.0.0",
     "@types/koa__router": "^12.0.4",
-    "@types/lodash": "^4.17.17",
+    "@types/lodash": "^4.17.20",
     "@types/next-pwa": "^5.6.9",
-    "@types/node": "^22.15.32",
-    "@types/react": "^19.1.8",
-    "eslint": "^9.29.0",
-    "eslint-config-next": "^15.3.3",
-    "eslint-config-prettier": "^10.1.5",
+    "@types/node": "^22.17.0",
+    "@types/react": "^19.1.9",
+    "eslint": "^9.32.0",
+    "eslint-config-next": "^15.4.5",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "globals": "^16.2.0",
+    "globals": "^16.3.0",
     "husky": "^9.1.7",
-    "jiti": "^2.4.2",
-    "lint-staged": "^16.1.2",
-    "prettier": "^3.5.3",
+    "jiti": "^2.5.1",
+    "lint-staged": "^16.1.4",
+    "prettier": "^3.6.2",
     "prettier-plugin-css-order": "^2.1.2",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.34.1"
+    "typescript": "~5.9.2",
+    "typescript-eslint": "^8.39.0"
   },
   "resolutions": {
     "next": "$next"
@@ -122,7 +122,7 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint --fix  &&  tsc --noEmit",
+    "lint": "next lint --fix  &&  git add .  &&  tsc --noEmit",
     "test": "lint-staged  &&  npm run lint",
     "pack-image": "docker build -t idea2app/lark-next-bootstrap-ts:latest .",
     "container": "docker rm -f lark-next-bootstrap-ts  &&  docker run --name lark-next-bootstrap-ts -p 3000:3000 -d idea2app/lark-next-bootstrap-ts:latest"
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -55,8 +55,8 @@ export default class CustomApp extends App<I18nProps> {
 
         <MainNavigator />
 
-        {router.route.startsWith('/article/') ? (
-          <MDXLayout title={router.route.split('/').at(-1)}>
+        {router.asPath.startsWith('/article/') ? (
+          <MDXLayout title={router.asPath.split('/').at(-1)}>
             <Component {...pageProps} />
           </MDXLayout>
         ) : (
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -38,7 +38,7 @@ export default class CustomDocument extends Document<CustomDocumentProps> {
           />
           <link
             rel="stylesheet"
-            href="https://unpkg.com/bootstrap-icons@1.11.3/font/bootstrap-icons.css"
+            href="https://unpkg.com/bootstrap-icons@1.13.1/font/bootstrap-icons.css"
           />
         </Head>
 
diff --git a/pages/api/Lark/file/index.ts b/pages/api/Lark/file/index.ts
@@ -33,7 +33,7 @@ router.post('/', async context => {
   const name = parse(originalFilename || filepath).name + ext,
     type = MIME.getType(ext) || mimetype || 'application/octet-stream';
 
-  const blob = new File([buffer], name, { type });
+  const blob = new File([buffer as Buffer<ArrayBuffer>], name, { type });
 
   const file_token = await lark.uploadFile(
     blob,
diff --git a/pages/api/core.ts b/pages/api/core.ts
@@ -86,19 +86,20 @@ export async function* pageListOf(
     name = name.replace(MDX_pattern, '');
     path = `${path}/${name}`.replace(new RegExp(`^${prefix}`), '');
 
-    if (node.isFile())
-      if (isMDX) {
-        const article: ArticleMeta = { name, path, subs: [] };
-        try {
-          const meta = await frontMatterOf(`${node.path}/${node.name}`);
-
-          if (meta) article.meta = meta;
-        } catch (error) {
-          console.error(error);
-        }
-        yield article;
-      } else continue;
-
+    if (node.isFile() && isMDX) {
+      const article: ArticleMeta = { name, path, subs: [] };
+      try {
+        const meta = await frontMatterOf(`${node.path}/${node.name}`);
+
+        if (meta) article.meta = meta;
+      } catch (error) {
+        console.error(
+          `Error reading front matter for ${node.path}/${node.name}:`,
+          error,
+        );
+      }
+      yield article;
+    }
     if (!node.isDirectory()) continue;
 
     const subs = await Array.fromAsync(pageListOf(path, prefix));
diff --git a/pages/wiki/[node_token].tsx b/pages/wiki/[node_token].tsx
@@ -0,0 +1,50 @@
+import { Block, renderBlocks, WikiNode } from 'mobx-lark';
+import { GetStaticPaths, GetStaticProps } from 'next';
+import { FC } from 'react';
+import { Container } from 'react-bootstrap';
+
+import { PageHead } from '../../components/Layout/PageHead';
+import documentStore from '../../models/Document';
+import wikiStore from '../../models/Wiki';
+import { lark } from '../api/Lark/core';
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  await lark.getAccessToken();
+
+  const nodes = await wikiStore.getAll();
+
+  return {
+    paths: nodes.map(({ node_token }) => ({ params: { node_token } })),
+    fallback: 'blocking',
+  };
+};
+
+export const getStaticProps: GetStaticProps = async ({ params }) => {
+  await lark.getAccessToken();
+
+  const node = await wikiStore.getOne(params!.node_token as string);
+
+  if (node?.obj_type !== 'docx') return { notFound: true };
+
+  const blocks = await documentStore.getOneBlocks(
+    node.obj_token,
+    token => `/api/Lark/file/${token}/placeholder`,
+  );
+
+  return { props: { node, blocks } };
+};
+
+interface WikiDocumentPageProps {
+  node: WikiNode;
+  blocks: Block<any, any, any>[];
+}
+
+const WikiDocumentPage: FC<WikiDocumentPageProps> = ({ node, blocks }) => (
+  <Container>
+    <PageHead title={node.title} />
+
+    {renderBlocks(blocks)}
+  </Container>
+);
+
+export default WikiDocumentPage;
diff --git a/pages/wiki/index.tsx b/pages/wiki/index.tsx
@@ -0,0 +1,55 @@
+import { WikiNode } from 'mobx-lark';
+import { observer } from 'mobx-react';
+import { GetStaticProps } from 'next';
+import { FC, useContext } from 'react';
+import { Container } from 'react-bootstrap';
+import { treeFrom } from 'web-utility';
+
+import { PageHead } from '../../components/Layout/PageHead';
+import { I18nContext } from '../../models/Translation';
+import wikiStore from '../../models/Wiki';
+import { lark } from '../api/Lark/core';
+
+export const getStaticProps: GetStaticProps = async () => {
+  await lark.getAccessToken();
+
+  const nodes = await wikiStore.getAll();
+
+  return { props: { nodes } };
+};
+
+interface XWikiNode extends WikiNode {
+  // eslint-disable-next-line no-restricted-syntax
+  children?: XWikiNode[];
+}
+
+const renderTree = (children?: XWikiNode[]) =>
+  children && (
+    <ol>
+      {children.map(({ node_token, title, children }) => (
+        <li key={node_token}>
+          <a href={`/wiki/${node_token}`}>{title}</a>
+
+          {renderTree(children)}
+        </li>
+      ))}
+    </ol>
+  );
+
+const WikiIndexPage: FC<{ nodes: XWikiNode[] }> = observer(({ nodes }) => {
+  const { t } = useContext(I18nContext);
+
+  return (
+    <Container>
+      <PageHead title={t('wiki')} />
+
+      <h1>{t('wiki')}</h1>
+
+      {renderTree(
+        treeFrom(nodes, 'node_token', 'parent_node_token', 'children'),
+      )}
+    </Container>
+  );
+});
+
+export default WikiIndexPage;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/translation/en-US.ts b/translation/en-US.ts
diff --git a/translation/zh-CN.ts b/translation/zh-CN.ts
diff --git a/translation/zh-TW.ts b/translation/zh-TW.ts
