Merge pull request #285 from HuolalaTech/release-2.0-precheck

Release 2.0 precheck

Author: wqcstrong

.github/workflows/build_docker.yml

@@ -11,7 +11,7 @@ name: Create and publish a dev Docker image
 
 on:
   push:
-    branches: ["main"]
+    branches: ["main", "release-2.0-precheck"]
 
 env:
   REGISTRY: ghcr.io
@@ -28,10 +28,10 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3
 
-      - name: Set Node.js 19.x
+      - name: Set Node.js 20.x
         uses: actions/setup-node@v3
         with:
-          node-version: 19.x
+          node-version: 20.x
 
       - name: Run install
         uses: borales/actions-yarn@v4

.github/workflows/build_docker_hub.yml

@@ -28,10 +28,10 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3
 
-      - name: Set Node.js 19.x
+      - name: Set Node.js 20.x
         uses: actions/setup-node@v3
         with:
-          node-version: 19.x
+          node-version: 20.x
 
       - name: Run install
         uses: borales/actions-yarn@v4

.github/workflows/release.yml

@@ -24,12 +24,12 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Set Node.js 19.x
+      - name: Set Node.js 20.x
         uses: actions/setup-node@v3
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
         with:
-          node-version: 19.x
+          node-version: 20.x
           registry-url: "https://registry.npmjs.org"
 
       - name: Run install

.github/workflows/release_docker.yml

@@ -27,10 +27,10 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3
 
-      - name: Set Node.js 19.x
+      - name: Set Node.js 20.x
         uses: actions/setup-node@v3
         with:
-          node-version: 19.x
+          node-version: 20.x
 
       - name: Run install
         uses: borales/actions-yarn@v4

.github/workflows/release_docker_hub.yml

@@ -27,10 +27,10 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3
 
-      - name: Set Node.js 19.x
+      - name: Set Node.js 20.x
         uses: actions/setup-node@v3
         with:
-          node-version: 19.x
+          node-version: 20.x
 
       - name: Run install
         uses: borales/actions-yarn@v4

.github/workflows/static.yml

@@ -34,7 +34,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
       - name: Install dependencies
         run: yarn --frozen-lockfile --ignore-optional
       - name: Build

.github/workflows/version_docker.yml

@@ -28,10 +28,10 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3
 
-      - name: Set Node.js 19.x
+      - name: Set Node.js 20.x
         uses: actions/setup-node@v3
         with:
-          node-version: 19.x
+          node-version: 20.x
 
       - name: Run install
         uses: borales/actions-yarn@v4

.github/workflows/version_docker_hub.yml

@@ -28,10 +28,10 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3
 
-      - name: Set Node.js 19.x
+      - name: Set Node.js 20.x
         uses: actions/setup-node@v3
         with:
-          node-version: 19.x
+          node-version: 20.x
 
       - name: Run install
         uses: borales/actions-yarn@v4

package.json

@@ -43,17 +43,17 @@
     "prettier": "^2.5.1",
     "remark-gfm": "^4.0.0",
     "typescript": "^5.3.3",
-    "vite": "^4.0.0",
+    "vite": "^5.4.11",
     "vite-plugin-svgr": "^2.4.0",
     "yorkie": "^2.0.0"
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@huolala-tech/page-spy-browser": "^1.9.14",
-    "@huolala-tech/page-spy-plugin-data-harbor": "^1.3.12",
-    "@huolala-tech/page-spy-plugin-rrweb": "^1.2.8",
-    "@huolala-tech/page-spy-plugin-whole-bundle": "^0.0.10",
-    "@huolala-tech/page-spy-types": "^1.9.6",
+    "@huolala-tech/page-spy-browser": "^2.0.0-beta.0",
+    "@huolala-tech/page-spy-plugin-data-harbor": "^2.0.0-beta.0",
+    "@huolala-tech/page-spy-plugin-rrweb": "^2.0.0-beta.0",
+    "@huolala-tech/page-spy-plugin-whole-bundle": "^1.0.0-beta.0",
+    "@huolala-tech/page-spy-types": "^2.0.0-beta.0",
     "@huolala-tech/react-json-view": "^1.2.5",
     "@huolala-tech/request": "^1.1.2",
     "@mdx-js/mdx": "^3.0.1",
@@ -78,6 +78,7 @@
     "react-transition-group": "^4.4.5",
     "rehype-parse": "^9.0.0",
     "rehype-stringify": "^10.0.0",
+    "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.0",
     "rrweb-player": "^1.0.0-alpha.4",
     "shiki": "^0.14.3",
@@ -86,6 +87,9 @@
     "unist-util-visit": "^4.1.2",
     "zustand": "^4.5.2"
   },
+  "resolutions": {
+    "rollup": "npm:@rollup/wasm-node"
+  },
   "gitHooks": {
     "pre-commit": "lint-staged && node ./scripts/check-i18n.mjs"
   },

src/assets/image/screenshot/mp-data-harbor.png

@@ -14,6 +14,8 @@
     "device-id": "Device ID",
     "os": "OS",
     "browser": "Browser",
+    "harmony": "HarmonyOS",
+    "rn": "React Native",
     "miniprogram": "Mini Program",
     "mpwechat": "WeChat Mini Program",
     "mpqq": "QQ Mini Program",
@@ -45,7 +47,8 @@
     "copied": "Copied",
     "prev": "Previous",
     "next": "Next",
-    "replay-lab": "Replay Lab"
+    "replay-lab": "Replay Lab",
+    "toc": "Table of Contents"
   },
   "error": {
     "oops": "Oops! Errors happened~",

src/assets/image/screenshot/mp-panel.png

@@ -14,6 +14,8 @@
     "device-id": "デバイスID",
     "os": "オペレーティング システム",
     "browser": "ブラウザ",
+    "harmony": "HarmonyOS",
+    "rn": "React Native",
     "miniprogram": "Mini Program",
     "mpwechat": "WeChat Mini Program",
     "mpqq": "QQ Mini Program",
@@ -45,7 +47,8 @@
     "copied": "コピーされました",
     "prev": "前のページ",
     "next": "次のページ",
-    "replay-lab": "リプレイラボ"
+    "replay-lab": "リプレイラボ",
+    "toc": "目次"
   },
   "error": {
     "oops": "おっと！エラーが発生しました。",

src/assets/locales/en.json

@@ -14,6 +14,8 @@
     "device-id": "장치 ID",
     "os": "운영 체제",
     "browser": "브라우저",
+    "harmony": "HarmonyOS",
+    "rn": "React Native",
     "miniprogram": "Mini Program",
     "mpwechat": "WeChat Mini Program",
     "mpqq": "QQ Mini Program",
@@ -45,7 +47,8 @@
     "copied": "복사되었습니다",
     "prev": "이전 페이지",
     "next": "다음 페이지",
-    "replay-lab": "리플레이 연구소"
+    "replay-lab": "리플레이 연구소",
+    "toc": "목차"
   },
   "error": {
     "oops": "이런! 오류가 발생했습니다.",

src/assets/locales/ja.json

@@ -14,6 +14,8 @@
     "device-id": "设备 ID",
     "os": "系统",
     "browser": "浏览器",
+    "harmony": "鸿蒙",
+    "rn": "React Native",
     "miniprogram": "小程序",
     "mpwechat": "微信小程序",
     "mpalipay": "支付宝小程序",
@@ -45,7 +47,8 @@
     "copied": "已复制",
     "prev": "上一页",
     "next": "下一页",
-    "replay-lab": "回放实验室"
+    "replay-lab": "回放实验室",
+    "toc": "本页目录"
   },
   "error": {
     "oops": " 哎呀！发生错误～",

src/assets/locales/ko.json

@@ -40,8 +40,4 @@ samp {
   --header-height: @header-height;
   --light-background: @light-bg;
   --dark-background: @dark-bg;
-
-  --doc-sidebar-width: @doc-sidebar-width;
-  --doc-page-max-width: @doc-page-max-width;
-  --doc-side-space: calc(100vw - var(--doc-page-max-width));
 }

src/assets/locales/zh.json

@@ -30,5 +30,3 @@
 @header-height: 64px;
 @light-bg: rgba(255, 255, 255, 1);
 @dark-bg: rgba(26, 26, 26, 1);
-@doc-sidebar-width: 240px;
-@doc-page-max-width: 1024px;

src/assets/style/initial.less

@@ -0,0 +1,56 @@
+import { langType } from '@/utils/useLanguage';
+import React from 'react';
+import { DocNotFound } from '../../DocNotFound';
+
+const modules = import.meta.glob('@/pages/Docs/md/*.mdx') as Record<
+  string,
+  () => Promise<any>
+>;
+
+export const LOAD_DOC_EVENT = 'load-doc';
+
+const lazyDocWithNotification =
+  (doc: string, value: () => Promise<any>) => async () => {
+    window.dispatchEvent(
+      new CustomEvent(LOAD_DOC_EVENT, {
+        detail: {
+          doc,
+          loading: true,
+        },
+      }),
+    );
+    const result = await value();
+    setTimeout(() => {
+      window.dispatchEvent(
+        new CustomEvent(LOAD_DOC_EVENT, {
+          detail: {
+            doc,
+            loading: false,
+          },
+        }),
+      );
+    }, 100);
+    return result;
+  };
+
+const mdComponents = Object.entries(modules).reduce((acc, cur) => {
+  const [key, value] = cur;
+  const result = key.match(/md\/(.+)\.(zh|en|ja|ko)\.mdx$/);
+  if (!result) return acc;
+  const [, doc, lang] = result;
+  const lazyDoc = lazyDocWithNotification(doc, value);
+  if (!acc[doc]) {
+    acc[doc] = { [lang]: React.lazy(lazyDoc) };
+  } else {
+    acc[doc][lang] = React.lazy(lazyDoc);
+  }
+  return acc;
+}, {} as Record<string, Record<string, React.LazyExoticComponent<any>>>);
+
+export const getDocContent = (doc: string, lang: langType) => {
+  const docData = mdComponents[doc][lang];
+  if (!docData) {
+    return DocNotFound;
+  }
+  return docData;
+};