fix(ssr): remove context

Author: QingWei-Li

docs/ssr.config.js

@@ -13,6 +13,7 @@ module.exports = {
     mergeNavbar: true,
     maxLevel: 4,
     subMaxLevel: 2,
+    basePath: '/docs/',
     name: 'docsify',
     search: {
       noData: {
@@ -28,6 +29,5 @@ module.exports = {
       }
     }
   },
-  context: './docs',
-  template: './ssr.html'
+  template: './docs/ssr.html'
 }

docs/ssr.html

@@ -8,9 +8,9 @@
   <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@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> -->
   <style>
     nav.app-nav li ul {
       min-width: 100px;
@@ -21,9 +21,9 @@
   <!--inject-app-->
   <!--inject-config-->
 </body>
-<script src="//unpkg.com/docsify@next/lib/docsify.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-markdown.min.js"></script>
-<script src="//unpkg.com/prismjs/components/prism-nginx.min.js"></script>
+<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> -->
 </html>

packages/docsify-server-renderer/README.md

@@ -15,7 +15,6 @@ var readFileSync = require('fs').readFileSync
 // init
 var renderer = new Renderer({
   template: readFileSync('./docs/index.template.html', 'utf-8').,
-  context: './docs',
   config: {
     name: 'docsify',
     repo: 'qingwei-li/docsify'

packages/docsify-server-renderer/index.js

@@ -11,7 +11,7 @@ function cwd (...args) {
 }
 
 function mainTpl (config) {
-  let html = `<nav class="app-nav${config.repo ? '' : 'no-badge'}"><!--navbar--></nav>`
+  let html = `<nav class="app-nav${config.repo ? '' : ' no-badge'}"><!--navbar--></nav>`
 
   if (config.repo) {
     html += tpl.corner(config.repo)
@@ -28,12 +28,10 @@ function mainTpl (config) {
 export default class Renderer {
   constructor ({
     template,
-    context,
     config,
     cache
   }) {
     this.html = template
-    this.context = cwd(context || './')
     this.config = config = Object.assign({}, config, {
       routerMode: 'history'
     })
@@ -54,7 +52,7 @@ export default class Renderer {
 
     return isAbsolutePath(file)
       ? file
-      : cwd(this.context, `./${file}`)
+      : cwd(`./${file}`)
   }
 
   async renderToString (url) {
@@ -113,27 +111,27 @@ export default class Renderer {
   }
 
   async _loadFile (filePath) {
+    let content
     try {
+      if (isAbsolutePath(filePath)) {
+        const res = await fetch(filePath)
+        content = await res.text()
+        this.lock = 0
+      } else {
+        content = await readFileSync(filePath, 'utf8')
+        this.lock = 0
+      }
+      return content
+    } catch (e) {
       this.lock = this.lock || 0
       if (++this.lock > 10) {
         this.lock = 0
         return
       }
 
-      if (isAbsolutePath(filePath)) {
-        const res = await fetch(filePath)
-        return await res.text()
-      } else {
-        return readFileSync(filePath, 'utf8')
-      }
-    } catch (e) {
       const fileName = basename(filePath)
       const parentPath = cwd(filePath, '../..')
 
-      if (this.context.length < parentPath.length) {
-        throw Error(`Not found file ${fileName}`)
-      }
-
       await this._loadFile(cwd(filePath, '../..', fileName))
     }
   }

src/core/fetch/index.js

@@ -50,6 +50,7 @@ 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

src/core/render/compiler.js

@@ -4,7 +4,7 @@ import { helper as helperTpl, tree as treeTpl } from './tpl'
 import { genTree } from './gen-tree'
 import { slugify } from './slugify'
 import { emojify } from './emojify'
-import { getBasePath, isAbsolutePath, getPath } from '../router/util'
+import { isAbsolutePath, getPath } from '../router/util'
 import { isFn, merge, cached } from '../util/core'
 
 export class Compiler {
@@ -14,7 +14,7 @@ export class Compiler {
     this.cacheTree = {}
     this.toc = []
     this.linkTarget = config.externalLinkTarget || '_blank'
-    this.contentBase = getBasePath(config.basePath)
+    this.contentBase = router.getBasePath()
 
     const renderer = this._initRenderer()
     let compile

src/core/render/index.js

@@ -5,7 +5,7 @@ import tinydate from 'tinydate'
 import { callHook } from '../init/lifecycle'
 import { Compiler } from './compiler'
 import { getAndActive, sticky } from '../event/sidebar'
-import { getBasePath, getPath, isAbsolutePath } from '../router/util'
+import { getPath, isAbsolutePath } from '../router/util'
 import { isMobile } from '../util/env'
 import { isPrimitive } from '../util/core'
 import { scrollActiveSidebar, scroll2Top } from '../event/scroll'
@@ -143,7 +143,7 @@ export function renderMixin (proto) {
 
         dom.toggleClass(el, 'add', 'has-mask')
         if (!isAbsolutePath(m[1])) {
-          path = getPath(getBasePath(this.config.basePath), m[1])
+          path = getPath(vm.router.getBasePath(), m[1])
         }
         el.style.backgroundImage = `url(${path})`
         el.style.backgroundSize = 'cover'

src/core/router/history/base.js

@@ -1,4 +1,4 @@
-import { getBasePath, getPath, isAbsolutePath } from '../util'
+import { getPath, isAbsolutePath } from '../util'
 import { noop } from '../../util/core'
 
 function getAlias (path, alias) {
@@ -18,9 +18,13 @@ export class History {
     this.config = config
   }
 
+  getBasePath() {
+    return this.config.basePath
+  }
+
   getFile (path) {
     const { config } = this
-    const base = getBasePath(config.basePath)
+    const base = this.getBasePath()
 
     path = config.alias ? getAlias(path, config.alias) : path
     path = getFileName(path)

src/core/router/history/hash.js

@@ -20,6 +20,15 @@ export class HashHistory extends History {
     this.mode = 'hash'
   }
 
+  getBasePath() {
+    const path = window.location.pathname || ''
+    const base = this.config.basePath
+
+    return /^(\/|https?:)/g.test(base)
+      ? base
+      : cleanPath(path + '/' + base)
+  }
+
   getCurrentPath () {
     // We can't use location.hash here because it's not
     // consistent across browsers - Firefox will pre-decode it!

src/core/router/util.js

@@ -1,5 +1,4 @@
 import { cached } from '../util/core'
-import { inBrowser } from '../util/env'
 
 const decode = decodeURIComponent
 const encode = encodeURIComponent
@@ -32,15 +31,6 @@ export function stringifyQuery (obj) {
   return qs.length ? `?${qs.join('&')}` : ''
 }
 
-export const getBasePath = cached((base = '') => {
-  // TODO
-  const path = inBrowser ? window.location.pathname : ''
-
-  return /^(\/|https?:)/g.test(base)
-    ? base
-    : cleanPath(path + '/' + base)
-})
-
 export function getPath (...args) {
   return cleanPath(args.join('/'))
 }

src/plugins/search/component.js

@@ -1,6 +1,5 @@
 import { search } from './search'
 
-let dom
 let NO_DATA_TEXT = ''
 
 function style () {
@@ -65,25 +64,25 @@ function style () {
 .search p.empty {
   text-align: center;
 }`
-  const style = dom.create('style', code)
-  dom.appendTo(dom.head, style)
+  const style = Docsify.dom.create('style', code)
+  Docsify.dom.appendTo(Docsify.dom.head, style)
 }
 
 function tpl (opts, defaultValue = '') {
   const html =
     `<input type="search" value="${defaultValue}" />` +
       '<div class="results-panel"></div>' +
     '</div>'
-  const el = dom.create('div', html)
-  const aside = dom.find('aside')
+  const el = Docsify.dom.create('div', html)
+  const aside = Docsify.dom.find('aside')
 
-  dom.toggleClass(el, 'search')
-  dom.before(aside, el)
+  Docsify.dom.toggleClass(el, 'search')
+  Docsify.dom.before(aside, el)
 }
 
 function doSearch (value) {
-  const $search = dom.find('div.search')
-  const $panel = dom.find($search, '.results-panel')
+  const $search = Docsify.dom.find('div.search')
+  const $panel = Docsify.dom.find($search, '.results-panel')
 
   if (!value) {
     $panel.classList.remove('show')
@@ -105,22 +104,23 @@ function doSearch (value) {
 }
 
 function bindEvents () {
-  const $search = dom.find('div.search')
-  const $input = dom.find($search, 'input')
+  const $search = Docsify.dom.find('div.search')
+  const $input = Docsify.dom.find($search, 'input')
 
   let timeId
   // Prevent to Fold sidebar
-  dom.on($search, 'click',
+  Docsify.dom.on($search, 'click',
     e => e.target.tagName !== 'A' && e.stopPropagation())
-  dom.on($input, 'input', e => {
+  Docsify.dom.on($input, 'input', e => {
     clearTimeout(timeId)
     timeId = setTimeout(_ => doSearch(e.target.value.trim()), 100)
   })
 }
 
 function updatePlaceholder (text, path) {
-  const $input = dom.getNode('.search input[type="search"]')
+  const $input = Docsify.dom.getNode('.search input[type="search"]')
 
+  if (!$input) return
   if (typeof text === 'string') {
     $input.placeholder = text
   } else {
@@ -139,7 +139,6 @@ function updateNoData (text, path) {
 }
 
 export function init (opts, vm) {
-  dom = Docsify.dom
   const keywords = vm.router.parse().query.s
 
   style()

src/plugins/search/search.js

@@ -41,13 +41,12 @@ function saveData (maxAge) {
 export function genIndex (path, content = '', router) {
   const tokens = window.marked.lexer(content)
   const slugify = window.Docsify.slugify
-  const toURL = router.toURL
   const index = {}
   let slug
 
   tokens.forEach(token => {
     if (token.type === 'heading' && token.depth <= 2) {
-      slug = toURL(path, { id: slugify(token.text) })
+      slug = router.toURL(path, { id: slugify(token.text) })
       index[slug] = { slug, title: token.text, body: '' }
     } else {
       if (!slug) return