embeds

src/components/UniLink.vue

@@ -6,14 +6,7 @@ export default {
 
   props: ['openInNewTab', 'externalLinkIcon'],
 
-  render(
-    h,
-    {
-      data,
-      children,
-      props: {openInNewTab, externalLinkIcon}
-    }
-  ) {
+  render(h, {data, children, props: {openInNewTab, externalLinkIcon}}) {
     const attrs = {...data.attrs}
     const {to} = attrs
 

src/index.js

@@ -22,6 +22,7 @@ import versionsPlugin from './plugins/versions'
 import bannerFooter from './plugins/banner-footer'
 import darkThemeToggler from './plugins/dark-theme-toggler'
 import searchPlugin from './plugins/search'
+import embedPlugin from './plugins/embed'
 
 Vue.component(ImageZoom.name, ImageZoom)
 Vue.component(Badge.name, Badge)
@@ -55,6 +56,7 @@ class Docute {
     })
 
     const plugins = [
+      embedPlugin,
       i18nPlugin,
       evaluateContentPlugin,
       versionsPlugin,

src/plugins/embed/index.js

@@ -0,0 +1,66 @@
+import {getFilenameByPath, getFileUrl, isExternalLink} from '../../utils'
+import inlineRender from '../../utils/inlineRender'
+
+const SCAN = /#embed\(.*?\)(?!`)/g
+
+async function getFile(url, api, type) {
+  if (!isExternalLink(url)) {
+    let filename = getFilenameByPath(url)
+    if (type) {
+      filename = filename.replace('.md', '')
+    }
+    const file = getFileUrl(api.store.getters.config.sourcePath, filename)
+    const res = await fetch(file)
+    return res.text()
+  }
+  return url
+}
+
+function compileMedia(type, url, api, codeType = '') {
+  switch (type) {
+    case 'fragment':
+      return getFile(url, api).then(inlineRender)
+    case 'code':
+      return getFile(url, api, type)
+        .then(x => `\`\`\`${codeType}\n${x}\n\`\`\``)
+        .then(inlineRender)
+    default:
+      return 'Missing embed kind'
+  }
+}
+
+async function replaceAsync(str, regex, asyncFn) {
+  const promises = []
+  str.replace(regex, (match, ...args) => {
+    const promise = asyncFn(match, ...args)
+    promises.push(promise)
+  })
+  const data = await Promise.all(promises)
+  return str.replace(regex, () => data.shift())
+}
+
+function transformEmbeds(markdown, api) {
+  function process(match) {
+    const params = match
+      .replace('#embed(', '')
+      .replace(')', '')
+      .split(' ')
+    const href = params[0]
+    const type = params[1]
+    const codeType = params[2]
+    const embed = compileMedia(type, href, api, codeType, params.slice(3))
+    return embed
+  }
+  return replaceAsync(markdown, SCAN, process)
+}
+
+const embedPlugin = {
+  name: 'embed',
+  extend(api) {
+    api.processMarkdown(async markdown => {
+      return transformEmbeds(markdown, api)
+    })
+  }
+}
+
+export default embedPlugin

src/utils/inlineRender.js

@@ -0,0 +1,22 @@
+import hooks from '../hooks'
+import markedRenderer from './markedRenderer'
+import marked from './marked'
+import highlight from './highlight'
+
+async function inlineRender(iContent) {
+  let content = await hooks.processPromise('processMarkdown', iContent)
+  const env = {
+    headings: [],
+    mixins: [],
+    config: {}
+  }
+  content = marked(content, {
+    renderer: markedRenderer(hooks),
+    highlight,
+    env
+  })
+  content = await hooks.processPromise('processHTML', content)
+  return content
+}
+
+export default inlineRender

website/docs/exampleEmbeds/embedjs.js

@@ -0,0 +1,2 @@
+const a = 1
+const b = a? a: 0

website/docs/exampleEmbeds/fragment.md

@@ -0,0 +1,3 @@
+### Title from fragment
+
+*fragment body*

website/docs/guide/embed.md

@@ -0,0 +1,15 @@
+# Embed
+
+Embeds let you display items from different files.
+
+## Demonstrations
+Some of these describe defaults, and caveats.
+
+### Code
+
+#embed(/exampleEmbeds/embedjs.js code js)
+
+### Fragment
+Note that the titles from fragment aren't visible in sidebar. Titles of second and third level are suppose to be shown there with the first level used as browser tab title.
+
+#embed(/exampleEmbeds/fragment.md fragment)

website/index.js

@@ -106,6 +106,10 @@ new Docute({
           title: 'Plugin',
           link: '/guide/plugin'
         },
+        {
+          title: 'Embed',
+          link: '/guide/embed'
+        },
         {
           title: 'Deployment',
           link: '/guide/deployment'