docs: site build script update (#32984)

* chore: rm color-less * refactor: MV theme to variable * docs: fix header * chore: clean up * chore: enable esbuild
2024-11-24 02:59:58 +08:00 · 2021-11-23 18:57:59 +08:00 · 2021-11-23 18:57:59 +08:00 · b926c535ea
commit b926c535ea
parent 37442ae0d5
23 changed files with 77 additions and 100 deletions
--- 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",
--- a/scripts/generate-color-less.js
+++ b/scripts/generate-color-less.js
@ -1,50 +0,0 @@
-#!/usr/bin/env node
-const path = require('path');
-const { generateTheme } = require('antd-theme-generator');
-const genCss = require('antd-pro-merge-less');
-const defaultVar = require('./default-vars');
-const dark = require('./dark-vars');
-const compact = require('./compact-vars');
-
-genCss(
-  path.join(__dirname, '..'),
-  [
-    {
-      theme: 'dark',
-      fileName: './_site/dark.css',
-      modifyVars: {
-        ...defaultVar,
-        ...dark,
-        '@site-text-color': '@heading-color',
-        '@site-markdown-code-bg': '@input-bg',
-      },
-    },
-    {
-      theme: 'compact',
-      fileName: './_site/compact.css',
-      modifyVars: {
-        ...defaultVar,
-        ...compact,
-      },
-    },
-  ],
-  {
-    ignoreAntd: true,
-    isModule: false,
-    cache: false,
-    loadAny: true,
-    ignoreProLayout: true,
-  },
-);
-
-const options = {
-  antDir: path.join(__dirname, '../node_modules/antd'),
-  stylesDir: path.join(__dirname, '../site/theme/static'),
-  antdStylesDir: path.join(__dirname, '../node_modules/antd/lib/'),
-  varFile: path.join(__dirname, '../site/theme/static/theme.less'),
-  mainLessFile: path.join(__dirname, '../site/theme/static/index.less'),
-  themeVariables: ['@primary-color'],
-  outputFilePath: path.join(__dirname, '../_site/color.less'),
-};
-
-generateTheme(options);
--- 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;
  },

--- 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;
--- 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 {
--- 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';
--- 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;
--- 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';

--- 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;
--- 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;
--- 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;
--- 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;

--- 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;
--- 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 {
--- 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(
--- 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,
--- 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;
--- 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 {
--- 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 {
--- 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';

--- 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;
--- 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 {
--- 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;