[fix] Unicode Markdown path is 404 with Next.js MDX plugin

Author: TechQuery

.gitmodules

@@ -1,3 +1,3 @@
-[submodule "pages/wiki/policy"]
-	path = pages/wiki/policy
+[submodule "wiki/policy"]
+	path = wiki/policy
 	url = https://github.com/fpsig/open-source-policy

pages/api/core.ts

@@ -1,3 +1,5 @@
+import 'core-js/full/array/from-async';
+
 import Router, { RouterParamContext } from '@koa/router';
 import { Context, Middleware } from 'koa';
 import { HTTPError } from 'koajax';
@@ -58,14 +60,25 @@ export interface ArticleMeta {
 
 const MDX_pattern = /\.mdx?$/;
 
-export async function frontMatterOf(path: string) {
+export async function splitFrontMatter(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])---/) || [];
+  const [, frontMatter, markdown] =
+    file.trim().match(/^---[\r\n]([\s\S]+?[\r\n])---[\r\n]([\s\S]*)/) || [];
+
+  if (!frontMatter) return { markdown: file };
+
+  try {
+    const meta = parse(frontMatter) as DataObject;
+
+    return { markdown, meta };
+  } catch (error) {
+    console.error(`Error reading front matter for ${path}:`, error);
 
-  return frontMatter && parse(frontMatter);
+    return { markdown };
+  }
 }
 
 export async function* pageListOf(path: string, prefix = 'pages'): AsyncGenerator<ArticleMeta> {
@@ -85,13 +98,11 @@ export async function* pageListOf(path: string, prefix = 'pages'): AsyncGenerato
 
     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);
-      }
+      const { meta } = await splitFrontMatter(`${node.path}/${node.name}`);
+
+      if (meta) article.meta = meta;
+
       yield article;
     }
     if (!node.isDirectory()) continue;
@@ -106,9 +117,12 @@ 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>> {
+export function* traverseTree<K extends string, N extends TreeNode<K>>(
+  tree: N,
+  key: K,
+): Generator<N> {
   for (const node of tree[key] || []) {
-    yield node;
-    yield* traverseTree(node, key);
+    yield node as N;
+    yield* traverseTree(node as N, key);
   }
 }

pages/wiki/[...slug].tsx

@@ -0,0 +1,51 @@
+import { marked } from 'marked';
+import { DataObject } from 'mobx-restful';
+import { GetStaticPaths, GetStaticProps, NextPage } from 'next';
+import { ParsedUrlQuery } from 'querystring';
+
+import { pageListOf, splitFrontMatter, traverseTree } from '../api/core';
+
+interface WikiPageParams extends ParsedUrlQuery {
+  slug: string[];
+}
+
+export const getStaticPaths: GetStaticPaths<WikiPageParams> = async () => {
+  const tree = await Array.fromAsync(pageListOf('wiki', ''));
+  const list = tree.map(root => [...traverseTree(root, 'subs')]).flat();
+  const paths = list
+    .map(({ path }) => path && { params: { slug: path.split('/') } })
+    .filter(Boolean) as { params: WikiPageParams }[];
+
+  return { paths, fallback: 'blocking' };
+};
+
+interface WikiPageProps {
+  meta?: DataObject;
+  markup: string;
+}
+
+export const getStaticProps: GetStaticProps<WikiPageProps, WikiPageParams> = async ({ params }) => {
+  const { slug } = params!;
+  // https://github.com/vercel/next.js/issues/12851
+  if (slug[0] !== 'wiki') slug.unshift('wiki');
+
+  const { meta, markdown } = await splitFrontMatter(`${slug.join('/')}.md`);
+
+  const markup = marked(markdown) as string;
+
+  return { props: JSON.parse(JSON.stringify({ meta, markup })) };
+};
+
+const WikiPage: NextPage<WikiPageProps> = ({ meta, markup }) => (
+  <>
+    {meta && (
+      <blockquote>
+        <a target="_blank" href={meta.url} rel="noreferrer">
+          {meta.url}
+        </a>
+      </blockquote>
+    )}
+    <article dangerouslySetInnerHTML={{ __html: markup }} />
+  </>
+);
+export default WikiPage;

pages/wiki/index.tsx

@@ -7,7 +7,7 @@ import { i18n } from '../../models/Translation';
 import { ArticleMeta, pageListOf, traverseTree } from '../api/core';
 
 export const getStaticProps = async () => {
-  const tree = await Array.fromAsync(pageListOf('/wiki'));
+  const tree = await Array.fromAsync(pageListOf('wiki', ''));
   const list = tree.map(root => [...traverseTree(root, 'subs')]).flat();
 
   return { props: { tree, list } };