feat: add anchor link for all headings

one/build/page.js

@@ -6,6 +6,7 @@ import frontmatter from 'remark-frontmatter'
 import shortcodes from 'remark-shortcodes'
 import remarkToRehype from 'remark-rehype'
 import raw from 'rehype-raw'
+import rehypeAutolinkHeadings from '@justfork/rehype-autolink-headings'
 import html from 'rehype-stringify'
 import highlight from 'rehype-highlight'
 import etpl from 'etpl'
@@ -45,6 +46,14 @@ const md = remark()
   .use(toc)
   .use(remarkToRehype, { allowDangerousHTML: true })
   .use(raw)
+  .use(rehypeAutolinkHeadings, {
+    content: {
+      type: 'element',
+      tagName: 'icon-link',
+      properties: { class: 'icon-link' }
+    },
+    test: ['h2', 'h3', 'h4', 'h5', 'h6']
+  })
   .use(rehypePreviewImg)
   .use(rehypeLink)
   .use(rehypeScoped)
@@ -87,16 +96,20 @@ export function renderDocToPage (file) {
       .replace(/\{/g, '{')
       .replace(/\}/g, '}')
       .replace(/v-pre="true"/g, 'v-pre')
-      .replace(/data-markdown="true"/g, 'data-markdown'),
+      .replace(/data-md="true"/g, 'data-md'),
     demos: demoList.map(name => {
       return {
         name,
-        src: join('@/components/demos', relative(DOCS_DIR, demos[name].filePath))
+        src: join(
+          '@/components/demos',
+          relative(DOCS_DIR, demos[name].filePath)
+        )
       }
     }),
     components: componentList,
     alert: hasAlert,
-    boilerplate: demoList.length || componentList.length || hasAlert || style === 'post',
+    boilerplate:
+      demoList.length || componentList.length || hasAlert || style === 'post',
     layout,
     style,
     path: file,

one/build/rehype-link.js

@@ -10,12 +10,16 @@ export default function attacher () {
     let [, locale] = localPath.match(RE_LOCALE) || []
 
     visit(tree, 'element', node => {
-      let { tagName, properties: { href, ...props } } = node
-      if (tagName !== 'a' || href.match(/^\w+:\/\//)) {
+      let {
+        tagName,
+        properties: { href, ...props }
+      } = node
+      if (tagName !== 'a' || href.startsWith('#') || href.match(/^\w+:\/\//)) {
         return
       }
 
-      let routePath = locale && href.indexOf('/') === 0 ? `/${locale}${href}` : href
+      let routePath =
+        locale && href.indexOf('/') === 0 ? `/${locale}${href}` : href
 
       node.tagName = 'nuxt-link'
       node.properties = { ...props, to: routePath }

one/build/rehype-scoped.js

@@ -6,7 +6,7 @@ export default function attacher () {
   return tree => {
     visit(tree, 'element', ({ tagName, properties }, _, { type }) => {
       if (type === 'root' && !RE_DEMO.test(tagName)) {
-        properties['data-markdown'] = true
+        properties['data-md'] = true
       }
     })
   }

one/build/remark-anchor.js

@@ -29,7 +29,10 @@ export default function attacher () {
       const { type, depth, children, value, position } = node
       if (type === 'heading') {
         if (depth === 3) {
-          const text = children[0]
+          let text = children[0]
+          if (text && text.type === 'element' && text.tagName === 'icon-link') {
+            text = children[1]
+          }
           if (text && text.type === 'text' && KNOWN_SCOPES[text.value]) {
             scope = KNOWN_SCOPES[text.value]
             return