[refactor] MDX walker supports Async & Front Matter

[add] Lark OAuth 2.0 middleware
[migrate] upgrade to MobX-Lark 2.1 & other latest Upstream packages

Author: TechQuery

.env

@@ -1,8 +1,10 @@
-NEXT_PUBLIC_SITE_NAME=Lark-Next-Bootstrap-ts
-NEXT_PUBLIC_SITE_SUMMARY=Lark project scaffold based on TypeScript, React, Next.js, Bootstrap & Workbox.
+NEXT_PUBLIC_SITE_NAME = Lark-Next-Bootstrap-ts
+NEXT_PUBLIC_SITE_SUMMARY = Lark project scaffold based on TypeScript, React, Next.js, Bootstrap & Workbox.
+NEXT_PUBLIC_LOGO = https://github.com/idea2app.png
 
 NEXT_PUBLIC_SENTRY_DSN =
 SENTRY_ORG =
 SENTRY_PROJECT = 
 
-LARK_API_HOST = https://open.larksuite.com/open-apis/
+NEXT_PUBLIC_LARK_API_HOST = https://open.larksuite.com/open-apis/
+NEXT_PUBLIC_LARK_APP_ID =

README.md

@@ -79,15 +79,15 @@ You can check out [the Next.js GitHub repository][27] - your feedback and contri
 
 ### Environment variables
 
-|           name           |     file     |        description        |
-| :----------------------: | :----------: | :-----------------------: |
-|   `SENTRY_AUTH_TOKEN`    | `.env.local` |  [Official document][28]  |
-|       `SENTRY_ORG`       |    `.env`    |  [Official document][29]  |
-|     `SENTRY_PROJECT`     |    `.env`    |  [Official document][29]  |
-| `NEXT_PUBLIC_SENTRY_DSN` |    `.env`    |  [Official document][30]  |
-|      `LARK_APP_ID`       | `.env.local` |  [Official document][31]  |
-|    `LARK_APP_SECRET`     | `.env.local` |  [Official document][31]  |
-| `NEXT_PUBLIC_CACHE_HOST` |    `.env`    | Static files CDN for Lark |
+|           name            |     file     |        description        |
+| :-----------------------: | :----------: | :-----------------------: |
+|    `SENTRY_AUTH_TOKEN`    | `.env.local` |  [Official document][28]  |
+|       `SENTRY_ORG`        |    `.env`    |  [Official document][29]  |
+|     `SENTRY_PROJECT`      |    `.env`    |  [Official document][29]  |
+| `NEXT_PUBLIC_SENTRY_DSN`  |    `.env`    |  [Official document][30]  |
+| `NEXT_PUBLIC_LARK_APP_ID` | `.env.local` |  [Official document][31]  |
+|     `LARK_APP_SECRET`     | `.env.local` |  [Official document][31]  |
+| `NEXT_PUBLIC_CACHE_HOST`  |    `.env`    | Static files CDN for Lark |
 
 ### Vercel
 

package.json

@@ -17,8 +17,8 @@
     "@editorjs/quote": "~2.7.6",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@next/mdx": "^15.2.2",
-    "@sentry/nextjs": "^9.5.0",
+    "@next/mdx": "^15.2.3",
+    "@sentry/nextjs": "^9.6.0",
     "copy-webpack-plugin": "^13.0.0",
     "core-js": "^3.41.0",
     "editorjs-html": "^4.0.5",
@@ -30,16 +30,16 @@
     "lodash": "^4.17.21",
     "marked": "^15.0.7",
     "mime": "^4.0.6",
-    "mobx": "^6.13.6",
+    "mobx": "^6.13.7",
     "mobx-github": "^0.3.5",
     "mobx-i18n": "^0.6.0",
-    "mobx-lark": "^2.0.0",
+    "mobx-lark": "^2.1.0",
     "mobx-react": "^9.2.0",
     "mobx-restful": "^2.1.0",
     "mobx-restful-table": "^2.0.2",
-    "next": "^15.2.2",
+    "next": "^15.2.3",
     "next-pwa": "~5.6.0",
-    "next-ssr-middleware": "^0.8.9",
+    "next-ssr-middleware": "^0.8.10",
     "next-with-less": "^3.0.1",
     "prismjs": "^1.30.0",
     "react": "^19.0.0",
@@ -52,7 +52,8 @@
     "remark-mdx-frontmatter": "^5.0.0",
     "undici": "^7.5.0",
     "web-utility": "^4.4.3",
-    "webpack": "^5.98.0"
+    "webpack": "^5.98.0",
+    "yaml": "^2.7.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.25.9",
@@ -68,9 +69,9 @@
     "@types/lodash": "^4.17.16",
     "@types/next-pwa": "^5.6.9",
     "@types/node": "^22.13.10",
-    "@types/react": "^19.0.10",
+    "@types/react": "^19.0.11",
     "eslint": "^9.22.0",
-    "eslint-config-next": "^15.2.2",
+    "eslint-config-next": "^15.2.3",
     "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-simple-import-sort": "^12.1.1",

pages/api/Lark/core.ts

@@ -2,53 +2,28 @@ import { marked } from 'marked';
 import {
   LarkApp,
   LarkData,
-  normalizeText,
-  TableCellLocation,
+  normalizeTextArray,
   TableCellText,
-  TableCellValue,
 } from 'mobx-lark';
+import { oauth2Signer } from 'next-ssr-middleware';
 
 import { safeAPI } from '../core';
 
-export const lark = new LarkApp({
-  host: process.env.LARK_API_HOST,
-  id: process.env.LARK_APP_ID!,
+export const larkAppMeta = {
+  host: process.env.NEXT_PUBLIC_LARK_API_HOST,
+  id: process.env.NEXT_PUBLIC_LARK_APP_ID!,
   secret: process.env.LARK_APP_SECRET!,
-});
-
-export interface TableFormViewItem
-  extends Record<'name' | 'description' | 'shared_url', string>,
-    Record<'shared' | 'submit_limit_once', boolean> {
-  shared_limit: 'tenant_editable';
-}
-export type LarkFormData = LarkData<{ form: TableFormViewItem }>;
-
-export const normalizeTextArray = (list: TableCellText[]) =>
-  list.reduce(
-    (sum, item) => {
-      if (item.text === ',') sum.push('');
-      else sum[sum.length - 1] += normalizeText(item);
-
-      return sum;
-    },
-    [''],
-  );
+};
+export const lark = new LarkApp(larkAppMeta);
 
 export const normalizeMarkdownArray = (list: TableCellText[]) =>
   normalizeTextArray(list).map(text => marked(text) as string);
 
-export function coordinateOf(location: TableCellValue): [number, number] {
-  const [longitude, latitude] =
-    (location as TableCellLocation)?.location.split(',') || [];
-
-  return [+latitude, +longitude];
-}
-
 export const proxyLark = <T extends LarkData>(
   dataFilter?: (path: string, data: T) => T,
 ) =>
   safeAPI(async ({ method, url, headers, body }, response) => {
-    await lark.getAccessToken();
+    if (!headers.authorization) await lark.getAccessToken();
 
     delete headers.host;
 
@@ -67,3 +42,13 @@ export const proxyLark = <T extends LarkData>(
 
     response.send(dataFilter?.(path, data!) || data);
   });
+
+export const larkOauth2 = oauth2Signer({
+  signInURL: URI => new LarkApp(larkAppMeta).getWebSignInURL(URI),
+  accessToken: ({ code }) => new LarkApp(larkAppMeta).getUserAccessToken(code),
+  userProfile: accessToken => {
+    const { secret, ...option } = larkAppMeta;
+
+    return new LarkApp({ ...option, accessToken }).getUserMeta();
+  },
+});

pages/api/core.ts

@@ -1,6 +1,8 @@
 import { HTTPError } from 'koajax';
+import { DataObject } from 'mobx-restful';
 import { NextApiRequest, NextApiResponse } from 'next';
 import { ProxyAgent, setGlobalDispatcher } from 'undici';
+import { parse } from 'yaml';
 
 const { HTTP_PROXY } = process.env;
 
@@ -43,3 +45,75 @@ export function safeAPI(handler: NextAPI): NextAPI {
     }
   };
 }
+
+export interface ArticleMeta {
+  name: string;
+  path?: string;
+  meta?: DataObject;
+  subs: ArticleMeta[];
+}
+
+const MDX_pattern = /\.mdx?$/;
+
+export async function frontMatterOf(path: string) {
+  const { readFile } = await import('fs/promises');
+
+  const file = await readFile(path, 'utf-8');
+
+  const [, frontMatter] = file.match(/^---[\r\n]([\s\S]+?[\r\n])---/) || [];
+
+  return frontMatter && parse(frontMatter);
+}
+
+export async function* pageListOf(
+  path: string,
+  prefix = 'pages',
+): AsyncGenerator<ArticleMeta> {
+  const { readdir } = await import('fs/promises');
+
+  const list = await readdir(prefix + path, { withFileTypes: true });
+
+  for (const node of list) {
+    let { name, path } = node;
+
+    if (name.startsWith('.')) continue;
+
+    const isMDX = MDX_pattern.test(name);
+
+    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.isDirectory()) continue;
+
+    const subs = await Array.fromAsync(pageListOf(path, prefix));
+
+    if (subs[0]) yield { name, subs };
+  }
+}
+
+export type TreeNode<K extends string> = {
+  [key in K]: TreeNode<K>[];
+};
+
+export function* traverseTree<K extends string>(
+  tree: TreeNode<K>,
+  key: K,
+): Generator<TreeNode<K>> {
+  for (const node of tree[key] || []) {
+    yield node;
+    yield* traverseTree(node, key);
+  }
+}

pages/article/index.tsx

@@ -1,61 +1,33 @@
 import { observer } from 'mobx-react';
-import { GetStaticProps, InferGetStaticPropsType } from 'next';
+import { InferGetStaticPropsType } from 'next';
 import { FC } from 'react';
 
 import { MDXLayout } from '../../components/Layout/MDXLayout';
 import { i18n } from '../../models/Translation';
+import { ArticleMeta, pageListOf, traverseTree } from '../api/core';
 
-interface ArticleMeta {
-  name: string;
-  path?: string;
-  subs: ArticleMeta[];
-}
+export const getStaticProps = async () => {
+  const tree = await Array.fromAsync(pageListOf('/article'));
+  const list = tree.map(root => [...traverseTree(root, 'subs')]).flat();
 
-const MDX_pattern = /\.mdx?$/;
-
-export const getStaticProps: GetStaticProps<{
-  list: ArticleMeta[];
-}> = async () => {
-  const { readdirSync } = await import('fs');
-
-  const pageListOf = (path: string, prefix = 'pages'): ArticleMeta[] =>
-    readdirSync(prefix + path, { withFileTypes: true })
-      .map(node => {
-        let { name, path } = node;
-
-        if (name.startsWith('.')) return;
-
-        const isMDX = MDX_pattern.test(name);
-
-        name = name.replace(MDX_pattern, '');
-        path = `${path}/${name}`.replace(new RegExp(`^${prefix}`), '');
-
-        if (node.isFile()) return isMDX && { name, path };
-
-        if (!node.isDirectory()) return;
-
-        const subs = pageListOf(path, prefix);
-
-        return subs[0] && { name, subs };
-      })
-      .filter(Boolean) as ArticleMeta[];
-
-  try {
-    const list = pageListOf('/article');
-
-    return { props: { list } };
-  } catch {
-    return { props: { list: [] } };
-  }
+  return { props: { tree, list } };
 };
 
 const renderTree = (list: ArticleMeta[]) => (
   <ol>
-    {list.map(({ name, path, subs }) => (
+    {list.map(({ name, path, meta, subs }) => (
       <li key={name}>
         {path ? (
-          <a className="h4" href={path}>
-            {name}
+          <a
+            className="h4 d-flex justify-content-between align-items-center"
+            href={path}
+          >
+            {name}{' '}
+            {meta && (
+              <time className="fs-6" dateTime={meta.updated || meta.date}>
+                {meta.updated || meta.date}
+              </time>
+            )}
           </a>
         ) : (
           <details>
@@ -69,9 +41,9 @@ const renderTree = (list: ArticleMeta[]) => (
 );
 
 const ArticleIndexPage: FC<InferGetStaticPropsType<typeof getStaticProps>> =
-  observer(({ list }) => (
-    <MDXLayout className="" title={i18n.t('article')}>
-      {renderTree(list)}
+  observer(({ tree, list: { length } }) => (
+    <MDXLayout className="" title={`${i18n.t('article')} (${length})`}>
+      {renderTree(tree)}
     </MDXLayout>
   ));