jyapayne/docsify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs(ssr): add ssr

Browse source
This commit is contained in:
qingwei.li 2017-05-30 11:54:37 +08:00
commit 8595c99c0b
No known key found for this signature in database
GPG key ID: B6DDC2F7AE80B2F4
8 changed files with 375 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

121
docs/de-de/ssr.md Normal file
View file

@ -0,0 +1,121 @@
# 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 docs"
},
"files": [
"docs"
],
"docsify": {
"config": {
"basePath": "/docs/",
"loadSidebar": true,
"loadNavbar": true,
"coverpage": true,
"name": "docsify"
}
}
}
```
!> 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 => {})
```

6
docs/index.html
View file

@ -36,6 +36,8 @@
maxLevel: 4, maxLevel: 4,
subMaxLevel: 2, subMaxLevel: 2,
name: 'docsify', name: 'docsify',
// basePath: '/docs/',
routerMode: 'history',
search: { search: {
noData: { noData: {
'/de-de/': 'Keine Ergebnisse!', '/de-de/': 'Keine Ergebnisse!',
@ -59,8 +61,8 @@
] ]
} }
</script> </script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script> <script src="//unpkg.com/docsify@next/lib/docsify.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script> <script src="//unpkg.com/docsify@next/lib/plugins/search.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-bash.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-markdown.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-nginx.min.js"></script> <script src="//unpkg.com/prismjs/components/prism-nginx.min.js"></script>

10
docs/ssr.html
View file

@ -7,7 +7,7 @@
<meta name="keywords" content="doc,docs,documentation,gitbook,creator,generator,github,jekyll,github-pages"> <meta name="keywords" content="doc,docs,documentation,gitbook,creator,generator,github,jekyll,github-pages">
<meta name="description" content="A magical documentation generator."> <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"> <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="/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/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/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@next/lib/themes/pure.css" title="pure" disabled> -->
@ -22,8 +22,8 @@
<!--inject-config--> <!--inject-config-->
</body> </body>
<script src="/lib/docsify.js"></script> <script src="/lib/docsify.js"></script>
<script src="/lib/plugins/search.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-bash.min.js"></script>
<!-- <script src="//unpkg.com/prismjs/components/prism-markdown.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/prismjs/components/prism-nginx.min.js"></script>
</html> </html>

118
docs/ssr.md
View file

@ -1,3 +1,121 @@
# Server client renderer # Server client renderer
See https://docsify.now.sh 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 docs"
},
"files": [
"docs"
],
"docsify": {
"config": {
"basePath": "/docs/",
"loadSidebar": true,
"loadNavbar": true,
"coverpage": true,
"name": "docsify"
}
}
}
```
!> 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 => {})
```

121
docs/zh-cn/ssr.md Normal file
View file

@ -0,0 +1,121 @@
# 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 docs"
},
"files": [
"docs"
],
"docsify": {
"config": {
"basePath": "/docs/",
"loadSidebar": true,
"loadNavbar": true,
"coverpage": true,
"name": "docsify"
}
}
}
```
!> 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
packages/docsify-server-renderer/README.md
View file

@ -21,7 +21,7 @@ var renderer = new Renderer({
} }
}) })
renderer.renderToString({ url }) renderer.renderToString(url)
.then(html => {}) .then(html => {})
.catch(err => {}) .catch(err => {})
``` ```

6
packages/docsify-server-renderer/index.js
View file

@ -64,13 +64,13 @@ export default class Renderer {
if (loadSidebar) { if (loadSidebar) {
const name = loadSidebar === true ? '_sidebar.md' : 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')) this._renderHtml('sidebar', await this._render(sidebarFile, 'sidebar'))
} }
if (loadNavbar) { if (loadNavbar) {
const name = loadNavbar === true ? '_navbar.md' : 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')) this._renderHtml('navbar', await this._render(navbarFile, 'navbar'))
} }
@ -131,7 +131,7 @@ export default class Renderer {
const fileName = basename(filePath) const fileName = basename(filePath)
await this._loadFile(cwd(filePath, '../..', fileName)) return await this._loadFile(cwd(filePath, '../..', fileName))
} }
} }
} }

4
src/core/router/history/html5.js
View file

@ -51,11 +51,11 @@ export class HTML5History extends History {
path = path.slice(0, queryIndex) path = path.slice(0, queryIndex)
} }
const base = getPath(location.origin, this.getBasePath()) const base = getPath(location.origin)
const baseIndex = path.indexOf(base) const baseIndex = path.indexOf(base)
if (baseIndex > -1) { if (baseIndex > -1) {
path = path.slice(baseIndex + base.length - 1) path = path.slice(baseIndex + base.length)
} }
return { return {