From b926c535eaf2c1775829092b4e3403804191569d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 23 Nov 2021 18:57:59 +0800 Subject: [PATCH] docs: site build script update (#32984) * chore: rm color-less * refactor: MV theme to variable * docs: fix header * chore: clean up * chore: enable esbuild --- package.json | 10 ++-- scripts/generate-color-less.js | 50 ------------------- site/bisheng.config.js | 16 +++++- site/theme/index-css-only.js | 19 +++++++ site/theme/static/header.less | 2 - site/theme/static/index.less | 47 ++++++++--------- site/theme/static/responsive.less | 2 - site/theme/static/theme.less | 1 - .../template/Content/ComponentOverview.less | 2 +- .../template/Home/Banner/Background.less | 2 +- site/theme/template/Home/Banner/Logo.less | 2 +- site/theme/template/Home/Banner/index.less | 2 +- .../theme/template/Home/DesignPage/index.less | 2 +- site/theme/template/Home/MorePage.less | 2 +- site/theme/template/Home/RecommendPage.less | 2 +- site/theme/template/Home/index.less | 2 +- site/theme/template/Layout/Header/Github.less | 2 +- site/theme/template/Layout/Header/Logo.less | 2 +- .../template/Layout/Header/Navigation.less | 2 +- .../template/Layout/Header/SearchBar.less | 2 +- site/theme/template/Layout/Header/index.less | 2 +- site/theme/template/Resources/AffixTabs.less | 2 +- site/theme/template/Resources/index.less | 2 +- 23 files changed, 77 insertions(+), 100 deletions(-) delete mode 100644 scripts/generate-color-less.js create mode 100644 site/theme/index-css-only.js diff --git a/package.json b/package.json index ccae63ff7b..defc9d5b98 100644 --- 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 deleted file mode 100644 index 3b3ce5ea92..0000000000 --- a/scripts/generate-color-less.js +++ /dev/null @@ -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); diff --git a/site/bisheng.config.js b/site/bisheng.config.js index 7a15e209ca..e1788770d6 100644 --- 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 new file mode 100644 index 0000000000..85517958f9 --- /dev/null +++ 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 index a3d18c94cb..702c062064 100644 --- 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 index be9e04c3fd..2fcc812487 100644 --- 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 index 1395c5b9af..2200450c54 100644 --- 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 index 60d3696023..771b27c3d7 100644 --- 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 index cfa949b7c2..f234def903 100644 --- 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 index 67040fe9d8..f3471fa934 100644 --- 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 index 3640647ca2..e49cb55ddb 100644 --- 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 index 3405e5eec9..aa4ec26f7d 100644 --- 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 index 27f674ba72..17ed875b00 100644 --- 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 index a8fecace16..256a36ecd2 100644 --- 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 index 509a0d3200..27a3c84d80 100644 --- 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 index 4afe3f17f5..dd3f8e2584 100644 --- 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 index b94787ebde..57bd668723 100644 --- 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 index 572477c3d3..0bd0a7c770 100644 --- 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 index 79adea5eee..0e47ba4801 100644 --- 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 index 85dc40d253..21106f7ff9 100644 --- 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 index 39e4bfc7a1..8ace2cb7ac 100644 --- 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 index d5acd71927..d6edc178ca 100644 --- 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 index 1d3fe4a0ae..5c3476212e 100644 --- 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;