fix: ssr compatible embedd

Author: QingWei-Li

package.json

@@ -14,15 +14,13 @@
     "url": "git+https://github.com/QingWei-Li/docsify.git"
   },
   "main": "lib/docsify.js",
-  "files": [
-    "lib",
-    "src",
-    "themes"
-  ],
+  "files": ["lib", "src", "themes"],
   "scripts": {
     "bootstrap": "npm i && lerna bootstrap && npm run build:ssr",
-    "build": "rm -rf lib themes && node build/build && mkdir lib/themes && mkdir themes && node build/build-css && npm run build:ssr && node build/build-cover",
-    "dev:build": "rm -rf lib themes && mkdir themes && node build/build --dev && node build/build-css --dev",
+    "build":
+      "rm -rf lib themes && node build/build && mkdir lib/themes && mkdir themes && node build/build-css && npm run build:ssr && node build/build-cover",
+    "dev:build":
+      "rm -rf lib themes && mkdir themes && node build/build --dev && node build/build-css --dev",
     "dev": "node app & nodemon -w src -e js,css --exec 'npm run dev:build'",
     "build:ssr": "node build/build-ssr",
     "test": "eslint {src,packages} --fix",
@@ -70,4 +68,4 @@
     "url": "https://opencollective.com/docsify",
     "logo": "https://docsify.js.org/_media/icon.svg"
   }
-}
+}

src/core/fetch/ajax.js

@@ -2,7 +2,6 @@ import progressbar from '../render/progressbar'
 import { noop } from '../util/core'
 
 const cache = {}
-let uid = 0
 
 /**
  * Simple ajax get
@@ -25,7 +24,6 @@ export function get (url, hasBar = false) {
   xhr.send()
 
   return {
-    uid: uid++,
     then: function (success, error = noop) {
       if (hasBar) {
         const id = setInterval(

src/core/render/compiler.js

@@ -9,6 +9,8 @@ import { isFn, merge, cached } from '../util/core'
 import { get } from '../fetch/ajax'
 
 const cachedLinks = {}
+let uid = 0
+
 function getAndRemoveConfig (str = '') {
   const config = {}
 
@@ -25,14 +27,23 @@ function getAndRemoveConfig (str = '') {
 }
 const compileMedia = {
   markdown (url, config) {
-    const request = get(url, false)
-    const id = `docsify-get-${request.uid}`
+    const id = `docsify-get-${uid++}`
 
-    request.then(text => {
-      document.getElementById(id).innerHTML = this.compile(text)
-    })
+    if (!process.env.SSR) {
+      get(url, false).then(text => {
+        document.getElementById(id).innerHTML = this.compile(text)
+      })
 
-    return `<div data-origin="${url}" id=${id}></div>`
+      return `<div data-origin="${url}" id=${id}></div>`
+    } else {
+      return `<div data-origin="${url}" id=${uid}></div>
+      <script>
+      var compile = window.__current_docsify_compiler__
+      Docsify.get('${url}', false).then(function(text) {
+        document.getElementById('${uid}').innerHTML = compile(text)
+      })
+      </script>`
+    }
   },
   html (url, config) {
     return `<iframe src="${url}" ${config || 'width=100% height=400'}></iframe>`
@@ -44,19 +55,33 @@ const compileMedia = {
     return `<audio src="${url}" ${config || 'controls'}>Not Support</audio>`
   },
   code (url, config) {
-    const request = get(url, false)
-    const id = `docsify-get-${request.uid}`
+    const id = `docsify-get-${uid++}`
     let ext = url.match(/\.(\w+)$/)
 
-    ext = config.ext || (ext && ext[0])
+    ext = config.ext || (ext && ext[1])
+    if (ext === 'md') ext = 'markdown'
 
-    request.then(text => {
-      document.getElementById(id).innerHTML = this.compile(
-        '```' + ext + '\n ' + text + '\n```\n'
-      )
-    })
+    if (!process.env.SSR) {
+      get(url, false).then(text => {
+        document.getElementById(id).innerHTML = this.compile(
+          '```' + ext + '\n' + text.replace(/`/g, '@qm@') + '\n```\n'
+        ).replace(/@qm@/g, '`')
+      })
 
-    return `<div data-origin="${url}" id=${id}></div>`
+      return `<div data-origin="${url}" id=${id}></div>`
+    } else {
+      return `<div data-origin="${url}" id=${id}></div>
+      <script>
+        setTimeout(() => {
+          var compiler = window.__current_docsify_compiler__
+          Docsify.get('${url}', false).then(function(text) {
+            document.getElementById('${id}').innerHTML = compiler
+              .compile('\`\`\`${ext}\\n' + text.replace(/\`/g, '@qm@') + '\\n\`\`\`\\n')
+              .replace(/@qm@/g, '\`')
+          })
+        })
+      </script>`
+    }
   }
 }
 

src/core/render/index.js

@@ -6,7 +6,7 @@ import { callHook } from '../init/lifecycle'
 import { Compiler } from './compiler'
 import { getAndActive, sticky } from '../event/sidebar'
 import { getPath, isAbsolutePath } from '../router/util'
-import { isMobile } from '../util/env'
+import { isMobile, inBrowser } from '../util/env'
 import { isPrimitive } from '../util/core'
 import { scrollActiveSidebar, scroll2Top } from '../event/scroll'
 
@@ -38,7 +38,6 @@ function renderMain (html) {
     html = 'not found'
   }
 
-  dom.toggleClass(dom.getNode('main'), 'add', 'ready')
   this._renderTo('.markdown-section', html)
   // Render sidebar with the TOC
   !this.config.loadSidebar && this._renderSidebar()
@@ -180,6 +179,9 @@ export function initRender (vm) {
 
   // Init markdown compiler
   vm.compiler = new Compiler(config, vm.router)
+  if (inBrowser) {
+    window['__current_docsify_compiler__'] = vm.compiler
+  }
 
   const id = config.el || '#app'
   const navEl = dom.find('nav') || dom.create('nav')

src/core/util/dom.js

@@ -1,4 +1,5 @@
 import { isFn } from '../util/core'
+import { inBrowser } from './env'
 
 const cacheNode = {}
 
@@ -13,17 +14,17 @@ export function getNode (el, noCache = false) {
     if (typeof window.Vue !== 'undefined') {
       return find(el)
     }
-    el = noCache ? find(el) : (cacheNode[el] || (cacheNode[el] = find(el)))
+    el = noCache ? find(el) : cacheNode[el] || (cacheNode[el] = find(el))
   }
 
   return el
 }
 
-export const $ = document
+export const $ = inBrowser && document
 
-export const body = $.body
+export const body = inBrowser && $.body
 
-export const head = $.head
+export const head = inBrowser && $.head
 
 /**
  * Find element
@@ -42,7 +43,9 @@ export function find (el, node) {
  * findAll(nav, 'a') => [].slice.call(nav.querySelectorAll('a'))
  */
 export function findAll (el, node) {
-  return [].slice.call(node ? el.querySelectorAll(node) : $.querySelectorAll(el))
+  return [].slice.call(
+    node ? el.querySelectorAll(node) : $.querySelectorAll(el)
+  )
 }
 
 export function create (node, tpl) {
@@ -85,4 +88,3 @@ export function toggleClass (el, type, val) {
 export function style (content) {
   appendTo(head, create('style', content))
 }
-

src/core/util/env.js

@@ -1,4 +1,4 @@
-export const inBrowser = typeof window !== 'undefined'
+export const inBrowser = !process.env.SSR
 
 export const isMobile = inBrowser && document.body.clientWidth <= 600
 

src/themes/basic/_layout.css

@@ -217,16 +217,12 @@ li input[type='checkbox'] {
 
 /* main */
 main {
-  display: none;
+  display: block;
   position: relative;
   size: 100vw 100%;
   z-index: 0;
 }
 
-main.ready {
-  display: block;
-}
-
 .anchor {
   display: inline-block;
   text-decoration: none;