[add] Static pages for Lark Wiki documents

TechQuery · TechQuery · commit 82720c8a5837 · 2025-08-22T05:54:23.000+08:00
[fix] Giscus title mapping &amp; other detail bugs
[optimize] upgrade to Koa 3, MobX React helper 0.5 &amp; other latest Upstream packages
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
@@ -14,3 +14,7 @@ NEXT_PUBLIC_CLIENT_TABLE = tblsb0vx4fqjSrGL
 NEXT_PUBLIC_PROJECT_TABLE = tblCxasoUUub3buB
 NEXT_PUBLIC_MEMBER_TABLE = tblJ98JHGEX0o6ij
 NEXT_PUBLIC_MEMBER_VIEW = vewLf4M0P8
+
+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/components/Layout/MainNavigator.tsx b/components/Layout/MainNavigator.tsx
@@ -1,20 +1,16 @@
 import { AppBar, Drawer, IconButton, Menu, MenuItem, PopoverProps, Toolbar } from '@mui/material';
 import { computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { ObservedComponent, observePropsState } from 'mobx-react-helper';
+import { ObservedComponent } from 'mobx-react-helper';
 import Link from 'next/link';
-import { Component } from 'react';
 
 import { i18n, I18nContext, LanguageName } from '../../models/Translation';
 import { SymbolIcon } from '../Icon';
 import { ColorModeIconDropdown } from './ColorModeDropdown';
 import { BrandLogo, GithubIcon } from './Svg';
 
-export interface MainNavigator extends ObservedComponent<{}, typeof i18n> {}
-
 @observer
-@observePropsState
-export class MainNavigator extends Component {
+export class MainNavigator extends ObservedComponent<{}, typeof i18n> {
   static contextType = I18nContext;
 
   @observable accessor menuExpand = false;
@@ -29,6 +25,7 @@ export class MainNavigator extends Component {
       { title: 'GitHub-reward', href: '/project/reward/issue', target: '_top' },
       { title: t('member'), href: '/member' },
       { title: t('open_source_project'), href: '/open-source' },
+      { title: t('wiki'), href: '/wiki' },
     ];
   }
 
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';
@@ -48,6 +47,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/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
@@ -25,3 +25,8 @@ export const LarkAppMeta = {
   secret: process.env.LARK_APP_SECRET!,
 };
 export const LarkBaseId = process.env.NEXT_PUBLIC_LARK_BASE!;
+
+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/next-env.d.ts b/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/package.json b/package.json
@@ -8,77 +8,78 @@
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@giscus/react": "^3.1.0",
-    "@koa/bodyparser": "^5.1.1",
-    "@koa/router": "^13.1.0",
-    "@mui/lab": "7.0.0-beta.12",
-    "@mui/material": "^7.1.0",
-    "@sentry/nextjs": "^9.16.1",
-    "file-type": "^20.5.0",
+    "@koa/bodyparser": "^6.0.0",
+    "@koa/router": "^14.0.0",
+    "@mui/lab": "^7.0.0-beta.16",
+    "@mui/material": "^7.3.1",
+    "@sentry/nextjs": "^10.5.0",
+    "file-type": "^21.0.0",
     "jsonwebtoken": "^9.0.2",
-    "koa": "^2.16.1",
+    "koa": "^3.0.1",
     "koa-jwt": "^4.0.4",
     "koajax": "^3.1.2",
     "lodash": "^4.17.21",
-    "marked": "^15.0.11",
+    "marked": "^16.2.0",
     "mime": "^4.0.7",
     "mobx": "^6.13.7",
-    "mobx-github": "^0.3.5",
+    "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.3.6",
+    "mobx-react-helper": "^0.5.1",
     "mobx-restful": "^2.1.0",
-    "next": "^15.3.2",
+    "next": "^15.5.0",
     "next-pwa": "~5.6.0",
-    "next-ssr-middleware": "^1.0.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "web-utility": "^4.4.3",
-    "webpack": "^5.99.8"
+    "next-ssr-middleware": "^1.0.2",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "web-utility": "^4.5.1",
+    "webpack": "^5.101.3"
   },
   "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.0.0",
-    "@eslint/compat": "^1.2.9",
-    "@eslint/js": "^9.26.0",
-    "@next/eslint-plugin-next": "^15.3.2",
-    "@stylistic/eslint-plugin": "^4.2.0",
-    "@tailwindcss/postcss": "^4.1.5",
+    "@cspell/eslint-plugin": "^9.2.0",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/js": "^9.33.0",
+    "@next/eslint-plugin-next": "^15.5.0",
+    "@stylistic/eslint-plugin": "^5.2.3",
+    "@tailwindcss/postcss": "^4.1.12",
     "@types/eslint-config-prettier": "^6.11.3",
-    "@types/jsonwebtoken": "^9.0.9",
-    "@types/koa": "^2.15.0",
+    "@types/jsonwebtoken": "^9.0.10",
+    "@types/koa": "^3.0.0",
     "@types/koa__router": "^12.0.4",
-    "@types/lodash": "^4.17.16",
+    "@types/lodash": "^4.17.20",
     "@types/next-pwa": "^5.6.9",
-    "@types/node": "^22.15.15",
-    "@types/react": "^19.1.3",
-    "eslint": "^9.26.0",
-    "eslint-config-next": "^15.3.2",
-    "eslint-config-prettier": "^10.1.3",
+    "@types/node": "^22.17.2",
+    "@types/react": "^19.1.10",
+    "eslint": "^9.33.0",
+    "eslint-config-next": "^15.5.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "globals": "^16.1.0",
+    "globals": "^16.3.0",
     "husky": "^9.1.7",
-    "jiti": "^2.4.2",
-    "lint-staged": "^15.5.2",
-    "postcss": "^8.5.3",
-    "prettier": "^3.5.3",
+    "jiti": "^2.5.1",
+    "lint-staged": "^16.1.5",
+    "postcss": "^8.5.6",
+    "prettier": "^3.6.2",
     "prettier-plugin-css-order": "^2.1.2",
-    "prettier-plugin-tailwindcss": "^0.6.11",
-    "tailwindcss": "^4.1.5",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.32.0"
+    "prettier-plugin-tailwindcss": "^0.6.14",
+    "tailwindcss": "^4.1.12",
+    "typescript": "~5.9.2",
+    "typescript-eslint": "^8.40.0"
   },
   "resolutions": {
     "next": "$next"
   },
   "pnpm": {
     "onlyBuiltDependencies": [
       "@sentry/cli",
+      "@tailwindcss/oxide",
       "sharp",
       "unrs-resolver"
     ]
@@ -103,8 +104,8 @@
     "build": "next build",
     "export": "next build  &&  next export",
     "start": "next start",
-    "lint": "next lint --fix  &&  git add .",
-    "test": "lint-staged  &&  npm run lint  &&  tsc --noEmit",
+    "lint": "next lint --fix  &&  git add .  &&  tsc --noEmit",
+    "test": "lint-staged  &&  npm run lint",
     "pack-image": "docker build -t idea2app/web-server .",
     "container": "docker rm -f web-server  &&  docker run --name web-server -p 3000:3000 -d idea2app/web-server"
   }
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -62,8 +62,7 @@ export default class CustomApp extends App<I18nProps> {
   }
 
   render() {
-    const { Component, pageProps, router } = this.props,
-      { t } = this.i18nStore;
+    const { Component, pageProps } = this.props;
 
     return (
       <I18nContext.Provider value={this.i18nStore}>
diff --git a/pages/api/Lark/file/[id].ts b/pages/api/Lark/file/[id].ts
@@ -1,14 +1,16 @@
 import { fileTypeFromStream } from 'file-type';
+import { Middleware } from 'koa';
 import { createKoaRouter } from 'next-ssr-middleware';
 import { parse } from 'path';
+import { Readable } from 'stream';
 
 import { CACHE_HOST } from '../../../../models/configuration';
 import { withSafeKoaRouter } from '../../core';
 import { lark } from '../core';
 
 const router = createKoaRouter(import.meta.url);
 
-router.all('/:id', async context => {
+const downloader: Middleware = async context => {
   const { method, url, params } = context;
   const { id } = params,
     { ext } = parse(url!);
@@ -42,6 +44,8 @@ router.all('/:id', async context => {
   if (method === 'GET')
     // @ts-expect-error Web type compatibility
     context.body = Readable.fromWeb(stream2);
-});
+};
+
+router.head('/:id', downloader).get('/:id', downloader);
 
 export default withSafeKoaRouter(router);
diff --git a/pages/member/[nickname].tsx b/pages/member/[nickname].tsx
@@ -2,9 +2,8 @@ import { TabContext, TabList, TabListProps, TabPanel } from '@mui/lab';
 import { Badge, Tab } from '@mui/material';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { ObservedComponent, observePropsState } from 'mobx-react-helper';
+import { ObservedComponent } from 'mobx-react-helper';
 import { compose, errorLogger } from 'next-ssr-middleware';
-import { Component } from 'react';
 
 import { MemberCard } from '../../components/Member/Card';
 import { PageHead } from '../../components/PageHead';
@@ -39,12 +38,11 @@ export const getServerSideProps = compose<{ nickname: string }>(
   },
 );
 
-export default interface MemberDetailPage
-  extends ObservedComponent<MemberDetailPageProps, typeof i18n> {}
-
 @observer
-@observePropsState
-export default class MemberDetailPage extends Component<MemberDetailPageProps> {
+export default class MemberDetailPage extends ObservedComponent<
+  MemberDetailPageProps,
+  typeof i18n
+> {
   static contextType = I18nContext;
 
   @observable accessor eventKey = '0';
diff --git a/pages/requirement/[title].tsx b/pages/requirement/[title].tsx
@@ -17,9 +17,7 @@ const RequirementDetailPage: NextPage<RouteProps<{ title: string }>> = observer(
 
     return (
       <div className="container mx-auto flex max-w-(--breakpoint-xl) flex-col gap-4 px-4 pt-16 pb-6">
-        <PageHead title={title}>
-          <meta property="og:title" content={params!.title} />
-        </PageHead>
+        <PageHead title={title} />
 
         <h1 className="py-10 text-center text-5xl">{title}</h1>
 
@@ -32,7 +30,7 @@ const RequirementDetailPage: NextPage<RouteProps<{ title: string }>> = observer(
           repoId="R_kgDOOHPqjQ"
           category="Ideas"
           categoryId="DIC_kwDOOHPqjc4Cn5sg"
-          mapping="og:title"
+          mapping="title"
           emitMetadata="1"
           lang={currentLanguage.startsWith('zh-') ? currentLanguage : currentLanguage.split('-')[0]}
         />
diff --git a/pages/wiki/[node_token].tsx b/pages/wiki/[node_token].tsx
@@ -0,0 +1,49 @@
+import { Block, renderBlocks, WikiNode } from 'mobx-lark';
+import { GetStaticPaths, GetStaticProps } from 'next';
+import { FC } from 'react';
+
+import { PageHead } from '../../components/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}`,
+  );
+
+  return { props: { node, blocks } };
+};
+
+interface WikiDocumentPageProps {
+  node: WikiNode;
+  blocks: Block<any, any, any>[];
+}
+
+const WikiDocumentPage: FC<WikiDocumentPageProps> = ({ node, blocks }) => (
+  <div className="container mx-auto max-w-(--breakpoint-xl) px-4 pt-16 pb-6">
+    <PageHead title={node.title} />
+
+    {renderBlocks(blocks)}
+  </div>
+);
+
+export default WikiDocumentPage;
diff --git a/pages/wiki/index.tsx b/pages/wiki/index.tsx
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

Original file line number	Diff line number	Diff line change
`@@ -62,8 +62,7 @@ export default class CustomApp extends App<I18nProps> {`
`62`	`62`	`}`
`63`	`63`
`64`	`64`	`render() {`
`65`		`- const { Component, pageProps, router } = this.props,`
`66`		`- { t } = this.i18nStore;`
	`65`	`+ const { Component, pageProps } = this.props;`
`67`	`66`
`68`	`67`	`return (`
`69`	`68`	`<I18nContext.Provider value={this.i18nStore}>`