[fix] Front Matter of Next.js MDX compatibility

[optimize] support non-Markdown files in Folder Traversing
[optimize] some Koa Router details
[optimize] upgrade to MobX-GitHub 0.5 & other latest Upstream packages

Author: TechQuery

next.config.ts

@@ -3,13 +3,15 @@ import { NextConfig } from 'next';
 import setPWA from 'next-pwa';
 // @ts-expect-error no official types
 import withLess from 'next-with-less';
+import remarkFrontmatter from 'remark-frontmatter';
+import remarkMdxFrontmatter from 'remark-mdx-frontmatter';
 
 const { NODE_ENV, CI } = process.env;
 const isDev = NODE_ENV === 'development';
 
 const withMDX = setMDX({
     options: {
-      remarkPlugins: [],
+      remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter],
       rehypePlugins: [],
       providerImportSource: '@mdx-js/react',
     },

package.json

@@ -26,7 +26,7 @@
     "marked": "^16.2.1",
     "mime": "^4.0.7",
     "mobx": "^6.13.7",
-    "mobx-github": "^0.4.0",
+    "mobx-github": "^0.5.1",
     "mobx-i18n": "^0.7.1",
     "mobx-lark": "^2.4.1",
     "mobx-react": "^9.2.0",
@@ -35,11 +35,13 @@
     "mobx-restful-table": "^2.5.3",
     "next": "^15.5.2",
     "next-pwa": "^5.6.0",
-    "next-ssr-middleware": "^1.0.2",
+    "next-ssr-middleware": "^1.0.3",
     "react": "^19.1.1",
     "react-bootstrap": "^2.10.10",
     "react-dom": "^19.1.1",
     "react-typed-component": "^1.0.6",
+    "remark-frontmatter": "^5.0.0",
+    "remark-mdx-frontmatter": "^5.2.0",
     "undici": "^7.15.0",
     "web-utility": "^4.5.3",
     "yaml": "^2.8.1"
@@ -49,18 +51,17 @@
     "@babel/plugin-transform-typescript": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@cspell/eslint-plugin": "^9.2.1",
-    "@eslint/js": "^9.34.0",
+    "@eslint/js": "^9.35.0",
     "@next/eslint-plugin-next": "^15.5.2",
     "@softonus/prettier-plugin-duplicate-remover": "^1.1.2",
     "@stylistic/eslint-plugin": "^5.3.1",
     "@types/eslint-config-prettier": "^6.11.3",
     "@types/koa": "^3.0.0",
-    "@types/koa__router": "^12.0.4",
     "@types/next-pwa": "^5.6.9",
-    "@types/node": "^22.18.0",
+    "@types/node": "^22.18.1",
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19.1.9",
-    "eslint": "^9.34.0",
+    "eslint": "^9.35.0",
     "eslint-config-next": "^15.5.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.37.5",
@@ -74,9 +75,9 @@
     "next-with-less": "^3.0.1",
     "prettier": "^3.6.2",
     "prettier-plugin-css-order": "^2.1.2",
-    "sass": "^1.91.0",
+    "sass": "^1.92.1",
     "typescript": "~5.9.2",
-    "typescript-eslint": "^8.42.0"
+    "typescript-eslint": "^8.43.0"
   },
   "resolutions": {
     "next": "$next"

pages/api/Lark/bitable/v1/[...slug].ts

@@ -1,22 +1,21 @@
+import { Context } from 'koa';
 import { LarkPageData, TableRecord, TableRecordData } from 'mobx-lark';
 import { DataObject } from 'mobx-restful';
-import { createKoaRouter } from 'next-ssr-middleware';
+import { createKoaRouter, withKoaRouter } from 'next-ssr-middleware';
 
-import { withSafeKoaRouter } from '../../../core';
+import { safeAPI } from '../../../core';
 import { proxyLark, proxyLarkAll } from '../../core';
 
 export const config = { api: { bodyParser: false } };
 
 const router = createKoaRouter(import.meta.url);
 
 function filterData(fields: DataObject) {
-  for (const key of Object.keys(fields))
-    if (!/^\w+$/.test(key)) delete fields[key];
+  for (const key of Object.keys(fields)) if (!/^\w+$/.test(key)) delete fields[key];
 }
 
-router.get('/apps/:app/tables/:table/records/:record', async context => {
-  const { status, body } =
-    await proxyLark<TableRecordData<DataObject>>(context);
+router.get('/apps/:app/tables/:table/records/:record', safeAPI, async (context: Context) => {
+  const { status, body } = await proxyLark<TableRecordData<DataObject>>(context);
 
   const { fields } = body!.data!.record;
 
@@ -26,9 +25,8 @@ router.get('/apps/:app/tables/:table/records/:record', async context => {
   context.body = body;
 });
 
-router.get('/apps/:app/tables/:table/records', async context => {
-  const { status, body } =
-    await proxyLark<LarkPageData<TableRecord<DataObject>>>(context);
+router.get('/apps/:app/tables/:table/records', safeAPI, async (context: Context) => {
+  const { status, body } = await proxyLark<LarkPageData<TableRecord<DataObject>>>(context);
 
   const list = body!.data!.items || [];
 
@@ -38,6 +36,6 @@ router.get('/apps/:app/tables/:table/records', async context => {
   context.body = body;
 });
 
-router.all('/(.*)', proxyLarkAll);
+router.all('/(.*)', safeAPI, proxyLarkAll);
 
-export default withSafeKoaRouter(router);
+export default withKoaRouter(router);

pages/api/Lark/file/[id]/[name].ts

@@ -1,15 +1,16 @@
 import { fileTypeFromStream } from 'file-type';
+import { Middleware } from 'koa';
 import MIME from 'mime';
-import { createKoaRouter } from 'next-ssr-middleware';
+import { createKoaRouter, withKoaRouter } from 'next-ssr-middleware';
 import { Readable } from 'stream';
 
 import { CACHE_HOST } from '../../../../../models/configuration';
-import { withSafeKoaRouter } from '../../../core';
+import { safeAPI } from '../../../core';
 import { lark } from '../../core';
 
 const router = createKoaRouter(import.meta.url);
 
-router.all('/:id/:name', async context => {
+const downloader: Middleware = async context => {
   const { method, url, params, query } = context;
   const { id, name } = params;
 
@@ -21,10 +22,9 @@ router.all('/:id/:name', async context => {
 
   const token = await lark.getAccessToken();
 
-  const response = await fetch(
-    lark.client.baseURI + `drive/v1/medias/${id}/download`,
-    { headers: { Authorization: `Bearer ${token}` } },
-  );
+  const response = await fetch(lark.client.baseURI + `drive/v1/medias/${id}/download`, {
+    headers: { Authorization: `Bearer ${token}` },
+  });
   const { ok, status, headers, body } = response;
 
   if (!ok) {
@@ -47,6 +47,8 @@ router.all('/:id/:name', async context => {
   if (method === 'GET')
     // @ts-expect-error Web type compatibility
     context.body = Readable.fromWeb(stream2);
-});
+};
 
-export default withSafeKoaRouter(router);
+router.head('/:id/:name', safeAPI, downloader).get('/:id/:name', safeAPI, downloader);
+
+export default withKoaRouter(router);

pages/api/core.ts

@@ -1,12 +1,12 @@
 import 'core-js/full/array/from-async';
 
-import Router, { RouterParamContext } from '@koa/router';
 import { Context, Middleware } from 'koa';
 import { HTTPError } from 'koajax';
 import { DataObject } from 'mobx-restful';
-import { KoaOption, withKoa, withKoaRouter } from 'next-ssr-middleware';
+import { KoaOption, withKoa } from 'next-ssr-middleware';
+import Path from 'path';
 import { ProxyAgent, setGlobalDispatcher } from 'undici';
-import { parse } from 'yaml';
+import YAML from 'yaml';
 
 const { HTTP_PROXY } = process.env;
 
@@ -46,11 +46,6 @@ export const safeAPI: Middleware<any, any> = async (context: Context, next) => {
 export const withSafeKoa = <S, C>(...middlewares: Middleware<S, C>[]) =>
   withKoa<S, C>({} as KoaOption, safeAPI, ...middlewares);
 
-export const withSafeKoaRouter = <S, C extends RouterParamContext<S>>(
-  router: Router<S, C>,
-  ...middlewares: Middleware<S, C>[]
-) => withKoaRouter<S, C>({} as KoaOption, router, safeAPI, ...middlewares);
-
 export interface ArticleMeta {
   name: string;
   path?: string;
@@ -68,7 +63,7 @@ export function splitFrontMatter(raw: string) {
   if (!frontMatter) return { markdown: raw };
 
   try {
-    const meta = parse(frontMatter) as DataObject;
+    const meta = YAML.parse(frontMatter) as DataObject;
 
     return { markdown, meta };
   } catch (error) {
@@ -90,25 +85,28 @@ export async function* pageListOf(path: string, prefix = 'pages'): AsyncGenerato
 
     const isMDX = MDX_pattern.test(name);
 
-    name = name.replace(MDX_pattern, '');
+    ({ name } = Path.parse(name));
     path = `${path}/${name}`.replace(new RegExp(`^${prefix}`), '');
 
-    if (node.isFile() && isMDX) {
+    if (node.isFile()) {
       const article: ArticleMeta = { name, path, subs: [] };
 
-      const file = await readFile(`${node.path}/${node.name}`, 'utf-8');
-
-      const { meta } = splitFrontMatter(file);
+      if (isMDX)
+        try {
+          const rawFile = await readFile(`${node.path}/${node.name}`, { encoding: 'utf-8' });
 
-      if (meta) article.meta = meta;
+          const { meta } = splitFrontMatter(rawFile);
 
+          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;
+    } else if (node.isDirectory()) {
+      const subs = await Array.fromAsync(pageListOf(path, prefix));
 
-    const subs = await Array.fromAsync(pageListOf(path, prefix));
-
-    if (subs.length) yield { name, subs };
+      if (subs[0]) yield { name, subs };
+    }
   }
 }