├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── LICENSE
├── README-zh_CN.md
├── README.md
├── lerna.json
├── package.json
└── packages
    ├── vuepress-plugin-dumi-previewer
        ├── README-zh_CN.md
        ├── README.md
        ├── package.json
        └── src
        │   ├── Previewer.vue
        │   ├── enhanceAppFile.js
        │   ├── highlight.js
        │   └── index.js
    └── vuepress-theme-dumi
        ├── README-zh_CN.md
        ├── README.md
        ├── components
            ├── AlgoliaSearchBox.vue
            ├── DropdownLink.vue
            ├── DropdownTransition.vue
            ├── Home.vue
            ├── NavLink.vue
            ├── NavLinks.vue
            ├── Navbar.vue
            ├── Page.vue
            ├── PageEdit.vue
            ├── PageNav.vue
            ├── Sidebar.vue
            ├── SidebarButton.vue
            ├── SidebarGroup.vue
            ├── SidebarLink.vue
            └── SidebarLinks.vue
        ├── global-components
            ├── Badge.vue
            ├── CodeBlock.vue
            └── CodeGroup.vue
        ├── index.js
        ├── layouts
            ├── 404.vue
            └── Layout.vue
        ├── noopModule.js
        ├── package.json
        ├── styles
            ├── arrow.styl
            ├── code.styl
            ├── config.styl
            ├── custom-blocks.styl
            ├── index.styl
            ├── mobile.styl
            ├── palette.styl
            ├── toc.styl
            └── wrapper.styl
        └── util
            └── index.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | end_of_line = lf
 9 | insert_final_newline = true
10 | trim_trailing_whitespace = true
11 | 
12 | [*.md]
13 | insert_final_newline = false
14 | trim_trailing_whitespace = false


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | 
 2 | module.exports = {
 3 |   env: {
 4 |     browser: true,
 5 |     node: true,
 6 |     es6: true
 7 |   },
 8 |   extends: [
 9 |     'standard',
10 |     'plugin:vue/essential'
11 |   ],
12 |   plugins: [
13 |     'vue'
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | yarn-error.log
3 | .idea
4 | yarn.lock
5 | .DS_Store
6 | .vscode
7 | package-lock.json


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Oreki S.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 | 


--------------------------------------------------------------------------------
/README-zh_CN.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">vuepress-theme-dumi</h1>
 2 | 
 3 | 📖 适配VuePress的dumi样式主题.
 4 | 
 5 | <a href="https://github.com/OrekiSH/vuepress-dumi/blob/main/README.md">English</a> | 简体中文
 6 | 
 7 | ## 安装
 8 | 
 9 | * 首先安装 [VuePress v1.x](https://github.com/vuejs/vuepress)
10 | 
11 | * 接着安装主题
12 | 
13 | ```bash
14 | $ npm i -D @vuepress-dumi/vuepress-theme-dumi
15 | # OR
16 | $ yarn add -D @vuepress-dumi/vuepress-theme-dumi
17 | ```
18 | 
19 | ## 用法
20 | 
21 | 配置VuePress的config.js文件
22 | 
23 | ```js
24 | // .vuepress/config.js
25 | module.exports = {
26 |   theme: '@vuepress-dumi/dumi',
27 | }
28 | ```
29 | 
30 | ## 预览
31 | 
32 | ![PC模式](https://s3.ax1x.com/2021/02/12/yDNldg.png)
33 | ![手机模式](https://s3.ax1x.com/2021/02/12/yDUi60.png)
34 | ![代码预览](https://s3.ax1x.com/2021/02/12/yDNgQx.png)
35 | 
36 | 💡注意: 如果你需要引入element-ui, 则需要指定async-validator的版本:
37 | 
38 | ``` bash
39 | $ npm i -D async-validator@1.11.5
40 | # OR
41 | $ yarn add -D async-validator@1.11.5
42 | ```
43 | 
44 | ## 代码预览器用法
45 | 
46 | 💡注意: `demo`之前的空格是必需的
47 | 
48 | ```md
49 | ::: demo
50 | <div @click="handleClick">click me</div>
51 | 
52 | <script>
53 | export default {
54 |   methods: {
55 |     handleClick() {
56 |       console.warn('clicked')
57 |     }
58 |   }
59 | }
60 | </script>
61 | :::
62 | ```
63 | 
64 | 如果你需要将代码限制在当前代码块的作用域内, 可以使用`demo[scope]`
65 | 
66 | 💡注意: `<template></template>`标签是必需的, 并且你不能在scope模式下使用`import`语句。另外如果你在一个markdown文件中同时使用`demo[scope]`和`demo`，可能会出现一些报错
67 | 
68 | ```md
69 | ::: demo[scope]
70 | <template>
71 |   <div>{{ foo }}</div>
72 | </template>
73 | 
74 | <script>
75 | export default {
76 |   data() {
77 |     return { foo: 'foo' }
78 |   }
79 | }
80 | </script>
81 | :::
82 | ```
83 | 
84 | ```md
85 | ::: demo[scope]
86 | <template>
87 |   <div>{{ foo }}</div>
88 | </template>
89 | 
90 | <script>
91 | export default {
92 |   data() {
93 |     return { foo: 'bar' }
94 |   }
95 | }
96 | </script>
97 | :::
98 | ```


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">vuepress-theme-dumi</h1>
 2 | 
 3 | 📖 A dumi style theme for VuePress.
 4 | 
 5 | English | <a href="https://github.com/OrekiSH/vuepress-dumi/blob/main/README-zh_CN.md">简体中文</a>
 6 | 
 7 | ## Install
 8 | 
 9 | * First of all, install [vuepress v1.x](https://github.com/vuejs/vuepress)
10 | 
11 | * Then install the theme
12 | 
13 | ```bash
14 | $ npm i -D @vuepress-dumi/vuepress-theme-dumi
15 | # OR
16 | $ yarn add -D @vuepress-dumi/vuepress-theme-dumi
17 | ```
18 | 
19 | ## Usage
20 | Write vuepress config
21 | 
22 | ```js
23 | // .vuepress/config.js
24 | module.exports = {
25 |   theme: '@vuepress-dumi/dumi',
26 | }
27 | ```
28 | 
29 | ## Preview
30 | 
31 | ![pc mode](https://s3.ax1x.com/2021/02/12/yDNldg.png)
32 | ![mobile mode](https://s3.ax1x.com/2021/02/12/yDUi60.png)
33 | ![code previewer](https://s3.ax1x.com/2021/02/12/yDNgQx.png)
34 | 
35 | 💡attention: if you want to import element-ui like me, you need install async-validator@1.11.5
36 | 
37 | ``` bash
38 | $ npm i -D async-validator@1.11.5
39 | # OR
40 | $ yarn add -D async-validator@1.11.5
41 | ```
42 | 
43 | ## Code Previewer Usage
44 | 
45 | 💡attention: whitespace is in need before `demo`
46 | 
47 | ```md
48 | ::: demo
49 | <div @click="handleClick">click me</div>
50 | 
51 | <script>
52 | export default {
53 |   methods: {
54 |     handleClick() {
55 |       console.warn('clicked')
56 |     }
57 |   }
58 | }
59 | </script>
60 | :::
61 | ```
62 | 
63 | If you need code scope, you can use `demo[scope]`.
64 | 
65 | 💡attention: `<template></template>` is in need, and you can not use `import` statment in scope mode. And if you use `demo[scope]` and `demo` in one markdown file, browser may print some error.
66 | 
67 | ```md
68 | ::: demo[scope]
69 | <template>
70 |   <div>{{ foo }}</div>
71 | </template>
72 | 
73 | <script>
74 | export default {
75 |   data() {
76 |     return { foo: 'foo' }
77 |   }
78 | }
79 | </script>
80 | :::
81 | ```
82 | 
83 | ```md
84 | ::: demo[scope]
85 | <template>
86 |   <div>{{ foo }}</div>
87 | </template>
88 | 
89 | <script>
90 | export default {
91 |   data() {
92 |     return { foo: 'bar' }
93 |   }
94 | }
95 | </script>
96 | :::
97 | ```


--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
1 | {
2 |   "packages": [
3 |     "packages/*"
4 |   ],
5 |   "version": "0.3.8"
6 | }
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "version": "0.3.7",
 4 |   "workspaces": [
 5 |     "packages/*"
 6 |   ],
 7 |   "devDependencies": {
 8 |     "eslint": "^7.19.0",
 9 |     "eslint-config-standard": "^16.0.2",
10 |     "eslint-plugin-import": "^2.22.1",
11 |     "eslint-plugin-node": "^11.1.0",
12 |     "eslint-plugin-promise": "^4.2.1",
13 |     "eslint-plugin-vue": "^7.5.0",
14 |     "husky": "^4.3.8",
15 |     "lerna": "^3.22.1",
16 |     "lint-staged": "^10.5.4"
17 |   },
18 |   "scripts": {
19 |     "lint": "eslint --ext .js,.vue ./",
20 |     "lintfix": "eslint --fix --ext .js,.vue ./",
21 |     "patch": "node_modules/.bin/lerna version patch --no-git-tag-version"
22 |   },
23 |   "lint-staged": {
24 |     "*.{js,vue}": "npm run lint"
25 |   },
26 |   "husky": {
27 |     "hooks": {
28 |       "pre-commit": "lint-staged"
29 |     }
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/packages/vuepress-plugin-dumi-previewer/README-zh_CN.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">vuepress-plugin-dumi-previewer</h1>
 2 | 
 3 | <a href="https://github.com/OrekiSH/vuepress-dumi/blob/main/packages/vuepress-plugin-dumi-previewer/README.md">English</a> | 简体中文
 4 | 
 5 | 💡注意: `demo`之前的空格是必需的
 6 | 
 7 | ```md
 8 | ::: demo
 9 | <div @click="handleClick">click me</div>
10 | 
11 | <script>
12 | export default {
13 |   methods: {
14 |     handleClick() {
15 |       console.warn('clicked')
16 |     }
17 |   }
18 | }
19 | </script>
20 | :::
21 | ```
22 | 
23 | 如果你需要将代码限制在当前代码块的作用域内, 可以使用`demo[scope]`
24 | 
25 | 💡注意: `<template></template>`标签是必需的, 并且你不能在scope模式下使用`import`语句。另外如果你在一个markdown文件中同时使用`demo[scope]`和`demo`，可能会出现一些报错
26 | 
27 | ```md
28 | ::: demo[scope]
29 | <template>
30 |   <div>{{ foo }}</div>
31 | </template>
32 | 
33 | <script>
34 | export default {
35 |   data() {
36 |     return { foo: 'foo' }
37 |   }
38 | }
39 | </script>
40 | :::
41 | ```
42 | 
43 | ```md
44 | ::: demo[scope]
45 | <template>
46 |   <div>{{ foo }}</div>
47 | </template>
48 | 
49 | <script>
50 | export default {
51 |   data() {
52 |     return { foo: 'bar' }
53 |   }
54 | }
55 | </script>
56 | :::
57 | ```
58 | 
59 | ## 安装
60 | 
61 | * 首先安装 [VuePress v1.x](https://github.com/vuejs/vuepress)
62 | 
63 | * 接着安装插件
64 | 
65 | ```bash
66 | $ npm i -D @vuepress-dumi/vuepress-plugin-dumi-previewer
67 | # OR
68 | $ yarn add -D @vuepress-dumi/vuepress-plugin-dumi-previewer
69 | ```
70 | 
71 | ## 用法
72 | 
73 | 配置VuePress的config.js文件
74 | 
75 | ```js
76 | // .vuepress/config.js
77 | module.exports = {
78 |   plugins: ['@vuepress-dumi/dumi-previewer'],
79 | }
80 | ```
81 | 
82 | ## 预览
83 | 
84 | ![代码预览](https://s3.ax1x.com/2021/02/12/yDNgQx.png)
85 | 
86 | 💡注意: 如果你需要引入element-ui, 则需要指定async-validator的版本:
87 | 
88 | ``` bash
89 | $ npm i -D async-validator@1.11.5
90 | # OR
91 | $ yarn add -D async-validator@1.11.5
92 | ```
93 | 
94 | ## 致谢
95 | 
96 | 本项目受到以下开源项目的启发, 感谢他们的杰出贡献
97 | 
98 | - [dumi](https://github.com/umijs/dumi)
99 | - [vuepress-plugin-demo-code](https://github.com/BuptStEve/vuepress-plugin-demo-code)


--------------------------------------------------------------------------------
/packages/vuepress-plugin-dumi-previewer/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">vuepress-plugin-dumi-previewer</h1>
 2 | 
 3 | English | <a href="https://github.com/OrekiSH/vuepress-dumi/blob/main/packages/vuepress-plugin-dumi-previewer/README-zh_CN.md">简体中文</a>
 4 | 
 5 | 💡attention: whitespace is in need before `demo`
 6 | 
 7 | ```md
 8 | ::: demo
 9 | <div @click="handleClick">click me</div>
10 | 
11 | <script>
12 | export default {
13 |   methods: {
14 |     handleClick() {
15 |       console.warn('clicked')
16 |     }
17 |   }
18 | }
19 | </script>
20 | :::
21 | ```
22 | 
23 | If you need code scope, you can use `demo[scope]`.
24 | 
25 | 💡attention: `<template></template>` is in need, and you can not use `import` statment in scope mode. And if you use `demo[scope]` and `demo` in one markdown file, browser may print some error.
26 | 
27 | ```md
28 | ::: demo[scope]
29 | <template>
30 |   <div>{{ foo }}</div>
31 | </template>
32 | 
33 | <script>
34 | export default {
35 |   data() {
36 |     return { foo: 'foo' }
37 |   }
38 | }
39 | </script>
40 | :::
41 | ```
42 | 
43 | ```md
44 | ::: demo[scope]
45 | <template>
46 |   <div>{{ foo }}</div>
47 | </template>
48 | 
49 | <script>
50 | export default {
51 |   data() {
52 |     return { foo: 'bar' }
53 |   }
54 | }
55 | </script>
56 | :::
57 | ```
58 | 
59 | ## Install
60 | 
61 | * First of all, install [vuepress v1.x](https://github.com/vuejs/vuepress)
62 | 
63 | * Then install the plugin
64 | 
65 | ```bash
66 | $ npm i -D @vuepress-dumi/vuepress-plugin-dumi-previewer
67 | # OR
68 | $ yarn add -D @vuepress-dumi/vuepress-plugin-dumi-previewer
69 | ```
70 | 
71 | ## Usage
72 | Write vuepress config
73 | 
74 | ```js
75 | // .vuepress/config.js
76 | module.exports = {
77 |   plugins: ['@vuepress-dumi/dumi-previewer'],
78 | }
79 | ```
80 | 
81 | ## Preview
82 | 
83 | ![code previewer](https://s3.ax1x.com/2021/02/12/yDNgQx.png)
84 | 
85 | 💡attention: if you want to import element-ui like me, you need install async-validator@1.11.5
86 | 
87 | ``` bash
88 | $ npm i -D async-validator@1.11.5
89 | # OR
90 | $ yarn add -D async-validator@1.11.5
91 | ```
92 | 
93 | ## Thanks
94 | 
95 | This repo is inspired by the following projects, Thanks for their great work.
96 | 
97 | - [dumi](https://github.com/umijs/dumi)
98 | - [vuepress-plugin-demo-code](https://github.com/BuptStEve/vuepress-plugin-demo-code)


--------------------------------------------------------------------------------
/packages/vuepress-plugin-dumi-previewer/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@vuepress-dumi/vuepress-plugin-dumi-previewer",
 3 |   "version": "0.3.11",
 4 |   "description": "A dumi style code previewer plugin for VuePress.",
 5 |   "keywords": [
 6 |     "vue",
 7 |     "vuepress",
 8 |     "plugin",
 9 |     "documentation",
10 |     "dumi",
11 |     "code",
12 |     "previewer"
13 |   ],
14 |   "author": "OrekiSH <orekish@163.com>",
15 |   "homepage": "https://github.com/OrekiSH/vuepress-dumi",
16 |   "license": "MIT",
17 |   "main": "src/index.js",
18 |   "repository": {
19 |     "type": "git",
20 |     "url": "git+https://github.com/OrekiSH/vuepress-dumi.git",
21 |     "directory": "packages/vuepress-plugin-dumi-previewer"
22 |   },
23 |   "publishConfig": {
24 |     "access": "public"
25 |   },
26 |   "bugs": {
27 |     "url": "https://github.com/OrekiSH/vuepress-dumi/issues"
28 |   },
29 |   "dependencies": {
30 |     "@babel/standalone": "^7.14.0",
31 |     "@vuepress/markdown": "^1.8.0",
32 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
33 |     "babel-plugin-syntax-jsx": "^6.18.0",
34 |     "babel-plugin-transform-vue-jsx": "^3.7.0",
35 |     "copy-to-clipboard": "^3.3.1",
36 |     "markdown-it-container": "^3.0.0",
37 |     "vue-template-compiler": "^2.6.12"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/packages/vuepress-plugin-dumi-previewer/src/Previewer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <section class="dumi-previewer">
  3 |     <div class="dumi-previewer-demo">
  4 |       <template v-if="scope && demo">
  5 |         <component :is="demo" />
  6 |       </template>
  7 | 
  8 |       <template v-else>
  9 |         <slot name="demo"></slot>
 10 |       </template>
 11 |     </div>
 12 | 
 13 |     <div class="dumi-previewer-actions">
 14 |       <div></div>
 15 | 
 16 |       <div>
 17 |         <svg
 18 |           v-if="copied"
 19 |           class="dumi-previewer-actions__icon"
 20 |           style="fill: green;"
 21 |           xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>
 22 | 
 23 |         <svg
 24 |           v-else
 25 |           class="dumi-previewer-actions__icon"
 26 |           xmlns="http://www.w3.org/2000/svg"
 27 |           viewBox="0 0 24 24" width="24" height="24"
 28 |           @click="handleCopy"
 29 |         ><path fill="none" d="M0 0h24v24H0z"/><path d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"/></svg>
 30 | 
 31 |         <svg
 32 |           class="dumi-previewer-actions__icon"
 33 |           xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"
 34 |           @click="handleCollapse"
 35 |         ><path fill="none" d="M0 0h24v24H0z"/><path d="M24 12l-5.657 5.657-1.414-1.414L21.172 12l-4.243-4.243 1.414-1.414L24 12zM2.828 12l4.243 4.243-1.414 1.414L0 12l5.657-5.657L7.07 7.757 2.828 12zm6.96 9H7.66l6.552-18h2.128L9.788 21z"/></svg>
 36 |       </div>
 37 |     </div>
 38 | 
 39 |     <div
 40 |       v-show="!collapsed"
 41 |       class="dumi-previewer-source">
 42 |       <div
 43 |         v-html="highlightCode"
 44 |         class="language-vue extra-class"
 45 |       />
 46 |     </div>
 47 |   </section>
 48 | </template>
 49 | 
 50 | <script>
 51 | import copy from 'copy-to-clipboard'
 52 | import highlight from './highlight'
 53 | 
 54 | const compiler = require('vue-template-compiler')
 55 | const Babel = require('@babel/standalone')
 56 | const jsx = require('babel-plugin-transform-vue-jsx')
 57 | 
 58 | const templateBlockReg = /<template>([\s\S]+)<\/template>/
 59 | const scriptBlockReg = /<script>([\s\S]+)<\/script>/
 60 | 
 61 | Babel.registerPlugin('jsx', jsx)
 62 | 
 63 | export default {
 64 |   name: 'dumi-previewer',
 65 | 
 66 |   props: {
 67 |     code: {
 68 |       type: String,
 69 |       default: ''
 70 |     },
 71 | 
 72 |     scope: {
 73 |       type: Boolean,
 74 |       default: false
 75 |     }
 76 |   },
 77 | 
 78 |   data () {
 79 |     return {
 80 |       collapsed: false,
 81 |       copied: false,
 82 |       timerId: null,
 83 | 
 84 |       /**
 85 |        * take over VuePress render
 86 |        * 接管VuePress渲染
 87 |       */
 88 |       demo: null
 89 |     }
 90 |   },
 91 | 
 92 |   computed: {
 93 |     decodedCode () {
 94 |       return decodeURIComponent(this.code)
 95 |     },
 96 | 
 97 |     highlightCode () {
 98 |       return highlight(this.decodedCode, 'vue')
 99 |     }
100 |   },
101 | 
102 |   created () {
103 |     if (this.decodedCode && this.scope) {
104 |       const code = this.decodedCode
105 |       const scriptBlock = code.match(scriptBlockReg)
106 |       const templateBlock = code.match(templateBlockReg)
107 |       /**
108 |        * not match Vue SFC
109 |        * 不符合Vue SFC定义
110 |        */
111 |       if (!scriptBlock || !templateBlock) return
112 |       if (!scriptBlock[1] || !templateBlock[1]) return
113 | 
114 |       /**
115 |        * generate data/methods etc Vue options
116 |        * 提取data/methods等选项
117 |        */
118 |       let optionString = scriptBlock[1].trim()
119 |       try {
120 |         // compile jsx with @babel/standalone, 使用@babel/standalone编译jsx
121 |         optionString = Babel.transform(optionString, { plugins: ['jsx'] }).code
122 |       } catch (err) {
123 |         console.error(err)
124 |       }
125 |       optionString = optionString.replace('export default ', '')
126 | 
127 |       // eslint-disable-next-line prefer-const
128 |       let option = null
129 |       // eslint-disable-next-line
130 |       eval(`option = ${optionString}`)
131 | 
132 |       if (!this.$root.constructor) return
133 | 
134 |       /**
135 |        * generate render function
136 |        * 编译得到渲染函数
137 |        */
138 |       const renderFunc = compiler.compile(`<div>${templateBlock[1]}</div>`).render
139 | 
140 |       const demoComponent = this.$root.constructor.component('demo', {
141 |         ...option,
142 |         // eslint-disable-next-line
143 |         render: new Function(renderFunc)
144 |       })
145 |       this.demo = demoComponent
146 |       this.$options.components.demo = demoComponent
147 |     }
148 |   },
149 | 
150 |   beforeDestroy () {
151 |     clearTimeout(this.timerId)
152 |   },
153 | 
154 |   methods: {
155 |     handleCollapse () {
156 |       this.collapsed = !this.collapsed
157 |     },
158 | 
159 |     handleCopy () {
160 |       this.copied = true
161 |       copy(this.decodedCode)
162 | 
163 |       clearTimeout(this.timer)
164 |       this.timerId = setTimeout(() => {
165 |         this.copied = false
166 |       }, 2000)
167 |     }
168 |   }
169 | }
170 | </script>
171 | 
172 | <style lang="stylus">
173 | .dumi-previewer {
174 |   background-color: #fff;
175 |   border: 1px solid #ebedf1;
176 |   border-radius: 1px;
177 | 
178 |   .dumi-previewer-demo {
179 |     padding: 40px 24px;
180 |   }
181 | 
182 |   .dumi-previewer-actions {
183 |     display: flex;
184 |     align-items: center;
185 |     justify-content: space-between;
186 |     border-top: 1px dashed #ebedf1;
187 |     height: 40px;
188 |     padding: 0 1em;
189 | 
190 |     .dumi-previewer-actions__icon {
191 |       width: 16px;
192 |       height: 16px;
193 |       padding: 8px 4px;
194 |       opacity: 0.4;
195 |       cursor: pointer;
196 |       transition: opacity .3s;
197 | 
198 |       &:hover {
199 |         opacity: 0.6;
200 |       }
201 |     }
202 |   }
203 | 
204 |   .dumi-previewer-source {
205 |     border-top: 1px dashed #ebedf1;
206 | 
207 |     div[class*="language-"] {
208 |       background-color: #f9fafb;
209 |       border-radius: 0;
210 |     }
211 | 
212 |     pre[class*="language-"] {
213 |       margin: 0 !important;
214 |     }
215 | 
216 |     pre[class*="language-"] code {
217 |       color: #000 !important;
218 |     }
219 | 
220 |     .token.cdata,.token.comment,.token.doctype,.token.prolog {
221 |       color: #708090
222 |     }
223 | 
224 |     .token.punctuation {
225 |       color: #999
226 |     }
227 | 
228 |     .token.namespace {
229 |       opacity: .7
230 |     }
231 | 
232 |     .token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag {
233 |       color: #905
234 |     }
235 | 
236 |     .token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string {
237 |       color: #690
238 |     }
239 | 
240 |     .language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url {
241 |       color: #9a6e3a;
242 |       background: hsla(0,0%,100%,.5)
243 |     }
244 | 
245 |     .token.atrule,.token.attr-value,.token.keyword {
246 |       color: #07a
247 |     }
248 | 
249 |     .token.class-name,.token.function {
250 |       color: #dd4a68
251 |     }
252 | 
253 |     .token.important,.token.regex,.token.variable {
254 |       color: #e90
255 |     }
256 |   }
257 | }
258 | </style>
259 | 


--------------------------------------------------------------------------------
/packages/vuepress-plugin-dumi-previewer/src/enhanceAppFile.js:
--------------------------------------------------------------------------------
1 | import Previewer from './Previewer.vue'
2 | 
3 | export default ({ Vue }) => {
4 |   Vue.component('Previewer', Previewer)
5 | }
6 | 


--------------------------------------------------------------------------------
/packages/vuepress-plugin-dumi-previewer/src/highlight.js:
--------------------------------------------------------------------------------
 1 | const prism = require('prismjs')
 2 | const escapeHtml = require('escape-html')
 3 | const loadLanguages = require('prismjs/components/index')
 4 | 
 5 | function wrap (code, lang) {
 6 |   if (lang === 'text') {
 7 |     code = escapeHtml(code)
 8 |   }
 9 |   return `<pre v-pre class="language-${lang}"><code>${code}</code></pre>`
10 | }
11 | 
12 | function getLangCodeFromExtension (extension) {
13 |   const extensionMap = {
14 |     vue: 'markup',
15 |     html: 'markup',
16 |     md: 'markdown',
17 |     rb: 'ruby',
18 |     ts: 'typescript',
19 |     py: 'python',
20 |     sh: 'bash',
21 |     yml: 'yaml',
22 |     styl: 'stylus',
23 |     kt: 'kotlin',
24 |     rs: 'rust'
25 |   }
26 | 
27 |   return extensionMap[extension] || extension
28 | }
29 | 
30 | module.exports = (str, lang) => {
31 |   if (!lang) {
32 |     return wrap(str, 'text')
33 |   }
34 |   lang = lang.toLowerCase()
35 |   const rawLang = lang
36 | 
37 |   lang = getLangCodeFromExtension(lang)
38 | 
39 |   if (!prism.languages[lang]) {
40 |     try {
41 |       loadLanguages([lang])
42 |     } catch (e) {
43 |       console.warn(`[vuepress] Syntax highlight for language "${lang}" is not supported.`)
44 |     }
45 |   }
46 |   if (prism.languages[lang]) {
47 |     const code = prism.highlight(str, prism.languages[lang], lang)
48 |     return wrap(code, rawLang)
49 |   }
50 |   return wrap(str, 'text')
51 | }
52 | 


--------------------------------------------------------------------------------
/packages/vuepress-plugin-dumi-previewer/src/index.js:
--------------------------------------------------------------------------------
 1 | const markdownItContainer = require('markdown-it-container')
 2 | 
 3 | module.exports = (options = {}) => {
 4 |   const { marker = 'demo', scopeMaker = 'demo[scope]' } = options
 5 | 
 6 |   function render (tokens, idx, endType, scope) {
 7 |     const { nesting } = tokens[idx]
 8 | 
 9 |     if (nesting === -1) {
10 |       return '</template></Previewer>\n'
11 |     }
12 | 
13 |     let htmlStr = ''
14 |     let lastLine = 0
15 | 
16 |     for (let index = idx; index < tokens.length; index++) {
17 |       const { map, type, content } = tokens[index]
18 | 
19 |       if (type === endType) break
20 | 
21 |       // add empty lines
22 |       if (map) {
23 |         const delta = map[0] - (lastLine || map[1])
24 | 
25 |         if (delta > 0) {
26 |           htmlStr += '\n'.repeat(delta)
27 |         }
28 | 
29 |         lastLine = map[1]
30 |       }
31 | 
32 |       htmlStr += content
33 |     }
34 | 
35 |     return `
36 |       <Previewer
37 |         :scope="${scope}"
38 |         code="${encodeURIComponent(htmlStr)}"
39 |       >
40 |         <template slot="demo">
41 |     `
42 |   }
43 | 
44 |   function slotRender (tokens, index) {
45 |     return render(tokens, index, `container_${marker}_close`, false)
46 |   }
47 | 
48 |   function scopeRender (tokens, index) {
49 |     return render(tokens, index, `container_${scopeMaker}_close`, true)
50 |   }
51 | 
52 |   return {
53 |     name: 'vuepress-plugin-dumi-previewer',
54 |     enhanceAppFiles: [
55 |       require.resolve('./enhanceAppFile.js')
56 |     ],
57 |     extendMarkdown: (md) => {
58 |       md.use(markdownItContainer, marker, { render: slotRender })
59 |       md.use(markdownItContainer, scopeMaker, { render: scopeRender })
60 |     }
61 |   }
62 | }
63 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/README-zh_CN.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">vuepress-theme-dumi</h1>
 2 | 
 3 | 📖 适配VuePress的dumi样式主题.
 4 | 
 5 | <a href="https://github.com/OrekiSH/vuepress-dumi/blob/main/packages/vuepress-theme-dumi/README.md">English</a> | 简体中文
 6 | 
 7 | ## 安装
 8 | 
 9 | * 首先安装 [VuePress v1.x](https://github.com/vuejs/vuepress)
10 | 
11 | * 接着安装主题
12 | 
13 | ```bash
14 | $ npm i -D @vuepress-dumi/vuepress-theme-dumi
15 | # OR
16 | $ yarn add -D @vuepress-dumi/vuepress-theme-dumi
17 | ```
18 | 
19 | ## 用法
20 | 
21 | 配置VuePress的config.js文件
22 | 
23 | ```js
24 | // .vuepress/config.js
25 | module.exports = {
26 |   theme: '@vuepress-dumi/dumi',
27 | }
28 | ```
29 | 
30 | ## 预览
31 | 
32 | ![PC模式](https://s3.ax1x.com/2021/02/12/yDNldg.png)
33 | ![手机模式](https://s3.ax1x.com/2021/02/12/yDUi60.png)
34 | ![代码预览](https://s3.ax1x.com/2021/02/12/yDNgQx.png)
35 | 
36 | 💡注意: 如果你需要引入element-ui, 则需要指定async-validator的版本:
37 | 
38 | ``` bash
39 | $ npm i -D async-validator@1.11.5
40 | # OR
41 | $ yarn add -D async-validator@1.11.5
42 | ```


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">vuepress-theme-dumi</h1>
 2 | 
 3 | 📖 A dumi style theme for VuePress.
 4 | 
 5 | English | <a href="https://github.com/OrekiSH/vuepress-dumi/blob/main/packages/vuepress-theme-dumi/README-zh_CN.md">简体中文</a>
 6 | 
 7 | ## Install
 8 | 
 9 | * First of all, install [vuepress v1.x](https://github.com/vuejs/vuepress)
10 | 
11 | * Then install the theme
12 | 
13 | ```bash
14 | $ npm i -D @vuepress-dumi/vuepress-theme-dumi
15 | # OR
16 | $ yarn add -D @vuepress-dumi/vuepress-theme-dumi
17 | ```
18 | 
19 | ## Usage
20 | Write vuepress config
21 | 
22 | ```js
23 | // .vuepress/config.js
24 | module.exports = {
25 |   theme: '@vuepress-dumi/dumi',
26 | }
27 | ```
28 | 
29 | ## Preview
30 | 
31 | ![pc mode](https://s3.ax1x.com/2021/02/12/yDNldg.png)
32 | ![mobile mode](https://s3.ax1x.com/2021/02/12/yDUi60.png)
33 | ![code previewer](https://s3.ax1x.com/2021/02/12/yDNgQx.png)
34 | 
35 | 💡attention: if you want to import element-ui like me, you need install async-validator@1.11.5
36 | 
37 | ``` bash
38 | $ npm i -D async-validator@1.11.5
39 | # OR
40 | $ yarn add -D async-validator@1.11.5
41 | ```


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/components/AlgoliaSearchBox.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <form
  3 |     id="search-form"
  4 |     class="algolia-search-wrapper search-box"
  5 |     role="search"
  6 |   >
  7 |     <input
  8 |       id="algolia-search-input"
  9 |       class="search-query"
 10 |       :placeholder="placeholder"
 11 |     >
 12 |   </form>
 13 | </template>
 14 | 
 15 | <script>
 16 | export default {
 17 |   name: 'AlgoliaSearchBox',
 18 | 
 19 |   props: ['options'],
 20 | 
 21 |   data () {
 22 |     return {
 23 |       placeholder: undefined
 24 |     }
 25 |   },
 26 | 
 27 |   watch: {
 28 |     $lang (newValue) {
 29 |       this.update(this.options, newValue)
 30 |     },
 31 | 
 32 |     options (newValue) {
 33 |       this.update(newValue, this.$lang)
 34 |     }
 35 |   },
 36 | 
 37 |   mounted () {
 38 |     this.initialize(this.options, this.$lang)
 39 |     this.placeholder = this.$site.themeConfig.searchPlaceholder || ''
 40 |   },
 41 | 
 42 |   methods: {
 43 |     initialize (userOptions, lang) {
 44 |       Promise.all([
 45 |         import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.js'),
 46 |         import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.css')
 47 |       ]).then(([docsearch]) => {
 48 |         docsearch = docsearch.default
 49 |         const { algoliaOptions = {} } = userOptions
 50 |         docsearch(Object.assign(
 51 |           {},
 52 |           userOptions,
 53 |           {
 54 |             inputSelector: '#algolia-search-input',
 55 |             // #697 Make docsearch work well at i18n mode.
 56 |             algoliaOptions: Object.assign({
 57 |               facetFilters: [`lang:${lang}`].concat(algoliaOptions.facetFilters || [])
 58 |             }, algoliaOptions),
 59 |             handleSelected: (input, event, suggestion) => {
 60 |               const { pathname, hash } = new URL(suggestion.url)
 61 |               const routepath = pathname.replace(this.$site.base, '/')
 62 |               const _hash = decodeURIComponent(hash)
 63 |               this.$router.push(`${routepath}${_hash}`)
 64 |             }
 65 |           }
 66 |         ))
 67 |       })
 68 |     },
 69 | 
 70 |     update (options, lang) {
 71 |       this.$el.innerHTML = '<input id="algolia-search-input" class="search-query">'
 72 |       this.initialize(options, lang)
 73 |     }
 74 |   }
 75 | }
 76 | </script>
 77 | 
 78 | <style lang="stylus">
 79 | .algolia-search-wrapper
 80 |   & > span
 81 |     vertical-align middle
 82 |   .algolia-autocomplete
 83 |     line-height normal
 84 |     .ds-dropdown-menu
 85 |       background-color #fff
 86 |       border 1px solid #999
 87 |       border-radius 4px
 88 |       font-size 16px
 89 |       margin 6px 0 0
 90 |       padding 4px
 91 |       text-align left
 92 |       &:before
 93 |         border-color #999
 94 |       [class*=ds-dataset-]
 95 |         border none
 96 |         padding 0
 97 |       .ds-suggestions
 98 |         margin-top 0
 99 |       .ds-suggestion
100 |         border-bottom 1px solid $borderColor
101 |     .algolia-docsearch-suggestion--highlight
102 |       color #2c815b
103 |     .algolia-docsearch-suggestion
104 |       border-color $borderColor
105 |       padding 0
106 |       .algolia-docsearch-suggestion--category-header
107 |         padding 5px 10px
108 |         margin-top 0
109 |         background $accentColor
110 |         color #fff
111 |         font-weight 600
112 |         .algolia-docsearch-suggestion--highlight
113 |           background rgba(255, 255, 255, 0.6)
114 |       .algolia-docsearch-suggestion--wrapper
115 |         padding 0
116 |       .algolia-docsearch-suggestion--title
117 |         font-weight 600
118 |         margin-bottom 0
119 |         color $textColor
120 |       .algolia-docsearch-suggestion--subcategory-column
121 |         vertical-align top
122 |         padding 5px 7px 5px 5px
123 |         border-color $borderColor
124 |         background #f1f3f5
125 |         &:after
126 |           display none
127 |       .algolia-docsearch-suggestion--subcategory-column-text
128 |         color #555
129 |     .algolia-docsearch-footer
130 |       border-color $borderColor
131 |     .ds-cursor .algolia-docsearch-suggestion--content
132 |       background-color #e7edf3 !important
133 |       color $textColor
134 | 
135 | @media (min-width: $MQMobile)
136 |   .algolia-search-wrapper
137 |     .algolia-autocomplete
138 |       .algolia-docsearch-suggestion
139 |         .algolia-docsearch-suggestion--subcategory-column
140 |           float none
141 |           width 150px
142 |           min-width 150px
143 |           display table-cell
144 |         .algolia-docsearch-suggestion--content
145 |           float none
146 |           display table-cell
147 |           width 100%
148 |           vertical-align top
149 |         .ds-dropdown-menu
150 |           min-width 515px !important
151 | 
152 | @media (max-width: $MQMobile)
153 |   .algolia-search-wrapper
154 |     .ds-dropdown-menu
155 |       min-width calc(100vw - 4rem) !important
156 |       max-width calc(100vw - 4rem) !important
157 |     .algolia-docsearch-suggestion--wrapper
158 |       padding 5px 7px 5px 5px !important
159 |     .algolia-docsearch-suggestion--subcategory-column
160 |       padding 0 !important
161 |       background white !important
162 |     .algolia-docsearch-suggestion--subcategory-column-text:after
163 |       content " > "
164 |       font-size 10px
165 |       line-height 14.4px
166 |       display inline-block
167 |       width 5px
168 |       margin -3px 3px 0
169 |       vertical-align middle
170 | 
171 | </style>
172 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/components/DropdownLink.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="dropdown-wrapper"
  4 |     :class="{ open }"
  5 |   >
  6 |     <button
  7 |       class="dropdown-title"
  8 |       type="button"
  9 |       :aria-label="dropdownAriaLabel"
 10 |       @click="handleDropdown"
 11 |     >
 12 |       <span class="title">{{ item.text }}</span>
 13 |       <span
 14 |         class="arrow down"
 15 |       />
 16 |     </button>
 17 |     <button
 18 |       class="mobile-dropdown-title"
 19 |       type="button"
 20 |       :aria-label="dropdownAriaLabel"
 21 |       @click="setOpen(!open)"
 22 |     >
 23 |       <span class="title">{{ item.text }}</span>
 24 |       <span
 25 |         class="arrow"
 26 |         :class="open ? 'down' : 'right'"
 27 |       />
 28 |     </button>
 29 | 
 30 |     <DropdownTransition>
 31 |       <ul
 32 |         v-show="open"
 33 |         class="nav-dropdown"
 34 |       >
 35 |         <li
 36 |           v-for="(subItem, index) in item.items"
 37 |           :key="subItem.link || index"
 38 |           class="dropdown-item"
 39 |         >
 40 |           <h4 v-if="subItem.type === 'links'">
 41 |             {{ subItem.text }}
 42 |           </h4>
 43 | 
 44 |           <ul
 45 |             v-if="subItem.type === 'links'"
 46 |             class="dropdown-subitem-wrapper"
 47 |           >
 48 |             <li
 49 |               v-for="childSubItem in subItem.items"
 50 |               :key="childSubItem.link"
 51 |               class="dropdown-subitem"
 52 |             >
 53 |               <NavLink
 54 |                 :item="childSubItem"
 55 |                 @focusout="
 56 |                   isLastItemOfArray(childSubItem, subItem.items) &&
 57 |                     isLastItemOfArray(subItem, item.items) &&
 58 |                     setOpen(false)
 59 |                 "
 60 |               />
 61 |             </li>
 62 |           </ul>
 63 | 
 64 |           <NavLink
 65 |             v-else
 66 |             :item="subItem"
 67 |             @focusout="isLastItemOfArray(subItem, item.items) && setOpen(false)"
 68 |           />
 69 |         </li>
 70 |       </ul>
 71 |     </DropdownTransition>
 72 |   </div>
 73 | </template>
 74 | 
 75 | <script>
 76 | import NavLink from '@theme/components/NavLink.vue'
 77 | import DropdownTransition from '@theme/components/DropdownTransition.vue'
 78 | import last from 'lodash/last'
 79 | 
 80 | export default {
 81 |   name: 'DropdownLink',
 82 | 
 83 |   components: {
 84 |     NavLink,
 85 |     DropdownTransition
 86 |   },
 87 | 
 88 |   props: {
 89 |     item: {
 90 |       required: true
 91 |     }
 92 |   },
 93 | 
 94 |   data () {
 95 |     return {
 96 |       open: false
 97 |     }
 98 |   },
 99 | 
100 |   computed: {
101 |     dropdownAriaLabel () {
102 |       return this.item.ariaLabel || this.item.text
103 |     }
104 |   },
105 | 
106 |   watch: {
107 |     $route () {
108 |       this.open = false
109 |     }
110 |   },
111 | 
112 |   methods: {
113 |     setOpen (value) {
114 |       this.open = value
115 |     },
116 | 
117 |     isLastItemOfArray (item, array) {
118 |       return last(array) === item
119 |     },
120 | 
121 |     /**
122 |      * Open the dropdown when user tab and click from keyboard.
123 |      *
124 |      * Use event.detail to detect tab and click from keyboard. Ref: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
125 |      * The Tab + Click is UIEvent > KeyboardEvent, so the detail is 0.
126 |      */
127 |     handleDropdown () {
128 |       const isTriggerByTab = event.detail === 0
129 |       if (isTriggerByTab) this.setOpen(!this.open)
130 |     }
131 |   }
132 | }
133 | </script>
134 | 
135 | <style lang="stylus">
136 | .dropdown-wrapper
137 |   cursor pointer
138 |   .dropdown-title
139 |     display block
140 |     font-size 0.9rem
141 |     font-family inherit
142 |     cursor inherit
143 |     padding inherit
144 |     line-height 1.4rem
145 |     background transparent
146 |     border none
147 |     outline none
148 |     font-weight 500
149 |     color $textColor
150 |     &:hover
151 |       border-color transparent
152 |     .arrow
153 |       vertical-align middle
154 |       margin-top -1px
155 |       margin-left 0.2rem
156 |   .mobile-dropdown-title
157 |     @extends .dropdown-title
158 |     display none
159 |     font-weight 600
160 |     font-size inherit
161 |       &:hover
162 |         color $accentColor
163 |   .nav-dropdown
164 |     .dropdown-item
165 |       color inherit
166 |       line-height 1.7rem
167 |       h4
168 |         margin 0.45rem 0 0
169 |         border-top 1px solid #eee
170 |         padding 1rem 1.5rem 0.45rem 1.25rem
171 |       .dropdown-subitem-wrapper
172 |         padding 0
173 |         list-style none
174 |         .dropdown-subitem
175 |           font-size 0.9em
176 |           transition: background-color .3s
177 |           &:hover
178 |             color: $accentColor
179 |             background: #f9fafb
180 |       a
181 |         display block
182 |         line-height 1.7rem
183 |         position relative
184 |         border-bottom none
185 |         font-weight 400
186 |         margin-bottom 0
187 |         padding 0 1.5rem 0 1.25rem
188 |         &:hover
189 |           color $accentColor
190 |         &.router-link-active
191 |           color $accentColor
192 |           &::after
193 |             width: 0
194 |       &:first-child h4
195 |         margin-top 0
196 |         padding-top 0
197 |         border-top 0
198 | 
199 | @media (max-width: $MQMobile)
200 |   .dropdown-wrapper
201 |     &.open .dropdown-title
202 |       margin-bottom 0.5rem
203 |     .dropdown-title
204 |       display: none
205 |     .mobile-dropdown-title
206 |       display: block
207 |     .nav-dropdown
208 |       transition height .1s ease-out
209 |       overflow hidden
210 |       .dropdown-item
211 |         h4
212 |           border-top 0
213 |           margin-top 0
214 |           padding-top 0
215 |         h4, & > a
216 |           font-size 15px
217 |           line-height 2rem
218 |         .dropdown-subitem
219 |           font-size 14px
220 |           padding-left 1rem
221 | 
222 | @media (min-width: $MQMobile)
223 |   .dropdown-wrapper
224 |     height 1.8rem
225 |     &:hover .nav-dropdown,
226 |     &.open .nav-dropdown
227 |       // override the inline style.
228 |       display block !important
229 |     &.open:blur
230 |       display none
231 |     .nav-dropdown
232 |       display none
233 |       // Avoid height shaked by clicking
234 |       height auto !important
235 |       box-sizing border-box;
236 |       max-height calc(100vh - 2.7rem)
237 |       overflow-y auto
238 |       position absolute
239 |       top 100%
240 |       right 0
241 |       background-color #fff
242 |       padding 0.6rem 0
243 |       border 1px solid $borderColor
244 |       box-shadow 0 2px 20px 0 rgba(0, 0, 0, 0.05)
245 |       text-align left
246 |       border-radius 2px
247 |       white-space nowrap
248 |       margin 0
249 | </style>
250 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/components/DropdownTransition.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <transition
 3 |     name="dropdown"
 4 |     @enter="setHeight"
 5 |     @after-enter="unsetHeight"
 6 |     @before-leave="setHeight"
 7 |   >
 8 |     <slot />
 9 |   </transition>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   name: 'DropdownTransition',
15 | 
16 |   methods: {
17 |     setHeight (items) {
18 |       // explicitly set height so that it can be transitioned
19 |       items.style.height = items.scrollHeight + 'px'
20 |     },
21 | 
22 |     unsetHeight (items) {
23 |       items.style.height = ''
24 |     }
25 |   }
26 | }
27 | </script>
28 | 
29 | <style lang="stylus">
30 | .dropdown-enter, .dropdown-leave-to
31 |   height 0 !important
32 | 
33 | </style>
34 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/components/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <main
  3 |     class="home"
  4 |     :aria-labelledby="data.heroText !== null ? 'main-title' : null"
  5 |   >
  6 |     <header class="hero">
  7 |       <img
  8 |         v-if="data.heroImage"
  9 |         :src="$withBase(data.heroImage)"
 10 |         :alt="data.heroAlt || 'hero'"
 11 |       >
 12 | 
 13 |       <h1
 14 |         v-if="data.heroText !== null"
 15 |         id="main-title"
 16 |       >
 17 |         {{ data.heroText || $title || 'Hello' }}
 18 |       </h1>
 19 | 
 20 |       <p
 21 |         v-if="data.tagline !== null"
 22 |         class="description"
 23 |       >
 24 |         {{ data.tagline || $description || 'Welcome to your VuePress site' }}
 25 |       </p>
 26 | 
 27 |       <p
 28 |         v-if="data.actionText && data.actionLink"
 29 |         class="action"
 30 |       >
 31 |         <NavLink
 32 |           class="action-button"
 33 |           :item="actionLink"
 34 |         />
 35 |       </p>
 36 |     </header>
 37 | 
 38 |     <div
 39 |       v-if="data.features && data.features.length"
 40 |       class="features"
 41 |     >
 42 |       <div
 43 |         v-for="(feature, index) in data.features"
 44 |         :key="index"
 45 |         class="feature"
 46 |       >
 47 |         <h2>{{ feature.title }}</h2>
 48 |         <p>{{ feature.details }}</p>
 49 |       </div>
 50 |     </div>
 51 | 
 52 |     <Content class="theme-dumi-content custom" />
 53 | 
 54 |     <div
 55 |       v-if="data.footer"
 56 |       class="footer"
 57 |     >
 58 |       {{ data.footer }}
 59 |     </div>
 60 |   </main>
 61 | </template>
 62 | 
 63 | <script>
 64 | import NavLink from '@theme/components/NavLink.vue'
 65 | 
 66 | export default {
 67 |   name: 'Home',
 68 | 
 69 |   components: { NavLink },
 70 | 
 71 |   computed: {
 72 |     data () {
 73 |       return this.$page.frontmatter
 74 |     },
 75 | 
 76 |     actionLink () {
 77 |       return {
 78 |         link: this.data.actionLink,
 79 |         text: this.data.actionText
 80 |       }
 81 |     }
 82 |   }
 83 | }
 84 | </script>
 85 | 
 86 | <style lang="stylus">
 87 | .home
 88 |   padding $navbarHeight 2rem 0
 89 |   max-width $homePageWidth
 90 |   margin 0px auto
 91 |   display block
 92 |   .hero
 93 |     text-align center
 94 |     img
 95 |       max-width: 100%
 96 |       max-height 280px
 97 |       display block
 98 |       margin 3rem auto 1.5rem
 99 |     h1
100 |       font-size 3rem
101 |     h1, .description, .action
102 |       margin 1.8rem auto
103 |     .description
104 |       max-width 35rem
105 |       font-size 1.6rem
106 |       line-height 1.3
107 |       color lighten($textColor, 40%)
108 |     .action-button
109 |       display inline-block
110 |       font-size 1.2rem
111 |       color #fff
112 |       background-color $accentColor
113 |       padding 0.8rem 1.6rem
114 |       border-radius 4px
115 |       transition background-color .1s ease
116 |       box-sizing border-box
117 |       border-bottom 1px solid darken($accentColor, 10%)
118 |       &:hover
119 |         background-color lighten($accentColor, 10%)
120 |   .features
121 |     border-top 1px solid $borderColor
122 |     padding 1.2rem 0
123 |     margin-top 2.5rem
124 |     display flex
125 |     flex-wrap wrap
126 |     align-items flex-start
127 |     align-content stretch
128 |     justify-content space-between
129 |   .feature
130 |     flex-grow 1
131 |     flex-basis 30%
132 |     max-width 30%
133 |     h2
134 |       font-size 1.4rem
135 |       font-weight 500
136 |       border-bottom none
137 |       padding-bottom 0
138 |       color lighten($textColor, 10%)
139 |     p
140 |       color lighten($textColor, 25%)
141 |   .footer
142 |     padding 2.5rem
143 |     border-top 1px solid $borderColor
144 |     text-align center
145 |     color lighten($textColor, 25%)
146 | 
147 | @media (max-width: $MQMobile)
148 |   .home
149 |     .features
150 |       flex-direction column
151 |     .feature
152 |       max-width 100%
153 |       padding 0 2.5rem
154 | 
155 | @media (max-width: $MQMobileNarrow)
156 |   .home
157 |     padding-left 1.5rem
158 |     padding-right 1.5rem
159 |     .hero
160 |       img
161 |         max-height 210px
162 |         margin 2rem auto 1.2rem
163 |       h1
164 |         font-size 2rem
165 |       h1, .description, .action
166 |         margin 1.2rem auto
167 |       .description
168 |         font-size 1.2rem
169 |       .action-button
170 |         font-size 1rem
171 |         padding 0.6rem 1.2rem
172 |     .feature
173 |       h2
174 |         font-size 1.25rem
175 | </style>
176 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/components/NavLink.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <RouterLink
 3 |     v-if="isInternal"
 4 |     class="nav-link"
 5 |     :to="link"
 6 |     :exact="exact"
 7 |     @focusout.native="focusoutAction"
 8 |   >
 9 |     {{ item.text }}
10 |   </RouterLink>
11 |   <a
12 |     v-else
13 |     :href="link"
14 |     class="nav-link external"
15 |     :target="target"
16 |     :rel="rel"
17 |     @focusout="focusoutAction"
18 |   >
19 |     {{ item.text }}
20 |     <OutboundLink v-if="isBlankTarget" />
21 |   </a>
22 | </template>
23 | 
24 | <script>
25 | import { isExternal, isMailto, isTel, ensureExt } from '../util'
26 | 
27 | export default {
28 |   name: 'NavLink',
29 | 
30 |   props: {
31 |     item: {
32 |       required: true
33 |     }
34 |   },
35 | 
36 |   computed: {
37 |     link () {
38 |       return ensureExt(this.item.link)
39 |     },
40 | 
41 |     exact () {
42 |       if (this.$site.locales) {
43 |         return Object.keys(this.$site.locales).some(rootLink => rootLink === this.link)
44 |       }
45 |       return this.link === '/'
46 |     },
47 | 
48 |     isNonHttpURI () {
49 |       return isMailto(this.link) || isTel(this.link)
50 |     },
51 | 
52 |     isBlankTarget () {
53 |       return this.target === '_blank'
54 |     },
55 | 
56 |     isInternal () {
57 |       return !isExternal(this.link) && !this.isBlankTarget
58 |     },
59 | 
60 |     target () {
61 |       if (this.isNonHttpURI) {
62 |         return null
63 |       }
64 |       if (this.item.target) {
65 |         return this.item.target
66 |       }
67 |       return isExternal(this.link) ? '_blank' : ''
68 |     },
69 | 
70 |     rel () {
71 |       if (this.isNonHttpURI) {
72 |         return null
73 |       }
74 |       if (this.item.rel === false) {
75 |         return null
76 |       }
77 |       if (this.item.rel) {
78 |         return this.item.rel
79 |       }
80 |       return this.isBlankTarget ? 'noopener noreferrer' : null
81 |     }
82 |   },
83 | 
84 |   methods: {
85 |     focusoutAction () {
86 |       this.$emit('focusout')
87 |     }
88 |   }
89 | }
90 | </script>
91 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/components/NavLinks.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <nav
  3 |     v-if="userLinks.length || repoLink"
  4 |     class="nav-links"
  5 |   >
  6 |     <!-- user links -->
  7 |     <div
  8 |       v-for="item in userLinks"
  9 |       :key="item.link"
 10 |       class="nav-item"
 11 |     >
 12 |       <DropdownLink
 13 |         v-if="item.type === 'links'"
 14 |         :item="item"
 15 |       />
 16 |       <NavLink
 17 |         v-else
 18 |         :item="item"
 19 |       />
 20 |     </div>
 21 | 
 22 |     <!-- repo link -->
 23 |     <a
 24 |       v-if="repoLink"
 25 |       :href="repoLink"
 26 |       class="repo-link"
 27 |       target="_blank"
 28 |       rel="noopener noreferrer"
 29 |     >
 30 |       {{ repoLabel }}
 31 |       <OutboundLink />
 32 |     </a>
 33 |   </nav>
 34 | </template>
 35 | 
 36 | <script>
 37 | import DropdownLink from '@theme/components/DropdownLink.vue'
 38 | import { resolveNavLinkItem } from '../util'
 39 | import NavLink from '@theme/components/NavLink.vue'
 40 | 
 41 | export default {
 42 |   name: 'NavLinks',
 43 | 
 44 |   components: {
 45 |     NavLink,
 46 |     DropdownLink
 47 |   },
 48 | 
 49 |   computed: {
 50 |     userNav () {
 51 |       return this.$themeLocaleConfig.nav || this.$site.themeConfig.nav || []
 52 |     },
 53 | 
 54 |     nav () {
 55 |       const { locales } = this.$site
 56 |       if (locales && Object.keys(locales).length > 1) {
 57 |         const currentLink = this.$page.path
 58 |         const routes = this.$router.options.routes
 59 |         const themeLocales = this.$site.themeConfig.locales || {}
 60 |         const languageDropdown = {
 61 |           text: this.$themeLocaleConfig.selectText || 'Languages',
 62 |           ariaLabel: this.$themeLocaleConfig.ariaLabel || 'Select language',
 63 |           items: Object.keys(locales).map(path => {
 64 |             const locale = locales[path]
 65 |             const text = (themeLocales[path] && themeLocales[path].label) || locale.lang
 66 |             let link
 67 |             // Stay on the current page
 68 |             if (locale.lang === this.$lang) {
 69 |               link = currentLink
 70 |             } else {
 71 |               // Try to stay on the same page
 72 |               link = currentLink.replace(this.$localeConfig.path, path)
 73 |               // fallback to homepage
 74 |               if (!routes.some(route => route.path === link)) {
 75 |                 link = path
 76 |               }
 77 |             }
 78 |             return { text, link }
 79 |           })
 80 |         }
 81 |         return [...this.userNav, languageDropdown]
 82 |       }
 83 |       return this.userNav
 84 |     },
 85 | 
 86 |     userLinks () {
 87 |       return (this.nav || []).map(link => {
 88 |         return Object.assign(resolveNavLinkItem(link), {
 89 |           items: (link.items || []).map(resolveNavLinkItem)
 90 |         })
 91 |       })
 92 |     },
 93 | 
 94 |     repoLink () {
 95 |       const { repo } = this.$site.themeConfig
 96 |       if (repo) {
 97 |         return /^https?:/.test(repo)
 98 |           ? repo
 99 |           : `https://github.com/${repo}`
100 |       }
101 |       return null
102 |     },
103 | 
104 |     repoLabel () {
105 |       if (!this.repoLink) return
106 |       if (this.$site.themeConfig.repoLabel) {
107 |         return this.$site.themeConfig.repoLabel
108 |       }
109 | 
110 |       const repoHost = this.repoLink.match(/^https?:\/\/[^/]+/)[0]
111 |       const platforms = ['GitHub', 'GitLab', 'Bitbucket']
112 |       for (let i = 0; i < platforms.length; i++) {
113 |         const platform = platforms[i]
114 |         if (new RegExp(platform, 'i').test(repoHost)) {
115 |           return platform
116 |         }
117 |       }
118 | 
119 |       return 'Source'
120 |     }
121 |   }
122 | }
123 | </script>
124 | 
125 | <style lang="stylus">
126 | .nav-links
127 |   display inline-block
128 |   height 100%
129 |   line-height $navbarHeight
130 |   color #4d5164
131 |   a
132 |     line-height 1.4rem
133 |     color inherit
134 |     &:hover, &.router-link-active
135 |       color $accentColor
136 | 
137 |   .nav-item
138 |     position relative
139 |     display inline-block
140 |     margin-left 2rem
141 |     &:first-child
142 |       margin-left 1rem
143 |     .external
144 |       svg
145 |         color $arrowBgColor
146 | 
147 |   .repo-link
148 |     margin-left 2rem
149 |     svg
150 |       color $arrowBgColor
151 | 
152 | @media (max-width: $MQMobile)
153 |   .nav-links
154 |     height auto
155 |     .nav-item
156 |       &:first-child
157 |         margin-left 0
158 |     .nav-item, .repo-link
159 |       margin-left 0
160 | 
161 | @media (min-width: $MQMobile)
162 |   .nav-links a
163 |     &:hover
164 |       color $accentColor
165 | 
166 |       svg
167 |         color $accentColor
168 | 
169 |     &.router-link-active
170 |       color $accentColor
171 |       &::after
172 |         content: ''
173 |         position: absolute
174 |         bottom: 0
175 |         left: -2px
176 |         right: -2px
177 |         height: 2px
178 |         background-color: $accentColor
179 |         border-radius: 1px
180 |   .nav-item > a:not(.external)
181 |     &:hover, &.router-link-active
182 |       margin-bottom -2px
183 | </style>
184 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/components/Navbar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <header class="navbar">
  3 |     <SidebarButton @toggle-sidebar="$emit('toggle-sidebar')" />
  4 | 
  5 |     <RouterLink
  6 |       :to="$localePath"
  7 |       class="home-link"
  8 |     >
  9 |       <img
 10 |         v-if="$site.themeConfig.logo"
 11 |         class="logo"
 12 |         :src="$withBase($site.themeConfig.logo)"
 13 |         :alt="$siteTitle"
 14 |       >
 15 |       <span
 16 |         v-if="$siteTitle"
 17 |         ref="siteName"
 18 |         class="site-name"
 19 |         :class="{ 'can-hide': $site.themeConfig.logo }"
 20 |       >{{ $siteTitle }}</span>
 21 |     </RouterLink>
 22 | 
 23 |     <div
 24 |       class="links"
 25 |       :style="linksWrapMaxWidth ? {
 26 |         'max-width': linksWrapMaxWidth + 'px'
 27 |       } : {}"
 28 |     >
 29 |       <AlgoliaSearchBox
 30 |         v-if="isAlgoliaSearch"
 31 |         :options="algolia"
 32 |       />
 33 |       <SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" />
 34 |       <NavLinks class="can-hide" />
 35 |     </div>
 36 |   </header>
 37 | </template>
 38 | 
 39 | <script>
 40 | import AlgoliaSearchBox from '@AlgoliaSearchBox'
 41 | import SearchBox from '@SearchBox'
 42 | import SidebarButton from '@theme/components/SidebarButton.vue'
 43 | import NavLinks from '@theme/components/NavLinks.vue'
 44 | 
 45 | export default {
 46 |   name: 'Navbar',
 47 | 
 48 |   components: {
 49 |     SidebarButton,
 50 |     NavLinks,
 51 |     SearchBox,
 52 |     AlgoliaSearchBox
 53 |   },
 54 | 
 55 |   data () {
 56 |     return {
 57 |       linksWrapMaxWidth: null
 58 |     }
 59 |   },
 60 | 
 61 |   computed: {
 62 |     algolia () {
 63 |       return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
 64 |     },
 65 | 
 66 |     isAlgoliaSearch () {
 67 |       return this.algolia && this.algolia.apiKey && this.algolia.indexName
 68 |     }
 69 |   },
 70 | 
 71 |   mounted () {
 72 |     const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
 73 |     const NAVBAR_VERTICAL_PADDING = parseInt(css(this.$el, 'paddingLeft')) + parseInt(css(this.$el, 'paddingRight'))
 74 |     const handleLinksWrapWidth = () => {
 75 |       if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
 76 |         this.linksWrapMaxWidth = null
 77 |       } else {
 78 |         this.linksWrapMaxWidth = this.$el.offsetWidth - NAVBAR_VERTICAL_PADDING -
 79 |           ((this.$refs.siteName && this.$refs.siteName.offsetWidth) || 0)
 80 |       }
 81 |     }
 82 |     handleLinksWrapWidth()
 83 |     window.addEventListener('resize', handleLinksWrapWidth, false)
 84 |   }
 85 | }
 86 | 
 87 | function css (el, property) {
 88 |   // NOTE: Known bug, will return 'auto' if style value is 'auto'
 89 |   const win = el.ownerDocument.defaultView
 90 |   // null means not to return pseudo styles
 91 |   return win.getComputedStyle(el, null)[property]
 92 | }
 93 | </script>
 94 | 
 95 | <style lang="stylus">
 96 | $navbar-horizontal-padding = 4rem
 97 | 
 98 | .navbar
 99 |   padding 0 $navbar-horizontal-padding
100 |   display: flex
101 |   align-items: center
102 |   justify-content: space-between
103 | 
104 |   a, span, img
105 |     display inline-block
106 |   .logo
107 |     height $navbarHeight - 1.4rem
108 |     min-width $navbarHeight - 1.4rem
109 |     margin-right 0.8rem
110 |     vertical-align top
111 |   .site-name
112 |     font-size 1.3rem
113 |     font-weight 500
114 |     color #080e29
115 |     position relative
116 |   .links
117 |     display flex
118 |     align-items center
119 |     padding-left 1.5rem
120 |     box-sizing border-box
121 |     background-color white
122 |     white-space nowrap
123 |     font-size 0.9rem
124 |     height: 100%
125 | 
126 |     .search-box
127 |       input
128 |         border: none
129 |         color: $textColor
130 |         background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAABpRJREFUaAXNWWts01UUv+f+264DVEABqY8IjhhCCCGKRoMaE0HACKJxsI3WDwqd67qHEoiPT2qCEpJ1bB1vElpJZYnyMMEgfCCQEUFIDOGDihLiY7yUGAHb9XGP59+t3b3/de2/XYvtl/855557zvndc+6zwAr4tW0KPQQithQRZjEUVcCgChkbw4CFGcMwIPxJZk8zzk5qFkuP1137QwFuTHUBU1qk1N3dXdl7LVKPyGoZ4mNm+w3oneKMb7bbxu5xu1/6N8++WdVzAkBE7usKukCwj5Dh/Vmt5WgEgL8oS2ubG5w7iaakjfyXFUD7lsCDGMMvadQfHbmrQQsA7BjjfFVLg/PHQWlh1LAA2v2BuQLZF1QuE42mB0bvNGOwj3NxinGtN1Exulez3hJwizuYiDsSgs1myF6mDD5F/bnRBmXiBkO+uNXrPDqkLQ9BRgDtnYHlVC4BGnmrbItGLoYMtmoV/JOmlSt+l9uGozdtCkyMxNk7VDFNZM8u65G9CAeobvK4vpLl+dBDAGzsCj6dSOARWk1ssiEa9UNWgEaPx/mzLDdL+/2hB2IYa6OMvKr2gbjG+YtNnhXfqHJznAKgq2v31D6ROEllc4/aHda3NDrfJRBClefP+ToDH1CvDwnIoG+Aqzawz/J4qi/nazFdm7rBvkQ8ZAweOK9v9brWFiN4PbiWRtfHCFA3MI/646V5FsPwZxRDOh6zQLSU4riJVS4KvjHFJ7+cbWj1uNYpsiIwhw7uPbdg0VJ9GX1OMjf129NnL1Lb95IsJ5lMo9/fPSYqIj9R3U9O9aAROtzscS4o1sin7Ka+esZ9/uBeGrQlKRkFc94xqXJ6dXV1IiXL9U2mLMbCLjl4Wh7jjIO3VMHrQSVLSLO2UNB9qSApJdP+uNZXneLNfPtrDmGFrExL3o5ibDKyzUx061s1FwlKl9wGQjTJfC6a+/3BKkrnk7KijVvWy3wpaY1ZNySzMeCEsvD49u3d48365HEhFsrKtLmcbWiouyDLSkl7vTW9NIDfST74zb7wPInPSnLaWWeqGrBP5UvPAfD9shfasZ+X+Ww0zQFUASCcydahJG2Iik+a2FPM+tEn8cOyssawV+ZvB60xbvQ5waxfKiGW3sz6O1mNxszaKljPZuOXDJ2HnIAN7Wm2fxlNs4xZLBpl8H/+GU6t2aLhFK2y6/WJqCNbh1K0RaMifQLotw+mq0DPwC9KUGLwOKHIS8jQEU4BQHcRU3cNPSROJ8OzSmyAcxT+NjAJFMqVlV45fjPrllMKFAA0qdOHK7NGRqoHiItlGwh4Quaz0dxCNy1FAXGmfrFRZCVk6CR8L53snki5oGNFYpTVeiDF5/rygStij6wYFfE1Ml9KOoaR1frRWvJx3O2u1R/GTP2Syyhw2CVrk7036C3oEVlWClq/JxsvUfRatCcfX0kAVmYP0bFW2kzQggmxkUYm2Z6PwXx0YyLmozlXke4DcGHyJPvONG+CSAZIl+mbRKw26M/3dQbXGWRFY8n2e7RcviIb1ICvpdtYVJblouXaY20dgaN0uHtW7kTltarF49omy0ZK+/y7ljGEkKH2e1q9r8/N17ZSIjYOb5KB67IRFLjV1xFYV6xyokF6P0PwSZeBQGC07NsMrWRA76A/bImEOKzUJslJ8Wtuq/A2uZerO7cZL6STfGeNsjZj2cjd6TJ1bPydsMjlct2S5dnoIQB05TZ/sIY2lyCNunJSJQcxeu/cwu3ap2afFjs6Qo4ExN7WVxvjoGQKLF8QGQHohqlsXqD58Dk5HWt0pN9hSX6GAx5AAae4FS5bES9xbhHhBHMgE/eBwNmIYgnpzjHUutHcED4fEMMC0K22b949TcTj9HbDZgzxMjJBDzn+lQahZjgzZkEok9horLm+7vwo64zZ9ILcSNv9VWN73jyt8xrXXtNXm+ZGVx0d2oZd3SjFz1z/Bw/mmthZMyAHuGPH/jtuhP+uJ9kyMq6cHmW9DLSgMjrBAEOOCZXb5XVeL632zuAWmtgrM/RLinJlwjQA2UHHtsAUEYHFCGI6gZlC2ZlKZfYgGYvQvLlCpXGVRreXAj+CFdr+lpW1V+T+Mm0GBK2Bx+++iy3MtDoVBEAOoBj0SECUBQB9EMyCsHH7Iv3okxq4sgFQKIiyAlAIiLIDkC+IsgRgFgQtsQfKFkAuEBT8ZQ21+WUNYFgQtKNXcG2e/jdA2QMwgqAN8lylDea73U7pCqxrlfkvuU/4A2voyWecHOp/C76d7/ws9hcAAAAASUVORK5CYII=") #f5f6f7 no-repeat right 14px center/16px
131 | 
132 |       .suggestions
133 |         padding: 0.25rem 0
134 |         border-radius: 2px
135 |         border-color: $borderColor
136 |         transition: background-color 0.2s
137 |         box-shadow 0 2px 20px 0 rgba(0, 0, 0, 0.05)
138 |         .suggestion
139 |           border-radius: 0px
140 |           font-weight: normal
141 |           padding: 0.5rem 1.5rem
142 | 
143 |           &:hover
144 |             background-color: #f9fafb
145 |             .page-title
146 |               color: lighten($accentColor, 20%)
147 |             .header
148 |               color: $accentColor
149 | 
150 |           .page-title
151 |             color: #717484
152 |             font-weight: normal
153 |           .header
154 |             color: $textColor
155 | 
156 | @media (max-width: $MQMobile)
157 |   .navbar
158 |     padding-left 4rem
159 |     .can-hide
160 |       display none
161 |     .links
162 |       padding-left 1.5rem
163 |     .site-name
164 |       width calc(100vw - 9.4rem)
165 |       overflow hidden
166 |       white-space nowrap
167 |       text-overflow ellipsis
168 |     .search-box
169 |       input:focus
170 |         width 8rem
171 |         left -8rem
172 | </style>
173 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/components/Page.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <main class="page">
 3 |     <slot name="top" />
 4 | 
 5 |     <Content class="theme-dumi-content" />
 6 |     <PageEdit />
 7 | 
 8 |     <PageNav v-bind="{ sidebarItems }" />
 9 | 
10 |     <slot name="bottom" />
11 |   </main>
12 | </template>
13 | 
14 | <script>
15 | import PageEdit from '@theme/components/PageEdit.vue'
16 | import PageNav from '@theme/components/PageNav.vue'
17 | 
18 | export default {
19 |   components: { PageEdit, PageNav },
20 |   props: ['sidebarItems']
21 | }
22 | </script>
23 | 
24 | <style lang="stylus">
25 | @require '../styles/wrapper.styl'
26 | 
27 | .page
28 |   padding-bottom 2rem
29 |   display block
30 | 
31 | </style>
32 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/components/PageEdit.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <footer class="page-edit">
  3 |     <div
  4 |       v-if="editLink"
  5 |       class="edit-link"
  6 |     >
  7 |       <a
  8 |         :href="editLink"
  9 |         target="_blank"
 10 |         rel="noopener noreferrer"
 11 |       >{{ editLinkText }}</a>
 12 |       <OutboundLink />
 13 |     </div>
 14 | 
 15 |     <div
 16 |       v-if="lastUpdated"
 17 |       class="last-updated"
 18 |     >
 19 |       <span class="prefix">{{ lastUpdatedText }}:</span>
 20 |       <span class="time">{{ lastUpdated }}</span>
 21 |     </div>
 22 |   </footer>
 23 | </template>
 24 | 
 25 | <script>
 26 | import isNil from 'lodash/isNil'
 27 | import { endingSlashRE, outboundRE } from '../util'
 28 | 
 29 | export default {
 30 |   name: 'PageEdit',
 31 | 
 32 |   computed: {
 33 |     lastUpdated () {
 34 |       return this.$page.lastUpdated
 35 |     },
 36 | 
 37 |     lastUpdatedText () {
 38 |       if (typeof this.$themeLocaleConfig.lastUpdated === 'string') {
 39 |         return this.$themeLocaleConfig.lastUpdated
 40 |       }
 41 |       if (typeof this.$site.themeConfig.lastUpdated === 'string') {
 42 |         return this.$site.themeConfig.lastUpdated
 43 |       }
 44 |       return 'Last Updated'
 45 |     },
 46 | 
 47 |     editLink () {
 48 |       const showEditLink = isNil(this.$page.frontmatter.editLink)
 49 |         ? this.$site.themeConfig.editLinks
 50 |         : this.$page.frontmatter.editLink
 51 | 
 52 |       const {
 53 |         repo,
 54 |         docsDir = '',
 55 |         docsBranch = 'master',
 56 |         docsRepo = repo
 57 |       } = this.$site.themeConfig
 58 | 
 59 |       if (showEditLink && docsRepo && this.$page.relativePath) {
 60 |         return this.createEditLink(
 61 |           repo,
 62 |           docsRepo,
 63 |           docsDir,
 64 |           docsBranch,
 65 |           this.$page.relativePath
 66 |         )
 67 |       }
 68 |       return null
 69 |     },
 70 | 
 71 |     editLinkText () {
 72 |       return (
 73 |         this.$themeLocaleConfig.editLinkText ||
 74 |         this.$site.themeConfig.editLinkText ||
 75 |         'Edit this page'
 76 |       )
 77 |     }
 78 |   },
 79 | 
 80 |   methods: {
 81 |     createEditLink (repo, docsRepo, docsDir, docsBranch, path) {
 82 |       const bitbucket = /bitbucket.org/
 83 |       if (bitbucket.test(docsRepo)) {
 84 |         const base = docsRepo
 85 |         return (
 86 |           base.replace(endingSlashRE, '') +
 87 |           '/src' +
 88 |           `/${docsBranch}/` +
 89 |           (docsDir ? docsDir.replace(endingSlashRE, '') + '/' : '') +
 90 |           path +
 91 |           `?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default`
 92 |         )
 93 |       }
 94 | 
 95 |       const gitlab = /gitlab.com/
 96 |       if (gitlab.test(docsRepo)) {
 97 |         const base = docsRepo
 98 |         return (
 99 |           base.replace(endingSlashRE, '') +
100 |           '/-/edit' +
101 |           `/${docsBranch}/` +
102 |           (docsDir ? docsDir.replace(endingSlashRE, '') + '/' : '') +
103 |           path
104 |         )
105 |       }
106 | 
107 |       const base = outboundRE.test(docsRepo)
108 |         ? docsRepo
109 |         : `https://github.com/${docsRepo}`
110 |       return (
111 |         base.replace(endingSlashRE, '') +
112 |         '/edit' +
113 |         `/${docsBranch}/` +
114 |         (docsDir ? docsDir.replace(endingSlashRE, '') + '/' : '') +
115 |         path
116 |       )
117 |     }
118 |   }
119 | }
120 | </script>
121 | 
122 | <style lang="stylus">
123 | @require '../styles/wrapper.styl'
124 | 
125 | .page-edit
126 |   @extend $wrapper
127 |   padding-top 1rem
128 |   padding-bottom 1rem
129 |   overflow auto
130 | 
131 |   .edit-link
132 |     display inline-block
133 |     a
134 |       color lighten($textColor, 25%)
135 |       margin-right 0.25rem
136 |   .last-updated
137 |     float right
138 |     font-size 0.9em
139 |     .prefix
140 |       font-weight 500
141 |       color lighten($textColor, 25%)
142 |     .time
143 |       font-weight 400
144 |       color #767676
145 | 
146 | @media (max-width: $MQMobile)
147 |   .page-edit
148 |     .edit-link
149 |       margin-bottom 0.5rem
150 |     .last-updated
151 |       font-size 0.8em
152 |       float none
153 |       text-align left
154 | 
155 | </style>
156 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/components/PageNav.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     v-if="prev || next"
  4 |     class="page-nav"
  5 |   >
  6 |     <p class="inner">
  7 |       <span
  8 |         v-if="prev"
  9 |         class="prev"
 10 |       >
 11 |         ←
 12 |         <a
 13 |           v-if="prev.type === 'external'"
 14 |           class="prev"
 15 |           :href="prev.path"
 16 |           target="_blank"
 17 |           rel="noopener noreferrer"
 18 |         >
 19 |           {{ prev.title || prev.path }}
 20 | 
 21 |           <OutboundLink />
 22 |         </a>
 23 | 
 24 |         <RouterLink
 25 |           v-else
 26 |           class="prev"
 27 |           :to="prev.path"
 28 |         >
 29 |           {{ prev.title || prev.path }}
 30 |         </RouterLink>
 31 |       </span>
 32 | 
 33 |       <span
 34 |         v-if="next"
 35 |         class="next"
 36 |       >
 37 |         <a
 38 |           v-if="next.type === 'external'"
 39 |           :href="next.path"
 40 |           target="_blank"
 41 |           rel="noopener noreferrer"
 42 |         >
 43 |           {{ next.title || next.path }}
 44 | 
 45 |           <OutboundLink />
 46 |         </a>
 47 | 
 48 |         <RouterLink
 49 |           v-else
 50 |           :to="next.path"
 51 |         >
 52 |           {{ next.title || next.path }}
 53 |         </RouterLink>
 54 |         →
 55 |       </span>
 56 |     </p>
 57 |   </div>
 58 | </template>
 59 | 
 60 | <script>
 61 | import { resolvePage } from '../util'
 62 | import isString from 'lodash/isString'
 63 | import isNil from 'lodash/isNil'
 64 | 
 65 | export default {
 66 |   name: 'PageNav',
 67 | 
 68 |   props: ['sidebarItems'],
 69 | 
 70 |   computed: {
 71 |     prev () {
 72 |       return resolvePageLink(LINK_TYPES.PREV, this)
 73 |     },
 74 | 
 75 |     next () {
 76 |       return resolvePageLink(LINK_TYPES.NEXT, this)
 77 |     }
 78 |   }
 79 | }
 80 | 
 81 | function resolvePrev (page, items) {
 82 |   return find(page, items, -1)
 83 | }
 84 | 
 85 | function resolveNext (page, items) {
 86 |   return find(page, items, 1)
 87 | }
 88 | 
 89 | const LINK_TYPES = {
 90 |   NEXT: {
 91 |     resolveLink: resolveNext,
 92 |     getThemeLinkConfig: ({ nextLinks }) => nextLinks,
 93 |     getPageLinkConfig: ({ frontmatter }) => frontmatter.next
 94 |   },
 95 |   PREV: {
 96 |     resolveLink: resolvePrev,
 97 |     getThemeLinkConfig: ({ prevLinks }) => prevLinks,
 98 |     getPageLinkConfig: ({ frontmatter }) => frontmatter.prev
 99 |   }
100 | }
101 | 
102 | function resolvePageLink (
103 |   linkType,
104 |   { $themeConfig, $page, $route, $site, sidebarItems }
105 | ) {
106 |   const { resolveLink, getThemeLinkConfig, getPageLinkConfig } = linkType
107 | 
108 |   // Get link config from theme
109 |   const themeLinkConfig = getThemeLinkConfig($themeConfig)
110 | 
111 |   // Get link config from current page
112 |   const pageLinkConfig = getPageLinkConfig($page)
113 | 
114 |   // Page link config will overwrite global theme link config if defined
115 |   const link = isNil(pageLinkConfig) ? themeLinkConfig : pageLinkConfig
116 | 
117 |   if (link === false) {
118 |     //
119 |   } else if (isString(link)) {
120 |     return resolvePage($site.pages, link, $route.path)
121 |   } else {
122 |     return resolveLink($page, sidebarItems)
123 |   }
124 | }
125 | 
126 | function find (page, items, offset) {
127 |   const res = []
128 |   flatten(items, res)
129 |   for (let i = 0; i < res.length; i++) {
130 |     const cur = res[i]
131 |     if (cur.type === 'page' && cur.path === decodeURIComponent(page.path)) {
132 |       return res[i + offset]
133 |     }
134 |   }
135 | }
136 | 
137 | function flatten (items, res) {
138 |   for (let i = 0, l = items.length; i < l; i++) {
139 |     if (items[i].type === 'group') {
140 |       flatten(items[i].children || [], res)
141 |     } else {
142 |       res.push(items[i])
143 |     }
144 |   }
145 | }
146 | </script>
147 | 
148 | <style lang="stylus">
149 | @require '../styles/wrapper.styl'
150 | 
151 | .page-nav
152 |   @extend $wrapper
153 |   padding-top 1rem
154 |   padding-bottom 0
155 |   .inner
156 |     min-height 2rem
157 |     margin-top 0
158 |     border-top 1px solid $borderColor
159 |     padding-top 1rem
160 |     overflow auto // clear float
161 |   .next
162 |     float right
163 | </style>
164 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/components/Sidebar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <aside class="sidebar">
 3 |     <NavLinks />
 4 | 
 5 |     <slot name="top" />
 6 | 
 7 |     <SidebarLinks
 8 |       :depth="0"
 9 |       :items="items"
10 |     />
11 |     <slot name="bottom" />
12 |   </aside>
13 | </template>
14 | 
15 | <script>
16 | import SidebarLinks from '@theme/components/SidebarLinks.vue'
17 | import NavLinks from '@theme/components/NavLinks.vue'
18 | 
19 | export default {
20 |   name: 'Sidebar',
21 | 
22 |   components: { SidebarLinks, NavLinks },
23 | 
24 |   props: ['items']
25 | }
26 | </script>
27 | 
28 | <style lang="stylus">
29 | .sidebar
30 |   ul
31 |     padding 0
32 |     margin 0
33 |     list-style-type none
34 |   a
35 |     display inline-block
36 |   .nav-links
37 |     display none
38 |     border-bottom 1px solid $borderColor
39 |     padding 0.5rem 0 0.75rem 0
40 |     a
41 |       font-weight 600
42 |     .nav-item, .repo-link
43 |       display block
44 |       line-height 1.25rem
45 |       font-size 1.1em
46 |       padding 0.5rem 0 0.5rem 1.5rem
47 |   & > .sidebar-links
48 |     padding 1.5rem 0
49 |     margin-left 1.5rem
50 |     & > li > a.sidebar-link
51 |       font-size 1.1em
52 |       line-height 2
53 |       font-weight 500
54 |     & > li:not(:first-child)
55 |       margin-top .75rem
56 | 
57 | @media (max-width: $MQMobile)
58 |   .sidebar
59 |     .nav-links
60 |       display block
61 |       .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after
62 |         top calc(1rem - 2px)
63 |     & > .sidebar-links
64 |       padding 1rem 0
65 |       margin-left: 0
66 | </style>
67 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/components/SidebarButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="sidebar-button"
 4 |     @click="$emit('toggle-sidebar')"
 5 |   >
 6 |     <svg
 7 |       class="icon"
 8 |       xmlns="http://www.w3.org/2000/svg"
 9 |       aria-hidden="true"
10 |       role="img"
11 |       viewBox="0 0 448 512"
12 |     >
13 |       <path
14 |         fill="currentColor"
15 |         d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"
16 |         class=""
17 |       />
18 |     </svg>
19 |   </div>
20 | </template>
21 | 
22 | <style lang="stylus">
23 | .sidebar-button
24 |   cursor pointer
25 |   display none
26 |   width 1.25rem
27 |   height 1.25rem
28 |   position absolute
29 |   padding 0.6rem
30 |   left 1rem
31 |   .icon
32 |     display block
33 |     width 1.25rem
34 |     height 1.25rem
35 | 
36 | @media (max-width: $MQMobile)
37 |   .sidebar-button
38 |     display block
39 | </style>
40 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/components/SidebarGroup.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <section
  3 |     class="sidebar-group"
  4 |     :class="[
  5 |       {
  6 |         collapsable,
  7 |         'is-sub-group': depth !== 0
  8 |       },
  9 |       `depth-${depth}`
 10 |     ]"
 11 |   >
 12 |     <RouterLink
 13 |       v-if="item.path"
 14 |       class="sidebar-heading clickable"
 15 |       :class="{
 16 |         open,
 17 |         'active': isActive($route, item.path)
 18 |       }"
 19 |       :to="item.path"
 20 |       @click.native="$emit('toggle')"
 21 |     >
 22 |       <span>{{ item.title }}</span>
 23 |       <span
 24 |         v-if="collapsable"
 25 |         class="arrow"
 26 |         :class="open ? 'down' : 'right'"
 27 |       />
 28 |     </RouterLink>
 29 | 
 30 |     <p
 31 |       v-else
 32 |       class="sidebar-heading"
 33 |       :class="{ open }"
 34 |       @click="$emit('toggle')"
 35 |     >
 36 |       <span>{{ item.title }}</span>
 37 |       <span
 38 |         v-if="collapsable"
 39 |         class="arrow"
 40 |         :class="open ? 'down' : 'right'"
 41 |       />
 42 |     </p>
 43 | 
 44 |     <DropdownTransition>
 45 |       <SidebarLinks
 46 |         v-if="open || !collapsable"
 47 |         class="sidebar-group-items"
 48 |         :items="item.children"
 49 |         :sidebar-depth="item.sidebarDepth"
 50 |         :initial-open-group-index="item.initialOpenGroupIndex"
 51 |         :depth="depth + 1"
 52 |       />
 53 |     </DropdownTransition>
 54 |   </section>
 55 | </template>
 56 | 
 57 | <script>
 58 | import { isActive } from '../util'
 59 | import DropdownTransition from '@theme/components/DropdownTransition.vue'
 60 | 
 61 | export default {
 62 |   name: 'SidebarGroup',
 63 | 
 64 |   components: {
 65 |     DropdownTransition
 66 |   },
 67 | 
 68 |   props: [
 69 |     'item',
 70 |     'open',
 71 |     'collapsable',
 72 |     'depth'
 73 |   ],
 74 | 
 75 |   // ref: https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
 76 |   beforeCreate () {
 77 |     this.$options.components.SidebarLinks = require('@theme/components/SidebarLinks.vue').default
 78 |   },
 79 | 
 80 |   methods: { isActive }
 81 | }
 82 | </script>
 83 | 
 84 | <style lang="stylus">
 85 | .sidebar-group
 86 |   .sidebar-group
 87 |     padding-left 0.5em
 88 |   &:not(.collapsable)
 89 |     .sidebar-heading:not(.clickable)
 90 |       cursor auto
 91 |       color inherit
 92 |   // refine styles of nested sidebar groups
 93 |   &.is-sub-group
 94 |     padding-left 0
 95 |     & > .sidebar-heading
 96 |       font-size 0.95em
 97 |       line-height 1.4
 98 |       font-weight normal
 99 |       padding-left 2rem
100 |       &:not(.clickable)
101 |         opacity 0.5
102 |     & > .sidebar-group-items
103 |       padding-left 1rem
104 |       & > li > .sidebar-link
105 |         font-size 0.95em
106 |         border-left none
107 |   &.depth-2
108 |     & > .sidebar-heading
109 |       border-left none
110 | 
111 | .sidebar-heading
112 |   color $textColor
113 |   transition color .15s ease
114 |   cursor pointer
115 |   font-size 0.6em
116 |   // text-transform uppercase
117 |   padding 0.35rem 1.5rem 0.35rem 1.25rem
118 |   width 100%
119 |   box-sizing border-box
120 |   margin 0
121 |   color #8f9bb3
122 |   line-height 2.8
123 |   margin-bottom 0.4rem
124 | 
125 |   &.open, &:hover
126 |     color inherit
127 |   .arrow
128 |     position relative
129 |     top -0.12em
130 |     left 0.5em
131 |   &.clickable
132 |     &.active
133 |       font-weight 600
134 |       color $accentColor
135 |     &:hover
136 |       color $accentColor
137 | 
138 | .sidebar-group-items
139 |   transition height .1s ease-out
140 |   font-size 0.95em
141 |   overflow hidden
142 | </style>
143 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/components/SidebarLink.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import { isActive, hashRE, groupHeaders } from '../util'
  3 | 
  4 | export default {
  5 |   functional: true,
  6 | 
  7 |   props: ['item', 'sidebarDepth'],
  8 | 
  9 |   render (h,
 10 |     {
 11 |       parent: {
 12 |         $page,
 13 |         $route,
 14 |         $themeConfig,
 15 |         $themeLocaleConfig
 16 |       },
 17 |       props: {
 18 |         item,
 19 |         sidebarDepth
 20 |       }
 21 |     }) {
 22 |     // use custom active class matching logic
 23 |     // due to edge case of paths ending with / + hash
 24 |     const selfActive = isActive($route, item.path)
 25 |     // for sidebar: auto pages, a hash link should be active if one of its child
 26 |     // matches
 27 |     const active = item.type === 'auto'
 28 |       ? selfActive || item.children.some(c => isActive($route, item.basePath + '#' + c.slug))
 29 |       : selfActive
 30 |     const link = item.type === 'external'
 31 |       ? renderExternal(h, item.path, item.title || item.path)
 32 |       : renderLink(h, item.path, item.title || item.path, active)
 33 | 
 34 |     const maxDepth = [
 35 |       $page.frontmatter.sidebarDepth,
 36 |       sidebarDepth,
 37 |       $themeLocaleConfig.sidebarDepth,
 38 |       $themeConfig.sidebarDepth,
 39 |       1
 40 |     ].find(depth => depth !== undefined)
 41 | 
 42 |     const displayAllHeaders = $themeLocaleConfig.displayAllHeaders ||
 43 |       $themeConfig.displayAllHeaders
 44 | 
 45 |     if (item.type === 'auto') {
 46 |       return [link, renderChildren(h, item.children, item.basePath, $route, maxDepth)]
 47 |     } else if ((active || displayAllHeaders) && item.headers && !hashRE.test(item.path)) {
 48 |       const children = groupHeaders(item.headers)
 49 |       return [link, renderChildren(h, children, item.path, $route, maxDepth)]
 50 |     } else {
 51 |       return link
 52 |     }
 53 |   }
 54 | }
 55 | 
 56 | function renderLink (h, to, text, active, level) {
 57 |   const component = {
 58 |     props: {
 59 |       to,
 60 |       activeClass: '',
 61 |       exactActiveClass: ''
 62 |     },
 63 |     class: {
 64 |       active,
 65 |       'sidebar-link': true
 66 |     }
 67 |   }
 68 | 
 69 |   if (level > 2) {
 70 |     component.style = {
 71 |       'padding-right': level + 'rem'
 72 |     }
 73 |   }
 74 | 
 75 |   return h('RouterLink', component, text)
 76 | }
 77 | 
 78 | function renderChildren (h, children, path, route, maxDepth, depth = 1) {
 79 |   if (!children || depth > maxDepth) return null
 80 |   return h('ul', { class: 'sidebar-sub-headers' }, children.map(c => {
 81 |     const active = isActive(route, path + '#' + c.slug)
 82 |     return h('li', { class: 'sidebar-sub-header' }, [
 83 |       renderLink(h, path + '#' + c.slug, c.title, active, c.level - 1),
 84 |       renderChildren(h, c.children, path, route, maxDepth, depth + 1)
 85 |     ])
 86 |   }))
 87 | }
 88 | 
 89 | function renderExternal (h, to, text) {
 90 |   return h('a', {
 91 |     attrs: {
 92 |       href: to,
 93 |       target: '_blank',
 94 |       rel: 'noopener noreferrer'
 95 |     },
 96 |     class: {
 97 |       'sidebar-link': true
 98 |     }
 99 |   }, [text, h('OutboundLink')])
100 | }
101 | </script>
102 | 
103 | <style lang="stylus">
104 | .sidebar .sidebar-sub-headers
105 |   padding-left 1rem
106 |   font-size 0.95em
107 | 
108 | a.sidebar-link
109 |   font-size 1em
110 |   font-weight 400
111 |   position: relative
112 |   display inline-block
113 |   color $textColor
114 |   border-right 0.25rem solid transparent
115 |   padding 0.35rem 1rem 0.35rem 1.25rem
116 |   line-height 2
117 |   width: 100%
118 |   box-sizing: border-box
119 | 
120 |   &::before
121 |     content: ''
122 |     position: absolute
123 |     top: 50%
124 |     margin-left: -10px
125 |     display: inline-block
126 |     width: 5px
127 |     height: 5px
128 |     background-color: $accentColor
129 |     border-radius: 50%
130 |     opacity: 0
131 |     transition: transform 0.2s, opacity 0.2s
132 |     transform: scale(0) translate(-10px, -50%)
133 | 
134 |   &:hover
135 |     color $accentColor
136 | 
137 |   &.active
138 |     color $accentColor
139 |     border-right-color $accentColor
140 |     background linear-gradient(270deg, #f8faff, rgba(248,250,255,0))
141 |     font-weight: 500
142 | 
143 |   .sidebar-group &
144 |     padding-right 2rem
145 | 
146 |   .sidebar-sub-headers &
147 |     border-right none
148 |     background: none;
149 |     &.active
150 |       &::before
151 |         opacity: 1;
152 |         transform: scale(1) translate(0, -50%);
153 | </style>
154 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/components/SidebarLinks.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <ul
  3 |     v-if="items.length"
  4 |     class="sidebar-links"
  5 |   >
  6 |     <li
  7 |       v-for="(item, i) in items"
  8 |       :key="i"
  9 |     >
 10 |       <SidebarGroup
 11 |         v-if="item.type === 'group'"
 12 |         :item="item"
 13 |         :open="i === openGroupIndex"
 14 |         :collapsable="item.collapsable || item.collapsible"
 15 |         :depth="depth"
 16 |         @toggle="toggleGroup(i)"
 17 |       />
 18 |       <SidebarLink
 19 |         v-else
 20 |         :sidebar-depth="sidebarDepth"
 21 |         :item="item"
 22 |       />
 23 |     </li>
 24 |   </ul>
 25 | </template>
 26 | 
 27 | <script>
 28 | import SidebarGroup from '@theme/components/SidebarGroup.vue'
 29 | import SidebarLink from '@theme/components/SidebarLink.vue'
 30 | import { isActive } from '../util'
 31 | 
 32 | export default {
 33 |   name: 'SidebarLinks',
 34 | 
 35 |   components: { SidebarGroup, SidebarLink },
 36 | 
 37 |   props: [
 38 |     'items',
 39 |     'depth', // depth of current sidebar links
 40 |     'sidebarDepth', // depth of headers to be extracted
 41 |     'initialOpenGroupIndex'
 42 |   ],
 43 | 
 44 |   data () {
 45 |     return {
 46 |       openGroupIndex: this.initialOpenGroupIndex || 0
 47 |     }
 48 |   },
 49 | 
 50 |   watch: {
 51 |     '$route' () {
 52 |       this.refreshIndex()
 53 |     }
 54 |   },
 55 | 
 56 |   created () {
 57 |     this.refreshIndex()
 58 |   },
 59 | 
 60 |   methods: {
 61 |     refreshIndex () {
 62 |       const index = resolveOpenGroupIndex(
 63 |         this.$route,
 64 |         this.items
 65 |       )
 66 |       if (index > -1) {
 67 |         this.openGroupIndex = index
 68 |       }
 69 |     },
 70 | 
 71 |     toggleGroup (index) {
 72 |       this.openGroupIndex = index === this.openGroupIndex ? -1 : index
 73 |     },
 74 | 
 75 |     isActive (page) {
 76 |       return isActive(this.$route, page.regularPath)
 77 |     }
 78 |   }
 79 | }
 80 | 
 81 | function resolveOpenGroupIndex (route, items) {
 82 |   for (let i = 0; i < items.length; i++) {
 83 |     const item = items[i]
 84 |     if (descendantIsActive(route, item)) {
 85 |       return i
 86 |     }
 87 |   }
 88 |   return -1
 89 | }
 90 | 
 91 | function descendantIsActive (route, item) {
 92 |   if (item.type === 'group') {
 93 |     return item.children.some(child => {
 94 |       if (child.type === 'group') {
 95 |         return descendantIsActive(route, child)
 96 |       } else {
 97 |         return child.type === 'page' && isActive(route, child.path)
 98 |       }
 99 |     })
100 |   }
101 |   return false
102 | }
103 | </script>
104 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/global-components/Badge.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   functional: true,
 4 |   props: {
 5 |     type: {
 6 |       type: String,
 7 |       default: 'tip'
 8 |     },
 9 |     text: String,
10 |     vertical: {
11 |       type: String,
12 |       default: 'top'
13 |     }
14 |   },
15 |   render (h, { props, slots }) {
16 |     return h('span', {
17 |       class: ['badge', props.type],
18 |       style: {
19 |         verticalAlign: props.vertical
20 |       }
21 |     }, props.text || slots().default)
22 |   }
23 | }
24 | </script>
25 | 
26 | <style lang="stylus" scoped>
27 | .badge
28 |   display inline-block
29 |   font-size 14px
30 |   height 18px
31 |   line-height 18px
32 |   border-radius 3px
33 |   padding 0 6px
34 |   color white
35 |   background-color #42b983
36 |   &.tip, &.green
37 |     background-color $badgeTipColor
38 |   &.error
39 |     background-color $badgeErrorColor
40 |   &.warning, &.warn, &.yellow
41 |     background-color $badgeWarningColor
42 |   & + &
43 |     margin-left 5px
44 | </style>
45 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/global-components/CodeBlock.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="theme-code-block"
 4 |     :class="{ 'theme-code-block__active': active }"
 5 |   >
 6 |     <slot />
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   name: 'CodeBlock',
13 |   props: {
14 |     title: {
15 |       type: String,
16 |       required: true
17 |     },
18 |     active: {
19 |       type: Boolean,
20 |       default: false
21 |     }
22 |   }
23 | }
24 | </script>
25 | 
26 | <style scoped>
27 |   .theme-code-block {
28 |     display: none;
29 |   }
30 |   .theme-code-block__active {
31 |     display: block;
32 |   }
33 |   .theme-code-block > pre {
34 |     background-color: orange;
35 |   }
36 | </style>
37 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/global-components/CodeGroup.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="theme-code-group">
  3 |     <div class="theme-code-group__nav">
  4 |       <ul class="theme-code-group__ul">
  5 |         <li
  6 |           v-for="(tab, i) in codeTabs"
  7 |           :key="tab.title"
  8 |           class="theme-code-group__li"
  9 |         >
 10 |           <button
 11 |             class="theme-code-group__nav-tab"
 12 |             :class="{
 13 |               'theme-code-group__nav-tab-active': i === activeCodeTabIndex,
 14 |             }"
 15 |             @click="changeCodeTab(i)"
 16 |           >
 17 |             {{ tab.title }}
 18 |           </button>
 19 |         </li>
 20 |       </ul>
 21 |     </div>
 22 |     <slot />
 23 |     <pre
 24 |       v-if="codeTabs.length < 1"
 25 |       class="pre-blank"
 26 |     >// Make sure to add code blocks to your code group</pre>
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script>
 31 | export default {
 32 |   name: 'CodeGroup',
 33 |   data () {
 34 |     return {
 35 |       codeTabs: [],
 36 |       activeCodeTabIndex: -1
 37 |     }
 38 |   },
 39 |   watch: {
 40 |     activeCodeTabIndex (index) {
 41 |       this.codeTabs.forEach(tab => {
 42 |         tab.elm.classList.remove('theme-code-block__active')
 43 |       })
 44 |       this.codeTabs[index].elm.classList.add('theme-code-block__active')
 45 |     }
 46 |   },
 47 |   mounted () {
 48 |     this.codeTabs = (this.$slots.default || []).filter(slot => Boolean(slot.componentOptions)).map((slot, index) => {
 49 |       if (slot.componentOptions.propsData.active === '') {
 50 |         this.activeCodeTabIndex = index
 51 |       }
 52 | 
 53 |       return {
 54 |         title: slot.componentOptions.propsData.title,
 55 |         elm: slot.elm
 56 |       }
 57 |     })
 58 | 
 59 |     if (this.activeCodeTabIndex === -1 && this.codeTabs.length > 0) {
 60 |       this.activeCodeTabIndex = 0
 61 |     }
 62 |   },
 63 |   methods: {
 64 |     changeCodeTab (index) {
 65 |       this.activeCodeTabIndex = index
 66 |     }
 67 |   }
 68 | }
 69 | </script>
 70 | 
 71 | <style lang="stylus" scoped>
 72 |   .theme-code-group {}
 73 |   .theme-code-group__nav {
 74 |     margin-bottom: -35px;
 75 |     background-color: $codeBgColor;
 76 |     padding-bottom: 22px;
 77 |     border-top-left-radius: 6px;
 78 |     border-top-right-radius: 6px;
 79 |     padding-left: 10px;
 80 |     padding-top: 10px;
 81 |   }
 82 |   .theme-code-group__ul {
 83 |     margin: auto 0;
 84 |     padding-left: 0;
 85 |     display: inline-flex;
 86 |     list-style: none;
 87 |   }
 88 |   .theme-code-group__li {}
 89 |   .theme-code-group__nav-tab {
 90 |     border: 0;
 91 |     padding: 5px;
 92 |     cursor: pointer;
 93 |     background-color: transparent;
 94 |     font-size: 0.85em;
 95 |     line-height: 1.4;
 96 |     color: rgba(255, 255, 255, 0.9);
 97 |     font-weight: 600;
 98 |   }
 99 |   .theme-code-group__nav-tab-active {
100 |     border-bottom: #42b983 1px solid;
101 |   }
102 |   .pre-blank {
103 |     color: #42b983;
104 |   }
105 | </style>
106 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/index.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | 
 3 | // Theme API.
 4 | module.exports = (options, ctx) => {
 5 |   const { themeConfig, siteConfig } = ctx
 6 | 
 7 |   // resolve algolia
 8 |   const isAlgoliaSearch = (
 9 |     themeConfig.algolia ||
10 |     Object
11 |       .keys((siteConfig.locales && themeConfig.locales) || {})
12 |       .some(base => themeConfig.locales[base].algolia)
13 |   )
14 | 
15 |   const enableSmoothScroll = themeConfig.smoothScroll === true
16 | 
17 |   return {
18 |     alias () {
19 |       return {
20 |         '@AlgoliaSearchBox': isAlgoliaSearch
21 |           ? path.resolve(__dirname, 'components/AlgoliaSearchBox.vue')
22 |           : path.resolve(__dirname, 'noopModule.js')
23 |       }
24 |     },
25 | 
26 |     plugins: [
27 |       ['@vuepress/active-header-links', options.activeHeaderLinks],
28 |       '@vuepress/search',
29 |       '@vuepress/plugin-nprogress',
30 |       ['container', {
31 |         type: 'tip',
32 |         defaultTitle: {
33 |           '/': 'TIP',
34 |           '/zh/': '提示'
35 |         }
36 |       }],
37 |       ['container', {
38 |         type: 'warning',
39 |         defaultTitle: {
40 |           '/': 'WARNING',
41 |           '/zh/': '注意'
42 |         }
43 |       }],
44 |       ['container', {
45 |         type: 'danger',
46 |         defaultTitle: {
47 |           '/': 'WARNING',
48 |           '/zh/': '警告'
49 |         }
50 |       }],
51 |       ['container', {
52 |         type: 'details',
53 |         before: info => `<details class="custom-block details">${info ? `<summary>${info}</summary>` : ''}\n`,
54 |         after: () => '</details>\n'
55 |       }],
56 |       ['smooth-scroll', enableSmoothScroll],
57 |       '@vuepress-dumi/dumi-previewer',
58 |     ]
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/layouts/404.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="theme-container">
 3 |     <div class="theme-dumi-content">
 4 |       <h1>404</h1>
 5 | 
 6 |       <blockquote>{{ getMsg() }}</blockquote>
 7 | 
 8 |       <RouterLink to="/">
 9 |         Take me home.
10 |       </RouterLink>
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | const msgs = [
17 |   'There\'s nothing here.',
18 |   'How did we get here?',
19 |   'That\'s a Four-Oh-Four.',
20 |   'Looks like we\'ve got some broken links.'
21 | ]
22 | 
23 | export default {
24 |   methods: {
25 |     getMsg () {
26 |       return msgs[Math.floor(Math.random() * msgs.length)]
27 |     }
28 |   }
29 | }
30 | </script>
31 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/layouts/Layout.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="theme-container"
  4 |     :class="pageClasses"
  5 |     @touchstart="onTouchStart"
  6 |     @touchend="onTouchEnd"
  7 |   >
  8 |     <Navbar
  9 |       v-if="shouldShowNavbar"
 10 |       @toggle-sidebar="toggleSidebar"
 11 |     />
 12 | 
 13 |     <div
 14 |       class="sidebar-mask"
 15 |       @click="toggleSidebar(false)"
 16 |     />
 17 | 
 18 |     <Sidebar
 19 |       :items="sidebarItems"
 20 |       @toggle-sidebar="toggleSidebar"
 21 |     >
 22 |       <template #top>
 23 |         <slot name="sidebar-top" />
 24 |       </template>
 25 |       <template #bottom>
 26 |         <slot name="sidebar-bottom" />
 27 |       </template>
 28 |     </Sidebar>
 29 | 
 30 |     <Home v-if="$page.frontmatter.home" />
 31 | 
 32 |     <Page
 33 |       v-else
 34 |       :sidebar-items="sidebarItems"
 35 |     >
 36 |       <template #top>
 37 |         <slot name="page-top" />
 38 |       </template>
 39 |       <template #bottom>
 40 |         <slot name="page-bottom" />
 41 |       </template>
 42 |     </Page>
 43 |   </div>
 44 | </template>
 45 | 
 46 | <script>
 47 | import Home from '@theme/components/Home.vue'
 48 | import Navbar from '@theme/components/Navbar.vue'
 49 | import Page from '@theme/components/Page.vue'
 50 | import Sidebar from '@theme/components/Sidebar.vue'
 51 | import { resolveSidebarItems } from '../util'
 52 | 
 53 | export default {
 54 |   name: 'Layout',
 55 | 
 56 |   components: {
 57 |     Home,
 58 |     Page,
 59 |     Sidebar,
 60 |     Navbar
 61 |   },
 62 | 
 63 |   data () {
 64 |     return {
 65 |       isSidebarOpen: false
 66 |     }
 67 |   },
 68 | 
 69 |   computed: {
 70 |     shouldShowNavbar () {
 71 |       const { themeConfig } = this.$site
 72 |       const { frontmatter } = this.$page
 73 |       if (
 74 |         frontmatter.navbar === false ||
 75 |         themeConfig.navbar === false) {
 76 |         return false
 77 |       }
 78 |       return (
 79 |         this.$title ||
 80 |         themeConfig.logo ||
 81 |         themeConfig.repo ||
 82 |         themeConfig.nav ||
 83 |         this.$themeLocaleConfig.nav
 84 |       )
 85 |     },
 86 | 
 87 |     shouldShowSidebar () {
 88 |       const { frontmatter } = this.$page
 89 |       return (
 90 |         !frontmatter.home &&
 91 |         frontmatter.sidebar !== false &&
 92 |         this.sidebarItems.length
 93 |       )
 94 |     },
 95 | 
 96 |     sidebarItems () {
 97 |       return resolveSidebarItems(
 98 |         this.$page,
 99 |         this.$page.regularPath,
100 |         this.$site,
101 |         this.$localePath
102 |       )
103 |     },
104 | 
105 |     pageClasses () {
106 |       const userPageClass = this.$page.frontmatter.pageClass
107 |       return [
108 |         {
109 |           'no-navbar': !this.shouldShowNavbar,
110 |           'sidebar-open': this.isSidebarOpen,
111 |           'no-sidebar': !this.shouldShowSidebar
112 |         },
113 |         userPageClass
114 |       ]
115 |     }
116 |   },
117 | 
118 |   mounted () {
119 |     this.$router.afterEach(() => {
120 |       this.isSidebarOpen = false
121 |     })
122 |   },
123 | 
124 |   methods: {
125 |     toggleSidebar (to) {
126 |       this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
127 |       this.$emit('toggle-sidebar', this.isSidebarOpen)
128 |     },
129 | 
130 |     // side swipe
131 |     onTouchStart (e) {
132 |       this.touchStart = {
133 |         x: e.changedTouches[0].clientX,
134 |         y: e.changedTouches[0].clientY
135 |       }
136 |     },
137 | 
138 |     onTouchEnd (e) {
139 |       const dx = e.changedTouches[0].clientX - this.touchStart.x
140 |       const dy = e.changedTouches[0].clientY - this.touchStart.y
141 |       if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
142 |         if (dx > 0 && this.touchStart.x <= 80) {
143 |           this.toggleSidebar(true)
144 |         } else {
145 |           this.toggleSidebar(false)
146 |         }
147 |       }
148 |     }
149 |   }
150 | }
151 | </script>
152 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/noopModule.js:
--------------------------------------------------------------------------------
1 | export default {}
2 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@vuepress-dumi/vuepress-theme-dumi",
 3 |   "version": "0.3.11",
 4 |   "description": "📖 A dumi style theme for VuePress.",
 5 |   "keywords": [
 6 |     "vue",
 7 |     "vuepress",
 8 |     "theme",
 9 |     "documentation",
10 |     "dumi"
11 |   ],
12 |   "author": "OrekiSH <orekish@163.com>",
13 |   "homepage": "https://github.com/OrekiSH/vuepress-dumi",
14 |   "license": "MIT",
15 |   "main": "index.js",
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "git+https://github.com/OrekiSH/vuepress-dumi.git",
19 |     "directory": "packages/vuepress-theme-dumi"
20 |   },
21 |   "publishConfig": {
22 |     "access": "public"
23 |   },
24 |   "bugs": {
25 |     "url": "https://github.com/OrekiSH/vuepress-dumi/issues"
26 |   },
27 |   "dependencies": {
28 |     "@vuepress-dumi/vuepress-plugin-dumi-previewer": "latest"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/styles/arrow.styl:
--------------------------------------------------------------------------------
 1 | @require './config'
 2 | 
 3 | .arrow
 4 |   display inline-block
 5 |   width 0
 6 |   height 0
 7 |   &.up
 8 |     border-left 4px solid transparent
 9 |     border-right 4px solid transparent
10 |     border-bottom 6px solid $arrowBgColor
11 |   &.down
12 |     border-left 4px solid transparent
13 |     border-right 4px solid transparent
14 |     border-top 6px solid $arrowBgColor
15 |   &.right
16 |     border-top 4px solid transparent
17 |     border-bottom 4px solid transparent
18 |     border-left 6px solid $arrowBgColor
19 |   &.left
20 |     border-top 4px solid transparent
21 |     border-bottom 4px solid transparent
22 |     border-right 6px solid $arrowBgColor
23 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/styles/code.styl:
--------------------------------------------------------------------------------
  1 | {$contentClass}
  2 |   code
  3 |     color lighten($textColor, 20%)
  4 |     padding 0.2rem 0.4rem
  5 |     margin 0
  6 |     font-size 0.85em
  7 |     color: #d56161
  8 |     background: darken(#f9fafb, 1%)
  9 | 
 10 |     .token
 11 |       &.deleted
 12 |         color #EC5975
 13 |       &.inserted
 14 |         color $accentColor
 15 | 
 16 | {$contentClass}
 17 |   pre, pre[class*="language-"]
 18 |     line-height 1.4
 19 |     padding 1.25rem 1.5rem
 20 |     margin 0.85rem 0
 21 |     background-color $codeBgColor
 22 |     border-radius 4px
 23 |     overflow auto
 24 |     code
 25 |       color #fff
 26 |       padding 0
 27 |       background-color transparent
 28 |       border-radius 0
 29 | 
 30 | div[class*="language-"]
 31 |   position relative
 32 |   background-color $codeBgColor
 33 |   border-radius 4px
 34 |   .highlight-lines
 35 |     user-select none
 36 |     padding-top 1.3rem
 37 |     position absolute
 38 |     top 0
 39 |     left 0
 40 |     width 100%
 41 |     line-height 1.4
 42 |     .highlighted
 43 |       background-color rgba(0, 0, 0, 66%)
 44 |   pre, pre[class*="language-"]
 45 |     background transparent
 46 |     position relative
 47 |     z-index 1
 48 |   &::before
 49 |     position absolute
 50 |     z-index 3
 51 |     top 0.8em
 52 |     right 1em
 53 |     font-size 0.75rem
 54 |     color rgba(255, 255, 255, 0.4)
 55 |   &:not(.line-numbers-mode)
 56 |     .line-numbers-wrapper
 57 |       display none
 58 |   &.line-numbers-mode
 59 |     .highlight-lines .highlighted
 60 |         position relative
 61 |         &:before
 62 |           content ' '
 63 |           position absolute
 64 |           z-index 3
 65 |           left 0
 66 |           top 0
 67 |           display block
 68 |           width $lineNumbersWrapperWidth
 69 |           height 100%
 70 |           background-color rgba(0, 0, 0, 66%)
 71 |     pre
 72 |       padding-left $lineNumbersWrapperWidth + 1 rem
 73 |       vertical-align middle
 74 |     .line-numbers-wrapper
 75 |       position absolute
 76 |       top 0
 77 |       width $lineNumbersWrapperWidth
 78 |       text-align center
 79 |       color rgba(255, 255, 255, 0.3)
 80 |       padding 1.25rem 0
 81 |       line-height 1.4
 82 |       br
 83 |         user-select none
 84 |       .line-number
 85 |         position relative
 86 |         z-index 4
 87 |         user-select none
 88 |         font-size 0.85em
 89 |     &::after
 90 |       content ''
 91 |       position absolute
 92 |       z-index 2
 93 |       top 0
 94 |       left 0
 95 |       width $lineNumbersWrapperWidth
 96 |       height 100%
 97 |       border-radius 4px 0 0 4px
 98 |       border-right 1px solid rgba(0, 0, 0, 66%)
 99 |       background-color $codeBgColor
100 | 
101 | 
102 | for lang in $codeLang
103 |   div{'[class~="language-' + lang + '"]'}
104 |     &:before
105 |       content ('' + lang)
106 | 
107 | div[class~="language-javascript"]
108 |   &:before
109 |     content "js"
110 | 
111 | div[class~="language-typescript"]
112 |   &:before
113 |     content "ts"
114 | 
115 | div[class~="language-markup"]
116 |   &:before
117 |     content "html"
118 | 
119 | div[class~="language-markdown"]
120 |   &:before
121 |     content "md"
122 | 
123 | div[class~="language-json"]:before
124 |   content "json"
125 | 
126 | div[class~="language-ruby"]:before
127 |   content "rb"
128 | 
129 | div[class~="language-python"]:before
130 |   content "py"
131 | 
132 | div[class~="language-bash"]:before
133 |   content "sh"
134 | 
135 | div[class~="language-php"]:before
136 |   content "php"
137 | 
138 | @import '~prismjs/themes/prism-tomorrow.css'
139 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/styles/config.styl:
--------------------------------------------------------------------------------
1 | $contentClass = '.theme-dumi-content'
2 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/styles/custom-blocks.styl:
--------------------------------------------------------------------------------
 1 | .custom-block
 2 |   box-shadow 0 6px 16px -2px rgba(0, 0, 0, 0.06)
 3 |   .custom-block-title
 4 |     font-weight 600
 5 |     margin-bottom -0.4rem
 6 |   &.tip, &.warning, &.danger
 7 |     padding .1rem 1.5rem
 8 |     border-left-width .5rem
 9 |     border-left-style solid
10 |     margin 1rem 0
11 |   &.tip
12 |     border-color #8cd225
13 |     background-color #f3f5f7
14 |   &.warning
15 |     background-color rgba(255,229,100,.3)
16 |     border-color darken(#ffc121, 35%)
17 |     color darken(#ffc121, 70%)
18 |     .custom-block-title
19 |       color darken(#ffc121, 50%)
20 |     a
21 |       color $textColor
22 |   &.danger
23 |     background-color #ffe6e6
24 |     border-color darken(#ff4646, 20%)
25 |     color darken(#ff4646, 70%)
26 |     .custom-block-title
27 |       color darken(#ff4646, 40%)
28 |     a
29 |       color $textColor
30 |   &.details
31 |     display block
32 |     position relative
33 |     border-radius 2px
34 |     margin 1.6em 0
35 |     padding 1.6em
36 |     background-color #eee
37 |     h4
38 |       margin-top 0
39 |     figure, p
40 |       &:last-child
41 |         margin-bottom 0
42 |         padding-bottom 0
43 |     summary
44 |       outline none
45 |       cursor pointer
46 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/styles/index.styl:
--------------------------------------------------------------------------------
  1 | @require './config'
  2 | @require './code'
  3 | @require './custom-blocks'
  4 | @require './arrow'
  5 | @require './wrapper'
  6 | @require './toc'
  7 | 
  8 | html, body
  9 |   padding 0
 10 |   margin 0
 11 |   background-color #fff
 12 | 
 13 | body
 14 |   font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
 15 |   -webkit-font-smoothing antialiased
 16 |   -moz-osx-font-smoothing grayscale
 17 |   font-size 15px
 18 |   color $textColor
 19 | 
 20 | .page
 21 |   padding-left $sidebarWidth
 22 | 
 23 | .navbar
 24 |   position fixed
 25 |   z-index 20
 26 |   top 0
 27 |   left 0
 28 |   right 0
 29 |   height $navbarHeight
 30 |   background-color #fff
 31 |   box-sizing border-box
 32 |   box-shadow 0 8px 24px -2px rgba(0, 0, 0, 0.05)
 33 | 
 34 | .sidebar-mask
 35 |   position fixed
 36 |   z-index 9
 37 |   top 0
 38 |   left 0
 39 |   width 100vw
 40 |   height 100vh
 41 |   display none
 42 | 
 43 | .sidebar
 44 |   font-size 16px
 45 |   background-color #fff
 46 |   width $sidebarWidth
 47 |   position fixed
 48 |   z-index 10
 49 |   margin 0
 50 |   top $navbarHeight
 51 |   left 0
 52 |   bottom 0
 53 |   box-sizing border-box
 54 |   border-right 1px solid $borderColor
 55 |   overflow-y auto
 56 | 
 57 | {$contentClass}:not(.custom)
 58 |   @extend $wrapper
 59 |   > *:first-child
 60 |     margin-top $navbarHeight
 61 | 
 62 |   a:hover
 63 |     text-decoration underline
 64 | 
 65 |   p.demo
 66 |     padding 1rem 1.5rem
 67 |     border 1px solid #ddd
 68 |     border-radius 4px
 69 | 
 70 |   img
 71 |     max-width 100%
 72 | 
 73 | {$contentClass}.custom
 74 |   padding 0
 75 |   margin 0
 76 | 
 77 |   img
 78 |     max-width 100%
 79 | 
 80 | a
 81 |   font-weight 500
 82 |   color $accentColor
 83 |   text-decoration none
 84 | 
 85 | p a code
 86 |   font-weight 400
 87 |   color $accentColor
 88 | 
 89 | p span
 90 |   .icon.outbound
 91 |     color $accentColor
 92 | 
 93 | kbd
 94 |   background #eee
 95 |   border solid 0.15rem #ddd
 96 |   border-bottom solid 0.25rem #ddd
 97 |   border-radius 0.15rem
 98 |   padding 0 0.15em
 99 | 
100 | blockquote:not([class])
101 |   font-size 1rem
102 |   color #999;
103 |   border-left .2rem solid #dfe2e5
104 |   margin 1rem 0
105 |   padding .25rem 0 .25rem 1rem
106 | 
107 |   & > p
108 |     margin 0
109 | 
110 | ul:not([class]), ol:not([class])
111 |   padding-left 1.2em
112 | 
113 | strong
114 |   font-weight 600
115 | 
116 | h1, h2, h3, h4, h5, h6
117 |   font-weight 600
118 |   line-height 1.25
119 | 
120 |   {$contentClass}:not(.custom) > &
121 |     margin-top (0.5rem - $navbarHeight)
122 |     padding-top ($navbarHeight + 2rem)
123 |     margin-bottom 0
124 | 
125 |     &:first-child
126 |       margin-top -1.5rem
127 |       margin-bottom 1rem
128 | 
129 |       + p, + pre, + .custom-block
130 |         margin-top 2rem
131 | 
132 |   &:focus .header-anchor,
133 |   &:hover .header-anchor
134 |     opacity: 1
135 | 
136 | h1:not([class])
137 |   font-size 2.2rem
138 | 
139 | h2:not([class])
140 |   font-size 1.65rem
141 |   padding-bottom .3rem
142 |   margin-bottom: .5rem
143 | 
144 | h3:not([class])
145 |   font-size 1.35rem
146 | 
147 | a.header-anchor
148 |   font-size 0.85em
149 |   float left
150 |   margin-left -0.87em
151 |   padding-right 0.23em
152 |   margin-top 0.125em
153 |   opacity 0
154 | 
155 |   &:focus,
156 |   &:hover
157 |     text-decoration none
158 | 
159 | code:not([class]), kbd:not([class]), .line-number
160 |   font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace
161 | 
162 | p:not([class]), ul:not([class]), ol:not([class])
163 |   line-height 1.7
164 | 
165 | hr:not([class])
166 |   border 0
167 |   border-top 1px solid $borderColor
168 | 
169 | {$contentClass}
170 |   table:not([class])
171 |     border-collapse collapse
172 |     margin 1rem 0
173 |     display block
174 |     overflow-x auto
175 |     color: #454d64
176 | 
177 |   tr:not([class])
178 |     border-top 1px solid #ebedf1
179 | 
180 |   th:not([class])
181 |     background: #f9fafb
182 |     font-weight: 500
183 |     text-align: left
184 | 
185 |   th:not([class]), td:not([class])
186 |     border 1px solid #ebedf1
187 |     padding 10px 24px
188 | 
189 | .theme-container
190 |   &.sidebar-open
191 |     .sidebar-mask
192 |       display: block
193 | 
194 |   &.no-navbar
195 |     {$contentClass}:not(.custom) > h1, h2, h3, h4, h5, h6
196 |       margin-top 1.5rem
197 |       padding-top 0
198 | 
199 |     .sidebar
200 |       top 0
201 | 
202 | @media (min-width: ($MQMobile + 1px))
203 |   .theme-container.no-sidebar
204 |     .sidebar
205 |       display none
206 | 
207 |     .page
208 |       padding-left 0
209 | 
210 | @require 'mobile.styl'
211 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/styles/mobile.styl:
--------------------------------------------------------------------------------
 1 | @require './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 |   .page
11 |     padding-left $mobileSidebarWidth
12 | 
13 | // wide mobile
14 | @media (max-width: $MQMobile)
15 |   .sidebar
16 |     top 0
17 |     padding-top $navbarHeight
18 |     transform translateX(-100%)
19 |     transition transform .2s ease
20 |   .page
21 |     padding-left 0
22 |   .theme-container
23 |     &.sidebar-open
24 |       .sidebar
25 |         transform translateX(0)
26 |     &.no-navbar
27 |       .sidebar
28 |         padding-top: 0
29 | 
30 | // narrow mobile
31 | @media (max-width: $MQMobileNarrow)
32 |   h1
33 |     font-size 1.9rem
34 |   {$contentClass}
35 |     div[class*="language-"]
36 |       margin 0.85rem -1.5rem
37 |       border-radius 0
38 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/styles/palette.styl:
--------------------------------------------------------------------------------
 1 | // colors
 2 | $accentColor = #4569d4
 3 | $textColor = #454d64
 4 | $borderColor =  #ebedf1
 5 | $codeBgColor = #282c34
 6 | $arrowBgColor = lighten(#4d5164, 10%)
 7 | $badgeTipColor = #42b983
 8 | $badgeWarningColor = darken(#ffe564, 35%)
 9 | $badgeErrorColor = #DA5961
10 | 
11 | // layout
12 | $navbarHeight = 4rem
13 | $sidebarWidth = 20rem
14 | $contentWidth = 740px
15 | $homePageWidth = 960px
16 | 
17 | // responsive breakpoints
18 | $MQNarrow = 959px
19 | $MQMobile = 719px
20 | $MQMobileNarrow = 419px
21 | 
22 | // code
23 | $lineNumbersWrapperWidth = 3.5rem
24 | $codeLang = js ts html md vue css sass scss less stylus go java c sh yaml py docker dockerfile makefile
25 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/styles/toc.styl:
--------------------------------------------------------------------------------
1 | .table-of-contents
2 |   .badge
3 |     vertical-align middle
4 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/styles/wrapper.styl:
--------------------------------------------------------------------------------
 1 | $wrapper
 2 |   max-width $contentWidth
 3 |   margin 0 auto
 4 |   padding 2rem 2.5rem
 5 |   @media (max-width: $MQNarrow)
 6 |     padding 2rem
 7 |   @media (max-width: $MQMobileNarrow)
 8 |     padding 1.5rem
 9 | 
10 | 


--------------------------------------------------------------------------------
/packages/vuepress-theme-dumi/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 | 
 19 | export function isExternal (path) {
 20 |   return outboundRE.test(path)
 21 | }
 22 | 
 23 | export function isMailto (path) {
 24 |   return /^mailto:/.test(path)
 25 | }
 26 | 
 27 | export function isTel (path) {
 28 |   return /^tel:/.test(path)
 29 | }
 30 | 
 31 | export function ensureExt (path) {
 32 |   if (isExternal(path)) {
 33 |     return path
 34 |   }
 35 |   const hashMatch = path.match(hashRE)
 36 |   const hash = hashMatch ? hashMatch[0] : ''
 37 |   const normalized = normalize(path)
 38 | 
 39 |   if (endingSlashRE.test(normalized)) {
 40 |     return path
 41 |   }
 42 |   return normalized + '.html' + hash
 43 | }
 44 | 
 45 | export function isActive (route, path) {
 46 |   const routeHash = decodeURIComponent(route.hash)
 47 |   const linkHash = getHash(path)
 48 |   if (linkHash && routeHash !== linkHash) {
 49 |     return false
 50 |   }
 51 |   const routePath = normalize(route.path)
 52 |   const pagePath = normalize(path)
 53 |   return routePath === pagePath
 54 | }
 55 | 
 56 | export function resolvePage (pages, rawPath, base) {
 57 |   if (isExternal(rawPath)) {
 58 |     return {
 59 |       type: 'external',
 60 |       path: rawPath
 61 |     }
 62 |   }
 63 |   if (base) {
 64 |     rawPath = resolvePath(rawPath, base)
 65 |   }
 66 |   const path = normalize(rawPath)
 67 |   for (let i = 0; i < pages.length; i++) {
 68 |     if (normalize(pages[i].regularPath) === path) {
 69 |       return Object.assign({}, pages[i], {
 70 |         type: 'page',
 71 |         path: ensureExt(pages[i].path)
 72 |       })
 73 |     }
 74 |   }
 75 |   console.error(`[vuepress] No matching page found for sidebar item "${rawPath}"`)
 76 |   return {}
 77 | }
 78 | 
 79 | function resolvePath (relative, base, append) {
 80 |   const firstChar = relative.charAt(0)
 81 |   if (firstChar === '/') {
 82 |     return relative
 83 |   }
 84 | 
 85 |   if (firstChar === '?' || firstChar === '#') {
 86 |     return base + relative
 87 |   }
 88 | 
 89 |   const stack = base.split('/')
 90 | 
 91 |   // remove trailing segment if:
 92 |   // - not appending
 93 |   // - appending to trailing slash (last segment is empty)
 94 |   if (!append || !stack[stack.length - 1]) {
 95 |     stack.pop()
 96 |   }
 97 | 
 98 |   // resolve relative path
 99 |   const segments = relative.replace(/^\//, '').split('/')
100 |   for (let i = 0; i < segments.length; i++) {
101 |     const segment = segments[i]
102 |     if (segment === '..') {
103 |       stack.pop()
104 |     } else if (segment !== '.') {
105 |       stack.push(segment)
106 |     }
107 |   }
108 | 
109 |   // ensure leading slash
110 |   if (stack[0] !== '') {
111 |     stack.unshift('')
112 |   }
113 | 
114 |   return stack.join('/')
115 | }
116 | 
117 | /**
118 |  * @param { Page } page
119 |  * @param { string } regularPath
120 |  * @param { SiteData } site
121 |  * @param { string } localePath
122 |  * @returns { SidebarGroup }
123 |  */
124 | export function resolveSidebarItems (page, regularPath, site, localePath) {
125 |   const { pages, themeConfig } = site
126 | 
127 |   const localeConfig = localePath && themeConfig.locales
128 |     ? themeConfig.locales[localePath] || themeConfig
129 |     : themeConfig
130 | 
131 |   const pageSidebarConfig = page.frontmatter.sidebar || localeConfig.sidebar || themeConfig.sidebar
132 |   if (pageSidebarConfig === 'auto') {
133 |     return resolveHeaders(page)
134 |   }
135 | 
136 |   const sidebarConfig = localeConfig.sidebar || themeConfig.sidebar
137 |   if (!sidebarConfig) {
138 |     return []
139 |   } else {
140 |     const { base, config } = resolveMatchingConfig(regularPath, sidebarConfig)
141 |     if (config === 'auto') {
142 |       return resolveHeaders(page)
143 |     }
144 |     return config
145 |       ? config.map(item => resolveItem(item, pages, base))
146 |       : []
147 |   }
148 | }
149 | 
150 | /**
151 |  * @param { Page } page
152 |  * @returns { SidebarGroup }
153 |  */
154 | function resolveHeaders (page) {
155 |   const headers = groupHeaders(page.headers || [])
156 |   return [{
157 |     type: 'group',
158 |     collapsable: false,
159 |     title: page.title,
160 |     path: null,
161 |     children: headers.map(h => ({
162 |       type: 'auto',
163 |       title: h.title,
164 |       basePath: page.path,
165 |       path: page.path + '#' + h.slug,
166 |       children: h.children || []
167 |     }))
168 |   }]
169 | }
170 | 
171 | export function groupHeaders (headers) {
172 |   // group h3s under h2
173 |   headers = headers.map(h => Object.assign({}, h))
174 |   let lastH2
175 |   headers.forEach(h => {
176 |     if (h.level === 2) {
177 |       lastH2 = h
178 |     } else if (lastH2) {
179 |       (lastH2.children || (lastH2.children = [])).push(h)
180 |     }
181 |   })
182 |   return headers.filter(h => h.level === 2)
183 | }
184 | 
185 | export function resolveNavLinkItem (linkItem) {
186 |   return Object.assign(linkItem, {
187 |     type: linkItem.items && linkItem.items.length ? 'links' : 'link'
188 |   })
189 | }
190 | 
191 | /**
192 |  * @param { Route } route
193 |  * @param { Array<string|string[]> | Array<SidebarGroup> | [link: string]: SidebarConfig } config
194 |  * @returns { base: string, config: SidebarConfig }
195 |  */
196 | export function resolveMatchingConfig (regularPath, config) {
197 |   if (Array.isArray(config)) {
198 |     return {
199 |       base: '/',
200 |       config: config
201 |     }
202 |   }
203 |   for (const base in config) {
204 |     if (ensureEndingSlash(regularPath).indexOf(encodeURI(base)) === 0) {
205 |       return {
206 |         base,
207 |         config: config[base]
208 |       }
209 |     }
210 |   }
211 |   return {}
212 | }
213 | 
214 | function ensureEndingSlash (path) {
215 |   return /(\.html|\/)$/.test(path)
216 |     ? path
217 |     : path + '/'
218 | }
219 | 
220 | function resolveItem (item, pages, base, groupDepth = 1) {
221 |   if (typeof item === 'string') {
222 |     return resolvePage(pages, item, base)
223 |   } else if (Array.isArray(item)) {
224 |     return Object.assign(resolvePage(pages, item[0], base), {
225 |       title: item[1]
226 |     })
227 |   } else {
228 |     const children = item.children || []
229 |     if (children.length === 0 && item.path) {
230 |       return Object.assign(resolvePage(pages, item.path, base), {
231 |         title: item.title
232 |       })
233 |     }
234 |     return {
235 |       type: 'group',
236 |       path: item.path,
237 |       title: item.title,
238 |       sidebarDepth: item.sidebarDepth,
239 |       initialOpenGroupIndex: item.initialOpenGroupIndex,
240 |       children: children.map(child => resolveItem(child, pages, base, groupDepth + 1)),
241 |       collapsable: item.collapsable !== false
242 |     }
243 |   }
244 | }
245 | 


--------------------------------------------------------------------------------