Skip to content

Commit d07ddaa

Browse files
QingWei-LiQingWei-Li
authored
0.6.0 (#12)
* Fix ineffective option, fixed #10 * Feat: dropdown list, #6 * Fix repo url * Feat: sidebar with toggle * Update doc
1 parent dd361b3 commit d07ddaa

File tree

12 files changed

+380
-24
lines changed

12 files changed

+380
-24
lines changed

‎404.dev.html

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,10 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6-
<link rel="stylesheet" href="/themes/vue.css">
6+
<link rel="stylesheet" href="/themes/buble.css">
77
</head>
88
<body>
9-
<nav>
10-
<a href="/">En</a>
11-
<a href="/zh-cn">中文</a>
12-
</nav>
139
<div id="app"></div>
1410
</body>
15-
<script src="/lib/docsify.js" data-repo="qingwei-li/docsify"></script>
11+
<script src="/lib/docsify.js" data-repo="https://qingwei-li/docsify" data-sidebar-toggle></script>
1612
</html>

‎CHANGELOG.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
## 0.6.0
2+
### Features
3+
- Navbar support dropdown list, #6
4+
- Sidebar with toggle
5+
6+
### Bug fixes
7+
- Fix ineffective option, fixed #10
8+
19
## 0.5.0
210
### Features
311
- Custom sidebars and navbars by markdown file

‎docs/404.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,9 @@
1414
</nav>
1515
<div id="app"></div>
1616
</body>
17-
<script src="//unpkg.com/docsify/lib/docsify.min.js" data-repo="qingwei-li/docsify" data-max-level="3"></script>
17+
<script
18+
src="//unpkg.com/docsify/lib/docsify.min.js"
19+
data-repo="qingwei-li/docsify"
20+
data-max-level="3"
21+
data-sidebar-toggle></script>
1822
</html>

‎docs/README.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,14 @@ Root element.
121121
<script src="//unpkg.com/docsify" data-el="#app"></script>
122122
```
123123

124+
#### sidebar-toggle
125+
126+
Sidebar with toggle
127+
128+
```html
129+
<script src="//unpkg.com/docsify" data-sidebar-toggle></script>
130+
```
131+
124132
#### sidebar
125133

126134
Custom sidebar. if it'set, the TOC will be disabeld. Bind global variables on the `data-sidebar`.
@@ -196,6 +204,15 @@ The contents of the file can be:
196204
- [chinese](/zh-cn)
197205
```
198206

207+
If you write a sub level list, it will generate a dropdown list.
208+
209+
```markdown
210+
- [download](/download)
211+
- language
212+
- [en](/)
213+
- [chinese](/zh-cn)
214+
```
215+
199216
## FAQ
200217

201218
### Why use `404.html` instead of `index.html`

‎docs/zh-cn.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,14 @@ docsify serve docs
119119
<script src="//unpkg.com/docsify" data-el="#app"></script>
120120
```
121121

122+
#### sidebar-toggle
123+
124+
Sidebar 开关按钮
125+
126+
```html
127+
<script src="//unpkg.com/docsify" data-sidebar-toggle></script>
128+
```
129+
122130
#### sidebar
123131

124132
设置后 TOC 功能将不可用，适合导航较多的文档，`data-sidebar` 传入全局变量名。
@@ -193,6 +201,15 @@ docsify serve docs
193201
- [中文](/zh-cn)
194202
```
195203

204+
当然也支持二级列表，将生成一个下拉列表
205+
```markdown
206+
- [download](/download)
207+
- language
208+
- [en](/)
209+
- [中文](/zh-cn)
210+
```
211+
212+
196213
## FAQ
197214

198215
### 为什么是 `404.html` 而不用 `index.html`

‎src/event.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,3 +70,14 @@ export function activeLink (dom, activeParent) {
7070
}
7171
})
7272
}
73+
74+
/**
75+
* sidebar toggle
76+
*/
77+
export function bindToggle (dom) {
78+
dom = typeof dom === 'object' ? dom : document.querySelector(dom)
79+
if (!dom) return
80+
const main = document.querySelector('main')
81+
82+
dom.addEventListener('click', () => main.classList.toggle('close'))
83+
}

‎src/index.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const OPTIONS = {
66
repo: '',
77
maxLevel: 6,
88
sidebar: '',
9+
sidebarToggle: false,
910
loadSidebar: null,
1011
loadNavbar: null
1112
}
@@ -15,7 +16,7 @@ const script = document.currentScript || [].slice.call(document.getElementsByTag
1516
if (script) {
1617
for (const prop in OPTIONS) {
1718
const val = script.getAttribute('data-' + camel2kebab(prop))
18-
OPTIONS[prop] = isNil(val) ? OPTIONS[prop] : true
19+
OPTIONS[prop] = isNil(val) ? OPTIONS[prop] : (val || true)
1920
}
2021
if (OPTIONS.loadSidebar === true) OPTIONS.loadSidebar = '_sidebar.md'
2122
if (OPTIONS.loadNavbar === true) OPTIONS.loadNavbar = '_navbar.md'
@@ -34,7 +35,8 @@ const Docsify = function () {
3435

3536
// Render markdown file
3637
load(`${loc}.md`)
37-
.then(render.renderArticle, _ => render.renderArticle())
38+
.then(content => render.renderArticle(content, OPTIONS),
39+
_ => render.renderArticle(null, OPTIONS))
3840

3941
// Render sidebar
4042
if (OPTIONS.loadSidebar) {

‎src/render.js

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import marked from 'marked'
22
import Prism from 'prismjs'
33
import * as tpl from './tpl'
4-
import { activeLink, scrollActiveSidebar } from './event'
4+
import { activeLink, scrollActiveSidebar, bindToggle } from './event'
55
import { genTree } from './util'
66

77
const renderTo = function (dom, content) {
@@ -38,17 +38,20 @@ marked.setOptions({ renderer })
3838
export function renderApp (dom, replace, opts) {
3939
const nav = document.querySelector('nav') || document.createElement('nav')
4040

41-
dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.corner(opts.repo) + tpl.main()
41+
dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.toggle(opts.sidebarToggle) + tpl.corner(opts.repo) + tpl.main()
4242
document.body.insertBefore(nav, document.body.children[0])
43+
44+
// bind toggle
45+
bindToggle('button.sidebar-toggle')
4346
}
4447

4548
/**
4649
* article
4750
*/
48-
export function renderArticle (content = 'not found') {
51+
export function renderArticle (content = 'not found', OPTIONS) {
4952
renderTo('article', marked(content))
50-
if (!renderSidebar.rendered) renderSidebar(null)
51-
if (!renderNavbar.rendered) renderNavbar(null)
53+
if (!renderSidebar.rendered) renderSidebar(null, OPTIONS)
54+
if (!renderNavbar.rendered) renderNavbar(null, OPTIONS)
5255
}
5356

5457
/**

‎src/tpl.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
export function corner (data) {
88
if (!data) return ''
99
if (!/\/\//.test(data)) data = 'https://github.com/' + data
10+
data = data.replace(/^git\+/, '')
1011

1112
return `
1213
<a href="${data}" class="github-corner" aria-label="View source on Github">
@@ -31,6 +32,13 @@ export function main () {
3132
</main>`
3233
}
3334

35+
export function toggle (bool) {
36+
if (!bool) return ''
37+
return `<button class="sidebar-toggle">
38+
<span></span><span></span><span></span>
39+
</button>`
40+
}
41+
3442
/**
3543
* Render tree
3644
* @param {Array} tree

‎themes/buble.css

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,51 @@ nav {
2121
text-align: right;
2222
}
2323

24+
nav ul, nav li {
25+
list-style: none;
26+
display: inline-block;
27+
}
28+
29+
/* navbar dropdown */
30+
nav li {
31+
position: relative;
32+
}
33+
34+
nav li ul {
35+
padding: 0;
36+
max-height: 0;
37+
position: absolute;
38+
top: 24px;
39+
background-color: rgba(255, 255, 255, .6);
40+
border: 1px solid #0074D9;
41+
right: 0;
42+
overflow: hidden;
43+
opacity: 0;
44+
overflow-y: auto;
45+
transition: opacity .3s ease, max-height .5s ease;
46+
}
47+
48+
nav li:hover ul {
49+
opacity: 1;
50+
max-height: 100px;
51+
}
52+
53+
nav li ul li {
54+
display: block;
55+
}
56+
57+
nav li ul a {
58+
display: block;
59+
font-size: 14px;
60+
margin: 0;
61+
padding: 4px 10px;
62+
white-space: nowrap;
63+
}
64+
65+
nav li ul a.active {
66+
border-bottom: 0;
67+
}
68+
2469
nav a {
2570
margin: 0 1em;
2671
padding: 5px 0;
@@ -108,6 +153,8 @@ main {
108153
width: 16em;
109154
z-index: 1;
110155
padding-top: 40px;
156+
left: 0;
157+
transition: left 250ms ease-out;
111158
}
112159

113160
.sidebar ul {
@@ -138,6 +185,32 @@ main {
138185
color: #333;
139186
}
140187

188+
/* sidebar toggle */
189+
.sidebar-toggle {
190+
background-color: transparent;
191+
border: 0;
192+
bottom: 10px;
193+
left: 10px;
194+
position: absolute;
195+
text-align: center;
196+
transition: opacity .3s;
197+
width: 30px;
198+
z-index: 10;
199+
outline: none;
200+
}
201+
202+
.sidebar-toggle:hover {
203+
opacity: .4;
204+
}
205+
206+
.sidebar-toggle span {
207+
background-color: #0074D9;
208+
display: block;
209+
height: 2px;
210+
margin-bottom: 4px;
211+
width: 16px;
212+
}
213+
141214
/* main content */
142215
.content {
143216
bottom: 0;
@@ -148,15 +221,43 @@ main {
148221
top: 0;
149222
overflow-x: hidden;
150223
padding-top: 20px;
224+
transition: left 250ms ease;
225+
}
226+
227+
main.close .sidebar {
228+
left: -16em;
229+
}
230+
231+
main.close .content {
232+
left: 0;
151233
}
152234

153235
@media screen and (max-width: 600px) {
236+
nav {
237+
margin-top: 16px;
238+
}
239+
240+
nav li ul {
241+
top: 30px;
242+
}
243+
154244
.sidebar {
155245
left: -16em;
246+
transition: left 250ms ease;
156247
}
157248

158249
.content {
159250
left: 0;
251+
min-width: 100vw;
252+
transition: left 250ms ease-out;
253+
}
254+
255+
main.close .sidebar {
256+
left: 0;
257+
}
258+
259+
main.close .content {
260+
left: 16em;
160261
}
161262
}
162263

0 commit comments

Comments
 (0)