refactor: refactor packages to work with both ssr and csr

apps/admin/src/components/ArticlePreviewModal/View.tsx

@@ -1,4 +1,4 @@
-import {Markdown} from '@website/react-components';
+import {Markdown} from '@website/react-components/csr';
 import {Modal, type ModalProps} from 'antd';
 
 import Style from './Style.module.scss';

apps/admin/tsconfig.json

@@ -1,41 +1,28 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     },
     "plugins": [
       {
         "name": "next"
       }
     ]
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    "build/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "build/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }

apps/blog/src/app/about/AboutViewModel.ts

@@ -0,0 +1,10 @@
+import * as OptionApi from '@/src/apis/option';
+
+export async function getAboutMarkdown() {
+  const response = await OptionApi.getAbout();
+  if (response.isSuccessful) {
+    return response.data.about;
+  } else {
+    throw new Error(response.message);
+  }
+}

apps/blog/src/app/about/Container.tsx

@@ -1,18 +1,15 @@
-'use client';
+import type {Metadata} from 'next';
 
-import {AntdWrapper} from '@/src/components/AntdWrapper';
-import {useAbout} from '@/src/hooks/useAbout';
+import {getAboutMarkdown} from '@/src/app/about/AboutViewModel';
 
 import {AboutView} from './View';
 
-export function About() {
-  const {loading: aboutIsLoading, about} = useAbout();
+export const metadata: Metadata = {
+  title: '关于 - Soulike 的博客',
+};
 
-  document.title = '关于 - Soulike 的博客';
+export async function About() {
+  const aboutMarkdown = await getAboutMarkdown();
 
-  return (
-    <AntdWrapper>
-      <AboutView aboutMarkdown={about ?? ''} loading={aboutIsLoading} />
-    </AntdWrapper>
-  );
+  return <AboutView aboutMarkdown={aboutMarkdown} />;
 }

apps/blog/src/app/about/View.tsx

@@ -1,30 +1,21 @@
-import {Markdown} from '@website/react-components';
-import {Skeleton} from 'antd';
+import '@website/react-components/style.css';
+
+import {Markdown} from '@website/react-components/ssr';
 
 import Style from './Style.module.scss';
 
 interface Props {
-  loading: boolean;
   aboutMarkdown: string;
 }
 
 export function AboutView(props: Props) {
-  const {loading, aboutMarkdown} = props;
+  const {aboutMarkdown} = props;
   return (
     <div className={Style.About}>
-      <Skeleton
-        loading={loading}
-        active={true}
-        title={true}
-        paragraph={{
-          rows: 20,
-        }}
-      >
-        <header className={Style.header}>
-          <h1 className={Style.title}>关于</h1>
-        </header>
-        <Markdown>{aboutMarkdown}</Markdown>
-      </Skeleton>
+      <header className={Style.header}>
+        <h1 className={Style.title}>关于</h1>
+      </header>
+      <Markdown>{aboutMarkdown}</Markdown>
     </div>
   );
 }

apps/blog/src/app/article/[id]/View.tsx

@@ -1,6 +1,8 @@
+import '@website/react-components/style.css';
+
 import {ClockCircleOutlined, TagOutlined} from '@ant-design/icons';
 import {type Category} from '@website/classes';
-import {Markdown} from '@website/react-components';
+import {Markdown} from '@website/react-components/csr';
 import {Alert, Skeleton, Tag} from 'antd';
 
 import Style from './Style.module.scss';

apps/blog/src/components/ArticleList/Component/ArticlePreviewCard/Container.tsx

@@ -1,5 +1,5 @@
 import {type Category} from '@website/classes';
-import {useMdConverter} from '@website/hooks';
+import {useMathJax, useMdConverter} from '@website/hooks';
 
 import {ArticlePreviewCardView} from './View';
 
@@ -19,6 +19,8 @@ export function ArticlePreviewCard(props: IArticlePreviewCardProps) {
     articleBriefTextMarkdown,
   );
 
+  useMathJax([loading]);
+
   return (
     <ArticlePreviewCardView
       loading={loading}

apps/blog/src/components/ArticleList/Container.tsx

@@ -1,5 +1,6 @@
+'use client';
+
 import {type Article, type Category} from '@website/classes';
-import {useMathJax} from '@website/hooks';
 import {useCallback, useMemo, useState} from 'react';
 
 import {useCategories} from '@/src/hooks/useCategories';
@@ -12,7 +13,7 @@ interface IProps {
 }
 
 export function ArticleList(props: IProps) {
-  const [pageNumber, setPageNumber] = useState(1);
+  const [, setPageNumber] = useState(1);
   const {categories, loading: categoriesIsLoading} = useCategories();
 
   const {articleList, loading} = props;
@@ -30,8 +31,6 @@ export function ArticleList(props: IProps) {
     setPageNumber(pageNumber);
   }, []);
 
-  useMathJax([pageNumber]);
-
   const isLoading = useMemo(
     () => loading || categoriesIsLoading,
     [categoriesIsLoading, loading],

apps/blog/src/components/ArticleList/index.ts

@@ -1,5 +1 @@
-import dynamic from 'next/dynamic';
-
-const promise = import('./Container').then(({ArticleList}) => ArticleList);
-
-export const ArticleList = dynamic(async () => await promise, {ssr: false});
+export * from './Container';

apps/blog/src/components/RootLayout/Container.tsx

@@ -13,7 +13,9 @@ export async function RootLayout(props: IRootLayoutProps) {
 
   return (
     <AntdWrapper>
-      <RootLayoutView>{children}</RootLayoutView>
+      <RootLayoutView>
+        <AntdWrapper>{children}</AntdWrapper>
+      </RootLayoutView>
     </AntdWrapper>
   );
 }

apps/blog/tsconfig.json

@@ -1,28 +1,22 @@
 {
   "compilerOptions": {
     "target": "ES2022",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": [
-        "./*"
-      ]
+      "@/*": ["./*"]
     },
     "plugins": [
       {
@@ -39,7 +33,5 @@
     "../../packages/utils/src/script/index.ts",
     "build/types/**/*.ts"
   ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }

package.json

@@ -40,7 +40,9 @@
   },
   "lint-staged": {
     "(apps|packages)/**/src/**/*.(j|t)(s|sx)": [
-      "eslint --fix",
+      "eslint --fix"
+    ],
+    "./**/*": [
       "prettier --write --ignore-unknown"
     ]
   }

packages/hljs/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@website/hljs",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./csr": "./dist/csr/index.js",
+    "./ssr": "./dist/ssr/index.js"
+  },
   "dependencies": {
+    "@website/utils": "workspace:^",
     "highlight.js": "^11.10.0"
   },
   "devDependencies": {

packages/hljs/src/csr/index.ts

@@ -0,0 +1,23 @@
+import {
+  convertDOMToString,
+  convertHTMLStringToDOM,
+  yieldMainThread,
+} from '@website/utils/csr';
+
+import {hljs} from '../hljs';
+
+export async function highlightAll(html: string): Promise<string> {
+  const dom = convertHTMLStringToDOM(html);
+
+  const preBlocks = Array.from(dom.querySelectorAll('pre'));
+  await Promise.all(
+    preBlocks.map(async (pre) => {
+      const codeBlocks = pre.querySelectorAll('code');
+      codeBlocks.forEach((block) => {
+        hljs.highlightElement(block);
+      });
+      await yieldMainThread();
+    }),
+  );
+  return convertDOMToString(dom);
+}

packages/hljs/src/hljs.ts

@@ -0,0 +1,76 @@
+import './style.css';
+
+import hljs from 'highlight.js/lib/core';
+import applescript from 'highlight.js/lib/languages/applescript';
+import bash from 'highlight.js/lib/languages/bash';
+import bnf from 'highlight.js/lib/languages/bnf';
+import c from 'highlight.js/lib/languages/c';
+import cmake from 'highlight.js/lib/languages/cmake';
+import cpp from 'highlight.js/lib/languages/cpp';
+import csharp from 'highlight.js/lib/languages/csharp';
+import css from 'highlight.js/lib/languages/css';
+import diff from 'highlight.js/lib/languages/diff';
+import dns from 'highlight.js/lib/languages/dns';
+import dockerfile from 'highlight.js/lib/languages/dockerfile';
+import go from 'highlight.js/lib/languages/go';
+import gradle from 'highlight.js/lib/languages/gradle';
+import http from 'highlight.js/lib/languages/http';
+import ini from 'highlight.js/lib/languages/ini';
+import java from 'highlight.js/lib/languages/java';
+import javascript from 'highlight.js/lib/languages/javascript';
+import json from 'highlight.js/lib/languages/json';
+import latex from 'highlight.js/lib/languages/latex';
+import less from 'highlight.js/lib/languages/less';
+import llvm from 'highlight.js/lib/languages/llvm';
+import makefile from 'highlight.js/lib/languages/makefile';
+import markdown from 'highlight.js/lib/languages/markdown';
+import matlab from 'highlight.js/lib/languages/matlab';
+import nginx from 'highlight.js/lib/languages/nginx';
+import pgsql from 'highlight.js/lib/languages/pgsql';
+import plaintext from 'highlight.js/lib/languages/plaintext';
+import powershell from 'highlight.js/lib/languages/powershell';
+import python from 'highlight.js/lib/languages/python';
+import scss from 'highlight.js/lib/languages/scss';
+import shell from 'highlight.js/lib/languages/shell';
+import sql from 'highlight.js/lib/languages/sql';
+import typescript from 'highlight.js/lib/languages/typescript';
+import xml from 'highlight.js/lib/languages/xml';
+import yaml from 'highlight.js/lib/languages/yaml';
+
+hljs.registerLanguage('plaintext', plaintext);
+hljs.registerLanguage('makefile', makefile);
+hljs.registerLanguage('markdown', markdown);
+hljs.registerLanguage('cmake', cmake);
+hljs.registerLanguage('gradle', gradle);
+hljs.registerLanguage('llvm', llvm);
+hljs.registerLanguage('cpp', cpp);
+hljs.registerLanguage('c', c);
+hljs.registerLanguage('csharp', csharp);
+hljs.registerLanguage('java', java);
+hljs.registerLanguage('yaml', yaml);
+hljs.registerLanguage('xml', xml);
+hljs.registerLanguage('sql', sql);
+hljs.registerLanguage('pgsql', pgsql);
+hljs.registerLanguage('http', http);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('css', css);
+hljs.registerLanguage('scss', scss);
+hljs.registerLanguage('less', less);
+hljs.registerLanguage('applescript', applescript);
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('typescript', typescript);
+hljs.registerLanguage('python', python);
+hljs.registerLanguage('go', go);
+hljs.registerLanguage('bash', bash);
+hljs.registerLanguage('shell', shell);
+hljs.registerLanguage('powershell', powershell);
+hljs.registerLanguage('ini', ini);
+hljs.registerLanguage('nginx', nginx);
+hljs.registerLanguage('dns', dns);
+hljs.registerLanguage('diff', diff);
+hljs.registerLanguage('dockerfile', dockerfile);
+hljs.registerLanguage('bnf', bnf);
+hljs.registerLanguage('latex', latex);
+hljs.registerLanguage('matlab', matlab);
+
+export {hljs};