refactor: fix the SSR/CSR mismatch

.github/workflows/test-deploy.yml

@@ -4,6 +4,7 @@ on:
   pull_request:
     branches:
       - main
+  workflow_dispatch:
     # Review gh actions docs if you want to further define triggers, paths, etc
     # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on
 
@@ -19,6 +20,6 @@ jobs:
       - name: Install pnpm
         run: npm install -g pnpm@8
       - name: Install dependencies
-        run: pnpm install --no-frozen-lockfile
+        run: pnpm i --no-frozen-lockfile --unsafe-perm --ignore-scripts
       - name: Test build website
         run: pnpm build

docusaurus.config.js

@@ -210,6 +210,7 @@ const config = {
       },
     }),
   plugins: [
+    customPostCssPlugin,
     "docusaurus-plugin-sass",
     async function TailwindCSSPlugin(context, options) {
       return {
@@ -225,4 +226,16 @@ const config = {
   ],
 };
 
+/** @return {import('@docusaurus/types').Plugin} */
+function customPostCssPlugin() {
+  return {
+    name: "custom-postcss",
+    configurePostCss(options) {
+      // Append new PostCSS plugins here.
+      options.plugins.push(require("postcss-preset-env")); // allow newest CSS syntax
+      return options;
+    }
+  };
+}
+
 module.exports = config;

package.json

@@ -23,6 +23,7 @@
     "documate:upload": "documate upload"
   },
   "dependencies": {
+    "postcss-preset-env": "^10.0.3",
     "@crowdin/cli": "3",
     "@crowdin/crowdin-api-client": "^1.23.4",
     "@docusaurus/core": "3.4.0",

src/pages/index.tsx

@@ -1,5 +1,6 @@
 import Link from "@docusaurus/Link";
-import { useColorMode } from "@docusaurus/theme-common";
+// import useBaseUrl from '@docusaurus/useBaseUrl';
+import ThemedImage from '@theme/ThemedImage';
 import Translate from "@docusaurus/Translate";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
@@ -100,8 +101,6 @@ function HomepageHeader() {
 
 
 const HomeBaseContent = () => {
-  const { colorMode } = useColorMode();
-
   const mainContent = React.useMemo(() => {
     return (
       <main className="mb-20 my-10 max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8max-w-6xl">
@@ -112,21 +111,16 @@ const HomeBaseContent = () => {
     );
   }, []);
 
-  if (colorMode === "dark") {
-    return (
-      <>
-        <StarrySky />
-        {mainContent}
-      </>
-    );
-  } else {
     return (
       <>
-        <AuroraBackground />
+        <ThemedImage sources={{
+            light: <StarrySky />,
+            dark: <AuroraBackground />,
+          }}
+        />
         {mainContent}
       </>
     );
-  }
 };