feat: generate tagname with mapArticle

Author: MuYunyun

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

@@ -8,17 +8,23 @@ const getDirTree = (cmd) => {
     extensions: /\.md/,
     prerender: true,
   }
+  // collect unique tags from all articles.
   const tagsArr = []
+  const mapTagsWithArticle = []
   const dirTree = dirs.map(path => DirectoryTree({
     path,
     options: otherProps,
-    tagsArr
+    tagsArr,
+    mapTagsWithArticle
   }))
 
   return {
     dirTree,
     // duplicate total tags from document.
-    tagsArr: Array.from(new Set(tagsArr))
+    // tagsArr: ['custom Tag 1', 'custom Tag 2']
+    tagsArr,
+    // map tags with path. [{ tagName: 'custom Tag 1', mapArticle: [{ path, name }]}]
+    mapTagsWithArticle
   }
 }
 

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

@@ -51,7 +51,9 @@ function safeReadDirSync(path) {
 function directoryTree({
   path,
   options,
-  tagsArr = []
+  tagsArr = [],
+  // [{ tagName: 'custom Tag 1', mapArticle: [{ path, title }]}]
+  mapTagsWithArticle = []
 }) {
   const name = PATH.basename(path)
   const item = { name }
@@ -99,9 +101,31 @@ function directoryTree({
       }
 
       const yamlParse = contentMatch ? YAML.parse(contentMatch[1]) : {}
+      const articleTags = yamlParse.tags
+      const pathResult = yamlParse.abbrlink
+      if (Array.isArray(articleTags)) {
+        const cpArticleTags = Array.from(new Set(articleTags))
 
-      if (Array.isArray(yamlParse.tags)) {
-        tagsArr.push(...yamlParse.tags)
+        for (let i = 0; i < cpArticleTags.length; i++) {
+          const articleTag = cpArticleTags[i]
+          const articleTagIndex = tagsArr.indexOf(articleTag)
+          if (articleTagIndex > -1) {
+            mapTagsWithArticle[articleTagIndex]['mapArticle'].push({
+              path: pathResult ? pathResult : name,
+              title: name
+            })
+          } else {
+            tagsArr.push(cpArticleTags[i])
+            mapTagsWithArticle.push({
+              tagName: cpArticleTags[i],
+              mapArticle: [{
+                // todo: replace name
+                path: pathResult ? pathResult : name,
+                title: name
+              }]
+            })
+          }
+        }
       }
 
       item.mdconf = yamlParse
@@ -139,7 +163,8 @@ function directoryTree({
         directoryTree({
           path: PATH.join(path, child),
           options,
-          tagsArr
+          tagsArr,
+          mapTagsWithArticle
         }),
       )
       .filter(e => !!e)

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

@@ -12,7 +12,10 @@ const paths = require('./path')
 
 module.exports = function (cmd) {
   const docsConfig = getDocsConfig()
-  const { tagsArr } = getDirTree(cmd)
+  const { tagsArr, mapTagsWithArticle } = getDirTree(cmd)
+
+  console.log('✅✅ tagsArr', tagsArr)
+  console.log('✅✅ mapTagsWithArticle', JSON.stringify(mapTagsWithArticle))
 
   config.mode = 'development'
   config.devtool = 'eval-source-map'

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

@@ -9,22 +9,11 @@ const Tags = ({}) => {
     <div className={styles.tags}>
       <div className={styles['tags-title']}>tags</div>
       <div className={styles['tags-content']}>
-        <a className={styles['tags-text']}>Annual Summary</a>
-        <a className={styles['tags-text']}>css</a>
-        <a className={styles['tags-text']}>ES7</a>
-        <a className={styles['tags-text']}>hooks</a>
-        <a className={styles['tags-text']}>JavaScript</a>
-        <a className={styles['tags-text']}>Mvvm</a>
-        <a className={styles['tags-text']}>Node.js</a>
-        <a className={styles['tags-text']}>Promise</a>
-        <a className={styles['tags-text']}>Python</a>
-        <a className={styles['tags-text']}>React</a>
-        <a className={styles['tags-text']}>Redux</a>
-        <a className={styles['tags-text']}>SEO</a>
-        <a className={styles['tags-text']}>Schedule</a>
-        <a className={styles['tags-text']}>TypeScript</a>
-        <a className={styles['tags-text']}>alfred workflow</a>
-        <a className={styles['tags-text']}>blog</a>
+        {
+          tagsArr.map(tag => {
+            return <a className={styles['tags-text']}>{tag}</a>
+          })
+        }
       </div>
     </div>
   )

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

@@ -11,18 +11,17 @@
     font-family: Palatino, Garamond, Times, Georgia, serif;
     font-size: 24px;
     font-weight: 400;
-    margin: initial;
     text-align: center;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
   }
 
   &-content {
     width: 100%;
+    margin-top: 20px;
   }
 
   &-text {
     color: #6f6f6f;
     padding: 10px;
+    display: inline-flex;
   }
 }

packages/crd-seed/index.js

@@ -1,7 +1,6 @@
 import { Switch, Route } from 'react-router-dom'
 import BasicLayout from './layout'
 import NoMatch from './component/NoMatch'
-import Tags from './component/Tags'
 import './index.less'
 
 // run in the Web/Router.js
@@ -12,10 +11,6 @@ const ThemeSeed = (props) => {
         path="/404"
         render={routeProps => <NoMatch {...routeProps} {...props} />}
       />
-      <Route
-        path="/tags"
-        render={routeProps => <Tags {...routeProps} {...props} />}
-      />
       <Route
         path="/"
         render={(routeProps) => {

packages/crd-seed/layout/index.js

@@ -7,6 +7,7 @@ import Icon from '../component/Icon'
 import Affix from '../component/Affix'
 import Header from '../component/Header'
 import Footer from '../component/Footer'
+import Tags from '../component/Tags'
 import languageMap from '../language'
 import { isMobile, ifAddPrefix } from '../utils'
 import { getOpenSubMenuKeys } from './utils'
@@ -256,6 +257,12 @@ function BasicLayout({
               />
             )
           })}
+          <Route
+            key='/tags'
+            exact
+            path={ifAddPrefix ? `/${repo}/tags` : '/tags'}
+            render={() => <Tags />}
+          />
           <Redirect to={ifAddPrefix ? `/${repo}/404` : `/404`} />
         </Switch>
         {renderPageFooter()}
@@ -265,13 +272,7 @@ function BasicLayout({
 
   return (
     <div className={styles.wrapper}>
-      <Header
-        logo={logo}
-        // href={ifAddPrefix ? `/${repo}` : `/`}
-        // location={location}
-        // indexProps={indexProps}
-        // menuSource={menuSource}
-      />
+      <Header logo={logo} />
       <div
         className={cx(styles.wrapperContent, {
           [styles.wrapperMobile]: isMobile,