docs: site build script update (ant-design#32984)

* chore: rm color-less * refactor: MV theme to variable * docs: fix header * chore: clean up * chore: enable esbuild
TranquilMarmot · Nov 23, 2021 · b926c53 · b926c53
1 parent 37442ae
commit b926c53
Show file tree

Hide file tree

Showing 23 changed files with 77 additions and 100 deletions.
diff --git a/package.json b/package.json
@@ -60,7 +60,6 @@
     "pretest": "npm run version",
     "predist": "npm run version",
     "presite": "npm run version",
-    "color-less": "node ./scripts/generate-color-less",
     "compile": "npm run clean && antd-tools run compile",
     "changelog": "node ./scripts/print-changelog",
     "predeploy": "antd-tools run clean && npm run site && cp CNAME _site && npm run site:test",
@@ -84,10 +83,13 @@
     "pretty-quick": "pretty-quick",
     "pub": "npm run version && antd-tools run pub",
     "prepublishOnly": "antd-tools run guard",
-    "site": "cross-env NODE_ICU_DATA=node_modules/full-icu ESBUILD=1 concurrently \"bisheng build --ssr -c ./site/bisheng.config.js\" \"npm run color-less\"",
+    "site:theme": "npm run site:theme-dark && npm run site:theme-compact",
+    "site:theme-dark": "cross-env ESBUILD=1 ANT_THEME=dark bisheng build --ssr -c ./site/bisheng.config.js",
+    "site:theme-compact": "cross-env ESBUILD=1 ANT_THEME=compact bisheng build --ssr -c ./site/bisheng.config.js",
+    "site": "npm run site:theme && cross-env NODE_ICU_DATA=node_modules/full-icu ESBUILD=1 concurrently \"bisheng build --ssr -c ./site/bisheng.config.js\"",
     "sort": "npx sort-package-json",
     "sort-api": "antd-tools run sort-api-table",
-    "start": "antd-tools run clean && cross-env NODE_ENV=development concurrently \"npm run color-less\" \"bisheng start -c ./site/bisheng.config.js\"",
+    "start": "antd-tools run clean && cross-env NODE_ENV=development concurrently \"bisheng start -c ./site/bisheng.config.js\"",
     "test": "jest --config .jest.js --cache=false",
     "test:update": "jest --config .jest.js --cache=false -u",
     "test-all": "sh -e ./scripts/test-all.sh",
@@ -177,8 +179,6 @@
     "@typescript-eslint/parser": "^5.0.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
     "antd-img-crop": "^3.1.1",
-    "antd-pro-merge-less": "^3.0.11",
-    "antd-theme-generator": "^1.2.3",
     "argos-cli": "^0.3.0",
     "array-move": "^4.0.0",
     "babel-plugin-add-react-displayname": "^0.0.5",

diff --git a/scripts/generate-color-less.js b/scripts/generate-color-less.js
diff --git a/site/bisheng.config.js b/site/bisheng.config.js
@@ -8,6 +8,7 @@ const themeConfig = require('./themeConfig');
 const { webpack } = getWebpackConfig;
 
 const isDev = process.env.NODE_ENV === 'development';
+const { ANT_THEME } = process.env;
 
 function alertBabelConfig(rules) {
   rules.forEach(rule => {
@@ -36,7 +37,7 @@ module.exports = {
     'components/form/v3': ['components/form/v3.zh-CN.md', 'components/form/v3.en-US.md'],
     'docs/resources': ['./docs/resources.zh-CN.md', './docs/resources.en-US.md'],
   },
-  theme: './site/theme',
+  theme: ANT_THEME ? './site/theme/index-css-only.js' : './site/theme',
   htmlTemplate: './site/theme/static/template.html',
   themeConfig,
   filePathMapper(filePath) {
@@ -57,7 +58,7 @@ module.exports = {
   lessConfig: {
     javascriptEnabled: true,
     modifyVars: {
-      'root-entry-name': 'variable',
+      'root-entry-name': ANT_THEME || 'variable',
     },
   },
   webpackConfig(config) {
@@ -85,6 +86,7 @@ module.exports = {
         react: require.resolve('react'),
       };
     } else if (process.env.ESBUILD) {
+      console.log('Enable ESBUILD');
       // use esbuild
       config.optimization.minimizer = [
         new ESBuildMinifyPlugin({
@@ -110,6 +112,16 @@ module.exports = {
 
     delete config.module.noParse;
 
+    if (ANT_THEME) {
+      config.mode = 'development';
+      config.plugins.forEach(plugin => {
+        if (plugin?.options?.filename?.includes?.('.css')) {
+          delete plugin.options.chunkFilename;
+          plugin.options.filename = `${ANT_THEME}.css`;
+        }
+      });
+    }
+
     return config;
   },
 

diff --git a/site/theme/index-css-only.js b/site/theme/index-css-only.js
@@ -0,0 +1,19 @@
+/**
+ * ZombieJ: This file is used for generate site theme css only. Which only provides dark.css and
+ * compact.css for theme switcher.
+ */
+const config = require('./index');
+
+const homeTmpl = './template/Home/index';
+
+const cloneConfig = {
+  ...config,
+};
+
+cloneConfig.routes = {
+  path: '/',
+  component: './template/Layout/index',
+  indexRoute: { component: homeTmpl },
+};
+
+module.exports = cloneConfig;
diff --git a/site/theme/static/header.less b/site/theme/static/header.less
@@ -1,5 +1,3 @@
-@import (reference) '../../../components/style/themes/variable.less';
-
 #header {
   // ===================== Home Page =====================
   &.home-header {

diff --git a/site/theme/static/index.less b/site/theme/static/index.less
@@ -1,26 +1,27 @@
+@import '../../../components/style/themes/index.less';
+
 @import './reset.less';
-@import '../../../components/style/themes/variable.less';
-@import './common';
-@import './header';
-@import './footer';
-@import './home';
-@import './page-nav';
-@import './markdown';
-@import './design-doc';
-@import './preview-img';
-@import './toc';
-@import './not-found';
-@import './highlight';
-@import './demo';
-@import './colors';
-@import './icons';
-@import './icon-pic-searcher';
-@import './mock-browser';
-@import './motion';
-@import './responsive';
-@import './theme';
-@import './docsearch';
-@import './nprogress';
-@import './contributors';
+@import './common.less';
+@import './header.less';
+@import './footer.less';
+@import './home.less';
+@import './page-nav.less';
+@import './markdown.less';
+@import './design-doc.less';
+@import './preview-img.less';
+@import './toc.less';
+@import './not-found.less';
+@import './highlight.less';
+@import './demo.less';
+@import './colors.less';
+@import './icons.less';
+@import './icon-pic-searcher.less';
+@import './mock-browser.less';
+@import './motion.less';
+@import './responsive.less';
+@import './theme.less';
+@import './docsearch.less';
+@import './nprogress.less';
+@import './contributors.less';
 @import './dark.less';
 @import './rtl.less';
diff --git a/site/theme/static/responsive.less b/site/theme/static/responsive.less
@@ -1,5 +1,3 @@
-@import (reference) '../../../components/style/themes/variable.less';
-
 .nav-phone-icon {
   position: absolute;
   top: 25px;

diff --git a/site/theme/static/theme.less b/site/theme/static/theme.less
@@ -1,4 +1,3 @@
-@import (reference) '../../../components/style/themes/variable.less';
 @import './colors.less';
 @import './home.less';
 

diff --git a/site/theme/template/Content/ComponentOverview.less b/site/theme/template/Content/ComponentOverview.less
@@ -1,4 +1,4 @@
-@import (reference) '../../../../components/style/themes/variable.less';
+@import (reference) '../../../../components/style/themes/index.less';
 
 .components-overview {
   padding: 0;

diff --git a/site/theme/template/Home/Banner/Background.less b/site/theme/template/Home/Banner/Background.less
@@ -1,4 +1,4 @@
-@import (reference) '../../../../../components/style/themes/variable.less';
+@import (reference) '../../../../../components/style/themes/index.less';
 
 .home-banner-background {
   position: absolute;

diff --git a/site/theme/template/Home/Banner/Logo.less b/site/theme/template/Home/Banner/Logo.less
@@ -1,4 +1,4 @@
-@import (reference) '../../../../../components/style/themes/variable.less';
+@import (reference) '../../../../../components/style/themes/index.less';
 
 .home-card-logo {
   position: relative;

diff --git a/site/theme/template/Home/Banner/index.less b/site/theme/template/Home/Banner/index.less
@@ -1,4 +1,4 @@
-@import (reference) '../../../../../components/style/themes/variable.less';
+@import (reference) '../../../../../components/style/themes/index.less';
 
 @home-color: #0170fe;
 

diff --git a/site/theme/template/Home/DesignPage/index.less b/site/theme/template/Home/DesignPage/index.less
@@ -1,4 +1,4 @@
-@import (reference) '../../../../../components/style/themes/variable.less';
+@import (reference) '../../../../../components/style/themes/index.less';
 
 .design-card {
   position: relative;

diff --git a/site/theme/template/Home/MorePage.less b/site/theme/template/Home/MorePage.less
@@ -1,4 +1,4 @@
-@import (reference) '../../../../components/style/themes/variable.less';
+@import (reference) '../../../../components/style/themes/index.less';
 
 .more-card {
   &:hover {

diff --git a/site/theme/template/Home/RecommendPage.less b/site/theme/template/Home/RecommendPage.less
@@ -1,4 +1,4 @@
-@import (reference) '../../../../components/style/themes/variable.less';
+@import (reference) '../../../../components/style/themes/index.less';
 
 .linear-gradient(@mid-pos, @end-pos) {
   background: linear-gradient(

diff --git a/site/theme/template/Home/index.less b/site/theme/template/Home/index.less
@@ -1,4 +1,4 @@
-@import (reference) '../../../../components/style/themes/variable.less';
+@import (reference) '../../../../components/style/themes/index.less';
 
 .home-container {
   h1,

diff --git a/site/theme/template/Layout/Header/Github.less b/site/theme/template/Layout/Header/Github.less
@@ -1,5 +1,5 @@
 @import '../../../static/theme.less';
-@import (reference) '../../../../../components/style/themes/variable.less';
+@import (reference) '../../../../../components/style/themes/index.less';
 
 #github-btn {
   display: flex;

diff --git a/site/theme/template/Layout/Header/Logo.less b/site/theme/template/Layout/Header/Logo.less
@@ -1,5 +1,5 @@
 @import '../../../static/theme.less';
-@import (reference) '../../../../../components/style/themes/variable.less';
+@import (reference) '../../../../../components/style/themes/index.less';
 @import './index.less';
 
 #logo {

diff --git a/site/theme/template/Layout/Header/Navigation.less b/site/theme/template/Layout/Header/Navigation.less
@@ -1,5 +1,5 @@
 @import '../../../static/theme.less';
-@import (reference) '../../../../../components/style/themes/variable.less';
+@import (reference) '../../../../../components/style/themes/index.less';
 @import './index.less';
 
 #nav {

diff --git a/site/theme/template/Layout/Header/SearchBar.less b/site/theme/template/Layout/Header/SearchBar.less
@@ -1,5 +1,5 @@
 @import '../../../static/theme.less';
-@import (reference) '../../../../../components/style/themes/variable.less';
+@import (reference) '../../../../../components/style/themes/index.less';
 @import './index.less';
 @import './DocSearch.less';
 

diff --git a/site/theme/template/Layout/Header/index.less b/site/theme/template/Layout/Header/index.less
@@ -1,5 +1,5 @@
 @import '../../../static/theme.less';
-@import (reference) '../../../../../components/style/themes/variable.less';
+@import (reference) '../../../../../components/style/themes/index.less';
 
 @header-height: 64px;
 @menu-item-border: 2px;

diff --git a/site/theme/template/Resources/AffixTabs.less b/site/theme/template/Resources/AffixTabs.less
@@ -1,4 +1,4 @@
-@import (reference) '../../../../components/style/themes/variable.less';
+@import (reference) '../../../../components/style/themes/index.less';
 @import './index.less';
 
 .resource-affix-tabs {

diff --git a/site/theme/template/Resources/index.less b/site/theme/template/Resources/index.less
@@ -1,4 +1,4 @@
-@import (reference) '../../../../components/style/themes/variable.less';
+@import (reference) '../../../../components/style/themes/index.less';
 
 @ArticleMaxWidth: 1208px;
 @resource-padding: 40px;