From eb41399dd79bffe33d7068b844a26be385944a9e Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Wed, 4 Apr 2018 18:39:21 +0800 Subject: [PATCH] update site --- .gitignore | 1 + package-lock.json | 16 +- package.json | 4 +- scripts/deploy-to-gh-pages.sh | 8 +- scripts/gulpfile.js | 80 ++++ scripts/run.js | 26 ++ site/components/IconSet/CopyableIcon.vue | 37 ++ site/components/IconSet/index.vue | 40 ++ site/components/api.vue | 18 + site/components/demo.vue | 83 ++++ site/components/demoBox.vue | 163 ++++++++ site/components/header.vue | 53 +++ site/components/md.vue | 40 ++ site/demo.js | 41 ++ site/index.html | 17 + site/index.js | 36 ++ site/index.less | 64 +++ site/routes.js | 6 + site/theme/static/colors.less | 170 ++++++++ site/theme/static/common.less | 132 +++++++ site/theme/static/demo.less | 261 +++++++++++++ site/theme/static/docsearch.less | 22 ++ site/theme/static/footer.less | 71 ++++ site/theme/static/header.less | 144 +++++++ site/theme/static/highlight.less | 153 ++++++++ site/theme/static/home.less | 366 +++++++++++++++++ site/theme/static/icons.less | 66 ++++ site/theme/static/index.less | 22 ++ site/theme/static/markdown.less | 325 +++++++++++++++ site/theme/static/mock-browser.less | 53 +++ site/theme/static/motion.less | 39 ++ site/theme/static/new-version-info-modal.less | 23 ++ site/theme/static/not-found.less | 35 ++ site/theme/static/nprogress.less | 62 +++ site/theme/static/page-nav.less | 61 +++ site/theme/static/preview-img.less | 159 ++++++++ site/theme/static/resource.less | 71 ++++ site/theme/static/responsive.less | 369 ++++++++++++++++++ site/theme/static/theme.less | 4 + site/theme/static/toc.less | 64 +++ site/util.js | 3 + webpack.base.config.js | 2 +- webpack.config.js | 17 +- webpack.site.config.js | 6 +- 44 files changed, 3413 insertions(+), 20 deletions(-) create mode 100644 scripts/gulpfile.js create mode 100644 scripts/run.js create mode 100644 site/components/IconSet/CopyableIcon.vue create mode 100644 site/components/IconSet/index.vue create mode 100644 site/components/api.vue create mode 100644 site/components/demo.vue create mode 100644 site/components/demoBox.vue create mode 100644 site/components/header.vue create mode 100644 site/components/md.vue create mode 100644 site/demo.js create mode 100644 site/index.html create mode 100644 site/index.js create mode 100644 site/index.less create mode 100644 site/routes.js create mode 100644 site/theme/static/colors.less create mode 100644 site/theme/static/common.less create mode 100644 site/theme/static/demo.less create mode 100644 site/theme/static/docsearch.less create mode 100644 site/theme/static/footer.less create mode 100644 site/theme/static/header.less create mode 100644 site/theme/static/highlight.less create mode 100644 site/theme/static/home.less create mode 100644 site/theme/static/icons.less create mode 100644 site/theme/static/index.less create mode 100644 site/theme/static/markdown.less create mode 100644 site/theme/static/mock-browser.less create mode 100644 site/theme/static/motion.less create mode 100644 site/theme/static/new-version-info-modal.less create mode 100644 site/theme/static/not-found.less create mode 100644 site/theme/static/nprogress.less create mode 100644 site/theme/static/page-nav.less create mode 100644 site/theme/static/preview-img.less create mode 100644 site/theme/static/resource.less create mode 100644 site/theme/static/responsive.less create mode 100644 site/theme/static/theme.less create mode 100644 site/theme/static/toc.less create mode 100644 site/util.js diff --git a/.gitignore b/.gitignore index e9f5c4143..9c887521b 100644 --- a/.gitignore +++ b/.gitignore @@ -61,6 +61,7 @@ typings/ dist lib es +site-dist # 备份文件 /components/test/* diff --git a/package-lock.json b/package-lock.json index dc96015fc..308f6a447 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7649,6 +7649,11 @@ "integrity": "sha1-bghLvJIGH7sJcexYts5tQE4k2mk=", "dev": true }, + "is-negative-zero": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.0.tgz", + "integrity": "sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=" + }, "is-number": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz", @@ -8162,7 +8167,6 @@ "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz", "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=", "dev": true, - "optional": true, "requires": { "jsonify": "0.0.0" } @@ -8204,8 +8208,7 @@ "version": "0.0.0", "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz", "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=", - "dev": true, - "optional": true + "dev": true }, "jsonp": { "version": "0.2.1", @@ -9805,8 +9808,7 @@ "version": "1.4.4", "resolved": "https://registry.npmjs.org/nwmatcher/-/nwmatcher-1.4.4.tgz", "integrity": "sha512-3iuY4N5dhgMpCUrOVnuAdGrgxVqV2cJpM+XNccjR2DKOB1RUP0aA+wGXEiNziG/UKboFyGBIoKOaNlJxx8bciQ==", - "dev": true, - "optional": true + "dev": true }, "oauth-sign": { "version": "0.8.2", @@ -13680,7 +13682,6 @@ "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", "integrity": "sha1-BktyYCsY+Q8pGSuLG8QY/9Hr078=", "dev": true, - "optional": true, "requires": { "asap": "2.0.6" } @@ -16393,8 +16394,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz", "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=", - "dev": true, - "optional": true + "dev": true }, "uglifyjs-webpack-plugin": { "version": "0.4.6", diff --git a/package.json b/package.json index 9b08e686a..599c94212 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,8 @@ "scripts": { "start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server --open --hot", "test": "karma start test/karma.conf.js --single-run", - "build": "sh build.sh", + "site": "node scripts/run.js site-dist", + "copy": "node scripts/run.js copy-html", "compile": "node antd-tools/cli/run.js compile", "dist": "node antd-tools/cli/run.js dist", "lint": "eslint -c ./.eslintrc --fix --ext .jsx ./components", @@ -100,6 +101,7 @@ "markdown-it": "^8.4.0", "marked": "^0.3.7", "merge2": "^1.2.1", + "mkdirp": "^0.5.1", "mocha": "^3.2.0", "postcss": "^6.0.20", "postcss-loader": "^2.1.2", diff --git a/scripts/deploy-to-gh-pages.sh b/scripts/deploy-to-gh-pages.sh index 81614950e..4cf017943 100644 --- a/scripts/deploy-to-gh-pages.sh +++ b/scripts/deploy-to-gh-pages.sh @@ -6,15 +6,15 @@ if [[ $TRAVIS_BRANCH == "master" && $TRAVIS_PULL_REQUEST == "false" ]]; then echo "Starting to update gh-pages\n" -rm -rf dist -mkdir dist +rm -rf site-dist +mkdir site-dist git config --global user.email "travis@travis-ci.org" git config --global user.name "Travis" -./node_modules/.bin/webpack --config webpack.site.config.js +npm run site -cd dist +cd site-dist git init git add -f . git commit -m "Travis build" diff --git a/scripts/gulpfile.js b/scripts/gulpfile.js new file mode 100644 index 000000000..1328ed011 --- /dev/null +++ b/scripts/gulpfile.js @@ -0,0 +1,80 @@ +'use strict' +const webpack = require('webpack') + +const path = require('path') +const gulp = require('gulp') +const readline = require('readline') +const fs = require('fs') + +const rimraf = require('rimraf') +const mkdirp = require('mkdirp') + +const cwd = process.cwd() + +function dist (done) { + rimraf.sync(path.join(cwd, 'site-dist')) + process.env.RUN_ENV = 'PRODUCTION' + const webpackConfig = require(path.join(cwd, 'webpack.site.config.js')) + webpack(webpackConfig, (err, stats) => { + if (err) { + console.error(err.stack || err) + if (err.details) { + console.error(err.details) + } + return + } + + const info = stats.toJson() + + if (stats.hasErrors()) { + console.error(info.errors) + } + + if (stats.hasWarnings()) { + console.warn(info.warnings) + } + + const buildInfo = stats.toString({ + colors: true, + children: true, + chunks: false, + modules: false, + chunkModules: false, + hash: false, + version: false, + }) + console.log(buildInfo) + done(0) + }) +} + +function copyHtml () { + const rl = readline.createInterface({ + input: fs.createReadStream(path.join(cwd, 'site/demo.js')), + }) + + rl.on('line', (line) => { + const name = line.split('antd/')[1].split('/')[0] + console.log('create path:', name) + const toPath1 = `site-dist/components/${name}` + const toPath2 = `site-dist/components/${name}-cn` + rimraf.sync(path.join(cwd, toPath1)) + rimraf.sync(path.join(cwd, toPath2)) + mkdirp(path.join(cwd, toPath1), function () { + fs.writeFileSync(path.join(cwd, `${toPath1}/index.html`), fs.readFileSync(path.join(cwd, 'site-dist/index.html'))) + }) + mkdirp(path.join(cwd, toPath2), function () { + fs.writeFileSync(path.join(cwd, `${toPath2}/index.html`), fs.readFileSync(path.join(cwd, 'site-dist/index.html'))) + }) + }) +} + +gulp.task('site-dist', (done) => { + dist(() => { + copyHtml() + }) +}) +gulp.task('copy-html', () => { + copyHtml() +}) + diff --git a/scripts/run.js b/scripts/run.js new file mode 100644 index 000000000..6dd04a2b6 --- /dev/null +++ b/scripts/run.js @@ -0,0 +1,26 @@ +#!/usr/bin/env node + +'use strict' + +require('colorful').colorful() +const gulp = require('gulp') +const program = require('commander') + +program.on('--help', () => { + console.log(' Usage:'.to.bold.blue.color) + console.log() +}) + +program.parse(process.argv) + +const task = program.args[0] + +if (!task) { + program.help() +} else { + console.log('scripts run', task) + + require('./gulpfile') + + gulp.start(task) +} diff --git a/site/components/IconSet/CopyableIcon.vue b/site/components/IconSet/CopyableIcon.vue new file mode 100644 index 000000000..855d21616 --- /dev/null +++ b/site/components/IconSet/CopyableIcon.vue @@ -0,0 +1,37 @@ + + diff --git a/site/components/IconSet/index.vue b/site/components/IconSet/index.vue new file mode 100644 index 000000000..61109f506 --- /dev/null +++ b/site/components/IconSet/index.vue @@ -0,0 +1,40 @@ + diff --git a/site/components/api.vue b/site/components/api.vue new file mode 100644 index 000000000..7d745eae3 --- /dev/null +++ b/site/components/api.vue @@ -0,0 +1,18 @@ + + diff --git a/site/components/demo.vue b/site/components/demo.vue new file mode 100644 index 000000000..930bf9cd2 --- /dev/null +++ b/site/components/demo.vue @@ -0,0 +1,83 @@ + diff --git a/site/components/demoBox.vue b/site/components/demoBox.vue new file mode 100644 index 000000000..21d6cb03b --- /dev/null +++ b/site/components/demoBox.vue @@ -0,0 +1,163 @@ + + + diff --git a/site/components/header.vue b/site/components/header.vue new file mode 100644 index 000000000..90654041d --- /dev/null +++ b/site/components/header.vue @@ -0,0 +1,53 @@ + diff --git a/site/components/md.vue b/site/components/md.vue new file mode 100644 index 000000000..1f03c510f --- /dev/null +++ b/site/components/md.vue @@ -0,0 +1,40 @@ + + diff --git a/site/demo.js b/site/demo.js new file mode 100644 index 000000000..afd09b0e3 --- /dev/null +++ b/site/demo.js @@ -0,0 +1,41 @@ +export { default as avatar } from 'antd/avatar/demo/index.vue' +export { default as badge } from 'antd/badge/demo/index.vue' +export { default as breadcrumb } from 'antd/breadcrumb/demo/index.vue' +export { default as button } from 'antd/button/demo/index.vue' +export { default as card } from 'antd/card/demo/index.vue' +export { default as checkbox } from 'antd/checkbox/demo/index.vue' +export { default as grid } from 'antd/grid/demo/index.vue' +export { default as icon } from 'antd/icon/demo/index.vue' +export { default as input } from 'antd/input/demo/index.vue' +export { default as select } from 'antd/select/demo/index.vue' +export { default as menu } from 'antd/menu/demo/index.vue' +export { default as pagination } from 'antd/pagination/demo/index.vue' +export { default as popconfirm } from 'antd/popconfirm/demo/index.vue' +export { default as popover } from 'antd/popover/demo/index.vue' +export { default as radio } from 'antd/radio/demo/index.vue' +export { default as rate } from 'antd/rate/demo/index.vue' +export { default as tabs } from 'antd/tabs/demo/index.vue' +export { default as tag } from 'antd/tag/demo/index.vue' +export { default as tooltip } from 'antd/tooltip/demo/index.vue' +export { default as dropdown } from 'antd/dropdown/demo/index.vue' +export { default as divider } from 'antd/divider/demo/index.vue' +export { default as collapse } from 'antd/collapse/demo/index.vue' +export { default as notification } from 'antd/notification/demo/index.vue' +export { default as message } from 'antd/message/demo/index.vue' +export { default as spin } from 'antd/spin/demo/index.vue' +export { default as switch } from 'antd/switch/demo/index.vue' +export { default as autoComplete } from 'antd/auto-complete/demo/index.vue' +export { default as affix } from 'antd/affix/demo/index.vue' +export { default as cascader } from 'antd/cascader/demo/index.vue' +export { default as backTop } from 'antd/back-top/demo/index.vue' +export { default as modal } from 'antd/modal/demo/index.vue' +export { default as alert } from 'antd/alert/demo/index.vue' +export { default as timePicker } from 'antd/time-picker/demo/index.vue' +export { default as steps } from 'antd/steps/demo/index.vue' +export { default as calendar } from 'antd/calendar/demo/index.vue' +export { default as datePicker } from 'antd/date-picker/demo/index.vue' +export { default as localeProvider } from 'antd/locale-provider/demo/index.vue' +export { default as slider } from 'antd/slider/demo/index.vue' +export { default as progress } from 'antd/progress/demo/index.vue' +export { default as timeline } from 'antd/timeline/demo/index.vue' +export { default as table } from 'antd/table/demo/index.vue' diff --git a/site/index.html b/site/index.html new file mode 100644 index 000000000..17709bbc9 --- /dev/null +++ b/site/index.html @@ -0,0 +1,17 @@ + + + + + + + + + + + +
+ +
+ + + diff --git a/site/index.js b/site/index.js new file mode 100644 index 000000000..8049d14e2 --- /dev/null +++ b/site/index.js @@ -0,0 +1,36 @@ +import '../components/style.js' +import './index.less' +import 'highlight.js/styles/solarized-light.css' +import Vue from 'vue' +import VueRouter from 'vue-router' +import VueClipboard from 'vue-clipboard2' +import routes from './routes' +import Md from './components/md' +import Api from './components/api' +import * as Components from '../components/index' +import demoBox from './components/demoBox' + +Vue.use(VueClipboard) +Vue.use(VueRouter) +Vue.component(Md.name, Md) +Vue.component(Api.name, Api) +Vue.component('demo-box', demoBox) +Object.keys(Components).forEach(k => { + if (k === 'api') { + Object.keys(Components[k]).forEach(api => { + Vue.prototype[`$${api}`] = Components[k][api] + }) + } else { + const name = `a${k.replace(/([A-Z])/g, '-$1').toLowerCase()}` + Vue.component(name, Components[k]) + } +}) + +const router = new VueRouter({ + mode: 'history', + routes, +}) +new Vue({ + el: '#app', + router, +}) diff --git a/site/index.less b/site/index.less new file mode 100644 index 000000000..7abb49a15 --- /dev/null +++ b/site/index.less @@ -0,0 +1,64 @@ +@import './theme/static/index.less'; +.site { + display: flex; + flex-direction: column; + .nav { + width: 200px; + } + .content { + flex: 1; + } + .main-wrapper { + display: flex; + flex: 1; + } +} + +.api-container table { + border-collapse: collapse; + border-spacing: 0; + empty-cells: show; + border: 1px solid @site-border-color-split; + width: 100%; + margin: 8px 0 16px; +} + +.api-container table th { + white-space: nowrap; + color: #5c6b77; + font-weight: 500; + background: rgba(0, 0, 0, 0.02); +} +.api-container pre code { + padding: 12px 20px; + margin: 16px 0; + overflow: auto; +} + +.api-container table th, +.api-container table td { + border: 1px solid @site-border-color-split; + padding: 16px 24px; + text-align: left; +} +.code-box .highlight-wrapper { + display: block; +} +.code-box-meta > h4 { + position: absolute; + top: -14px; + padding: 1px 8px; + margin-left: -8px; + color: #777; + border-radius: 2px 2px 0 0; + background: #fff; + font-size: 14px; + width: auto; +} +.code-box-code-copy { + opacity: 1; + position: absolute; + right: 15px; + top: 10px; +} + diff --git a/site/routes.js b/site/routes.js new file mode 100644 index 000000000..5e3ab8902 --- /dev/null +++ b/site/routes.js @@ -0,0 +1,6 @@ +import Demo from './components/demo.vue' +export default [ + { path: '/:prefix?/components/:name', component: Demo }, + // { path: '/:lang?/test/:name/:demo?', component: AsyncComp }, + { path: '/*', redirect: '/ant-design/components/button' }, +] diff --git a/site/theme/static/colors.less b/site/theme/static/colors.less new file mode 100644 index 000000000..271da99f4 --- /dev/null +++ b/site/theme/static/colors.less @@ -0,0 +1,170 @@ +/* stylelint-disable no-duplicate-selectors */ +.color-palettes { + margin: 0 1%; +} +.color-palette { + margin: 45px 1%; + width: 31%; + display: inline-block; + &-pick { + text-align: center; + font-size: 20px; + margin-bottom: 8px; + } + &-picker { + margin: 12px 0 24px; + &-value { + font-size: 13px; + font-family: Consolas; + } + } +} + +.main-color { + text-align: left; + &-item { + cursor: pointer; + height: 44px; + line-height: 44px; + padding: 0 12px; + margin-right: 4px; + transition: all .2s; + position: relative; + font-family: Consolas; + font-size: 14px; + &:first-child { + border-radius: 4px 4px 0 0; + } + &:last-child { + border-radius: 0 0 4px 4px; + } + &:hover { + margin-right: -8px; + border-radius: 0 4px 4px 0; + } + } + &-item &-text { + transition: all .3s; + float: left; + } + &-item &-value { + float: right; + transform: scale(0.85); + transform-origin: 100% 50%; + opacity: 0; + position: relative; + left: 3px; + transition: all .3s; + } +} + +.color-title { + margin: 0 0 24px; + font-weight: 500; + color: #5c6b77; + font-size: 22px; + text-transform: capitalize; + text-align: center; +} + +.color-description { + font-size: 14px; + font-weight: lighter; + color: #777; + display: block; +} + +.main-color:hover { + .main-color-value { + opacity: 0.7; + left: 0; + } +} + +.color-palette-horizontal { + width: 100%; + + .main-color { + display: flex; + + &-item { + flex: 1; + position: relative; + padding: 0; + margin-right: 0; + border-radius: 0; + height: 86px; + text-align: center; + padding-top: 37px; + line-height: normal; + + .main-color-text { + float: none; + } + + &:hover { + margin-top: -10px; + height: 96px; + border-radius: 4px 4px 0 0; + } + } + + &-value { + position: absolute; + text-align: center; + width: 100%; + left: 0; + bottom: 0; + float: none; + transform-origin: unset; + } + + &:hover { + .main-color-item { + padding-top: 8px; + } + + .main-color-value { + opacity: 0.7; + bottom: 8px; + } + } + } +} + +.make-palatte(@color, @index: 1) when (@index <= 10) { + .palatte-@{color}-@{index} { + @background: "@{color}-@{index}"; + background: @@background; + } + .make-palatte(@color, (@index + 1)); // next iteration +} + +@grey-1: #fff; +@grey-2: #fafafa; +@grey-3: #f5f5f5; +@grey-4: #e8e8e8; +@grey-5: #d9d9d9; +@grey-6: #bfbfbf; +@grey-7: #8c8c8c; +@grey-8: #595959; +@grey-9: #262626; +@grey-10: #000; + +@border-color: rgba(229, 231, 235, 100); + +.main-color { + .make-palatte(blue); + .make-palatte(purple); + .make-palatte(cyan); + .make-palatte(green); + .make-palatte(magenta); + .make-palatte(red); + .make-palatte(volcano); + .make-palatte(orange); + .make-palatte(gold); + .make-palatte(yellow); + .make-palatte(lime); + .make-palatte(geekblue); + .make-palatte(grey); +} diff --git a/site/theme/static/common.less b/site/theme/static/common.less new file mode 100644 index 000000000..0f63a7709 --- /dev/null +++ b/site/theme/static/common.less @@ -0,0 +1,132 @@ +html, +body { + height: 100%; +} + +body { + font-family: @font-family; + line-height: 1.5; + color: @site-text-color; + font-size: 14px; + background: #fff; + transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1); + overflow-x: hidden; +} + +a { + transition: color .3s ease; + &:focus { + text-decoration: underline; + text-decoration-skip: ink; + } +} + +.main-wrapper { + background: #fff; + padding: 40px 0 0; + position: relative; +} + +.main-container { + padding: 0 170px 144px 64px; + background: #fff; + min-height: 500px; + overflow: hidden; + border-left: 1px solid @site-border-color-split; + position: relative; + margin-left: -1px; +} + +.main-menu { + z-index: 1; +} + +.aside-container { + padding-bottom: 50px; + font-family: Lato, @font-family; + + &.ant-menu-inline .ant-menu-submenu-title h4, + &.ant-menu-inline > .ant-menu-item, + &.ant-menu-inline .ant-menu-item a { + font-size: 14px; + text-overflow: ellipsis; + overflow: hidden; + } + + &.ant-menu-inline .ant-menu-item-group-title { + padding-left: 56px; + } + + a[disabled] { + color: #ccc; + } + + .menu-item-link-outside { + position: relative; + .anticon { + font-size: 12px; + color: @primary-color; + opacity: 0; + position: absolute; + right: -10px; + top: 16px; + transition: all .3s; + } + &:hover .anticon { + opacity: 1; + } + } +} + +.aside-container .chinese { + font-size: 12px; + margin-left: 6px; + font-weight: normal; + opacity: .67; +} + +.outside-link { + display: inline-block; +} + +.outside-link:after { + content: '\e691'; + font-family: 'anticon'; + margin-left: 5px; + font-size: 12px; + color: #aaa; +} + +.outside-link.internal { + display: none; +} + +// reset menu text color +.menu-site .ant-menu-item > a { + color: @site-text-color; +} + +.menu-site .ant-menu-item-selected > a, +.menu-site .ant-menu-item > a:hover { + color: @primary-color; +} + +#react-content { + transition: transform .3s @ease-in-out-circ; +} +.page-wrapper { + overflow: hidden; + padding: 0; + width: 100%; + a { + text-decoration: none; + } +} + +.drawer-content { + padding: 40px 0; +} + +.drawer { + z-index: 1029; +} diff --git a/site/theme/static/demo.less b/site/theme/static/demo.less new file mode 100644 index 000000000..b9259641b --- /dev/null +++ b/site/theme/static/demo.less @@ -0,0 +1,261 @@ +.code-boxes-col-1-1 { + width: 100%; +} + +.code-boxes-col-2-1 { + display: inline-block; + vertical-align: top; +} + +.code-box { + border: 1px solid @site-border-color-split; + border-radius: @border-radius-sm; + display: inline-block; + width: 100%; + position: relative; + margin: 0 0 16px; + transition: all .2s; + + &:target { + border: 1px solid @primary-color; + } + + &-expand-trigger { + cursor: pointer; + font-size: 14px; + color: #9199ac; + margin-left: 5px; + opacity: .8; + transition: all .3s; + top: -2px; + position: relative; + + &-active { + color: #3b4357; + } + } + + &-title { + position: absolute; + top: -14px; + padding: 1px 8px; + margin-left: -8px; + color: #777; + border-radius: @border-radius-sm @border-radius-sm 0 0; + background: #fff; + transition: background-color .4s; + + a, + a:hover { + color: @site-text-color; + font-size: @font-size-base; + font-weight: 500; + } + } + + a.edit-button { + position: absolute; + right: -16px; + top: 7px; + font-size: 12px; + transform: scale(0.9); + background: #fff; + padding-right: 6px; + text-decoration: none; + } + + &-demo { + border-bottom: 1px solid @site-border-color-split; + padding: 42px 24px 50px; + color: rgba(0, 0, 0, .65); + } + + iframe { + width: 100%; + border: 0; + } + + &-meta { + &.markdown { + position: relative; + padding: 18px 32px; + border-radius: 0 0 @border-radius-sm @border-radius-sm; + transition: background-color .4s; + width: 100%; + font-size: @font-size-base; + } + + blockquote { + margin: 0; + } + + h4, + section& p { + margin: 0; + width: 98%; + } + + > p { + font-size: 12px; + margin: 0.5em 0; + padding-right: 25px; + width: 100%; + word-break: break-word; + } + } + + &.expand &-meta { + border-radius: 0; + border-bottom: 1px dashed @site-border-color-split; + } + + .code-expand-icon { + position: absolute; + right: 16px; + bottom: 23px; + cursor: pointer; + width: 16px; + height: 16px; + line-height: 16px; + text-align: center; + } + + .code-expand-icon-show, + .code-expand-icon-hide { + transition: all 0.4s; + user-select: none; + position: absolute; + left: 0; + top: 0; + margin: 0; + max-width: 100%; + vertical-align: baseline; + box-shadow: none; + } + + .code-expand-icon-show { + opacity: 0.55; + pointer-events: auto; + &:hover { + opacity: 1; + } + } + + .code-expand-icon.ant-tooltip-open .code-expand-icon-show { + opacity: 1; + } + + .code-expand-icon-hide { + opacity: 0; + pointer-events: none; + } + + .highlight-wrapper { + display: none; + overflow: auto; + border-radius: 0 0 @border-radius-sm @border-radius-sm; + + &-expand { + display: block; + } + } + + .highlight { + position: relative; + pre { + margin: 0; + padding: 0; + background: #fff; + } + &:not(:first-child) { + border-top: 1px dashed @site-border-color-split; + } + } + + &-actions { + position: absolute; + top: 10px; + right: 12px; + text-align: right; + > i, + > form { + display: inline-block; + margin-left: 8px; + } + } + + &-code-copy { + font-size: 14px; + cursor: pointer; + color: @site-text-color-secondary; + transition: all .24s; + background: #fff; + width: 20px; + height: 20px; + line-height: 20px; + text-align: center; + border-radius: 20px; + opacity: 0; + + &:hover { + color: @site-text-color-secondary; + transform: scale(1.2); + } + &.anticon-check { + color: @green-6 !important; + font-weight: bold; + } + } + + &-codepen { + background: transparent url("https://gw.alipayobjects.com/zos/rmsportal/OtZslpOjYXijshDERXwc.svg") center / 14px no-repeat; + width: 20px; + height: 20px; + cursor: pointer; + opacity: 0; + transition: all .3s; + border: 0; + text-indent: -9999px; + overflow: hidden; + } + + &-riddle { + background: transparent url("https://gw.alipayobjects.com/zos/rmsportal/DlHbxMCyeuyOrqOdbgik.svg") center / 14px no-repeat; + width: 20px; + height: 20px; + cursor: pointer; + opacity: 0; + transition: all .3s; + border: 0; + text-indent: -9999px; + overflow: hidden; + } + + &-codesandbox { + background: transparent url("https://gw.alipayobjects.com/zos/rmsportal/aaYmtdDyHSCkXyLZVgGK.svg") center / 14px no-repeat; + width: 20px; + height: 20px; + cursor: pointer; + opacity: 0; + transition: all .3s; + border: 0; + text-indent: -9999px; + overflow: hidden; + } + + .highlight-wrapper:hover &-code-copy, + .highlight-wrapper:hover &-codepen, + .highlight-wrapper:hover &-codesandbox, + .highlight-wrapper:hover &-riddle { + opacity: 1; + } + + pre { + margin: 0; + width: auto; + code { + border: none; + background: #fff; + } + } +} diff --git a/site/theme/static/docsearch.less b/site/theme/static/docsearch.less new file mode 100644 index 000000000..47b53d945 --- /dev/null +++ b/site/theme/static/docsearch.less @@ -0,0 +1,22 @@ +.algolia-autocomplete { + .ds-dropdown-menu { + border: none; + box-shadow: @box-shadow-base; + + [class^="ds-dataset-"] { + border: none; + } + + &:before { + display: none; + } + } + + .algolia-docsearch-suggestion--title { + color: @site-text-color; + } + + .algolia-docsearch-suggestion--highlight { + color: @primary-color; + } +} diff --git a/site/theme/static/footer.less b/site/theme/static/footer.less new file mode 100644 index 000000000..b8f16fbd8 --- /dev/null +++ b/site/theme/static/footer.less @@ -0,0 +1,71 @@ +@import './colors'; + +@padding-space: 144px; + +footer { + clear: both; + font-size: 14px; + background-color: #000; + position: relative; + z-index: 100; + color: rgba(255, 255, 255, 0.65); + box-shadow: 0 1000px 0 1000px #fff; + .ant-row { + text-align: center; + .footer-center { + display: inline-block; + text-align: left; + > h2 { + font-size: 16px; + margin: 0 auto 24px; + font-weight: 500; + position: relative; + + > .title-icon { + width: 27px; + margin-right: 16px; + } + > .anticon { + font-size: 16px; + position: absolute; + left: -22px; + top: 3px; + color: #aaa; + } + } + > div { + margin: 12px 0; + } + } + } + .footer-wrap { + position: relative; + padding: 86px @padding-space 93px @padding-space; + border-bottom: 1px solid rgba(255, 255, 255, 0.25); + } + .bottom-bar { + text-align: right; + padding: 16px @padding-space; + margin: 0; + line-height: 32px; + overflow: hidden; + a { + color: rgba(255, 255, 255, 0.65); + &:hover { + color: #fff; + } + } + .translate-button { + text-align: left; + } + } + a { + color: rgba(255, 255, 255, 0.9); + } + h2 { + color: rgba(255, 255, 255, 1); + & > span { + color: rgba(255, 255, 255, 1); + } + } +} diff --git a/site/theme/static/header.less b/site/theme/static/header.less new file mode 100644 index 000000000..174771cc9 --- /dev/null +++ b/site/theme/static/header.less @@ -0,0 +1,144 @@ +@header-height: 64px; +@menu-item-border: 2px; + +#header { + transition: all 0.3s; + background: #fff; + box-shadow: 0 2px 8px rgba(240, 241, 242, 65); + position: relative; + z-index: 10; + max-width: 100%; + &.home-nav-bottom { + background: rgba(255, 255, 255, 0.9); + border-bottom-color: #ebedee; + .search { + border-left-color: #ebedee; + } + a { + color: @site-text-color; + } + } + + .header-link { + color: @site-text-color; + } + + .ant-menu-item-active .header-link { + color: @primary-color; + } +} + +#logo { + overflow: hidden; + padding-left: 40px; + float: left; + height: @header-height; + line-height: @header-height; + text-decoration: none; + white-space: nowrap; + img { + height: 32px; + margin-right: 16px; + } + img + img { + height: 16px; + position: relative; + top: 1px; + } +} + +#search-box { + border-left: 1px solid @site-border-color-split; + float: left; + height: 22px; + line-height: 22px; + padding-left: 16px; + margin: 22px auto 0; +} + +#search-box .anticon { + color: #ced4d9; + position: relative; + top: 0.5px; +} + +#search-box input { + font-size: 14px; + margin-top: -5px; + width: 200px; + border: 0; + box-shadow: none; + background: transparent; + + &::placeholder { + color: #a3b1bf; + } +} + +.header-lang-button, +.version { + float: right; + margin-top: 20px; + margin-left: 16px; +} + +.header-lang-button { + color: @text-color; + border-color: @border-color-base; + margin-right: 40px; +} + +#nav { + border: 0; + float: right; + font-size: 14px; + font-family: Lato, @font-family; + &.ant-menu-horizontal { + border-bottom: none; + + & > .ant-menu-item { + height: @header-height; + line-height: @header-height - @menu-item-border - 2px; + min-width: 72px; + border-top: @menu-item-border solid transparent; + + &:hover { + border-top: @menu-item-border solid @primary-color; + border-bottom: @menu-item-border solid transparent; + } + } + + & > .ant-menu-item-selected { + border-top: @menu-item-border solid @primary-color; + border-bottom: @menu-item-border solid transparent; + a { + color: @primary-color; + } + } + } + + & > .ant-menu-item { + text-align: center; + } +} + +.component-select { + &.ant-select-dropdown { + border: 0; + border-radius: 0; + box-shadow: 0 0 8px rgba(0, 0, 0, 0.25); + font-size: 14px; + } + .ant-select-dropdown-menu { + max-height: 200px; + } + .ant-select-dropdown-menu-item { + border-radius: 0 !important; + } + .ant-component-decs { + font-size: 12px; + position: absolute; + color: #aaa; + right: 16px; + } +} diff --git a/site/theme/static/highlight.less b/site/theme/static/highlight.less new file mode 100644 index 000000000..0866e387c --- /dev/null +++ b/site/theme/static/highlight.less @@ -0,0 +1,153 @@ +/** +* prism.js default theme for JavaScript, CSS and HTML +* Based on dabblet (http://dabblet.com) +* @author Lea Verou +*/ + +pre code { + display: block; + background: white; + color: @site-text-color; + line-height: 2; + border: 1px solid #e9e9e9; + padding: 16px 32px; + border-radius: @border-radius-sm; + font-size: @font-size-base; + white-space: pre; + font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; +} + +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 12px 20px; + margin: 16px 0; + overflow: auto; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #f2f4f5; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #f81d22; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #0b8235; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #0b8235; +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #008dff; +} + +.token.function { + color: #f81d22; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/site/theme/static/home.less b/site/theme/static/home.less new file mode 100644 index 000000000..239064832 --- /dev/null +++ b/site/theme/static/home.less @@ -0,0 +1,366 @@ +@home-bg-color: #2f54eb; +@home-text-color: #314659; + +.home-page-wrapper { + width: 100%; + padding: 0; + overflow: hidden; + position: relative; // will-change: transform; + color: @home-text-color; + font-family: Avenir, @font-family; + .page { + width: 100%; + max-width: 1200px; + margin: auto; + position: relative; + padding: 0 24px; + h2 { + font-size: 38px; + line-height: 46px; + color: @home-text-color; + text-align: center; + font-weight: 400; + margin: 140px auto 100px; + } + h1, + h2, + h3, + h4, + p { + will-change: transform; + } + } +} + +.banner-bg { + &-wrapper { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + overflow: hidden; + } + width: 120%; + height: 200px; + background: @home-bg-color; + position: absolute; + bottom: -200px; + left: 0%; + transform-origin: 0; + transform: rotate(-4deg); +} + +.banner { + display: flex; + align-items: center; + height: 576px; + &-wrapper { + overflow: initial; + position: relative; + z-index: 1; + } + .text-wrapper { + width: 54%; + max-width: 560px; + min-height: 336px; + color: #0d1a26; + > * { + will-change: transform; + } + h1 { + font-size: 68px; + font-weight: 600; + line-height: 76px; + margin: 8px 0 28px; + letter-spacing: 0; + font-family: Avenir, @font-family; + } + p { + font-size: 20px; + line-height: 40px; + color: @home-text-color; + } + } + + .img-wrapper { + width: 46%; + max-width: 482px; + position: absolute; + right: 0; + bottom: 26px; + } + + .banner-btns { + display: flex; + align-items: center; + margin-top: 24px; + } + + .banner-btn { + padding: 0 24px; + border-radius: 100px; + font-size: 16px; + line-height: 38px; + display: inline-block; + height: 40px; + text-align: center; + margin-right: 16px; + text-decoration: none; + border: 1px solid #2f54eb; + } + + .banner-btn.components { + background: #2f54eb; + color: #fff; + } + + .banner-btn.language { + color: #2f54eb; + } +} + +svg { + display: block; + g { + transform-origin: 50%; + transform-box: fill-box; + } +} + +/** page1 **/ + +.page1 { + min-height: 784px; + background: @home-bg-color; + background: linear-gradient(to bottom, rgba(47, 84, 235, 1) 0%, rgba(58, 64, 212, 1) 100%); + h2 { + color: #fff !important; + } + &-block { + max-width: 160px; + text-align: center; + margin: auto; + display: block; + position: relative; + z-index: 1; + h3 { + color: #fff; + font-size: 20px; + font-weight: 400; + } + p { + color: #fff; + } + &:hover .page1-image { + transform: translateY(-4px); + box-shadow: 0 6px 10px rgba(5, 26, 180, .35); + } + } + &-image { + width: 120px; + height: 120px; + background: #fff; + border-radius: 100%; + display: flex; + align-items: center; + justify-content: center; + margin: 46px auto 40px; + transition: transform .45s @ease-out, box-shadow .45s @ease-out; + img { + display: block; + } + } + &-point-wrapper { + position: absolute; + top: 0; + left: 0; + right: 0; + margin: auto; + overflow: inherit !important; + } +} + +/** page2 **/ + +.page2 { + background: #eff3f6; + min-height: 1110px; + overflow: initial; + padding-top: 1px; + .page { + position: relative; + z-index: 1; + h2 { + margin-bottom: 142px; + } + } + &-content { + box-shadow: 0 12px 20px #d8e0e6; + background: @home-bg-color; + } + &-components, + &-product { + min-height: 554px; + } + &-components { + position: initial; + background: @home-bg-color; + padding: 56px; + color: #fff; + line-height: 32px; + h3 { + font-size: 28px; + margin: 0 auto 32px; + color: #fff; + } + .components-button-wrapper { + position: absolute; + bottom: 48px; + left: 56px; + a { + display: block; + color: #fff; + line-height: 1.5em; + margin-top: 16px; + } + } + } + &-product { + background: #fff; + padding: 48px 56px; + .product-block { + margin-bottom: 34px; + cursor: pointer; + color: @home-text-color; + &:last-child { + margin-bottom: 0; + .block-text-wrapper { + padding-bottom: 0; + border-bottom: none; + } + } + .block-text-wrapper { + padding-bottom: 35px; + position: relative; + border-bottom: 1px solid #ebedf0; + h4 { + font-size: 20px; + line-height: 28px; + margin-bottom: 8px; + } + p { + line-height: 24px; + margin-bottom: 24px; + } + .more { + display: inline-block; + line-height: 22px; + color: @home-bg-color; + vertical-align: top; + i { + font-size: 12px; + vertical-align: middle; + } + } + } + .block-image-wrapper { + height: 104px; + display: flex; + align-items: center; + img { + display: block; + max-width: 80%; + } + &.right { + float: right; + justify-content: flex-end; + } + } + &:hover { + h4 { + color: @home-bg-color; + } + } + } + } +} + +.parallax-bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 2; + pointer-events: none; + &.bottom { + z-index: 0; + } + &.top { + margin-top: 220px; + display: flex; + justify-content: center; + svg { + overflow: inherit; + } + } +} + +/** page3 **/ + +.page3 { + min-height: 556px; + &-block { + padding: 24px 12px; + a { + display: flex; + justify-content: center; + color: @home-text-color; + text-decoration: none; + } + &:hover { + h3 { + color: @home-bg-color; + } + } + } + &-img-wrapper, + &-text-wrapper { + display: inline-block; + } + &-text-wrapper { + // max-width: 182px; + margin-left: 32px; + line-height: 24px; + margin-top: 2px; + h3 { + font-size: 20px; + line-height: 28px; + margin-bottom: 4px; + } + } + .parallax-bg.top { + margin: 0; + } +} + +/** video **/ + +.new-version-video { + position: fixed; + top: 0; + left: 0; + z-index: 9999; + width: 100vw; + height: 100vh; + background: #fbfbfb; + .vidoe-wrap { + background: url('https://gw.alipayobjects.com/zos/rmsportal/gEeRuETmbpAYRaeilexm.jpg') repeat-x; + background-size: cover; + width: 100%; + video { + display: block; + } + } +} diff --git a/site/theme/static/icons.less b/site/theme/static/icons.less new file mode 100644 index 000000000..4297c7a35 --- /dev/null +++ b/site/theme/static/icons.less @@ -0,0 +1,66 @@ +ul.anticons-list { + margin: 40px 0; + list-style: none; + overflow: hidden; + li { + float: left; + width: 16.66%; + text-align: center; + list-style: none; + cursor: pointer; + height: 100px; + color: #555; + transition: all .3s; + position: relative; + margin: 3px 0; + border-radius: 4px; + background-color: #fff; + overflow: hidden; + padding: 10px 0 0; + + .anticon { + font-size: 24px; + margin: 12px 0 16px; + transition: all .3s; + } + + .anticon-class { + display: block; + text-align: center; + transform: scale(0.83); + font-family: "Lucida Console", Consolas; + white-space: nowrap; + } + + &:hover { + background-color: @primary-color; + color: #fff; + .anticon { + transform: scale(1.4); + } + } + + &.copied:hover { + color: rgba(255, 255, 255, 0.2); + } + + &:after { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + content: "Copied!"; + text-align: center; + line-height: 110px; + color: #fff; + transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); + opacity: 0; + } + + &.copied:after { + opacity: 1; + top: -10px; + } + } +} diff --git a/site/theme/static/index.less b/site/theme/static/index.less new file mode 100644 index 000000000..07b643d90 --- /dev/null +++ b/site/theme/static/index.less @@ -0,0 +1,22 @@ +@import '../../../components/style/v2-compatible-reset.less'; +@import '../../../components/style/themes/default.less'; +@import './common'; +@import './header'; +@import './footer'; +@import './home'; +@import './page-nav'; +@import './markdown'; +@import './resource'; +@import './preview-img'; +@import './toc'; +@import './not-found'; +@import './highlight'; +@import './demo'; +@import './colors'; +@import './icons'; +@import './mock-browser'; +@import './new-version-info-modal'; +@import './motion'; +@import './responsive'; +@import './theme'; +@import './docsearch'; diff --git a/site/theme/static/markdown.less b/site/theme/static/markdown.less new file mode 100644 index 000000000..76970bb45 --- /dev/null +++ b/site/theme/static/markdown.less @@ -0,0 +1,325 @@ +.markdown { + color: @site-text-color; + font-size: 14px; + line-height: 2; +} + +.highlight { + line-height: 1.5; +} + +.markdown img { + max-width: ~"calc(100% - 32px)"; +} + +.markdown p > img { + margin: 34px 0; + box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35); +} + +.markdown h1 { + color: @site-heading-color; + font-weight: 500; + margin-bottom: 20px; + margin-top: 8px; + font-family: Lato, @font-family; + font-size: 30px; + line-height: 38px; + + .subtitle { + margin-left: 12px; + } +} + +.markdown h2 { + font-size: 24px; + line-height: 32px; +} + +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + color: @site-heading-color; + font-family: Lato, @font-family; + margin: 1.6em 0 0.6em; + font-weight: 500; + clear: both; +} + +.markdown h3 { font-size: 18px; } +.markdown h4 { font-size: 16px; } +.markdown h5 { font-size: 14px; } +.markdown h6 { font-size: 12px; } + +.markdown hr { + height: 1px; + border: 0; + background: @site-border-color-split; + margin: 72px 0; + clear: both; +} + +.markdown p, +.markdown pre { + margin: 1em 0; +} + +.markdown ul > li { + list-style-type: circle; + margin-left: 20px; + padding-left: 4px; + &:empty { + display: none; + } +} + +.markdown ol > li { + list-style-type: decimal; + margin-left: 20px; + padding-left: 4px; +} + +.markdown ul > li > p, +.markdown ol > li > p { + margin: 0.2em 0; +} + +.markdown code { + margin: 0 1px; + background: #f2f4f5; + padding: .2em .4em; + border-radius: 3px; + font-size: .9em; + border: 1px solid #eee; +} + +.markdown pre { + border-radius: @border-radius-sm; + background: #f2f4f5; + font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; +} + +.markdown pre code { + border: none; + background: #f2f4f5; + margin: 0; + padding: 0; + font-size: @font-size-base - 1px; + color: @site-text-color; + overflow: auto; +} + +.markdown strong, +.markdown b { + font-weight: 500; +} + +.markdown > table { + border-collapse: collapse; + border-spacing: 0; + empty-cells: show; + border: 1px solid @site-border-color-split; + width: 100%; + margin: 8px 0 16px; +} + +.markdown > table th { + white-space: nowrap; + color: #5c6b77; + font-weight: 500; + background: rgba(0, 0, 0, 0.02); +} + +.markdown > table th, +.markdown > table td { + border: 1px solid @site-border-color-split; + padding: 16px 24px; + text-align: left; +} + +.markdown blockquote { + font-size: 90%; + color: @site-text-color-secondary; + border-left: 4px solid @site-border-color-split; + padding-left: 0.8em; + margin: 1em 0; +} + +.markdown blockquote p { + margin: 0; +} + +.markdown .anchor { + opacity: 0; + transition: opacity 0.3s ease; + margin-left: 8px; +} + +.markdown .waiting { + color: #ccc; + cursor: not-allowed; +} + +.markdown a.edit-button { + line-height: 12px; + display: inline-block; + margin-left: 10px; + height: 12px; + text-decoration: none; + font-weight: 400; + + i { + color: @site-text-color-secondary; + + &:hover { + color: @primary-color; + } + } + + .anticon { + display: block; + font-size: 16px; + } +} + +.markdown h1:hover .anchor, +.markdown h2:hover .anchor, +.markdown h3:hover .anchor, +.markdown h4:hover .anchor, +.markdown h5:hover .anchor, +.markdown h6:hover .anchor { + opacity: 1; + display: inline-block; +} + +.markdown > br, +.markdown > p > br { + clear: both; +} + +.markdown.api-container table { + font-size: @font-size-base; + line-height: @line-height-base; + td:first-child { + font-weight: 500; + width: 20%; + font-family: "Lucida Console", Consolas, Menlo, Courier, monospace; + } + td:nth-child(3) { + width: 22%; + font-size: 12px; + font-family: "Lucida Console", Consolas, Menlo, Courier, monospace; + } + td:last-child { + width: 13%; + font-size: 12px; + font-family: "Lucida Console", Consolas, Menlo, Courier, monospace; + } +} + +.grid-demo, +[id^="components-grid-demo-"] { + .demo-row, + .code-box-demo .demo-row { + background-image: linear-gradient(90deg, #f5f5f5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #f5f5f5 8.33333333%, #f5f5f5 12.5%, transparent 12.5%, transparent 16.66666667%, #f5f5f5 16.66666667%, #f5f5f5 20.83333333%, transparent 20.83333333%, transparent 25%, #f5f5f5 25%, #f5f5f5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #f5f5f5 33.33333333%, #f5f5f5 37.5%, transparent 37.5%, transparent 41.66666667%, #f5f5f5 41.66666667%, #f5f5f5 45.83333333%, transparent 45.83333333%, transparent 50%, #f5f5f5 50%, #f5f5f5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #f5f5f5 58.33333333%, #f5f5f5 62.5%, transparent 62.5%, transparent 66.66666667%, #f5f5f5 66.66666667%, #f5f5f5 70.83333333%, transparent 70.83333333%, transparent 75%, #f5f5f5 75%, #f5f5f5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #f5f5f5 83.33333333%, #f5f5f5 87.5%, transparent 87.5%, transparent 91.66666667%, #f5f5f5 91.66666667%, #f5f5f5 95.83333333%, transparent 95.83333333%); + overflow: hidden; + margin-bottom: 8px; + } + .ant-row-flex, + .code-box-demo .ant-row-flex { + background: #f5f5f5; + } + .ant-row > div, + .code-box-demo .ant-row > div, + .ant-row-flex > div, + .code-box-demo .ant-row-flex > div { + padding: 5px 0; + text-align: center; + border-radius: 0; + min-height: 30px; + margin-top: 8px; + margin-bottom: 8px; + color: #fff; + } + .code-box-demo .ant-row > div:not(.gutter-row), + .code-box-demo .ant-row-flex > div:not(.gutter-row) { + background: #00a0e9; + padding: 16px 0; + &:nth-child(2n+1) { + background: fade(#00a0e9, 70%); + } + } + .ant-row .demo-col, + .code-box-demo .ant-row .demo-col { + text-align: center; + padding: 30px 0; + color: #fff; + font-size: 18px; + border: none; + margin-top: 0; + margin-bottom: 0; + } + .ant-row .demo-col-1, + .ant-row .demo-col-1 { + background: fade(#00a0e9, 70%); + } + .ant-row .demo-col-2, + .code-box-demo .ant-row .demo-col-2 { + background: fade(#00a0e9, 50%); + } + .ant-row .demo-col-3, + .code-box-demo .ant-row .demo-col-3 { + background: rgba(255, 255, 255, 0.2); + color: #999; + } + .ant-row .demo-col-4, + .code-box-demo .ant-row .demo-col-4 { + background: fade(#00a0e9, 60%); + } + .ant-row .demo-col-5, + .code-box-demo .ant-row .demo-col-5 { + background: rgba(255, 255, 255, 0.5); + color: #999; + } + .code-box-demo .height-100 { + height: 100px; + line-height: 100px; + } + .code-box-demo .height-50 { + height: 50px; + line-height: 50px; + } + .code-box-demo .height-120 { + height: 120px; + line-height: 120px; + } + .code-box-demo .height-80 { + height: 80px; + line-height: 80px; + } +} + +// For Changelog +.markdown ul.ant-timeline { + line-height: 2; + li.ant-timeline-item { + list-style: none; + margin: 0; + padding: 0 0 30px; + .ant-timeline-item-content { + font-size: 14px; + padding-left: 32px; + position: relative; + top: -14px; + > h2 { + margin-top: 0; + padding-top: 2px; + } + } + } + li.ant-timeline-item:first-child { + margin-top: 40px; + } +} diff --git a/site/theme/static/mock-browser.less b/site/theme/static/mock-browser.less new file mode 100644 index 000000000..3350cca41 --- /dev/null +++ b/site/theme/static/mock-browser.less @@ -0,0 +1,53 @@ +/* Browser mockup code + * Contribute: https://gist.github.com/jarthod/8719db9fef8deb937f4f + * Live example: https://updown.io + */ + +.browser-mockup { + border-top: 2em solid rgba(230, 230, 230, 0.7); + box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28); + position: relative; + border-radius: 3px 3px 0 0; +} + +.browser-mockup:before { + display: block; + position: absolute; + content: ''; + top: -1.25em; + left: 1em; + width: 0.5em; + height: 0.5em; + border-radius: 50%; + background-color: #f44; + box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5; +} + +.browser-mockup.with-tab:after { + display: block; + position: absolute; + content: ''; + top: -2em; + left: 5.5em; + width: 20%; + height: 0; + border-bottom: 2em solid white; + border-left: 0.8em solid transparent; + border-right: 0.8em solid transparent; +} + +.browser-mockup.with-url:after { + display: block; + position: absolute; + content: ''; + top: -1.6em; + left: 5.5em; + width: ~"calc(100% - 6em)"; + height: 1.2em; + border-radius: 2px; + background-color: white; +} + +.browser-mockup > * { + display: block; +} diff --git a/site/theme/static/motion.less b/site/theme/static/motion.less new file mode 100644 index 000000000..7d3ac6884 --- /dev/null +++ b/site/theme/static/motion.less @@ -0,0 +1,39 @@ +.motion-container { + height: 190px; + line-height: 190px; + text-align: center; + margin: 40px 0 20px; +} + +.motion-example { + width: 180px; + height: 180px; + line-height: 180px; + font-size: 18px; + color: #fff; + text-align: center; + display: inline-block !important; + border-radius: 8px; + animation-duration: 0.5s !important; + font-weight: bold; + background: url(https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg) center/180px; +} + +.motion-select-wrapper { + text-align: center; + margin-bottom: 40px; +} + +.motion-select { + text-align: left; + width: 180px; +} + +.video-player { + position: relative; + max-width: 800px; + &-right { + width: 616px; + float: right; + } +} diff --git a/site/theme/static/new-version-info-modal.less b/site/theme/static/new-version-info-modal.less new file mode 100644 index 000000000..e8b044df6 --- /dev/null +++ b/site/theme/static/new-version-info-modal.less @@ -0,0 +1,23 @@ +.new-version-info-modal { + img { + width: 100px; + position: absolute; + left: 34px; + top: 36px; + } + p { + margin-top: 1em; + } + .anticon { + display: none; + } + .ant-confirm-body { + .ant-confirm-title { + font-size: 18px; + } + margin-left: 120px; + .ant-confirm-content { + margin-left: 0; + } + } +} diff --git a/site/theme/static/not-found.less b/site/theme/static/not-found.less new file mode 100644 index 000000000..51235ca8f --- /dev/null +++ b/site/theme/static/not-found.less @@ -0,0 +1,35 @@ +#page-404 { + background-image: url('https://os.alipayobjects.com/rmsportal/NOAjOBbnYCrNzrW.jpg'); + width: 100%; + height: 100%; + background-repeat: no-repeat; + background-attachment: fixed; + background-position: center; + background-size: 100%; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 100; + + section { + position: absolute; + top: 48%; + left: 55%; + margin: -103px 0 0 -120px; + + text-align: center; + } + + h1 { + color: @primary-color; + font-size: 120px; + font-weight: 500; + } + + p { + color: @site-text-color; + font-size: 18px; + } +} diff --git a/site/theme/static/nprogress.less b/site/theme/static/nprogress.less new file mode 100644 index 000000000..2bde8229c --- /dev/null +++ b/site/theme/static/nprogress.less @@ -0,0 +1,62 @@ +/* Make clicks pass-through */ +#nprogress { + pointer-events: none; +} + +#nprogress .bar { + background: @primary-color; + position: fixed; + z-index: 1031; + top: 0; + left: 0; + width: 100%; + height: 2px; + border-radius: 10px; +} + +/* Fancy blur effect */ +#nprogress .peg { + display: block; + position: absolute; + right: 0; + width: 100px; + height: 100%; + box-shadow: 0 0 10px @primary-color, 0 0 5px @primary-color; + opacity: 1; + transform: rotate(3deg) translate(0, -4px); +} + +/* Remove these to get rid of the spinner */ +#nprogress .spinner { + display: block; + position: fixed; + z-index: 1031; + top: 15px; + right: 15px; +} + +#nprogress .spinner-icon { + width: 18px; + height: 18px; + box-sizing: border-box; + border: solid 2px transparent; + border-top-color: @primary-color; + border-left-color: @primary-color; + border-radius: 50%; + animation: nprogress-spinner 400ms linear infinite; +} + +.nprogress-custom-parent { + overflow: hidden; + position: relative; +} + +.nprogress-custom-parent #nprogress .spinner, +.nprogress-custom-parent #nprogress .bar { + position: absolute; +} + +@keyframes nprogress-spinner { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} diff --git a/site/theme/static/page-nav.less b/site/theme/static/page-nav.less new file mode 100644 index 000000000..234df6b08 --- /dev/null +++ b/site/theme/static/page-nav.less @@ -0,0 +1,61 @@ +.prev-next-nav { + position: absolute; + bottom: 0; + left: 0; + width: ~"calc(100% - 194px - 64px)"; + margin-left: 64px; + font-size: 14px; + border-top: 1px solid @site-border-color-split; + + > .prev-page, + > .next-page { + width: 50%; + float: left; + line-height: 72px; + height: 72px; + text-decoration: none; + } + + > a.prev-page { + &:before { + font-family: 'anticon'; + content: '\e61c'; + font-size: 12px; + margin-right: 1em; + color: @site-text-color-secondary; + transition: all .3s; + position: relative; + left: 0; + } + + &:hover:before { + color: @primary-color; + left: -3px; + } + } + + > .next-page { + text-align: right; + float: right; + + &:after { + font-family: 'anticon'; + content: '\e61b'; + font-size: 12px; + margin-left: 1em; + color: @site-text-color-secondary; + transition: all .3s; + position: relative; + right: 0; + } + + &:hover:after { + color: @primary-color; + right: -3px; + } + } + + .chinese { + margin-left: 0.5em; + } +} diff --git a/site/theme/static/preview-img.less b/site/theme/static/preview-img.less new file mode 100644 index 000000000..05410b0dd --- /dev/null +++ b/site/theme/static/preview-img.less @@ -0,0 +1,159 @@ +.preview-image-boxes { + display: flex; + float: right; + margin: 0 0 70px 64px; + width: 496px; + clear: both; + + &-with-carousel { + width: 420px; + + .preview-image-box img { + padding: 0; + } + } +} + +.preview-image-boxes + .preview-image-boxes { + margin-top: -35px; +} + +.preview-image-box { + width: 100%; + float: left; +} + +.preview-image-box + .preview-image-box { + margin-left: 24px; +} + +.preview-image-wrapper { + background: #f2f4f5; + padding: 16px; + display: inline-block; + text-align: center; + width: 100%; + position: relative; +} + +.preview-image-wrapper.video { + padding: 0; + background: 0; + display: block; +} + +.preview-image-wrapper video { + width: 100%; + display: block; + + svg { + position: absolute; + top: 0; + left: 0; + } +} + +.preview-image-wrapper.good:after { + content: ''; + width: 100%; + height: 3px; + background: @primary-color; + display: block; + position: absolute; + bottom: 0; + left: 0; +} + +.preview-image-wrapper.bad:after { + content: ''; + width: 100%; + height: 3px; + background: @error-color; + display: block; + position: absolute; + bottom: 0; + left: 0; +} + +.preview-image-title { + font-size: 12px; + margin-top: 5px; + color: @site-text-color; +} + +.preview-image-description { + font-size: 12px; + margin-top: 2px; + color: @site-text-color-secondary; + line-height: 1.5; +} + +.preview-image-description hr { + margin: 2px 0; + border: 0; + background: none; +} + +.preview-image-box img { + cursor: pointer; + max-width: 100%; + transition: all .3s; + background: #fff; + padding: 12px; + border-radius: @border-radius-base; + &.no-padding { + padding: 0; + background: none; + } +} + +.preview-image-boxes.preview-image-boxes-with-carousel img { + padding: 0; + box-shadow: 0 1px 0 0 #ddd, 0 3px 0 0 #fff, 0 4px 0 0 #ddd, 0 6px 0 0 #fff, 0 7px 0 0 #ddd; +} + +.preview-image-box img:hover { + box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3); +} + +.image-modal { + text-align: center; + + &-container { + position: relative; + text-align: center; + } + + .ant-carousel { + .slick-slider { + padding-bottom: 24px; + img { + display: inline; + max-width: 100%; + } + } + .slick-dots { + bottom: 4px; + li button { + background: #888; + } + } + } + + .image-modal-single.slick-slider { + padding-bottom: 0; + } + + .image-modal-single .slick-dots { + display: none !important; + } +} + +.transition-video-player { + float: right; + padding: 0 0 70px 20px; + width: 600px; + + .preview-image-wrapper { + padding: 0; + } +} diff --git a/site/theme/static/resource.less b/site/theme/static/resource.less new file mode 100644 index 000000000..b8ec2ec1c --- /dev/null +++ b/site/theme/static/resource.less @@ -0,0 +1,71 @@ +.resource-cards { + display: flex; + flex-flow: wrap; + width: 100%; +} + +.resource-card { + display: flex; + max-width: 420px; + width: ~"calc(50% - 24px)"; + min-width: 300px; + height: 130px; + border: 1px solid @border-color-base; + border-radius: @border-radius-base; + font-size: 12px; + color: #777; + margin: 24px 24px 0 0; + vertical-align: middle; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.resource-card:hover { + box-shadow: 0 3px 8px #d3ddeb; + border-color: transparent; +} + +.resource-card:hover .resource-card-title { + color: @primary-color; +} + +.resource-card.disabled { + opacity: 0.45; + pointer-events: none; +} + +.resource-card-cover, .resource-card-icon { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + width: 130px; +} + +.resource-card-cover img { + width: 68px; +} + +.resource-card-content { + display: flex; + flex-flow: column; + justify-content: center; +} + +.resource-card-title { + display: block; + font-size: 16px; + color: @site-text-color; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + line-height: 1.2; + margin-bottom: 6px; +} + +.resource-card-description { + display: block; + color: #697b8c; + padding-right: 16px; +} diff --git a/site/theme/static/responsive.less b/site/theme/static/responsive.less new file mode 100644 index 000000000..2ab70df8c --- /dev/null +++ b/site/theme/static/responsive.less @@ -0,0 +1,369 @@ +@import "../../../components/style/themes/default.less"; + +.nav-phone-icon { + display: none; + position: absolute; + right: 30px; + top: 25px; + z-index: 1; + width: 16px; + height: 22px; + cursor: pointer; +} + +@media only screen and (min-width: 1440px) and (max-width: 1599px) { + .main-wrapper > .ant-row > .ant-col-xl-5 { + width: 274px; + } + + #header .ant-row .ant-col-xl-5 { + width: 274px; + } +} + +@media only screen and (max-width: 1280px) { + .en-us #search-box { + display: none; + } +} + +@media only screen and (max-width: @screen-xl) { + #search-box { + display: none; + } + #logo { + padding: 0 40px; + } + .banner-wrapper .banner-title-wrapper { + h1 { + font-size: 36px; + } + p { + font-size: 16px; + } + } +} + +@media only screen and (max-width: 767.99px) { + #header { + text-align: center; + #logo { + float: initial; + } + } + #search-box { + display: none; + } + .code-boxes-col-2-1, .code-boxes-col-1-1 { + float: none; + width: 100%; + } + .preview-image-boxes { + margin: 0 !important; + float: none; + width: 100%; + } + .preview-image-box { + padding-left: 0; + margin: 10px 0; + } + + .image-wrapper { + display: none; + } + + div.version { + display: block; + margin: 29px auto 16px; + } + + .popover-menu { + width: 300px; + div.version { + margin: 16px auto; + } + .ant-popover-inner { + overflow: hidden; + &-content { + padding: 0; + .ant-select { + width: 60%; + display: block; + } + .ant-btn { + margin: 16px 8% 0 8px; + } + } + } + #nav a.header-link { + color: #333; + } + } + + ul#nav, + ul#nav li { + width: 100%; + font-size: 14px; + } + + ul#nav li { + line-height: 40px; + height: 40px; + padding: 0 !important; + border: 0; + a { + color: #333; + } + } + + .toc { + display: none; + } + + .nav-phone-icon { + display: block; + } + + .nav-phone-icon:before { + content: ""; + display: block; + border-radius: 2px; + width: 16px; + height: 2px; + background: #777; + box-shadow: 0 6px 0 0 #777, 0 12px 0 0 #777; + position: absolute; + } + + .main { + height: calc(100% - 86px); + } + + .aside-container { + float: none; + width: auto; + padding-bottom: 30px; + border-right: 0; + } + + .main-container { + padding-left: 16px; + padding-right: 16px; + margin-right: 0; + > .markdown > * { + width: 100% !important; + } + } + + .main-wrapper { + width: 100%; + border-radius: 0; + margin: 0; + } + + #footer { + text-align: center; + .footer-wrap { + padding: 40px; + .ant-row { + padding: 0; + > div { + &:nth-child(2), + &:nth-child(4) { + display: none; + } + a { + font-weight: 300; + } + } + } + } + .footer-center { + text-align: center; + } + h2 { + margin-top: 16px; + } + .bottom-bar { + padding: 16px; + + text-align: center; + .translate-button { + width: auto; + text-align: center; + margin-bottom: 16px; + } + > div > span { + display: block; + &:nth-child(1), &:nth-child(2) { + display: none; + } + } + } + } + + .prev-next-nav { + margin-left: 16px; + width: ~"calc(100% - 32px)"; + } + + .drawer { + .ant-menu-inline .ant-menu-item:after, + .ant-menu-vertical .ant-menu-item:after { + left: 0; + right: auto; + } + } + + #_hj_feedback_container { + display: none; + } + /** home 区块 **/ + .home-page-wrapper { + .page { + h2 { + margin: 80px auto 64px; + } + } + .parallax-bg { + display: none; + } + } + .banner { + display: block; + height: 632px; + &-bg-wrapper { + display: none; + } + .img-wrapper, + .text-wrapper { + width: 100%; + display: inline-block; + text-align: center; + margin: auto; + } + .img-wrapper { + position: initial; + margin-top: 48px; + svg { + width: 100%; + height: auto; + } + } + .text-wrapper { + margin-top: 48px; + min-height: 200px; + padding: 0 16px; + h1 { + display: none; + } + p { + font-size: 14px; + line-height: 28px; + color: @home-text-color; + } + } + } + .page1 { + min-height: 1538px; + .ant-row { + margin: 24px auto 64px; + >div { + margin-bottom: 48px; + } + } + } + .page2 { + min-height: 840px; + background: #fff; + &-content { + box-shadow: none; + } + &-components { + display: none; + } + &-product { + min-height: auto; + padding: 0 16px; + .product-block { + padding-bottom: 35px; + margin-bottom: 34px; + border-bottom: 1px solid #ebedf0; + &:last-child { + margin-bottom: 32px; + border-bottom: none; + .block-text-wrapper { + height: auto; + } + } + .block-image-wrapper { + height: 88px; + img { + height: 100%; + } + } + .block-text-wrapper { + border-bottom: none; + padding-bottom: 0; + h4 { + font-size: 18px; + line-height: 24px; + margin-bottom: 4px; + } + p { + font-size: 12px; + margin-bottom: 8px; + line-height: 20px; + } + a { + line-height: 20px; + } + .components-button-wrapper { + font-size: 12px; + margin-top: 16px; + a { + display: block; + } + } + } + } + } + } + .page3 { + min-height: 688px; + background: url('https://gw.alipayobjects.com/zos/rmsportal/qICoJIqqQRMeRGhPHBBS.svg') no-repeat; + background-size: cover; + .ant-row { + margin: 0 8px; + } + .page3-block { + padding: 24px; + background: #fff; + border-radius: 4px; + box-shadow: 0 8px 16px rgba(174, 185, 193, 0.3); + margin-bottom: 32px; + &:nth-child(2) { + .page3-img-wrapper img { + width: 70%; + margin: auto; + display: block; + } + } + p { + font-size: 12px; + } + .page3-img-wrapper { + width: 20%; + img { + width: 100%; + } + } + .page3-text-wrapper { + width: 80%; + margin: 0; + max-width: initial; + padding-left: 16px; + } + } + } +} diff --git a/site/theme/static/theme.less b/site/theme/static/theme.less new file mode 100644 index 000000000..82dae63ad --- /dev/null +++ b/site/theme/static/theme.less @@ -0,0 +1,4 @@ +@site-heading-color: #0d1a26; +@site-text-color: #314659; +@site-text-color-secondary: #697b8c; +@site-border-color-split: #ebedf0; diff --git a/site/theme/static/toc.less b/site/theme/static/toc.less new file mode 100644 index 000000000..f9ccc96be --- /dev/null +++ b/site/theme/static/toc.less @@ -0,0 +1,64 @@ +.toc { + font-size: 12px; + margin: 16px 0; + padding-left: 0; + border-left: 1px solid #ebedf0; + list-style: none; +} + +ul.toc > li { + list-style: none; + margin-left: 0; + padding-left: 0; + line-height: 1.5; + &:not(:last-child) { + margin-bottom: 4px; + } +} + +.toc li > ul { + text-indent: 8px; + font-size: 12px; + display: none; +} + +.toc a { + padding-left: 16px; + display: block; + transition: all 0.3s ease; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: @site-text-color; + width: 110px; + border-left: 1px solid transparent; + margin-left: -1px; +} + +.toc a:hover { + color: @primary-color; +} + +.toc a.current { + border-color: @primary-color; + color: @primary-color; +} + +.toc-affix { + position: absolute; + top: 8px; + right: 20px; + .ant-affix { + background: #fff; + overflow: auto; + max-height: ~"calc(100vh - 16px)"; + } +} +.toc-affix-bottom { + position: absolute; + bottom: 88px; + right: 20px; + .ant-affix { + background: #fff; + } +} diff --git a/site/util.js b/site/util.js new file mode 100644 index 000000000..264a9aafe --- /dev/null +++ b/site/util.js @@ -0,0 +1,3 @@ +export function isZhCN (name) { + return /-cn\/?$/.test(name) +} diff --git a/webpack.base.config.js b/webpack.base.config.js index 5e8c719df..4ca81fcc5 100644 --- a/webpack.base.config.js +++ b/webpack.base.config.js @@ -120,7 +120,7 @@ md.core.ruler.push('update_template', function replace ({ tokens }) { module.exports = { entry: { index: [ - './examples/index.js', + './site/index.js', ], }, module: { diff --git a/webpack.config.js b/webpack.config.js index 6edd58cb3..679b97cbd 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -5,9 +5,15 @@ const merge = require('webpack-merge') const baseWebpackConfig = require('./webpack.base.config') module.exports = merge(baseWebpackConfig, { + entry: { + index: [ + './examples/index.js', + ], + }, output: { path: path.resolve(__dirname, './dist'), - publicPath: '/', + // publicPath: '/', + publicPath: '/ant-design/', filename: 'build.js', }, module: { @@ -37,9 +43,14 @@ module.exports = merge(baseWebpackConfig, { devServer: { port: 3000, host: '0.0.0.0', + // historyApiFallback: { + // rewrites: [ + // { from: /.*/, to: '/index.html' }, + // ], + // }, historyApiFallback: { rewrites: [ - { from: /.*/, to: '/index.html' }, + { from: /./, to: '/ant-design/index.html' }, ], }, disableHostCheck: true, @@ -51,7 +62,7 @@ module.exports = merge(baseWebpackConfig, { devtool: '#source-map', plugins: [ new HtmlWebpackPlugin({ - template: 'examples/index.html', + template: 'site/index.html', filename: 'index.html', inject: true, }), diff --git a/webpack.site.config.js b/webpack.site.config.js index 59ca57af6..f9193df54 100644 --- a/webpack.site.config.js +++ b/webpack.site.config.js @@ -13,8 +13,8 @@ const modulePlugin = new ExtractTextPlugin({ module.exports = merge(baseWebpackConfig, { output: { - path: path.resolve(__dirname, './dist'), - publicPath: './', + path: path.resolve(__dirname, './site-dist'), + publicPath: '/ant-design/', filename: '[name].[chunkhash].js', chunkFilename: '[chunkhash].async.js', }, @@ -74,7 +74,7 @@ module.exports = merge(baseWebpackConfig, { }, }), new HtmlWebpackPlugin({ - template: './examples/index.html', + template: './site/index.html', inject: true, minify: { collapseWhitespace: true }, production: true,