├── noopModule.js ├── styles ├── antdv │ ├── index.less │ └── alert.less ├── config.less ├── toc.less ├── wrapper.less ├── arrow.less ├── nprogress.less ├── pwa.less ├── palette.less ├── mobile.less ├── theme.light.less ├── custom-blocks.less ├── searchbox.less ├── prism-antdv.less ├── code.less ├── theme.dark.less └── index.less ├── store ├── modules │ └── global.js └── index.js ├── enhanceApp.js ├── assets └── search.svg ├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── templates ├── ssr.html └── dev.html ├── layouts ├── 404.vue └── Layout.vue ├── package.json ├── components ├── SidebarCollapse.vue ├── Sidebar.vue ├── NavButton.vue ├── SidebarLinks.vue ├── Page.vue ├── Promo.vue ├── SidebarGroup.vue ├── PageNav.vue ├── PageEdit.vue ├── PageAnchor.vue ├── SidebarLink.vue ├── AlgoliaSearchBox.vue ├── ThemeSwitch.vue ├── Navbar.vue ├── Home.vue └── NavLinks.vue ├── LICENSE ├── global-components └── Badge.vue ├── .npmignore ├── .gitignore ├── README.md ├── index.js └── util └── index.js /noopModule.js: -------------------------------------------------------------------------------- 1 | export default {} 2 | -------------------------------------------------------------------------------- /styles/antdv/index.less: -------------------------------------------------------------------------------- 1 | @import './alert.less'; -------------------------------------------------------------------------------- /styles/config.less: -------------------------------------------------------------------------------- 1 | @contentClass: theme-antdocs-content; 2 | -------------------------------------------------------------------------------- /styles/toc.less: -------------------------------------------------------------------------------- 1 | .table-of-contents { 2 | .badge { 3 | vertical-align: middle; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /store/modules/global.js: -------------------------------------------------------------------------------- 1 | const state = { 2 | navStyle: '', 3 | isCollapsePageAnchor: false, 4 | } 5 | 6 | 7 | export default { 8 | state 9 | } -------------------------------------------------------------------------------- /store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import global from './modules/global' 4 | Vue.use(Vuex) 5 | 6 | export default new Vuex.Store({ 7 | modules: { 8 | global 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /enhanceApp.js: -------------------------------------------------------------------------------- 1 | import store from './store'; 2 | import Antd from 'ant-design-vue'; 3 | import './styles/index.less'; 4 | 5 | export default ({ 6 | Vue, 7 | // options, 8 | // router, 9 | // siteData, 10 | }) => { 11 | Vue.mixin({ store }) 12 | Vue.use(Antd) 13 | } -------------------------------------------------------------------------------- /styles/wrapper.less: -------------------------------------------------------------------------------- 1 | .wrapper() { 2 | max-width: @contentWidth; 3 | margin: 0 auto; 4 | padding: 0 3.5rem; 5 | 6 | @media (max-width: @MQNarrow) { 7 | padding: 0 3rem; 8 | } 9 | 10 | @media (max-width: @MQMobileNarrow) { 11 | padding: 1.6rem; 12 | padding-top: 0; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /styles/arrow.less: -------------------------------------------------------------------------------- 1 | @import './config.less'; 2 | .arrow { 3 | display: inline-block; 4 | transition: transform .25s ease-in-out; 5 | font-size: 14px; 6 | font-weight: 600; 7 | 8 | &.down { 9 | transform: rotate(0deg); 10 | } 11 | 12 | &.right { 13 | transform: rotate(-90deg); 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /styles/nprogress.less: -------------------------------------------------------------------------------- 1 | @nprogressColor: @accentColor; 2 | 3 | #nprogress { 4 | pointer-events: none; 5 | 6 | .bar { 7 | background: @nprogressColor !important; 8 | } 9 | 10 | .peg { 11 | box-shadow: 0 0 10px @nprogressColor, 0 0 5px @nprogressColor !important; 12 | } 13 | 14 | .spinner-icon { 15 | border-top-color: @nprogressColor !important; 16 | border-left-color: @nprogressColor !important; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /assets/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 16 | **Expected behavior** 17 | A clear and concise description of what you expected to happen. 18 | 19 | **System Info** 20 | - VuePress version: 21 | - Antdocs version: 22 | - Node version: 23 | - OS version: 24 | 25 | **Additional context** 26 | Add any other context about the problem here. 27 | -------------------------------------------------------------------------------- /templates/ssr.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{ title }} 7 | 8 | 9 | {{{ userHeadTags }}} 10 | {{{ pageMeta }}} 11 | {{{ renderResourceHints() }}} 12 | {{{ renderStyles() }}} 13 | 14 | 15 | 16 | {{{ renderScripts() }}} 17 | 18 | -------------------------------------------------------------------------------- /styles/pwa.less: -------------------------------------------------------------------------------- 1 | .sw-update-popup{ 2 | border-color: @accentColor !important; 3 | 4 | button{ 5 | line-height: 1.6; 6 | border: 1px solid transparent; 7 | box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015); 8 | cursor: pointer; 9 | user-select: none; 10 | touch-action: manipulation; 11 | border-radius: 4px; 12 | color: rgba(0, 0, 0, 0.65); 13 | background-color: #fff; 14 | border-color: #d9d9d9; 15 | transition: border-color .25s ease-in-out,color .25s ease-in-out; 16 | margin-top: .625rem; 17 | 18 | &:hover, 19 | &:active{ 20 | border-color: @accentColor; 21 | color: @accentColor; 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /styles/antdv/alert.less: -------------------------------------------------------------------------------- 1 | // info 2 | .ant-alert-info{ 3 | background-color: var(--color-primary-light-1); 4 | border: 1px solid transparent; 5 | 6 | span{ 7 | color: var(--color-text-2); 8 | } 9 | } 10 | 11 | // warning 12 | .ant-alert-warning{ 13 | background-color: var(--color-warning-light-1); 14 | border: 1px solid transparent; 15 | 16 | span{ 17 | color: var(--color-text-2); 18 | } 19 | } 20 | 21 | // error 22 | .ant-alert-error{ 23 | background-color: var(--color-danger-light-1); 24 | border: 1px solid transparent; 25 | 26 | span{ 27 | color: var(--color-text-2); 28 | } 29 | } 30 | 31 | // success 32 | .ant-alert-error{ 33 | background-color: var(--color-success-light-1); 34 | border: 1px solid transparent; 35 | 36 | span{ 37 | color: var(--color-text-2); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /layouts/404.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 31 | 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuepress-theme-antdocs", 3 | "title": "AntDocs of VuePress", 4 | "version": "1.4.6", 5 | "description": "An Ant Design style theme for VuePress.", 6 | "main": "index.js", 7 | "keywords": [ 8 | "theme", 9 | "vuepress", 10 | "vuepress-theme", 11 | "antd", 12 | "antdocs", 13 | "ant-design" 14 | ], 15 | "author": "Feng L.H.", 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/zpfz/vuepress-theme-antdocs.git" 19 | }, 20 | "bugs": { 21 | "url": "https://github.com/zpfz/vuepress-theme-antdocs/issues" 22 | }, 23 | "homepage": "https://antdocs.js.org/", 24 | "license": "MIT", 25 | "dependencies": { 26 | "ant-design-vue": "^1.7.8", 27 | "docsearch.js": "^2.5.2", 28 | "less": "^3.10.3", 29 | "less-loader": "^5.0.0", 30 | "lodash": "^4.17.15", 31 | "vuex": "^3.1.3" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /styles/palette.less: -------------------------------------------------------------------------------- 1 | // colors 2 | @accentColor: #3eaf7c; 3 | @primary-color: @accentColor; 4 | 5 | @bodyTextColor: #000000d9; 6 | @textColor: #2a2a2a; 7 | @borderColor: #eaecef; 8 | @codeBgColor: #f2f4f5; 9 | @arrowBgColor: #ccc; 10 | @badgeTipColor: #19be6b; 11 | @badgeWarningColor: #ff9900; 12 | @badgeErrorColor: #ed4014; 13 | 14 | // layout 15 | @navbarHeight: 4rem; 16 | @sidebarWidth: 20rem; 17 | @contentWidth: 1100px; 18 | @contentWidthNoSidebar: 960px; 19 | @homePageWidth: 960px; 20 | 21 | @navbarLogoHeight: 2.125rem; 22 | 23 | // font 24 | @bodyFontSize: 14px; 25 | 26 | // responsive breakpoints 27 | @MQNarrow: 991px; 28 | @MQMobile: 767px; 29 | @MQMobileNarrow: 575px; 30 | 31 | // code 32 | @lineNumbersWrapperWidth: 2.5rem; 33 | @codeLang: js,ts,html,md,vue,c,css,cpp,sass,scss,less,stylus,go,java,sh,yaml,py,docker,dockerfile,makefile; 34 | 35 | // promo 36 | @MobileShow: none; 37 | @PromoStyle1MW: 7.5rem; 38 | 39 | @import (optional) '~@docs/palette.less'; 40 | -------------------------------------------------------------------------------- /components/SidebarCollapse.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 27 | 28 | 46 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Feng L.H. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /global-components/Badge.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 56 | -------------------------------------------------------------------------------- /styles/mobile.less: -------------------------------------------------------------------------------- 1 | @import './config'; 2 | 3 | @mobileSidebarWidth: @sidebarWidth * 0.82; 4 | 5 | // narrow desktop / iPad 6 | @media (max-width: @MQNarrow) { 7 | .sidebar { 8 | font-size: 15px; 9 | width: @mobileSidebarWidth; 10 | } 11 | 12 | .page { 13 | padding-left: @mobileSidebarWidth; 14 | } 15 | } 16 | 17 | // wide mobile 18 | @media (max-width: @MQMobile) { 19 | .sidebar { 20 | display: none; 21 | } 22 | 23 | .page { 24 | padding-left: 0; 25 | // padding-right: 0; 26 | .page-anchor{ 27 | display: none; 28 | } 29 | } 30 | 31 | 32 | .theme-container { 33 | &.no-navbar { 34 | .sidebar { 35 | padding-top: 0; 36 | } 37 | } 38 | } 39 | 40 | h1, h2, h3, h4, h5, h6 { 41 | .@{contentClass}:not(.custom) > & { 42 | 43 | &:first-child { 44 | margin-top: -(@navbarHeight - 5); 45 | } 46 | } 47 | } 48 | } 49 | 50 | // narrow mobile 51 | @media (max-width: @MQMobileNarrow) { 52 | h1 { 53 | font-size: 1.9rem; 54 | } 55 | 56 | .@{contentClass} { 57 | div[class*='language-'] { 58 | // margin: 0.85rem -1.5rem; 59 | border-radius: 2px; 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /components/Sidebar.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 27 | 28 | 55 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .git 59 | .vscode 60 | .env 61 | .idea 62 | .DS_Store 63 | dist 64 | lib 65 | es 66 | _site 67 | /coverage 68 | 69 | # bak files 70 | /components/test/* 71 | list.txt 72 | 73 | site/dev.js 74 | .github/ -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .git 59 | .vscode 60 | .env 61 | .idea 62 | .DS_Store 63 | dist 64 | lib 65 | es 66 | _site 67 | yarn.lock 68 | package-lock.json 69 | /coverage 70 | 71 | # bak files 72 | /components/test/* 73 | list.txt 74 | 75 | site/dev.js -------------------------------------------------------------------------------- /components/NavButton.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 35 | 36 | 70 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

AntDocs logo

2 | 3 |

AntDocs

4 | 5 |

An Ant Design style theme for VuePress.

6 | 7 |

8 | Build Status 9 | Downloads 10 | Version 11 | License 12 |

13 | 14 | # Features 15 | - Equipped with Ant Design style, you can directly use various components of the UI library. 16 | - Optimize parts of styles. 17 | - More features are waiting for you to discover ... 18 | 19 | # Quick start 20 | 21 | #### Install theme 22 | 23 | ```sh 24 | npm i vuepress-theme-antdocs 25 | ``` 26 | or 27 | ```sh 28 | yarn add vuepress-theme-antdocs 29 | ``` 30 | 31 | #### Use theme 32 | 33 | Open your `.vuepress/config.js`, and then add VuePress theme reference code: 34 | ```js 35 | module.exports = { 36 | theme: 'antdocs' 37 | } 38 | ``` 39 | You can get help here: [Using a theme](https://vuepress.vuejs.org/theme/using-a-theme.html#theme-shorthand) 40 | 41 | # Preview 42 | 43 |

-------------------------------------------------------------------------------- /styles/theme.light.less: -------------------------------------------------------------------------------- 1 | :root { 2 | // brand colors 3 | 4 | --gray-1: 23,23,26; 5 | --gray-2: 46,46,48; 6 | --gray-3: 72,72,73; 7 | --gray-4: 95,95,96; 8 | --gray-5: 120,120,122; 9 | --gray-6: 146,146,147; 10 | --gray-7: 171,171,172; 11 | --gray-8: 197,197,197; 12 | --gray-9: 223,223,223; 13 | --gray-10: 246,246,246; 14 | 15 | --color-neutral-1: rgb(var(--gray-1)); 16 | --color-neutral-2: rgb(var(--gray-2)); 17 | --color-neutral-3: rgb(var(--gray-3)); 18 | --color-neutral-4: rgb(var(--gray-4)); 19 | --color-neutral-5: rgb(var(--gray-5)); 20 | --color-neutral-6: rgb(var(--gray-6)); 21 | --color-neutral-7: rgb(var(--gray-7)); 22 | --color-neutral-8: rgb(var(--gray-8)); 23 | --color-neutral-9: rgb(var(--gray-9)); 24 | --color-neutral-10: rgb(var(--gray-10)); 25 | 26 | 27 | // code blocks vars 28 | --code-bg-color: #282c34; 29 | --code-hl-bg-color: var(--color-neutral-3); 30 | --code-ln-color: #9e9e9e; 31 | --code-ln-wrapper-width: 2.5rem; 32 | 33 | // font vars 34 | --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 35 | Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 36 | --font-family-code: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 37 | 38 | // layout vars 39 | --navbar-height: 4rem; 40 | --navbar-logo-height: 2.125rem; 41 | // --navbar-padding-v: 0.7rem; 42 | // --navbar-padding-h: 1.5rem; 43 | --sidebar-width: 18rem; 44 | --sidebar-width-mobile: calc(var(--sidebar-width) * 0.82); 45 | --content-width: 1100px; 46 | --homepage-width: 960px; 47 | 48 | } -------------------------------------------------------------------------------- /styles/custom-blocks.less: -------------------------------------------------------------------------------- 1 | .custom-block { 2 | .custom-block-title { 3 | font-size: 1rem; 4 | font-weight: 600; 5 | margin-bottom: 0.2rem; 6 | margin-top: 1rem; 7 | color: rgba(0, 0, 0, 0.65); 8 | } 9 | 10 | 11 | &.tip, &.warning, &.danger { 12 | padding: 0.1rem 1.5rem; 13 | border-left-width: 0.3rem; 14 | border-left-style: solid; 15 | margin: 1rem 0; 16 | 17 | p{ 18 | &:last-child{ 19 | margin-bottom: 1rem; 20 | } 21 | } 22 | } 23 | 24 | &.tip { 25 | background-color: #f6ffed; 26 | border-color: #52c41a; 27 | 28 | .custom-block-title { 29 | color: #52c41a; 30 | } 31 | 32 | a { 33 | color: @textColor; 34 | } 35 | } 36 | 37 | &.warning { 38 | background-color: #fffbe6; 39 | border-color: #faad14; 40 | 41 | .custom-block-title { 42 | color: #faad14; 43 | } 44 | 45 | a { 46 | color: @textColor; 47 | } 48 | } 49 | 50 | &.danger { 51 | background-color: #fff1f0; 52 | border-color: #ff4d4d; 53 | 54 | .custom-block-title { 55 | color: #ff4d4d; 56 | } 57 | 58 | a { 59 | color: @textColor; 60 | } 61 | } 62 | 63 | &.details { 64 | display: block; 65 | position: relative; 66 | border-radius: 2px; 67 | margin: 1.6em 0; 68 | padding: 1.6em; 69 | background-color: #eee; 70 | 71 | h4 { 72 | margin-top: 0; 73 | } 74 | 75 | figure, p { 76 | &:last-child { 77 | margin-bottom: 0; 78 | padding-bottom: 0; 79 | } 80 | } 81 | 82 | summary { 83 | outline: none; 84 | cursor: pointer; 85 | } 86 | } 87 | } -------------------------------------------------------------------------------- /components/SidebarLinks.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 90 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const corejsVersion = require('core-js/package.json').version 2 | const { path,chalk } = require('@vuepress/shared-utils') 3 | // Theme API. 4 | module.exports = (options, ctx) => { 5 | const { sep } = path 6 | const { themeConfig, siteConfig, sourceDir } = ctx 7 | 8 | // resolve algolia 9 | const isAlgoliaSearch = ( 10 | themeConfig.algolia 11 | || Object 12 | .keys(siteConfig.locales && themeConfig.locales || {}) 13 | .some(base => themeConfig.locales[base].algolia) 14 | ) 15 | 16 | return { 17 | chainWebpack: config=> { 18 | config.module 19 | .rule('less') 20 | .oneOf('normal') 21 | .use('less-loader') 22 | .options({ javascriptEnabled: true }) 23 | .end() 24 | .end() 25 | .oneOf('modules') 26 | .use('less-loader') 27 | .options({ javascriptEnabled: true }) 28 | 29 | try{ 30 | if (parseInt(corejsVersion.split('.',1)) > 2) { 31 | config.resolve.alias.set('core-js/library/fn', 'core-js/features') 32 | } 33 | }catch(err){ 34 | console.log(`${chalk.blue('[AntDocs]')} path of ${chalk.green('core-js')} library convert failed: ${err}`) 35 | } 36 | }, 37 | alias () { 38 | return { 39 | '@AlgoliaSearchBox': isAlgoliaSearch 40 | ? path.resolve(__dirname, 'components/AlgoliaSearchBox.vue') 41 | : path.resolve(__dirname, 'noopModule.js'), 42 | '@docs': `${sourceDir}${sep}.vuepress${sep}styles` 43 | } 44 | }, 45 | plugins: [ 46 | ['@vuepress/active-header-links', options.activeHeaderLinks], 47 | '@vuepress/plugin-search', 48 | '@vuepress/plugin-nprogress', 49 | ['container', { 50 | type: 'tip', 51 | defaultTitle: { 52 | '/': 'TIP' 53 | } 54 | }], 55 | ['container', { 56 | type: 'warning', 57 | defaultTitle: { 58 | '/': 'WARNING' 59 | } 60 | }], 61 | ['container', { 62 | type: 'danger', 63 | defaultTitle: { 64 | '/': 'WARNING' 65 | } 66 | }], 67 | ['container', { 68 | type: 'details', 69 | before: info => `
${info ? `${info}` : ''}\n`, 70 | after: () => '
\n' 71 | }] 72 | ] 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /components/Page.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 55 | 56 | 87 | -------------------------------------------------------------------------------- /components/Promo.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 54 | 55 | 106 | -------------------------------------------------------------------------------- /templates/dev.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 104 | 105 | 106 | 107 |
108 |
109 |
110 | 111 |
112 |
113 |
114 | 115 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /styles/searchbox.less: -------------------------------------------------------------------------------- 1 | .search-box { 2 | line-height: @navbarHeight + 0.125rem; 3 | 4 | input { 5 | height: 1.375rem !important; 6 | color: rgba(0, 0, 0, 0.65) !important; 7 | border-radius: 0 !important; 8 | border: none !important; 9 | border-left: 1px solid darken(@borderColor, 5%) !important; 10 | line-height: 1.375rem !important; 11 | padding-left: 2.2rem !important; 12 | background: #fff url('../assets/search.svg') 0.5rem 0 no-repeat !important; 13 | background-size: 1.25rem !important; 14 | } 15 | 16 | .suggestions { 17 | top: @navbarHeight + 0.3125rem !important; 18 | border-radius: 3px !important; 19 | border: none !important; 20 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15) !important; 21 | } 22 | 23 | .suggestion { 24 | border-radius: 3px !important; 25 | transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out; 26 | 27 | &:hover { 28 | background-color: fade(@accentColor, 10%) !important; 29 | } 30 | 31 | a { 32 | color: @textColor !important; 33 | .page-title { 34 | font-weight: normal !important; 35 | } 36 | } 37 | 38 | &.focused { 39 | background-color: fade(@accentColor, 10%) !important; 40 | 41 | a { 42 | color: @accentColor !important; 43 | } 44 | } 45 | } 46 | } 47 | 48 | @media (max-width: @MQNarrow) { 49 | .search-box { 50 | input { 51 | border: 1px solid #d9d9d9 !important; 52 | border-radius: 40px !important; 53 | height: 2rem !important; 54 | background-position: 0.5rem 0.3rem !important; 55 | 56 | &:hover { 57 | border-color: @accentColor !important; 58 | } 59 | &:focus { 60 | border-color: @accentColor !important; 61 | box-shadow: 0 0 0 2px fade(@accentColor, 20%); 62 | } 63 | } 64 | } 65 | } 66 | 67 | // Match IE11 68 | // @media all and (-ms-high-contrast: none) { 69 | // .search-box input { 70 | // height: 2rem; 71 | // } 72 | // } 73 | 74 | @media (max-width: @MQNarrow) and (min-width: @MQMobile) { 75 | .search-box { 76 | left: 0rem !important; 77 | 78 | input { 79 | border-color: transparent !important; 80 | background-size: 1.65rem !important; 81 | background-position: 0.5rem 0.1rem !important; 82 | 83 | &:focus { 84 | border-color: @accentColor !important; 85 | background-size: 1.25rem !important; 86 | background-position: 0.5rem 0.3rem !important; 87 | box-shadow: 0 0 0 2px fade(@accentColor, 20%); 88 | } 89 | } 90 | .suggestions { 91 | left: 0.625rem !important; 92 | } 93 | } 94 | } 95 | 96 | @media (max-width: @MQMobile) { 97 | .search-box { 98 | input { 99 | left: 1rem !important; 100 | border-color: transparent !important; 101 | background-size: 1.5rem !important; 102 | background-position: 0.5rem 0.1rem !important; 103 | 104 | &:focus { 105 | border-color: @accentColor !important; 106 | background-size: 1.25rem !important; 107 | background-position: 0.5rem 0.3rem !important; 108 | box-shadow: 0 0 0 2px fade(@accentColor, 20%); 109 | left: 0.625rem !important; 110 | } 111 | } 112 | .suggestions { 113 | left: 0.625rem !important; 114 | } 115 | } 116 | } 117 | 118 | @media (max-width: @MQMobileNarrow) { 119 | .search-box { 120 | input:focus { 121 | width: 10rem; 122 | } 123 | } 124 | } -------------------------------------------------------------------------------- /layouts/Layout.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 127 | -------------------------------------------------------------------------------- /styles/prism-antdv.less: -------------------------------------------------------------------------------- 1 | code[class*="language-"], 2 | pre[class*="language-"] { 3 | text-align: left; 4 | white-space: pre; 5 | word-spacing: normal; 6 | word-break: normal; 7 | word-wrap: normal; 8 | color: #90a4ae; 9 | background: #fafafa; 10 | font-family: Roboto Mono, monospace; 11 | font-size: 1em; 12 | line-height: 1.5em; 13 | 14 | -moz-tab-size: 4; 15 | -o-tab-size: 4; 16 | tab-size: 4; 17 | 18 | -webkit-hyphens: none; 19 | -moz-hyphens: none; 20 | -ms-hyphens: none; 21 | hyphens: none; 22 | } 23 | 24 | // code[class*="language-"]::-moz-selection, 25 | // pre[class*="language-"]::-moz-selection, 26 | // code[class*="language-"] ::-moz-selection, 27 | // pre[class*="language-"] ::-moz-selection { 28 | // background: #cceae7; 29 | // color: #4b99e8; 30 | // } 31 | 32 | // code[class*="language-"]::selection, 33 | // pre[class*="language-"]::selection, 34 | // code[class*="language-"] ::selection, 35 | // pre[class*="language-"] ::selection { 36 | // background: #cceae7; 37 | // color: #4b99e8; 38 | // } 39 | 40 | :not(pre) > code[class*="language-"] { 41 | white-space: normal; 42 | border-radius: 0.2em; 43 | padding: 0.1em; 44 | } 45 | 46 | pre[class*="language-"] { 47 | overflow: auto; 48 | position: relative; 49 | margin: 0.5em 0; 50 | padding: 1.25em 1em; 51 | } 52 | 53 | .language-css > code, 54 | .language-sass > code, 55 | .language-scss > code { 56 | color: #f76d47; 57 | } 58 | 59 | [class*="language-"] .namespace { 60 | opacity: 0.7; 61 | } 62 | 63 | .token.atrule { 64 | color: #008dff; 65 | } 66 | 67 | .token.attr-name { 68 | color: #30a057; 69 | } 70 | 71 | .token.attr-value { 72 | color: #f6a434; 73 | } 74 | 75 | .token.attribute { 76 | color: #f6a434; 77 | } 78 | 79 | .token.boolean { 80 | color: #f81d22; 81 | } 82 | 83 | .token.builtin { 84 | color: #30a057; 85 | } 86 | 87 | .token.cdata { 88 | color: #30a057; 89 | } 90 | 91 | .token.char { 92 | color: #30a057; 93 | } 94 | 95 | .token.class { 96 | color: #30a057; 97 | } 98 | 99 | .token.class-name { 100 | color: #6182b8; 101 | } 102 | 103 | .token.comment { 104 | color: #708090; 105 | } 106 | 107 | .token.constant { 108 | color: #008dff; 109 | } 110 | 111 | .token.deleted { 112 | color: #f81d22; 113 | } 114 | 115 | .token.doctype { 116 | color: #708090; 117 | } 118 | 119 | .token.entity { 120 | color: #e53935; 121 | } 122 | 123 | .token.function { 124 | color: #f81d22; 125 | } 126 | 127 | .token.hexcode { 128 | color: #f76d47; 129 | } 130 | 131 | .token.id { 132 | color: #008dff; 133 | font-weight: bold; 134 | } 135 | 136 | .token.important { 137 | color: #008dff; 138 | font-weight: bold; 139 | } 140 | 141 | .token.inserted { 142 | color: #30a057; 143 | } 144 | 145 | .token.keyword { 146 | color: #008dff; 147 | } 148 | 149 | .token.number { 150 | color: #f76d47; 151 | } 152 | 153 | .token.operator { 154 | color: #0b8235; 155 | } 156 | 157 | .token.prolog { 158 | color: #708090; 159 | } 160 | 161 | .token.property { 162 | color: #f81d22; 163 | } 164 | 165 | .token.pseudo-class { 166 | color: #f6a434; 167 | } 168 | 169 | .token.pseudo-element { 170 | color: #f6a434; 171 | } 172 | 173 | .token.punctuation { 174 | color: #999; 175 | } 176 | 177 | .token.regex { 178 | color: #628aca; 179 | } 180 | 181 | .token.selector { 182 | color: #e53935; 183 | } 184 | 185 | .token.string { 186 | color: #0b8235; 187 | } 188 | 189 | .token.symbol { 190 | color: #f81d22; 191 | } 192 | 193 | .token.tag { 194 | color: #f81d22; 195 | } 196 | 197 | .token.unit { 198 | color: #f76d47; 199 | } 200 | 201 | .token.url { 202 | color: #e53935; 203 | } 204 | 205 | .token.variable { 206 | color: #e90; 207 | } -------------------------------------------------------------------------------- /components/SidebarGroup.vue: -------------------------------------------------------------------------------- 1 | 50 | 51 | 67 | 68 | 166 | -------------------------------------------------------------------------------- /components/PageNav.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 117 | 118 | 143 | -------------------------------------------------------------------------------- /components/PageEdit.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 109 | 110 | 163 | -------------------------------------------------------------------------------- /styles/code.less: -------------------------------------------------------------------------------- 1 | .@{contentClass} { 2 | code { 3 | padding: 0.2rem 0.5rem; 4 | margin: 0; 5 | // color: #fc9884; 6 | font-size: .9em; 7 | background-color: #f2f3f5; 8 | border-radius: 3px; 9 | 10 | .token { 11 | &.deleted { 12 | color: #EC5975; 13 | } 14 | 15 | &.inserted { 16 | color: @accentColor; 17 | } 18 | } 19 | } 20 | } 21 | 22 | .@{contentClass} { 23 | pre, pre[class*='language-'] { 24 | line-height: 1.45; 25 | padding: 1.25rem 1.5rem; 26 | margin: 0.85rem 0; 27 | background-color: @codeBgColor; 28 | border-radius: 3px; 29 | overflow: auto; 30 | 31 | code { 32 | color: #314659; 33 | padding: 0; 34 | background-color: transparent; 35 | border-radius: 0; 36 | } 37 | } 38 | } 39 | 40 | div[class*='language-'] { 41 | position: relative; 42 | background-color: @codeBgColor; 43 | border-radius: 3px; 44 | font-size: 16px; 45 | 46 | .highlight-lines { 47 | user-select: none; 48 | padding-top: 1.3rem; 49 | position: absolute; 50 | top: 0; 51 | left: 0; 52 | width: 100%; 53 | line-height: 1.45; 54 | 55 | .highlighted { 56 | background-color: rgba(193, 193, 193, 0.25); 57 | } 58 | } 59 | 60 | pre, pre[class*='language-'] { 61 | background: transparent; 62 | position: relative; 63 | z-index: 1; 64 | 65 | &::-webkit-scrollbar { 66 | height: 6px; 67 | } 68 | &::-webkit-scrollbar-thumb { 69 | background: rgb(221, 221, 221); 70 | } 71 | 72 | } 73 | 74 | &::before { 75 | position: absolute; 76 | z-index: 3; 77 | top: 0.8em; 78 | right: 1em; 79 | font-size: 0.75rem; 80 | color: rgba(0, 0, 0, 0.4); 81 | } 82 | 83 | &:not(.line-numbers-mode) { 84 | .line-numbers-wrapper { 85 | display: none; 86 | } 87 | } 88 | 89 | &.line-numbers-mode { 90 | .highlight-lines .highlighted { 91 | position: relative; 92 | 93 | &:before { 94 | content: ' '; 95 | position: absolute; 96 | z-index: 3; 97 | left: 0; 98 | top: 0; 99 | display: block; 100 | width: @lineNumbersWrapperWidth; 101 | height: 100%; 102 | background-color: rgba(193, 193, 193, 0.25); 103 | } 104 | } 105 | 106 | pre { 107 | margin-left: @lineNumbersWrapperWidth; 108 | vertical-align: middle; 109 | } 110 | 111 | .line-numbers-wrapper { 112 | position: absolute; 113 | top: 0; 114 | width: @lineNumbersWrapperWidth; 115 | text-align: center; 116 | color: rgba(0, 0, 0, 0.4); 117 | padding: 1.25rem 0; 118 | line-height: 1.45; 119 | 120 | br { 121 | user-select: none; 122 | } 123 | 124 | .line-number { 125 | position: relative; 126 | z-index: 4; 127 | user-select: none; 128 | font-size: 0.85em; 129 | } 130 | } 131 | 132 | &::after { 133 | content: ''; 134 | position: absolute; 135 | z-index: 2; 136 | top: 0; 137 | left: 0; 138 | width: @lineNumbersWrapperWidth; 139 | height: 100%; 140 | border-radius: 6px 0 0 6px; 141 | border-right: 1px solid rgba(0, 0, 0, 0.1); 142 | background-color: @codeBgColor; 143 | } 144 | } 145 | } 146 | 147 | 148 | each(@codeLang, { 149 | div[class*="language-@{value}"]:before { 150 | content: "@{value}"; 151 | } 152 | }); 153 | 154 | div[class~='language-javascript']:before { 155 | content: 'js'; 156 | } 157 | 158 | div[class~='language-typescript']:before { 159 | content: 'ts'; 160 | } 161 | 162 | div[class~='language-markup']:before { 163 | content: 'html'; 164 | } 165 | 166 | div[class~='language-markdown']:before { 167 | content: 'md'; 168 | } 169 | 170 | div[class~='language-json']:before { 171 | content: 'json'; 172 | } 173 | 174 | div[class~='language-ruby']:before { 175 | content: 'rb'; 176 | } 177 | 178 | div[class~='language-python']:before { 179 | content: 'py'; 180 | } 181 | 182 | div[class~='language-bash']:before { 183 | content: 'sh'; 184 | } 185 | 186 | div[class~='language-php']:before { 187 | content: 'php'; 188 | } 189 | 190 | @import './prism-antdv.less'; 191 | -------------------------------------------------------------------------------- /components/PageAnchor.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 126 | 127 | 161 | -------------------------------------------------------------------------------- /components/SidebarLink.vue: -------------------------------------------------------------------------------- 1 | 106 | 107 | 192 | -------------------------------------------------------------------------------- /components/AlgoliaSearchBox.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 69 | 70 | -------------------------------------------------------------------------------- /styles/theme.dark.less: -------------------------------------------------------------------------------- 1 | html.dark { 2 | // brand colors 3 | --brand: 24,144,255; 4 | 5 | --antdocsblue-1: 0,13,77; 6 | --antdocsblue-2: 4,27,121; 7 | --antdocsblue-3: 14,50,166; 8 | --antdocsblue-4: 29,77,210; 9 | --antdocsblue-5: 48,111,255; 10 | --antdocsblue-6: 60,126,255; 11 | --antdocsblue-7: 104,159,255; 12 | --antdocsblue-8: 147,190,255; 13 | --antdocsblue-9: 190,218,255; 14 | --antdocsblue-10: 234,244,255; 15 | 16 | --red-1: 77,0,10; 17 | --red-2: 119,6,17; 18 | --red-3: 161,22,31; 19 | --red-4: 203,46,52; 20 | --red-5: 245,78,78; 21 | --red-6: 247,105,101; 22 | --red-7: 249,141,134; 23 | --red-8: 251,176,167; 24 | --red-9: 253,209,202; 25 | --red-10: 255,240,236; 26 | --orangered-1: 77,14,0; 27 | --orangered-2: 119,30,5; 28 | --orangered-3: 162,55,20; 29 | --orangered-4: 204,87,41; 30 | --orangered-5: 247,126,69; 31 | --orangered-6: 249,146,90; 32 | --orangered-7: 250,173,125; 33 | --orangered-8: 252,198,161; 34 | --orangered-9: 253,222,197; 35 | --orangered-10: 255,244,235; 36 | --orange-1: 77,27,0; 37 | --orange-2: 121,48,4; 38 | --orange-3: 166,75,10; 39 | --orange-4: 210,105,19; 40 | --orange-5: 255,141,31; 41 | --orange-6: 255,150,38; 42 | --orange-7: 255,179,87; 43 | --orange-8: 255,205,135; 44 | --orange-9: 255,227,184; 45 | --orange-10: 255,247,232; 46 | --green-1: 0,77,28; 47 | --green-2: 4,102,37; 48 | --green-3: 10,128,45; 49 | --green-4: 18,154,55; 50 | --green-5: 29,180,64; 51 | --green-6: 39,195,70; 52 | --green-7: 80,210,102; 53 | --green-8: 126,225,139; 54 | --green-9: 178,240,183; 55 | --green-10: 235,255,236; 56 | 57 | --primary-1: var(--antdocsblue-1); 58 | --primary-2: var(--antdocsblue-2); 59 | --primary-3: var(--antdocsblue-3); 60 | --primary-4: var(--antdocsblue-4); 61 | --primary-5: var(--antdocsblue-5); 62 | --primary-6: var(--antdocsblue-6); 63 | --primary-7: var(--antdocsblue-7); 64 | --primary-8: var(--antdocsblue-8); 65 | --primary-9: var(--antdocsblue-9); 66 | --primary-10: var(--antdocsblue-10); 67 | 68 | --success-1: var(--green-1); 69 | --success-2: var(--green-2); 70 | --success-3: var(--green-3); 71 | --success-4: var(--green-4); 72 | --success-5: var(--green-5); 73 | --success-6: var(--green-6); 74 | --success-7: var(--green-7); 75 | --success-8: var(--green-8); 76 | --success-9: var(--green-9); 77 | --success-10: var(--green-10); 78 | --danger-1: var(--red-1); 79 | --danger-2: var(--red-2); 80 | --danger-3: var(--red-3); 81 | --danger-4: var(--red-4); 82 | --danger-5: var(--red-5); 83 | --danger-6: var(--red-6); 84 | --danger-7: var(--red-7); 85 | --danger-8: var(--red-8); 86 | --danger-9: var(--red-9); 87 | --danger-10: var(--red-10); 88 | --warning-1: var(--orange-1); 89 | --warning-2: var(--orange-2); 90 | --warning-3: var(--orange-3); 91 | --warning-4: var(--orange-4); 92 | --warning-5: var(--orange-5); 93 | --warning-6: var(--orange-6); 94 | --warning-7: var(--orange-7); 95 | --warning-8: var(--orange-8); 96 | --warning-9: var(--orange-9); 97 | --warning-10: var(--orange-10); 98 | 99 | --color-primary-light-1: rgba(var(--primary-6), .2); 100 | --color-primary-light-2: rgba(var(--primary-6), .35); 101 | --color-primary-light-3: rgba(var(--primary-6), .5); 102 | --color-primary-light-4: rgba(var(--primary-6), .65); 103 | --color-danger-light-1: rgba(var(--danger-6), .2); 104 | --color-danger-light-2: rgba(var(--danger-6), .35); 105 | --color-danger-light-3: rgba(var(--danger-6), .5); 106 | --color-danger-light-4: rgba(var(--danger-6), .65); 107 | --color-success-light-1: rgb(var(--success-6), .2); 108 | --color-success-light-2: rgb(var(--success-6), .35); 109 | --color-success-light-3: rgb(var(--success-6), .5); 110 | --color-success-light-4: rgb(var(--success-6), .65); 111 | --color-warning-light-1: rgb(var(--warning-6), .2); 112 | --color-warning-light-2: rgb(var(--warning-6), .35); 113 | --color-warning-light-3: rgb(var(--warning-6), .5); 114 | --color-warning-light-4: rgb(var(--warning-6), .65); 115 | 116 | --gray-1: 23,23,26; 117 | --gray-2: 46,46,48; 118 | --gray-3: 72,72,73; 119 | --gray-4: 95,95,96; 120 | --gray-5: 120,120,122; 121 | --gray-6: 146,146,147; 122 | --gray-7: 171,171,172; 123 | --gray-8: 197,197,197; 124 | --gray-9: 223,223,223; 125 | --gray-10: 246,246,246; 126 | 127 | --color-neutral-1: rgb(var(--gray-1)); 128 | --color-neutral-2: rgb(var(--gray-2)); 129 | --color-neutral-3: rgb(var(--gray-3)); 130 | --color-neutral-4: rgb(var(--gray-4)); 131 | --color-neutral-5: rgb(var(--gray-5)); 132 | --color-neutral-6: rgb(var(--gray-6)); 133 | --color-neutral-7: rgb(var(--gray-7)); 134 | --color-neutral-8: rgb(var(--gray-8)); 135 | --color-neutral-9: rgb(var(--gray-9)); 136 | --color-neutral-10: rgb(var(--gray-10)); 137 | 138 | // background colors 139 | --color-bg-1: #17171a; 140 | --color-bg-2: #232324; 141 | --color-bg-3: #2a2a2b; 142 | --color-bg-4: #313132; 143 | --color-bg-5: #373739; 144 | 145 | 146 | --bg-body: var(--color-bg-1); 147 | --bg-navbar: var(--color-bg-2); 148 | --bg-navbar-searchbox: var(--bg-navbar); 149 | --bg-navbar-searchbox-icon: var(--color-bg-4); 150 | 151 | --bg-menu: var(--color-bg-2); 152 | --bg-modal: var(--color-bg-2); 153 | 154 | --bg-scrollbar: var(--bg-navbar); 155 | 156 | --bg-sidebar: var(--bg-body); 157 | 158 | --bg-blockquote: var(--color-bg-2); 159 | --bg-block-details: var(--color-bg-2); 160 | --bg-code: var(--color-neutral-2); 161 | 162 | --bg-code-hl: rgba(0, 0, 0, 0.66); 163 | --code-ln-color: #9e9e9e; 164 | 165 | // shadow 166 | --shadow-s: 0px 2px 6px rgba(0,0,0,0.1); 167 | --shadow-m: 0px 5px 10px rgba(0,0,0,0.15); 168 | --theme-shadow: var(--shadow-m); 169 | 170 | // text colors 171 | --color-text-1: hsla(0,0%,100%,0.9); 172 | --color-text-2: hsla(0,0%,100%,0.7); 173 | --color-text-3: hsla(0,0%,100%,0.5); 174 | --color-text-4: hsla(0,0%,100%,0.3); 175 | 176 | // border colors 177 | --color-border: #333335; 178 | 179 | --border-menu: var(--color-border); 180 | --border-navbar-bottom:var(--color-border); 181 | 182 | // badge component colors 183 | --badge-tip: rgb(var(--success-2)); 184 | --badge-warning: rgb(var(--warning-2)); 185 | --badge-danger: rgb(var(--danger-2)); 186 | 187 | 188 | } 189 | -------------------------------------------------------------------------------- /components/ThemeSwitch.vue: -------------------------------------------------------------------------------- 1 | 154 | 155 | 196 | 197 | 214 | -------------------------------------------------------------------------------- /util/index.js: -------------------------------------------------------------------------------- 1 | export const hashRE = /#.*$/ 2 | export const extRE = /\.(md|html)$/ 3 | export const endingSlashRE = /\/$/ 4 | export const outboundRE = /^[a-z]+:/i 5 | 6 | export function normalize (path) { 7 | return decodeURI(path) 8 | .replace(hashRE, '') 9 | .replace(extRE, '') 10 | } 11 | 12 | export function getHash (path) { 13 | const match = path.match(hashRE) 14 | if (match) { 15 | return match[0] 16 | } 17 | } 18 | // export function getLocalStorage(name, type) { 19 | // if (typeof localStorage === 'undefined') return; 20 | // let data = localStorage.getItem(name) 21 | // if (type === 'number') { 22 | // return Number(data) 23 | // } 24 | // if (type === 'boolen') { 25 | // if (data === 'false') { 26 | // data = false 27 | // } else if (data === 'true'){ 28 | // data = true 29 | // }else{ 30 | // data = false 31 | // } 32 | // return data 33 | // } 34 | // if(type === 'object'){ 35 | // data = JSON.parse(data) 36 | // return data 37 | // } 38 | // return data 39 | // } 40 | 41 | export function isExternal (path) { 42 | return outboundRE.test(path) 43 | } 44 | 45 | export function isMailto (path) { 46 | return /^mailto:/.test(path) 47 | } 48 | 49 | export function isTel (path) { 50 | return /^tel:/.test(path) 51 | } 52 | 53 | export function ensureExt (path) { 54 | if (isExternal(path)) { 55 | return path 56 | } 57 | const hashMatch = path.match(hashRE) 58 | const hash = hashMatch ? hashMatch[0] : '' 59 | const normalized = normalize(path) 60 | 61 | if (endingSlashRE.test(normalized)) { 62 | return path 63 | } 64 | return normalized + '.html' + hash 65 | } 66 | 67 | export function isActive (route, path) { 68 | const routeHash = route.hash 69 | const linkHash = getHash(path) 70 | if (linkHash && routeHash !== linkHash) { 71 | return false 72 | } 73 | const routePath = normalize(route.path) 74 | const pagePath = normalize(path) 75 | return routePath === pagePath 76 | } 77 | 78 | export function resolvePage (pages, rawPath, base) { 79 | if (isExternal(rawPath)) { 80 | return { 81 | type: 'external', 82 | path: rawPath 83 | } 84 | } 85 | if (base) { 86 | rawPath = resolvePath(rawPath, base) 87 | } 88 | const path = normalize(rawPath) 89 | for (let i = 0; i < pages.length; i++) { 90 | if (normalize(pages[i].regularPath) === path) { 91 | return Object.assign({}, pages[i], { 92 | type: 'page', 93 | path: ensureExt(pages[i].path) 94 | }) 95 | } 96 | } 97 | console.error(`[vuepress] No matching page found for sidebar item "${rawPath}"`) 98 | return {} 99 | } 100 | 101 | function resolvePath (relative, base, append) { 102 | const firstChar = relative.charAt(0) 103 | if (firstChar === '/') { 104 | return relative 105 | } 106 | 107 | if (firstChar === '?' || firstChar === '#') { 108 | return base + relative 109 | } 110 | 111 | const stack = base.split('/') 112 | 113 | // remove trailing segment if: 114 | // - not appending 115 | // - appending to trailing slash (last segment is empty) 116 | if (!append || !stack[stack.length - 1]) { 117 | stack.pop() 118 | } 119 | 120 | // resolve relative path 121 | const segments = relative.replace(/^\//, '').split('/') 122 | for (let i = 0; i < segments.length; i++) { 123 | const segment = segments[i] 124 | if (segment === '..') { 125 | stack.pop() 126 | } else if (segment !== '.') { 127 | stack.push(segment) 128 | } 129 | } 130 | 131 | // ensure leading slash 132 | if (stack[0] !== '') { 133 | stack.unshift('') 134 | } 135 | 136 | return stack.join('/') 137 | } 138 | 139 | /** 140 | * @param { Page } page 141 | * @param { string } regularPath 142 | * @param { SiteData } site 143 | * @param { string } localePath 144 | * @returns { SidebarGroup } 145 | */ 146 | export function resolveSidebarItems (page, regularPath, site, localePath) { 147 | const { pages, themeConfig } = site 148 | 149 | const localeConfig = localePath && themeConfig.locales 150 | ? themeConfig.locales[localePath] || themeConfig 151 | : themeConfig 152 | 153 | const pageSidebarConfig = page.frontmatter.sidebar || localeConfig.sidebar || themeConfig.sidebar 154 | if (pageSidebarConfig === 'auto') { 155 | return resolveHeaders(page) 156 | } 157 | 158 | const sidebarConfig = localeConfig.sidebar || themeConfig.sidebar 159 | if (!sidebarConfig) { 160 | return [] 161 | } else { 162 | const { base, config } = resolveMatchingConfig(regularPath, sidebarConfig) 163 | return config 164 | ? config.map(item => resolveItem(item, pages, base)) 165 | : [] 166 | } 167 | } 168 | 169 | /** 170 | * @param { Page } page 171 | * @returns { SidebarGroup } 172 | */ 173 | function resolveHeaders (page) { 174 | const headers = groupHeaders(page.headers || []) 175 | return [{ 176 | type: 'group', 177 | collapsable: false, 178 | title: page.title, 179 | path: null, 180 | children: headers.map(h => ({ 181 | type: 'auto', 182 | title: h.title, 183 | basePath: page.path, 184 | path: page.path + '#' + h.slug, 185 | children: h.children || [] 186 | })) 187 | }] 188 | } 189 | 190 | export function groupHeaders (headers) { 191 | // group h3s under h2 192 | headers = headers.map(h => Object.assign({}, h)) 193 | let lastH2 194 | headers.forEach(h => { 195 | if (h.level === 2) { 196 | lastH2 = h 197 | } else if (lastH2) { 198 | (lastH2.children || (lastH2.children = [])).push(h) 199 | } 200 | }) 201 | return headers.filter(h => h.level === 2) 202 | } 203 | 204 | export function resolveNavLinkItem (linkItem) { 205 | return Object.assign(linkItem, { 206 | type: linkItem.items && linkItem.items.length ? 'links' : 'link' 207 | }) 208 | } 209 | 210 | /** 211 | * @param { Route } route 212 | * @param { Array | Array | [link: string]: SidebarConfig } config 213 | * @returns { base: string, config: SidebarConfig } 214 | */ 215 | export function resolveMatchingConfig (regularPath, config) { 216 | if (Array.isArray(config)) { 217 | return { 218 | base: '/', 219 | config: config 220 | } 221 | } 222 | for (const base in config) { 223 | if (ensureEndingSlash(regularPath).indexOf(encodeURI(base)) === 0) { 224 | return { 225 | base, 226 | config: config[base] 227 | } 228 | } 229 | } 230 | return {} 231 | } 232 | 233 | function ensureEndingSlash (path) { 234 | return /(\.html|\/)$/.test(path) 235 | ? path 236 | : path + '/' 237 | } 238 | 239 | function resolveItem (item, pages, base, groupDepth = 1) { 240 | if (typeof item === 'string') { 241 | return resolvePage(pages, item, base) 242 | } else if (Array.isArray(item)) { 243 | return Object.assign(resolvePage(pages, item[0], base), { 244 | title: item[1] 245 | }) 246 | } else { 247 | if (groupDepth > 3) { 248 | console.error( 249 | '[vuepress] detected a too deep nested sidebar group.' 250 | ) 251 | } 252 | const children = item.children || [] 253 | if (children.length === 0 && item.path) { 254 | return Object.assign(resolvePage(pages, item.path, base), { 255 | title: item.title 256 | }) 257 | } 258 | return { 259 | type: 'group', 260 | path: item.path, 261 | title: item.title, 262 | sidebarDepth: item.sidebarDepth, 263 | children: children.map(child => resolveItem(child, pages, base, groupDepth + 1)), 264 | collapsable: item.collapsable !== false 265 | } 266 | } 267 | } 268 | -------------------------------------------------------------------------------- /components/Navbar.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 99 | 100 | 295 | -------------------------------------------------------------------------------- /styles/index.less: -------------------------------------------------------------------------------- 1 | // @import './theme.light.less'; 2 | // @import './theme.dark.less'; 3 | 4 | @import '~ant-design-vue/dist/antd.less'; 5 | 6 | @import './palette.less'; 7 | @import './config.less'; 8 | @import './code.less'; 9 | @import './custom-blocks.less'; 10 | @import './arrow.less'; 11 | @import './wrapper.less'; 12 | @import './toc.less'; 13 | 14 | @import './searchbox.less'; 15 | @import './nprogress.less'; 16 | // @import './pwa.less'; 17 | 18 | 19 | html,body { 20 | padding: 0; 21 | margin: 0; 22 | background-color: #fff; 23 | font-family: Inter,-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,noto sans,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif; 24 | -webkit-font-smoothing: antialiased; 25 | -moz-osx-font-smoothing: grayscale; 26 | } 27 | body{ 28 | font-size: @bodyFontSize; 29 | color: @bodyTextColor; 30 | } 31 | 32 | *::-webkit-scrollbar { 33 | width: 4px; 34 | } 35 | *::-webkit-scrollbar-thumb { 36 | background-color: rgb(221, 221, 221); 37 | } 38 | 39 | *::-webkit-scrollbar-track { 40 | background-color: transparent; 41 | } 42 | 43 | #app{ 44 | transition: transform .5s cubic-bezier(0.075, 0.82, 0.165, 1); 45 | } 46 | 47 | .page { 48 | padding-left: @sidebarWidth - 2; 49 | } 50 | 51 | .navbar { 52 | position: fixed; 53 | z-index: 20; 54 | top: 0; 55 | left: 0; 56 | right: 0; 57 | background-color: #fff; 58 | box-sizing: border-box; 59 | box-shadow: 0 2px 8px #f0f1f2; 60 | } 61 | 62 | .sidebar { 63 | font-size: 14px; 64 | background-color: #fff; 65 | width: @sidebarWidth - 2; 66 | position: fixed; 67 | z-index: 10; 68 | margin: 0; 69 | top: @navbarHeight + 2; 70 | left: 0; 71 | bottom: 0; 72 | box-sizing: border-box; 73 | border-right: 1px solid @borderColor; 74 | overflow-y: auto; 75 | } 76 | 77 | .@{contentClass}:not(.custom) { 78 | & { 79 | .wrapper; 80 | } 81 | 82 | > *:first-child{ 83 | margin-top: @navbarHeight + 2rem; 84 | } 85 | 86 | p.demo { 87 | padding: 1rem 1.5rem; 88 | border: 1px solid #ddd; 89 | border-radius: 4px; 90 | } 91 | 92 | img { 93 | max-width: 100%; 94 | } 95 | } 96 | 97 | .@{contentClass}.custom { 98 | padding: 0; 99 | margin: 0; 100 | 101 | img { 102 | max-width: 100%; 103 | } 104 | } 105 | 106 | a { 107 | color: @accentColor; 108 | text-decoration: none; 109 | &:link, 110 | &:visited, 111 | &:hover, 112 | &:active{ 113 | text-decoration: none !important; 114 | } 115 | } 116 | 117 | p a code { 118 | font-weight: 400; 119 | color: @accentColor; 120 | } 121 | 122 | // p{ 123 | // margin-bottom: .4em; 124 | // // text-align: justify; 125 | // } 126 | 127 | kbd { 128 | background: #eee; 129 | border: solid 0.15rem #ddd; 130 | border-bottom: solid 0.25rem #ddd; 131 | border-radius: 0.15rem; 132 | padding: 0 0.15em; 133 | } 134 | 135 | blockquote { 136 | color: #666; 137 | border-left: 0.2rem solid #cbcbcb; 138 | margin: 1rem 0; 139 | padding: 0.25rem 1rem; 140 | background-color: #f8f8f8; 141 | 142 | & > p { 143 | margin: .625rem 0; 144 | } 145 | } 146 | 147 | ul, ol { 148 | padding-left: 1.2em; 149 | } 150 | 151 | strong { 152 | font-weight: 600; 153 | } 154 | 155 | h1, h2, h3, h4, h5, h6 { 156 | font-weight: 500; 157 | line-height: 1.25; 158 | 159 | .@{contentClass}:not(.custom) > & { 160 | margin-top: -(@navbarHeight + 1.275rem); 161 | padding-top: @navbarHeight + 2.3rem; 162 | margin-bottom: 0; 163 | 164 | &:first-child { 165 | margin-top: -0.2rem; 166 | margin-bottom: 1rem; 167 | 168 | + p, + pre, + .custom-block { 169 | margin-top: 1rem; 170 | } 171 | } 172 | } 173 | 174 | &:hover .header-anchor { 175 | opacity: 1; 176 | } 177 | } 178 | 179 | h1 { 180 | font-size: 2.25rem; 181 | margin-left: -1px; 182 | } 183 | 184 | h2 { 185 | font-size: 1.5rem; 186 | margin: 0; 187 | padding-top: 1.2rem; 188 | padding-bottom: .8rem; 189 | } 190 | 191 | h3 { 192 | font-size: 1.25rem; 193 | padding-top: .625rem; 194 | padding-bottom: .75rem; 195 | } 196 | 197 | a.header-anchor { 198 | font-size: 0.9em; 199 | float: left; 200 | margin-left: -0.87em; 201 | padding-right: 0.23em; 202 | margin-top: 0.125em; 203 | opacity: 0; 204 | transition: opacity 0.25s ease-in-out; 205 | 206 | &:hover { 207 | text-decoration: none; 208 | } 209 | } 210 | 211 | code, kbd, .line-number { 212 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 213 | } 214 | 215 | p, ul, ol { 216 | line-height: 1.7; 217 | } 218 | 219 | hr { 220 | border: 0; 221 | border-top: 1px solid @borderColor; 222 | } 223 | 224 | table { 225 | border-collapse: collapse; 226 | margin: 1rem 0; 227 | display: block; 228 | overflow-x: auto; 229 | } 230 | 231 | tr { 232 | border-top: 1px solid #dfe2e5; 233 | 234 | &:nth-child(2n) { 235 | background-color: #f6f8fa; 236 | } 237 | } 238 | 239 | th, td { 240 | border: 1px solid #dfe2e5; 241 | padding: 0.6em 1em; 242 | } 243 | 244 | .theme-container { 245 | 246 | &.no-navbar { 247 | .@{contentClass}:not(.custom) > h1, h2, h3, h4, h5, h6 { 248 | margin-top: 1.5rem; 249 | padding-top: 0; 250 | } 251 | 252 | .sidebar { 253 | top: 0; 254 | } 255 | } 256 | &.no-sidebar { 257 | .@{contentClass}:not(.custom) { 258 | max-width: @contentWidthNoSidebar; 259 | margin: 0 auto; 260 | padding: 0 2.5rem; 261 | } 262 | 263 | .page-edit{ 264 | max-width: @contentWidthNoSidebar; 265 | padding: 1.5rem 2.5rem; 266 | padding-bottom: 1rem; 267 | overflow: unset; 268 | } 269 | } 270 | 271 | .@{contentClass}{ 272 | ul:not([class^= "ant-"]){ 273 | li{ 274 | list-style-type: circle; 275 | line-height: 2; 276 | } 277 | } 278 | } 279 | } 280 | 281 | @media (min-width: (@MQMobile + 1px)) { 282 | .theme-container.no-sidebar { 283 | .sidebar { 284 | display: none; 285 | } 286 | 287 | .page { 288 | padding-left: 0; 289 | } 290 | } 291 | } 292 | 293 | // ant design style reset 294 | .ant-menu-horizontal{ 295 | line-height: @navbarHeight; 296 | border-bottom: transparent; 297 | } 298 | 299 | .ant-menu-item .anticon, 300 | .ant-menu-submenu-title .anticon{ 301 | font-size: .75rem; 302 | margin-right: 0; 303 | } 304 | .ant-menu-item, .ant-menu-submenu-title{ 305 | padding: 0 .875rem; 306 | } 307 | 308 | #nav.ant-menu-horizontal { 309 | 310 | @navItemPadding: 0 6px; 311 | 312 | > .ant-menu-item{ 313 | a{ 314 | border-top: 2px solid transparent; 315 | padding: @navItemPadding; 316 | transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 317 | } 318 | } 319 | 320 | > .ant-menu-item:hover, 321 | > .ant-menu-submenu:hover { 322 | a{ 323 | border-top-color: @accentColor; 324 | } 325 | 326 | border-bottom: 2px solid transparent; 327 | } 328 | 329 | > .ant-menu-item-selected { 330 | a{ 331 | border-color: @accentColor; 332 | padding: @navItemPadding; 333 | } 334 | border-bottom: 2px solid transparent; 335 | } 336 | } 337 | 338 | .ant-drawer > *{ 339 | transition: transform .5s cubic-bezier(0.075, 0.82, 0.165, 1); 340 | } 341 | 342 | .ant-menu-horizontal > .ant-menu-item:hover, .ant-menu-horizontal > .ant-menu-submenu:hover, .ant-menu-horizontal > .ant-menu-item-active, .ant-menu-horizontal > .ant-menu-submenu-active, .ant-menu-horizontal > .ant-menu-item-open, .ant-menu-horizontal > .ant-menu-submenu-open, .ant-menu-horizontal > .ant-menu-item-selected, .ant-menu-horizontal > .ant-menu-submenu-selected{ 343 | border-bottom-color: transparent; 344 | } 345 | 346 | @import './mobile.less'; 347 | // @import './antdv/index.less'; 348 | @import (optional) '~@docs/style.less'; 349 | -------------------------------------------------------------------------------- /components/Home.vue: -------------------------------------------------------------------------------- 1 | 115 | 116 | 151 | 152 | 363 | -------------------------------------------------------------------------------- /components/NavLinks.vue: -------------------------------------------------------------------------------- 1 | 97 | 98 | 274 | 275 | 334 | --------------------------------------------------------------------------------