[add] Wiki pages with Open Source policy files

[optimize] upgrade to Koa 3 & other latest Upstream packages

Author: TechQuery

.github/workflows/main.yml

@@ -15,6 +15,8 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }}
+        with:
+          submodules: true
 
       - name: Deploy to Vercel
         id: vercel-deployment

.gitmodules

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

components/Layout/MDXLayout.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { Container, ContainerProps } from 'react-bootstrap';
+
+import { PageHead } from './PageHead';
+
+export const MDXLayout: FC<ContainerProps> = ({
+  className = 'mt-5 pt-5 pb-3',
+  title,
+  children,
+  ...props
+}) => (
+  <Container as="article" {...props} className={className}>
+    <PageHead title={title} />
+    <h1 className="my-4">{title}</h1>
+
+    {children}
+  </Container>
+);

components/Navigator/MainNavigator.tsx

@@ -27,6 +27,7 @@ const topNavBarMenu = ({ t }: typeof i18n): MenuItem[] => [
     name: t('hackathon'),
   },
   { href: '/license-filter', name: t('license_filter') },
+  { href: '/wiki', name: t('wiki') },
 ];
 
 export interface MainNavigatorProps {

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.

package.json

@@ -12,68 +12,69 @@
     "test": "lint-staged  &&  npm run lint"
   },
   "dependencies": {
-    "@koa/router": "^13.1.1",
+    "@koa/router": "^14.0.0",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@next/mdx": "^15.3.5",
-    "core-js": "^3.44.0",
+    "@next/mdx": "^15.5.0",
+    "core-js": "^3.45.1",
     "file-type": "^21.0.0",
     "idea-react": "^2.0.0-rc.13",
-    "koa": "^2.16.1",
+    "koa": "^3.0.1",
     "koajax": "^3.1.2",
     "license-filter": "^0.2.5",
-    "marked": "^16.0.0",
+    "marked": "^16.2.0",
     "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.5.1",
     "mobx-restful": "^2.1.0",
-    "mobx-restful-table": "^2.5.2",
-    "next": "^15.3.5",
+    "mobx-restful-table": "^2.5.3",
+    "next": "^15.5.0",
     "next-pwa": "^5.6.0",
-    "next-ssr-middleware": "^1.0.1",
-    "react": "^19.1.0",
+    "next-ssr-middleware": "^1.0.2",
+    "react": "^19.1.1",
     "react-bootstrap": "^2.10.10",
-    "react-dom": "^19.1.0",
+    "react-dom": "^19.1.1",
     "react-typed-component": "^1.0.6",
-    "undici": "^7.11.0",
-    "web-utility": "^4.4.3"
+    "undici": "^7.15.0",
+    "web-utility": "^4.5.1",
+    "yaml": "^2.8.1"
   },
   "devDependencies": {
     "@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.5",
-    "@eslint/js": "^9.31.0",
+    "@cspell/eslint-plugin": "^9.2.0",
+    "@eslint/js": "^9.34.0",
     "@softonus/prettier-plugin-duplicate-remover": "^1.1.2",
-    "@stylistic/eslint-plugin": "^5.1.0",
+    "@stylistic/eslint-plugin": "^5.2.3",
     "@types/eslint-config-prettier": "^6.11.3",
-    "@types/koa": "^2.15.0",
+    "@types/koa": "^3.0.0",
     "@types/koa__router": "^12.0.4",
     "@types/next-pwa": "^5.6.9",
-    "@types/node": "^22.16.3",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "eslint": "^9.31.0",
-    "eslint-config-next": "^15.3.5",
-    "eslint-config-prettier": "^10.1.5",
+    "@types/node": "^22.17.2",
+    "@types/react": "^19.1.11",
+    "@types/react-dom": "^19.1.7",
+    "eslint": "^9.34.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.3.0",
     "husky": "^9.1.7",
-    "jiti": "^2.4.2",
-    "less": "^4.3.0",
+    "jiti": "^2.5.1",
+    "less": "^4.4.1",
     "less-loader": "^12.3.0",
-    "lint-staged": "^16.1.2",
+    "lint-staged": "^16.1.5",
     "next-with-less": "^3.0.1",
     "prettier": "^3.6.2",
     "prettier-plugin-css-order": "^2.1.2",
-    "sass": "^1.89.2",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.36.0"
+    "sass": "^1.90.0",
+    "typescript": "~5.9.2",
+    "typescript-eslint": "^8.40.0"
   },
   "resolutions": {
     "next": "$next"

pages/_app.tsx

@@ -10,12 +10,7 @@ import { Image } from 'react-bootstrap';
 import { MainNavigator } from '../components/Navigator/MainNavigator';
 import { PageContent } from '../components/PageContent';
 import { isServer } from '../models/configuration';
-import {
-  createI18nStore,
-  I18nContext,
-  I18nProps,
-  loadSSRLanguage,
-} from '../models/Translation';
+import { createI18nStore, I18nContext, I18nProps, loadSSRLanguage } from '../models/Translation';
 
 configure({ enforceActions: 'never' });
 
@@ -46,7 +41,8 @@ export default class CustomApp extends App<I18nProps> {
   render() {
     const { Component, pageProps, router } = this.props,
       { t } = this.i18nStore;
-    const thisFullYear = new Date().getFullYear();
+    const thisFullYear = new Date().getFullYear(),
+      { asPath } = router;
 
     return (
       <I18nContext.Provider value={this.i18nStore}>
@@ -59,7 +55,7 @@ export default class CustomApp extends App<I18nProps> {
         <MainNavigator />
 
         <div className="mt-5 pt-2">
-          {router.route.startsWith('/article/') ? (
+          {asPath.startsWith('/article/') || asPath.startsWith('/wiki/') ? (
             <PageContent>
               <Component {...pageProps} />
             </PageContent>
@@ -71,8 +67,7 @@ export default class CustomApp extends App<I18nProps> {
         <footer className="mw-100 bg-dark text-white">
           <p className="text-center my-0 py-3">
             <span className="pr-3">
-              © 2021{thisFullYear === 2021 ? '' : `-${thisFullYear}`}{' '}
-              {t('open_source_bazaar')}
+              © 2021{thisFullYear === 2021 ? '' : `-${thisFullYear}`} {t('open_source_bazaar')}
             </span>
             <a
               className="flex-fill d-flex justify-content-center align-items-center"
@@ -82,12 +77,7 @@ export default class CustomApp extends App<I18nProps> {
             >
               Powered by
               <span className="mx-2">
-                <Image
-                  src="/vercel.svg"
-                  alt="Vercel Logo"
-                  width={72}
-                  height={16}
-                />
+                <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
               </span>
             </a>
           </p>

pages/api/core.ts

@@ -1,8 +1,10 @@
 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 { ProxyAgent, setGlobalDispatcher } from 'undici';
+import { parse } from 'yaml';
 
 const { HTTP_PROXY } = process.env;
 
@@ -46,3 +48,67 @@ 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;
+  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() && 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));
+
+    if (subs.length) 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/wiki/index.tsx

@@ -0,0 +1,48 @@
+import { observer } from 'mobx-react';
+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';
+
+export const getStaticProps = async () => {
+  const tree = await Array.fromAsync(pageListOf('/wiki'));
+  const list = tree.map(root => [...traverseTree(root, 'subs')]).flat();
+
+  return { props: { tree, list } };
+};
+
+const renderTree = (list: ArticleMeta[]) => (
+  <ol>
+    {list.map(({ name, path, meta, subs }) => (
+      <li key={name}>
+        {path ? (
+          <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>
+            <summary className="h4">{name}</summary>
+            {renderTree(subs)}
+          </details>
+        )}
+      </li>
+    ))}
+  </ol>
+);
+
+const ArticleIndexPage: FC<InferGetStaticPropsType<typeof getStaticProps>> = observer(
+  ({ tree, list: { length } }) => (
+    <MDXLayout className="" title={`${i18n.t('wiki')} (${length})`}>
+      {renderTree(tree)}
+    </MDXLayout>
+  ),
+);
+
+export default ArticleIndexPage;