fix website production css (microsoft#1366)

* fix website production css

* add yarn.lock

Author: cheng-tan

website/docusaurus.config.js

@@ -2,6 +2,16 @@
 const math = require("remark-math");
 const katex = require("rehype-katex");
 
+customPostCssPlugin = () => {
+  return {
+    name: "custom-postcss",
+    configurePostCss(options) {
+      options.plugins.push(require("postcss-preset-env"));
+      return options;
+    }
+  };
+}
+
 module.exports = {
   title: "AutoGen",
   tagline: "Enable Next-Gen Large Language Model Applications",
@@ -145,7 +155,6 @@ module.exports = {
   ],
 
   plugins: [
-    // ... Your other plugins.
     [
       require.resolve("@easyops-cn/docusaurus-search-local"),
       {
@@ -160,5 +169,6 @@ module.exports = {
         // When applying `zh` in language, please install `nodejieba` in your project.
       },
     ],
+    customPostCssPlugin
   ],
 };

website/package.json

@@ -36,6 +36,7 @@
     "hast-util-is-element": "1.1.0",
     "joi": "17.6.0",
     "minimatch": "3.0.5",
+    "postcss-preset-env": "^9.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rehype-katex": "4",
@@ -45,7 +46,8 @@
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.1.0",
-    "@docusaurus/types": "^3.1.0"
+    "@docusaurus/types": "^3.1.0",
+    "postcss": "^8.4"
   },
   "browserslist": {
     "production": [

website/src/css/custom.css

@@ -38,39 +38,6 @@ blockquote {
   background-color: #0c4da224;
 }
 
-html[data-theme="dark"] {
-  --ifm-hero-text-color: white;
-  --ifm-navbar-search-input-placeholder-color: #8a8d91;
-  --ifm-navbar-link-hover-color: #0c90ff;
-  --ifm-menu-color-active: #0c90ff;
-  --ifm-link-color: #1084ff/*#107eff*/;
-
-  .table-of-contents__link--active {
-    color: #0c7eff;
-  }
-
-  .hero.hero--primary {
-    --ifm-hero-text-color: white;
-  }
-
-  blockquote {
-    --ifm-color-emphasis-300: var(--ifm-color-primary);
-  }
-
-  a code {
-    color: #10a5ff;
-  }
-
-  /* Docusaurus still defaults to their green! */
-  .react-toggle-thumb {
-    border-color: var(--ifm-color-primary) !important;
-  }
-
-  .docusaurus-highlight-code-line {
-    background-color: rgb(0, 0, 0, 0.3);
-  }
-}
-
 .header-github-link:hover {
   opacity: 0.6;
 }
@@ -84,11 +51,6 @@ html[data-theme="dark"] {
     no-repeat;
 }
 
-html[data-theme="dark"] .header-github-link:before {
-  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
-    no-repeat;
-}
-
 .tags-container {
   display: flex; /* Use flexbox to lay out tags inline */
   flex-wrap: wrap;
@@ -110,3 +72,46 @@ html[data-theme="dark"] .header-github-link:before {
   background-color: #1273ce;
   color: white;
 }
+
+html[data-theme="dark"] {
+  --ifm-breadcrumb-color-active: #0c90ff;
+  --ifm-hero-text-color: white;
+  --ifm-link-color: #1084ff;
+  --ifm-menu-color-active: #0c90ff;
+  --ifm-navbar-search-input-placeholder-color: #8a8d91;
+  --ifm-navbar-link-hover-color: #0c90ff;
+
+  .table-of-contents__link--active {
+    color: #0c84ff;
+  }
+
+  a[class^=sidebarItem][aria-current='page'] {
+    color: #0c84ff !important;
+  }
+
+  .hero.hero--primary {
+    --ifm-hero-text-color: white;
+  }
+
+  blockquote {
+    --ifm-color-emphasis-300: var(--ifm-color-primary);
+  }
+
+  a code {
+    color: #10a5ff;
+  }
+
+  /* Docusaurus still defaults to their green! */
+  .react-toggle-thumb {
+    border-color: var(--ifm-color-primary) !important;
+  }
+
+  .docusaurus-highlight-code-line {
+    background-color: rgb(0, 0, 0, 0.3);
+  }
+
+  .header-github-link:before {
+    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+      no-repeat;
+  }
+}