feat: headers badge (#540)

docs/guide/markdown.md

@@ -224,7 +224,7 @@ export default {
 }
 ```
 
-## Import Code Snippets
+## Import Code Snippets <Badge text="Experimental" type="warn"/> <Badge text="0.0.11+" type="tip"/>
 
 You can import code snippets from existing files via following syntax:
 

lib/app/app.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import Content from './Content'
 import OutboundLink from '../default-theme/OutboundLink.vue'
+import Badge from '../default-theme/Badge.vue'
 import ClientOnly from './ClientOnly'
 import dataMixin from './dataMixin'
 import store from './store'
@@ -30,6 +31,7 @@ Vue.mixin(dataMixin(siteData))
 // component for rendering markdown content and setting title etc.
 Vue.component('Content', Content)
 Vue.component('OutboundLink', OutboundLink)
+Vue.component('Badge', Badge)
 // component for client-only content
 Vue.component('ClientOnly', ClientOnly)
 

lib/default-theme/Badge.vue

@@ -0,0 +1,30 @@
+<script>
+export default {
+  functional: true,
+  props: ['type', 'text'],
+  render (h, { props, slots }) {
+    return h('span', {
+      class: ['badge', props.type]
+    }, props.text || slots().default)
+  }
+}
+</script>
+
+<style lang="stylus">
+@import './styles/config.styl'
+
+.badge
+  display inline-block
+  vertical-align top
+  font-size 14px
+  height 18px
+  line-height 18px
+  border-radius 9px
+  padding 0 5px
+  color white
+  margin-right 5px
+  &.tip
+    background-color #42b983
+  &.warning, &.warn
+    background-color darken(#ffe564, 35%)
+</style>

lib/default-theme/styles/theme.styl

@@ -4,6 +4,7 @@
 @require './custom-blocks'
 @require './arrow'
 @require './wrapper'
+@require './toc'
 
 html, body
   padding 0

lib/default-theme/styles/toc.styl

@@ -0,0 +1,3 @@
+.table-of-contents
+  .badge
+    vertical-align middle

lib/markdown/index.js

@@ -11,11 +11,12 @@ const emoji = require('markdown-it-emoji')
 const anchor = require('markdown-it-anchor')
 const toc = require('markdown-it-table-of-contents')
 const _slugify = require('./slugify')
-const parseHeaders = require('../util/parseHeaders')
+const { parseHeaders, removeTailHtml } = require('../util/parseHeaders')
+const { compose } = require('../util/shared')
 
 module.exports = ({ markdown = {}} = {}) => {
   // allow user config slugify
-  const slugify = markdown.slugify || _slugify
+  const slugify = markdown.slugify || compose(removeTailHtml, _slugify)
 
   const md = require('markdown-it')({
     html: true,

lib/util/index.js

@@ -1,4 +1,4 @@
-const parseHeaders = require('./parseHeaders')
+const { deeplyParseHeaders } = require('./parseHeaders')
 
 exports.normalizeHeadTag = function (tag) {
   if (typeof tag === 'string') {
@@ -32,11 +32,11 @@ exports.inferTitle = function (frontmatter) {
     return 'Home'
   }
   if (frontmatter.data.title) {
-    return parseHeaders(frontmatter.data.title)
+    return deeplyParseHeaders(frontmatter.data.title)
   }
   const match = frontmatter.content.trim().match(/^#+\s+(.*)/)
   if (match) {
-    return parseHeaders(match[1])
+    return deeplyParseHeaders(match[1])
   }
 }
 
@@ -68,11 +68,11 @@ exports.extractHeaders = function (content, include = [], md) {
   const res = []
   tokens.forEach((t, i) => {
     if (t.type === 'heading_open' && include.includes(t.tag)) {
-      const title = parseHeaders(tokens[i + 1].content)
+      const title = tokens[i + 1].content
       const slug = t.attrs.find(([name]) => name === 'id')[1]
       res.push({
         level: parseInt(t.tag.slice(1), 10),
-        title,
+        title: deeplyParseHeaders(title),
         slug: slug || md.slugify(title)
       })
     }

lib/util/parseHeaders.js

@@ -1,3 +1,5 @@
+const { compose } = require('./shared')
+
 const parseEmojis = str => {
   const emojiData = require('markdown-it-emoji/lib/data/full.json')
   return String(str).replace(/:(.+?):/g, (placeholder, key) => emojiData[key] || placeholder)
@@ -17,13 +19,19 @@ const removeMarkdownToken = str => String(str)
   .replace(/\*(.*)\*/, '$1')  // *
   .replace(/_(.*)_/, '$1')  // _
 
-// put here to avoid circular references
-const compose = (...processors) => {
-  if (processors.length === 0) return input => input
-  if (processors.length === 1) return processors[0]
-  return processors.reduce((prev, next) => {
-    return (...args) => next(prev(...args))
-  })
+exports.removeTailHtml = (str) => {
+  return String(str).replace(/<.*>\s*$/g, '')
 }
 
-module.exports = compose(unescapeHtml, parseEmojis, removeMarkdownToken)
+// only remove some md tokens.
+exports.parseHeaders = compose(
+  unescapeHtml,
+  parseEmojis,
+  removeMarkdownToken
+)
+
+// also clean html in headers.
+exports.deeplyParseHeaders = compose(
+  exports.parseHeaders,
+  exports.removeTailHtml
+)

lib/util/shared.js

@@ -0,0 +1,7 @@
+exports.compose = (...processors) => {
+  if (processors.length === 0) return input => input
+  if (processors.length === 1) return processors[0]
+  return processors.reduce((prev, next) => {
+    return (...args) => next(prev(...args))
+  })
+}