Compare commits

..
14 Commits
Author SHA1 Message Date
qingwei.li 1a5593889e [release] 4.1.2 2017-05-30 13:38:44 +08:00
qingwei.li fc9cdf37c5 [build] 4.1.2 2017-05-30 13:38:44 +08:00
qingwei.li 80dba191d3 fix: update babel config 2017-05-30 13:38:20 +08:00
qingwei.li 5a0c37fcd3 [release] 4.1.1 2017-05-30 13:15:13 +08:00
qingwei.li 1462efedcd [build] 4.1.1 2017-05-30 13:15:13 +08:00
qingwei.li 4cb20a5f9d fix: build for ssr package 2017-05-30 13:13:41 +08:00
qingwei.li 490c8a19d3 docs(ssr): update sidebar 2017-05-30 12:55:09 +08:00
qingwei.li 4b838247ea change: update 2017-05-30 12:52:52 +08:00
qingwei.li b091f3f10d docs(ssr): update 2017-05-30 12:36:23 +08:00
qingwei.li 0e74e6c15e fix: remove history mode 2017-05-30 12:16:26 +08:00
qingwei.li be8358fcdc [release] 4.1.0 2017-05-30 12:14:33 +08:00
qingwei.li 1ae0a9a845 [build] 4.1.0 2017-05-30 12:14:33 +08:00
qingwei.li 7e169ad154 docs(changelog): 4.1.0 2017-05-30 12:05:25 +08:00
qingwei.li 8595c99c0b docs(ssr): add ssr 2017-05-30 11:54:37 +08:00
17 changed files with 422 additions and 25 deletions
+7
View File
@@ -1,5 +1,12 @@
# Changelog
## 4.1.0 / 2017-05-30 🎂 for me
* feat: Support server client renderer [See detail](//docsify.js.org/#/ssr)
* feat: Support HTML5 history API. `$docsify.routerMode = 'history'`
* Breaking change: Clean global API
## 3.7.3 / 2017-05-22
* fix(render): find => filter, Compatible with old browser
+12 -2
View File
@@ -1,12 +1,22 @@
var rollup = require('rollup')
var async = require('rollup-plugin-async')
var babel = require('rollup-plugin-babel')
var isProd = process.argv[process.argv.length - 1] !== '--dev'
rollup
.rollup({
entry: 'packages/docsify-server-renderer/index.js',
plugins: [
async()
babel({
plugins: ['transform-async-to-generator'],
presets: [
[
'es2015',
{
modules: false
}
]
]
})
],
onwarn: function() {}
})
+1
View File
@@ -18,5 +18,6 @@
- [Vue compatibility](vue.md)
- [CDN](cdn.md)
- [Offline Mode(PWA)](pwa.md)
- [Server-client renderer(SSR)](ssr.md)
- [Changelog](changelog.md)
+8 -1
View File
@@ -317,7 +317,7 @@ window.$docsify = {
```
## format-updated
We can display the file update date through **{docsify-updated<span>}</span>** variable. And format it by `formatUpdated`.
We can display the file update date through **{docsify-updated<span>}</span>** variable. And format it by `formatUpdated`.
See https://github.com/lukeed/tinydate#patterns
```js
window.$docsify = {
@@ -340,3 +340,10 @@ window.$docsify = {
externalLinkTarget: '_self' // default: '_blank'
}
```
## router-mode
```js
window.$docsify = {
routerMode: 'history' // default: 'hash'
}
```
+1
View File
@@ -18,5 +18,6 @@
- [Vue Kompatibilität](de-de/vue.md)
- [CDN](de-de/cdn.md)
- [Offline Modus (PWA)](de-de/pwa.md)
- [Server-client renderer (SSR)](de-de/ssr.md)
- [Changelog](de-de/changelog.md)
+124
View File
@@ -0,0 +1,124 @@
# Server client renderer
See https://docsify.now.sh
## Why SSR?
- Better SEO
- Feeling cool
## Quick start
Install `now` and `docsify-cli` in your project.
```bash
npm i now -g
npm i docsify-cli -D
```
Edit `package.json`. If the documentation in `./docs` subdirectory.
```json
{
"name": "my-project",
"scripts": {
"start": "docsify start ."
},
"files": [
"docs"
],
"docsify": {
"config": {
"basePath": "/docs/",
"loadSidebar": true,
"loadNavbar": true,
"coverpage": true,
"name": "docsify"
}
}
}
```
Remove `index.html`
!> The `basePath` just like webpack `publicPath`. You should config it if your docs is in the subdirectory.
We can preview in the local to see if it works.
```bash
npm start
# open http://localhost:4000
```
Publish it!
```bash
now -p
```
Now, You have a support for SSR the docs site.
## Custom template
You can provide a templte for entire page's HTML. such as
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>docsify</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css" title="vue">
</head>
<body>
<!--inject-app-->
<!--inject-config-->
</body>
<script src="//unpkg.com/docsify/lib/docsify.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
<script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-markdown.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-nginx.min.js"></script>
</html>
```
The template should contain these comments for rendered app content.
- `<!--inject-app-->`
- `<!--inject-config-->`
## Configuration
You can configure it in a special config file, or `package.json`.
```js
module.exports = {
tempate: './ssr.html',
config: {
// docsify config
}
}
```
## Deploy for your VPS
You can run `docsify start` directly on your Node server, or write your own server app with `docsify-server-renderer`.
```js
var Renderer = require('docsify-server-renderer')
var readFileSync = require('fs').readFileSync
// init
var renderer = new Renderer({
template: readFileSync('./docs/index.template.html', 'utf-8').,
config: {
name: 'docsify',
repo: 'qingwei-li/docsify'
}
})
renderer.renderToString(url)
.then(html => {})
.catch(err => {})
```
+9 -9
View File
@@ -7,10 +7,10 @@
<meta name="keywords" content="doc,docs,documentation,gitbook,creator,generator,github,jekyll,github-pages">
<meta name="description" content="A magical documentation generator.">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//unpkg.com/docsify@next/lib/themes/vue.css" title="vue">
<!-- <link rel="stylesheet" href="//unpkg.com/docsify@next/lib/themes/dark.css" title="dark" disabled> -->
<!-- <link rel="stylesheet" href="//unpkg.com/docsify@next/lib/themes/buble.css" title="buble" disabled> -->
<!-- <link rel="stylesheet" href="//unpkg.com/docsify@next/lib/themes/pure.css" title="pure" disabled> -->
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css" title="vue">
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/dark.css" title="dark" disabled>
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/buble.css" title="buble" disabled>
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/pure.css" title="pure" disabled>
<style>
nav.app-nav li ul {
min-width: 100px;
@@ -21,9 +21,9 @@
<!--inject-app-->
<!--inject-config-->
</body>
<script src="/lib/docsify.js"></script>
<script src="/lib/plugins/search.js"></script>
<!-- <script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script> -->
<!-- <script src="//unpkg.com/prismjs/components/prism-markdown.min.js"></script> -->
<!-- <script src="//unpkg.com/prismjs/components/prism-nginx.min.js"></script> -->
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-markdown.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-nginx.min.js"></script>
</html>
+120
View File
@@ -1,3 +1,123 @@
# Server client renderer
See https://docsify.now.sh
## Why SSR?
- Better SEO
- Feeling cool
## Quick start
Install `now` and `docsify-cli` in your project.
```bash
npm i now -g
npm i docsify-cli -D
```
Edit `package.json`. If the documentation in `./docs` subdirectory.
```json
{
"name": "my-project",
"scripts": {
"start": "docsify start ."
},
"files": [
"docs"
],
"docsify": {
"config": {
"basePath": "/docs/",
"loadSidebar": true,
"loadNavbar": true,
"coverpage": true,
"name": "docsify"
}
}
}
```
Remove `index.html`
!> The `basePath` just like webpack `publicPath`. You should config it if your docs is in the subdirectory.
We can preview in the local to see if it works.
```bash
npm start
# open http://localhost:4000
```
Publish it!
```bash
now -p
```
Now, You have a support for SSR the docs site.
## Custom template
You can provide a templte for entire page's HTML. such as
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>docsify</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css" title="vue">
</head>
<body>
<!--inject-app-->
<!--inject-config-->
</body>
<script src="//unpkg.com/docsify/lib/docsify.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
<script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-markdown.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-nginx.min.js"></script>
</html>
```
The template should contain these comments for rendered app content.
- `<!--inject-app-->`
- `<!--inject-config-->`
## Configuration
You can configure it in a special config file, or `package.json`.
```js
module.exports = {
tempate: './ssr.html',
config: {
// docsify config
}
}
```
## Deploy for your VPS
You can run `docsify start` directly on your Node server, or write your own server app with `docsify-server-renderer`.
```js
var Renderer = require('docsify-server-renderer')
var readFileSync = require('fs').readFileSync
// init
var renderer = new Renderer({
template: readFileSync('./docs/index.template.html', 'utf-8').,
config: {
name: 'docsify',
repo: 'qingwei-li/docsify'
}
})
renderer.renderToString(url)
.then(html => {})
.catch(err => {})
```
+1
View File
@@ -18,5 +18,6 @@
- [兼容 Vue](zh-cn/vue.md)
- [CDN](zh-cn/cdn.md)
- [离线模式(PWA)](zh-cn/pwa.md)
- [服务端渲染 (SSR)](zh-cn/ssr.md)
- [Changelog](zh-cn/changelog.md)
+124
View File
@@ -0,0 +1,124 @@
# Server client renderer
See https://docsify.now.sh
## Why SSR?
- Better SEO
- Feeling cool
## Quick start
Install `now` and `docsify-cli` in your project.
```bash
npm i now -g
npm i docsify-cli -D
```
2. Edit `package.json`. If the documentation in `./docs` subdirectory.
```json
{
"name": "my-project",
"scripts": {
"start": "docsify start ."
},
"files": [
"docs"
],
"docsify": {
"config": {
"basePath": "/docs/",
"loadSidebar": true,
"loadNavbar": true,
"coverpage": true,
"name": "docsify"
}
}
}
```
Remove `index.html`
!> The `basePath` just like webpack `publicPath`. You should config it if your docs is in the subdirectory.
We can preview in the local to see if it works.
```bash
npm start
# open http://localhost:4000
```
Publish it!
```bash
now -p
```
Now, You have a support for SSR the docs site.
## Custom template
You can provide a templte for entire page's HTML. such as
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>docsify</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css" title="vue">
</head>
<body>
<!--inject-app-->
<!--inject-config-->
</body>
<script src="//unpkg.com/docsify/lib/docsify.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
<script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-markdown.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-nginx.min.js"></script>
</html>
```
The template should contain these comments for rendered app content.
- `<!--inject-app-->`
- `<!--inject-config-->`
## Configuration
You can configure it in a special config file, or `package.json`.
```js
module.exports = {
tempate: './ssr.html',
config: {
// docsify config
}
}
```
## Deploy for your VPS
You can run `docsify start` directly on your Node server, or write your own server app with `docsify-server-renderer`.
```js
var Renderer = require('docsify-server-renderer')
var readFileSync = require('fs').readFileSync
// init
var renderer = new Renderer({
template: readFileSync('./docs/index.template.html', 'utf-8').,
config: {
name: 'docsify',
repo: 'qingwei-li/docsify'
}
})
renderer.renderToString(url)
.then(html => {})
.catch(err => {})
```
+2 -2
View File
@@ -3493,11 +3493,11 @@ var HTML5History = (function (History$$1) {
path = path.slice(0, queryIndex);
}
var base = getPath(location.origin, this.getBasePath());
var base = getPath(location.origin);
var baseIndex = path.indexOf(base);
if (baseIndex > -1) {
path = path.slice(baseIndex + base.length - 1);
path = path.slice(baseIndex + base.length);
}
return {
+2 -2
View File
File diff suppressed because one or more lines are too long
+4 -2
View File
@@ -1,6 +1,6 @@
{
"name": "docsify",
"version": "4.0.2",
"version": "4.1.2",
"description": "A magical documentation generator.",
"author": {
"name": "qingwei-li",
@@ -35,6 +35,8 @@
"zoom-image": "^0.1.4"
},
"devDependencies": {
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-preset-es2015": "^6.24.1",
"cssnano": "^3.10.0",
"eslint": "^3.18.0",
"eslint-config-vue": "^2.0.2",
@@ -43,7 +45,7 @@
"postcss": "^5.2.16",
"postcss-salad": "^1.0.8",
"rollup": "^0.41.6",
"rollup-plugin-async": "^1.2.0",
"rollup-plugin-babel": "^2.7.1",
"rollup-plugin-buble": "^0.15.0",
"rollup-plugin-commonjs": "^8.0.2",
"rollup-plugin-node-resolve": "^2.0.0",
+1 -1
View File
@@ -21,7 +21,7 @@ var renderer = new Renderer({
}
})
renderer.renderToString({ url })
renderer.renderToString(url)
.then(html => {})
.catch(err => {})
```
+3 -3
View File
@@ -64,13 +64,13 @@ export default class Renderer {
if (loadSidebar) {
const name = loadSidebar === true ? '_sidebar.md' : loadSidebar
const sidebarFile = this._getPath(resolve(url, `../${name}`))
const sidebarFile = this._getPath(resolve(url, `./${name}`))
this._renderHtml('sidebar', await this._render(sidebarFile, 'sidebar'))
}
if (loadNavbar) {
const name = loadNavbar === true ? '_navbar.md' : loadNavbar
const navbarFile = this._getPath(resolve(url, `../${name}`))
const navbarFile = this._getPath(resolve(url, `./${name}`))
this._renderHtml('navbar', await this._render(navbarFile, 'navbar'))
}
@@ -131,7 +131,7 @@ export default class Renderer {
const fileName = basename(filePath)
await this._loadFile(cwd(filePath, '../..', fileName))
return await this._loadFile(cwd(filePath, '../..', fileName))
}
}
}
@@ -1,6 +1,6 @@
{
"name": "docsify-server-renderer",
"version": "4.0.2",
"version": "4.1.2",
"description": "docsify server renderer",
"author": {
"name": "qingwei-li",
+2 -2
View File
@@ -51,11 +51,11 @@ export class HTML5History extends History {
path = path.slice(0, queryIndex)
}
const base = getPath(location.origin, this.getBasePath())
const base = getPath(location.origin)
const baseIndex = path.indexOf(base)
if (baseIndex > -1) {
path = path.slice(baseIndex + base.length - 1)
path = path.slice(baseIndex + base.length)
}
return {