feat: add link for individual props/events/slots/configs/icons

one/build/language.js

@@ -20,9 +20,9 @@ export function vue (hljs) {
             className: 'string',
             endsParent: true,
             variants: [
-              {begin: /"/, end: /"/},
-              {begin: /'/, end: /'/},
-              {begin: /[^\s"'=<>`]+/}
+              { begin: /"/, end: /"/ },
+              { begin: /'/, end: /'/ },
+              { begin: /[^\s"'=<>`]+/ }
             ]
           }
         ]
@@ -49,7 +49,7 @@ export function vue (hljs) {
         */
         begin: '<style(?=\\s|>|$)',
         end: '>',
-        keywords: {name: 'style'},
+        keywords: { name: 'style' },
         contains: [TAG_INTERNALS],
         starts: {
           end: '</style>',
@@ -62,7 +62,7 @@ export function vue (hljs) {
         // See the comment in the <style tag about the lookahead pattern
         begin: '<script(?=\\s|>|$)',
         end: '>',
-        keywords: {name: 'script'},
+        keywords: { name: 'script' },
         contains: [TAG_INTERNALS],
         starts: {
           end: '</script>',
@@ -75,7 +75,7 @@ export function vue (hljs) {
         // See the comment in the <style tag about the lookahead pattern
         begin: '<template(?=\\s|>|$)',
         end: '>',
-        keywords: {name: 'template'},
+        keywords: { name: 'template' },
         contains: [TAG_INTERNALS],
         starts: {
           end: '</template>',

one/build/page.js

@@ -12,6 +12,7 @@ import etpl from 'etpl'
 import { readFileSync, writeFileSync, replaceExtSync } from './util'
 import demo from './remark-demo'
 import ref from './remark-ref'
+import anchor from './remark-anchor'
 import details from './remark-details'
 import custom from './remark-custom'
 import extractFrontmatter from './remark-extract-frontmatter'
@@ -30,6 +31,7 @@ const PAGE_TPL = readFileSync(resolve(__dirname, '../templates/page.etpl'))
 const renderPage = etpl.compile(PAGE_TPL)
 
 const md = remark()
+  .use(anchor)
   .use(custom)
   .use(details)
   .use(ref)

one/build/remark-anchor.js

@@ -0,0 +1,58 @@
+import visit from 'unist-util-visit'
+
+const KNOWN_SCOPES_CONFIG = {
+  props: '属性',
+  events: '事件',
+  methods: '方法',
+  slots: '插槽',
+  icons: '图标',
+  configs: '全局配置'
+}
+const KNOWN_SCOPES = Object.entries(KNOWN_SCOPES_CONFIG).reduce(
+  (acc, [key, value]) => {
+    acc[key] = key
+    acc[value] = key
+    return acc
+  },
+  {}
+)
+
+export default function attacher () {
+  return tree => {
+    let scope = null
+    visit(tree, (node, index, parent) => {
+      const { type, depth, children, value, position } = node
+      if (type === 'heading') {
+        if (depth === 3) {
+          const text = children[0]
+          if (text && text.type === 'text' && KNOWN_SCOPES[text.value]) {
+            scope = KNOWN_SCOPES[text.value]
+            return
+          }
+        }
+
+        if (depth <= 3) {
+          scope = null
+        }
+
+        return
+      }
+
+      if (
+        type === 'inlineCode' &&
+        position.end.offset - position.start.offset - value.length === 4
+      ) {
+        const id = `${scope || 'doc'}-${value.replace(/\./g, '-')}`
+
+        node.data = node.data || {}
+        node.data.hProperties = { id }
+
+        parent.children[index] = {
+          type: 'link',
+          url: `#${id}`,
+          children: [node]
+        }
+      }
+    })
+  }
+}