Compare commits

...
24 Commits
Author SHA1 Message Date
qingwei.li e160bcaded [release] 4.1.4 2017-05-30 15:28:58 +08:00
qingwei.li 8cf69754b5 [build] 4.1.4 2017-05-30 15:28:58 +08:00
qingwei.li 79a83bc17d fix(ssr): file path 2017-05-30 15:27:04 +08:00
qingwei.li 81c87f7926 update readme 2017-05-30 14:01:06 +08:00
qingwei.li 67ec128315 [release] 4.1.3 2017-05-30 13:58:28 +08:00
qingwei.li 77657e3b64 [build] 4.1.3 2017-05-30 13:58:28 +08:00
qingwei.li 9825db47af fix: update babel config 2017-05-30 13:58:05 +08:00
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
qingwei.li 43fc8b8ab1 [release] 4.0.2 next 2017-05-30 10:14:42 +08:00
qingwei.li ccec23df7f [build] 4.0.2 next 2017-05-30 10:14:41 +08:00
qingwei.li fc1cd3f11d fix: basePath for history mode 2017-05-30 10:11:48 +08:00
24 changed files with 458 additions and 55 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
+1
View File
@@ -27,6 +27,7 @@
- Multiple themes
- Useful plugin API
- Compatible with IE10+
- Support SSR
## Quick start
+7 -1
View File
@@ -1,4 +1,5 @@
var rollup = require('rollup')
var buble = require('rollup-plugin-buble')
var async = require('rollup-plugin-async')
var isProd = process.argv[process.argv.length - 1] !== '--dev'
@@ -6,7 +7,12 @@ rollup
.rollup({
entry: 'packages/docsify-server-renderer/index.js',
plugins: [
async()
async(),
buble({
transforms: {
generator: 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 => {})
```
+20 -17
View File
@@ -79,7 +79,8 @@ var config = merge({
ga: '',
mergeNavbar: false,
formatUpdated: '',
externalLinkTarget: '_blank'
externalLinkTarget: '_blank',
routerModel: 'hash'
}, window.$docsify);
var script = document.currentScript ||
@@ -2740,7 +2741,7 @@ function getPath () {
}
var isAbsolutePath = cached(function (path) {
return /(:|(\/{2}))/.test(path)
return /(:|(\/{2}))/g.test(path)
});
var getParentPath = cached(function (path) {
@@ -3311,6 +3312,8 @@ History.prototype.getBasePath = function getBasePath () {
};
History.prototype.getFile = function getFile (path) {
path = path || this.getCurrentPath();
var ref = this;
var config = ref.config;
var base = this.getBasePath();
@@ -3411,7 +3414,11 @@ var HashHistory = (function (History$$1) {
path = path.slice(hashIndex + 1);
}
return { path: path, query: parseQuery(query) }
return {
path: path,
file: this.getFile(path),
query: parseQuery(query)
}
};
HashHistory.prototype.toURL = function toURL (path, params, currentRoute) {
@@ -3441,7 +3448,7 @@ var HTML5History = (function (History$$1) {
HTML5History.prototype.constructor = HTML5History;
HTML5History.prototype.getCurrentPath = function getCurrentPath () {
var base = this.config.basePath;
var base = this.getBasePath();
var path = window.location.pathname;
if (base && path.indexOf(base) === 0) {
@@ -3470,15 +3477,6 @@ var HTML5History = (function (History$$1) {
on('popstate', cb);
};
HTML5History.prototype.normalize = function normalize () {
var path = this.getCurrentPath();
path = path.replace('#', '?id=');
window.history.pushState({ key: path }, '', path);
return path
};
/**
* Parse the url
* @param {string} [path=location.href]
@@ -3495,12 +3493,18 @@ var HTML5History = (function (History$$1) {
path = path.slice(0, queryIndex);
}
var baseIndex = path.indexOf(location.origin);
var base = getPath(location.origin);
var baseIndex = path.indexOf(base);
if (baseIndex > -1) {
path = path.slice(baseIndex + location.origin.length);
path = path.slice(baseIndex + base.length);
}
return { path: path, query: parseQuery(query) }
return {
path: path,
file: this.getFile(path),
query: parseQuery(query)
}
};
HTML5History.prototype.toURL = function toURL (path, params, currentRoute) {
@@ -3630,7 +3634,6 @@ function fetchMixin (proto) {
var root = getParentPath(this.route.path);
var path = this.router.getFile(root + coverpage);
console.log(this.route.path, root, path);
if (this.route.path !== '/' || !coverpage) {
this._renderCover();
return
+2 -2
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "docsify",
"version": "4.0.1",
"version": "4.1.4",
"description": "A magical documentation generator.",
"author": {
"name": "qingwei-li",
+1 -1
View File
@@ -21,7 +21,7 @@ var renderer = new Renderer({
}
})
renderer.renderToString({ url })
renderer.renderToString(url)
.then(html => {})
.catch(err => {})
```
+4 -3
View File
@@ -5,6 +5,7 @@ import { Compiler } from '../../src/core/render/compiler'
import { isAbsolutePath } from '../../src/core/router/util'
import { readFileSync } from 'fs'
import { resolve, basename } from 'path'
import resolvePathname from 'resolve-pathname'
function cwd (...args) {
return resolve(process.cwd(), ...args)
@@ -64,13 +65,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 +132,7 @@ export default class Renderer {
const fileName = basename(filePath)
await this._loadFile(cwd(filePath, '../..', fileName))
return await this._loadFile(resolvePathname(`../${fileName}`, filePath))
}
}
}
@@ -1,6 +1,6 @@
{
"name": "docsify-server-renderer",
"version": "4.0.1",
"version": "4.1.4",
"description": "docsify server renderer",
"author": {
"name": "qingwei-li",
+2 -1
View File
@@ -20,7 +20,8 @@ const config = merge({
ga: '',
mergeNavbar: false,
formatUpdated: '',
externalLinkTarget: '_blank'
externalLinkTarget: '_blank',
routerModel: 'hash'
}, window.$docsify)
const script = document.currentScript ||
-1
View File
@@ -50,7 +50,6 @@ export function fetchMixin (proto) {
const root = getParentPath(this.route.path)
const path = this.router.getFile(root + coverpage)
console.log(this.route.path, root, path)
if (this.route.path !== '/' || !coverpage) {
this._renderCover()
return
+5 -1
View File
@@ -17,7 +17,11 @@ export class AbstractHistory extends History {
path = path.slice(0, queryIndex)
}
return { path, query: parseQuery(query) }
return {
path,
file: this.getFile(path),
query: parseQuery(query)
}
}
toURL (path, params, currentRoute) {
+2
View File
@@ -23,6 +23,8 @@ export class History {
}
getFile (path) {
path = path || this.getCurrentPath()
const { config } = this
const base = this.getBasePath()
+5 -1
View File
@@ -69,7 +69,11 @@ export class HashHistory extends History {
path = path.slice(hashIndex + 1)
}
return { path, query: parseQuery(query) }
return {
path,
file: this.getFile(path),
query: parseQuery(query)
}
}
toURL (path, params, currentRoute) {
+11 -14
View File
@@ -1,7 +1,7 @@
import { History } from './base'
import { merge, noop } from '../../util/core'
import { on } from '../../util/dom'
import { parseQuery, stringifyQuery, cleanPath } from '../util'
import { parseQuery, stringifyQuery, getPath, cleanPath } from '../util'
export class HTML5History extends History {
constructor (config) {
@@ -10,7 +10,7 @@ export class HTML5History extends History {
}
getCurrentPath () {
const base = this.config.basePath
const base = this.getBasePath()
let path = window.location.pathname
if (base && path.indexOf(base) === 0) {
@@ -37,15 +37,6 @@ export class HTML5History extends History {
on('popstate', cb)
}
normalize () {
let path = this.getCurrentPath()
path = path.replace('#', '?id=')
window.history.pushState({ key: path }, '', path)
return path
}
/**
* Parse the url
* @param {string} [path=location.href]
@@ -60,12 +51,18 @@ export class HTML5History extends History {
path = path.slice(0, queryIndex)
}
const baseIndex = path.indexOf(location.origin)
const base = getPath(location.origin)
const baseIndex = path.indexOf(base)
if (baseIndex > -1) {
path = path.slice(baseIndex + location.origin.length)
path = path.slice(baseIndex + base.length)
}
return { path, query: parseQuery(query) }
return {
path,
file: this.getFile(path),
query: parseQuery(query)
}
}
toURL (path, params, currentRoute) {
+1 -1
View File
@@ -36,7 +36,7 @@ export function getPath (...args) {
}
export const isAbsolutePath = cached(path => {
return /(:|(\/{2}))/.test(path)
return /(:|(\/{2}))/g.test(path)
})
export const getParentPath = cached(path => {