perf(website): perf homepage without styled-component

docusaurus not full support css-in-js solution

Author: moonrailgun

pnpm-lock.yaml

@@ -122,5 +122,8 @@ module.exports = {
     locales: ['en', 'zh-Hans'],
   },
   presets: [['@docusaurus/preset-classic', presetClassicOptions]],
-  plugins: [require.resolve('docusaurus-plugin-image-zoom')],
+  plugins: [
+    require.resolve('docusaurus-plugin-image-zoom'),
+    require.resolve('docusaurus-plugin-less'),
+  ],
 };

website/docusaurus.config.js

@@ -24,11 +24,11 @@
     "@svgr/webpack": "^5.5.0",
     "clsx": "^1.2.1",
     "docusaurus-plugin-image-zoom": "^0.1.1",
+    "docusaurus-plugin-less": "^2.0.2",
     "file-loader": "^6.2.0",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.6",
     "url-loader": "^4.1.1"
   },
   "browserslist": {
@@ -54,6 +54,8 @@
     "@types/styled-components": "^5.1.26",
     "fs-extra": "^10.1.0",
     "glob": "^7.2.3",
+    "less": "^4.1.3",
+    "less-loader": "^10.2.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.5"
   }