markdown improvements

lib/default-theme/Layout.vue

@@ -21,7 +21,9 @@ export default {
     nprogress.configure({ showSpinner: false })
 
     this.$router.beforeEach((to, from, next) => {
-      nprogress.start()
+      if (to.path !== from.path) {
+        nprogress.start()
+      }
       next()
     })
 

lib/markdown/index.js

 const highlight = require('./highlight')
 const convertRouterLink = require('./link')
+const anchor = require('markdown-it-anchor')
 const container = require('markdown-it-container')
 
+// TODO allow configuring markdown behavior
 // TODO extract <style> blocks and <script> blocks
 // TODO support inline demo
 
-module.exports = require('markdown-it')({
-  html: true,
-  typographer: true,
-  highlight
-})
-.use(convertRouterLink)
-.use(container, 'tip')
-.use(container, 'warning')
-.use(container, 'danger')
+module.exports = siteConfig => {
+  return require('markdown-it')({
+    html: true,
+    typographer: true,
+    highlight
+  })
+  .use(convertRouterLink)
+  .use(anchor, { permalink: true, permalinkBefore: true })
+  .use(container, 'tip')
+  .use(container, 'warning')
+  .use(container, 'danger')
+}

lib/markdown/link.js

+// markdown-it plugin for:
+// 1. adding target="_blank" to external links
+// 2. converting internal links to <router-link>
+
 module.exports = md => {
-  let hasOpenLink = false
+  let hasOpenRouterLink = false
 
   md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
     const token = tokens[idx]
@@ -7,8 +11,17 @@ module.exports = md => {
     if (hrefIndex >= 0) {
       const link = token.attrs[hrefIndex]
       const href = link[1]
-      if (!/^https?:/.test(href) && /\.(md|html)$/.test(href)) {
-        hasOpenLink = true
+      const isExternal = /^https?:/.test(href)
+      const isSourceLink = /\.(md|html)$/.test(href)
+      if (isExternal) {
+        const targetIndex = token.attrIndex('target')
+        if (targetIndex < 0) {
+          token.attrPush(['target', '_blank'])
+        } else {
+          token.attrs[targetIndex][1] = '_blank'
+        }
+      } else if (isSourceLink) {
+        hasOpenRouterLink = true
         tokens[idx] = toRouterLink(token, link)
       }
     }
@@ -25,9 +38,9 @@ module.exports = md => {
 
   md.renderer.rules.link_close = (tokens, idx, options, env, self) => {
     const token = tokens[idx]
-    if (hasOpenLink) {
+    if (hasOpenRouterLink) {
       token.tag = 'router-link'
-      hasOpenLink = false
+      hasOpenRouterLink = false
     }
     return self.renderToken(tokens, idx, options)
   }

lib/webpack/baseConfig.js

 const path = require('path')
 
 module.exports = function createBaseConfig ({
+  siteConfig,
   sourceDir,
   publicPath,
   themePath,
   notFoundPath
 }) {
+  const markdown = require('../markdown')(siteConfig)
   const Config = require('webpack-chain')
   const { VueLoaderPlugin } = require('vue-loader')
   const CSSExtractPlugin = require('mini-css-extract-plugin')
@@ -71,6 +73,7 @@ module.exports = function createBaseConfig ({
         .end()
       .use('markdown-loader')
         .loader(require.resolve('./markdownLoader'))
+        .options({ markdown })
 
   config.module
     .rule('images')

lib/webpack/markdownLoader.js

-const md = require('../markdown')
+const { getOptions } = require('loader-utils')
 const frontmatter = require('yaml-front-matter')
 
 module.exports = function (src) {
+  const { markdown } = getOptions(this)
   currentFile = this.resourcePath
   const content = frontmatter.loadFront(src).__content
-  const html = md.render(content)
+  const html = markdown.render(content)
   return `<template><div class="markdown">${html}</div></template>`
 }

package.json

@@ -37,7 +37,9 @@
     "globby": "^8.0.1",
     "html-webpack-plugin": "^3.2.0",
     "koa-connect": "^2.0.1",
+    "loader-utils": "^1.1.0",
     "markdown-it": "^8.4.1",
+    "markdown-it-anchor": "^4.0.0",
     "markdown-it-container": "^2.0.0",
     "mini-css-extract-plugin": "^0.4.0",
     "mkdirp": "^0.5.1",

yarn.lock

@@ -2479,6 +2479,12 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+markdown-it-anchor@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-4.0.0.tgz#e87fb5543e01965adf71506c6bf7b0491841b7e3"
+  dependencies:
+    string "^3.3.3"
+
 markdown-it-container@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/markdown-it-container/-/markdown-it-container-2.0.0.tgz#0019b43fd02eefece2f1960a2895fba81a404695"
@@ -4016,6 +4022,10 @@ string-width@^2.0.0, string-width@^2.1.1:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
+string@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/string/-/string-3.3.3.tgz#5ea211cd92d228e184294990a6cc97b366a77cb0"
+
 string_decoder@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"