feat: collect tags

Author: MuYunyun

docs/测试/测试标签.md

@@ -1,6 +1,6 @@
 <!--
 abbrlink: a80c431d
-tags: ['自定义标签1', '自定义标签2']
+tags: ['自定义标签1', '自定义标签2', '自定义标签1']
 -->
 
 该页面用来测试自定义标签。

packages/crd-scripts/src/conf/getPrerenderRoutes.js

@@ -8,47 +8,65 @@ const getDirTree = (cmd) => {
     extensions: /\.md/,
     prerender: true,
   }
+  const tagsArr = []
   const dirTree = dirs.map(path => DirectoryTree({
     path,
     options: otherProps,
+    tagsArr
   }))
-  return dirTree
+
+  return {
+    dirTree,
+    // duplicate total tags from document.
+    tagsArr: Array.from(new Set(tagsArr))
+  }
 }
 
 // eg: ['docs/quick_start.md', 'a']
 // output: ['/quick_start', '/a/b', '/a/b/c']
 const getPrerenderRoutes = (dirTree) => {
   const dpCloneDirTree = JSON.parse(JSON.stringify(dirTree))
-  const result = getPrerenderRoute(dpCloneDirTree)
+  const result = recursiveDirTree(dpCloneDirTree)
   result.push('/404')
   return result
 }
 
-function getPrerenderRoute(data) {
-  const arr = []
-  return recursive(data, '', arr)
+function recursiveDirTree(data) {
+  return recursive(
+    data,
+    '',
+    []
+  )
 }
 
-function recursive(data, routePath, arr) {
+function recursive(
+  data,
+  routePath,
+  prerenderRouteArr,
+) {
   data.forEach((item) => {
     const { mdconf } = item || {}
-    const { abbrlink } = mdconf || {}
+    const { abbrlink, tags } = mdconf || {}
     const composeRouteName = `${routePath}/${item.name}`.replace(/.md$/, '')
 
     if (item.type === 'directory') {
       if (item.children && item.children.length > 0) {
-        item.children = recursive(item.children, composeRouteName, arr)
+        item.children = recursive(
+          item.children,
+          composeRouteName,
+          prerenderRouteArr,
+        )
       } else {
         item.children = []
       }
     } else if (item.type === 'file') {
       const prerenderRouteName = abbrlink
         ? `/${abbrlink}`
         : composeRouteName
-      arr.push(prerenderRouteName)
+      prerenderRouteArr.push(prerenderRouteName)
     }
   })
-  return arr
+  return prerenderRouteArr
 }
 
 module.exports = {

packages/crd-scripts/src/conf/node-directory-tree.js

@@ -51,6 +51,7 @@ function safeReadDirSync(path) {
 function directoryTree({
   path,
   options,
+  tagsArr = []
 }) {
   const name = PATH.basename(path)
   const item = { name }
@@ -78,6 +79,7 @@ function directoryTree({
       const contentStr = fs.readFileSync(path).toString()
       if (!contentStr) return
       const contentMatch = contentStr.match(/^<!--([^>]*)-->/)
+      /** generate abbrlink in FrontMatter */
       if (options.generate) {
         const randomId = generateRandomId(8)
         if (!contentMatch) {
@@ -96,7 +98,13 @@ function directoryTree({
         }
       }
 
-      item.mdconf = contentMatch ? YAML.parse(contentMatch[1]) : {}
+      const yamlParse = contentMatch ? YAML.parse(contentMatch[1]) : {}
+
+      if (Array.isArray(yamlParse.tags)) {
+        tagsArr.push(...yamlParse.tags)
+      }
+
+      item.mdconf = yamlParse
       try {
         // see https://stackoverflow.com/questions/2390199/finding-the-date-time-a-file-was-first-added-to-a-git-repository/2390382#2390382
         const result = execSync(`git log --format=%aD ${path} | tail -1`)
@@ -131,6 +139,7 @@ function directoryTree({
         directoryTree({
           path: PATH.join(path, child),
           options,
+          tagsArr
         }),
       )
       .filter(e => !!e)

packages/crd-scripts/src/conf/webpack.config.dev.js

@@ -6,11 +6,14 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const { defaultHTMLPath } = require('crd-utils')
 const FriendlyErrorsWebpackPlugin = require('@nuxtjs/friendly-errors-webpack-plugin')
 const { getDocsConfig } = require('crd-utils')
+const { getDirTree } = require('./getPrerenderRoutes')
 const config = require('./webpack.config')
 const paths = require('./path')
 
 module.exports = function (cmd) {
   const docsConfig = getDocsConfig()
+  const { tagsArr } = getDirTree(cmd)
+
   config.mode = 'development'
   config.devtool = 'eval-source-map'
   config.entry = [
@@ -113,6 +116,7 @@ module.exports = function (cmd) {
   config.plugins = config.plugins.concat([
     new webpack.DefinePlugin({
       env: JSON.stringify('dev'),
+      tagsArr: JSON.stringify(tagsArr)
     }),
     new webpack.HotModuleReplacementPlugin(),
     new HtmlWebpackPlugin({

packages/crd-scripts/src/conf/webpack.config.prod.js

@@ -18,7 +18,7 @@ const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
 
 module.exports = function (cmd) {
   const docsConfig = getDocsConfig()
-  const dirTree = getDirTree(cmd)
+  const { dirTree, tagsArr } = getDirTree(cmd)
   const routes = getPrerenderRoutes(dirTree)
 
   config.mode = 'production'
@@ -124,6 +124,7 @@ module.exports = function (cmd) {
   config.plugins = config.plugins.concat([
     new webpack.DefinePlugin({
       env: JSON.stringify('prod'),
+      tagsArr: JSON.stringify(tagsArr)
     }),
     new HtmlWebpackPlugin({
       inject: true,

packages/crd-seed/component/Tags/index.js

@@ -2,6 +2,9 @@ import styles from './index.less'
 
 const Tags = ({}) => {
   const { user, repo } = DOCSCONFIG || {}
+
+  console.log('tagsArr', tagsArr)
+
   return (
     <div className={styles.tags}>
       <div className={styles['tags-title']}>tags</div>