feat: generate tagname with mapArticle

Author: MuYunyun

config.yml

@@ -42,3 +42,6 @@ inject: injectLogic/index.js
 
 # Use abbrlink
 abbrlink: true
+
+# show Tags in head
+tags: true

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

@@ -3,7 +3,11 @@ const fs = require('fs')
 const PATH = require('path')
 const YAML = require('yamljs')
 const { execSync } = require('child_process')
-const { replaceForFrontMatter, generateRandomId } = require('crd-utils')
+const {
+  replaceForFrontMatter,
+  generateRandomId,
+  getStrAfterPointed
+} = require('crd-utils')
 const { getDigitFromDir, timeFormat } = require('../utils')
 
 const constants = {
@@ -55,7 +59,9 @@ function directoryTree({
   // [{ tagName: 'custom Tag 1', mapArticle: [{ path, title }]}]
   mapTagsWithArticle = []
 }) {
+  console.log('✅✅ path', path)
   const name = PATH.basename(path)
+  console.log('✅✅ name', name)
   const item = { name }
   if (!options.prerender) {
     item.path = path

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

@@ -77,5 +77,6 @@ module.exports = function (source) {
   content = JSON.stringify(content)
     .replace(/\u2028/g, '\\u2028')
     .replace(/\u2029/g, '\\u2029')
+
   return `module.exports = ${content}`
 }

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

@@ -12,11 +12,7 @@ const paths = require('./path')
 
 module.exports = function (cmd) {
   const docsConfig = getDocsConfig()
-  const { tagsArr, mapTagsWithArticle } = getDirTree(cmd)
-
-  console.log('✅✅ tagsArr', tagsArr)
-  console.log('✅✅ mapTagsWithArticle', JSON.stringify(mapTagsWithArticle))
-
+  const { mapTagsWithArticle } = getDirTree(cmd)
   config.mode = 'development'
   config.devtool = 'eval-source-map'
   config.entry = [
@@ -119,7 +115,7 @@ module.exports = function (cmd) {
   config.plugins = config.plugins.concat([
     new webpack.DefinePlugin({
       env: JSON.stringify('dev'),
-      tagsArr: JSON.stringify(tagsArr)
+      mapTagsWithArticle: JSON.stringify(mapTagsWithArticle)
     }),
     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, tagsArr } = getDirTree(cmd)
+  const { dirTree, mapTagsWithArticle } = getDirTree(cmd)
   const routes = getPrerenderRoutes(dirTree)
 
   config.mode = 'production'
@@ -124,7 +124,7 @@ module.exports = function (cmd) {
   config.plugins = config.plugins.concat([
     new webpack.DefinePlugin({
       env: JSON.stringify('prod'),
-      tagsArr: JSON.stringify(tagsArr)
+      mapTagsWithArticle: JSON.stringify(mapTagsWithArticle)
     }),
     new HtmlWebpackPlugin({
       inject: true,

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

@@ -1,18 +1,34 @@
+import { Link } from 'react-router-dom'
+import { ifProd } from 'crd-client-utils'
 import styles from './index.less'
 
-const Tags = ({}) => {
+const Tags = ({ name }) => {
   const { user, repo } = DOCSCONFIG || {}
 
-  console.log('tagsArr', tagsArr)
-
   return (
     <div className={styles.tags}>
-      <div className={styles['tags-title']}>tags</div>
+      <div className={styles['tags-title']}>{name || 'Tags'}</div>
       <div className={styles['tags-content']}>
         {
-          tagsArr.map(tag => {
-            return <a className={styles['tags-text']}>{tag}</a>
-          })
+          name
+            ? mapTagsWithArticle.find(({ tagName }) => tagName === name)?.mapArticle.map(({ path, title }) => {
+              return <Link
+                className={styles['tags-text']}
+                to={ifProd ? `/${repo}/${path}` : `/${path}`}
+                key={title}
+              >
+                {title}
+              </Link>
+            })
+            : mapTagsWithArticle.map(({ tagName }) => {
+              return <Link
+                className={styles['tags-text']}
+                to={ifProd ? `/${repo}/tags/${tagName}` : `/tags/${tagName}`}
+                key={tagName}
+              >
+                {tagName}
+              </Link>
+            })
         }
       </div>
     </div>

packages/crd-seed/layout/index.js

@@ -213,7 +213,7 @@ function BasicLayout({
       <>
         <nav
           className={cx(styles.menuWrapper, {
-            [`${styles["menuwrapper-inlineCollapsed"]}`]: inlineCollapsed,
+            [`${styles['menuWrapper-inlineCollapsed']}`]: inlineCollapsed,
           })}
         >
           {renderMenu(menuSource)}
@@ -263,6 +263,14 @@ function BasicLayout({
             path={ifAddPrefix ? `/${repo}/tags` : '/tags'}
             render={() => <Tags />}
           />
+          <Route
+            key='/tags/:name'
+            path={ifAddPrefix ? `/${repo}/tags/:name` : '/tags/:name'}
+            render={({ match }) => {
+              const { name } = match.params
+              return <Tags name={name} />
+            }}
+          />
           <Redirect to={ifAddPrefix ? `/${repo}/404` : `/404`} />
         </Switch>
         {renderPageFooter()}

packages/crd-utils/index.js

@@ -56,12 +56,22 @@ const generateRandomId = (n) => {
   return res
 }
 
+// get route after pointed char from a string.
+// getStrAfterPointed('/Users/mac/Developer/project/create-react-doc/docs/测试/测试路由.md', 'create-react-doc/docs/') -> 测试/测试路由.md
+const getStrAfterPointed = (path, pointedStr) => {
+  const startPosition = path.indexOf(pointedStr)
+  if (startPosition === -1) return ''
+  const endPosition = startPosition + pointedStr.length
+  return path.slice(endPosition, path.length)
+}
+
 module.exports = {
   resolveApp,
   resolveTool,
   getDocsConfig,
   replaceForFrontMatter,
   generateRandomId,
+  getStrAfterPointed,
   // common paths
   docsGitIgnore: resolveApp('.gitignore'),
   docsBase: resolveApp(''),