WIP:add plugin for searching docs site globally

CONTRIBUTING.md

@@ -1,17 +1,16 @@
-# How to contribute
+# HOW TO CONTRIBUTE
 
-* Welcome your pr! Before pr, talk about situations in the [issue](https://github.com/MuYunyun/create-react-doc/issues/new) firstly. If the situation is reasonable, go to next step;
-* Switch to the new branch based master, submit the pr with after finishing the feature.
+* 1. Welcome your pr! Before pr, talk about situations in the [issue](https://github.com/MuYunyun/create-react-doc/issues/new) firstly. If the situation is reasonable, go to the next step;
+* 2. Switch to the new branch based master, submit the pr with after finishing the feature.
 
-## Dev
+## DEV
 
 Run these bash command firstly.
 
 ```bash
 $ git clone https://github.com/MuYunyun/create-react-doc
 $ cd create-react-doc
-$ npm install
-$ npm run start
+$ yarn && yarn bootstrap && yarn start
 ```
 
 And now you can see the document is running at http://localhost:3000.

config.yml

@@ -17,5 +17,13 @@ branch: master            # the default value of branch is master
 deploy_branch: gh-pages   # which branch to deploy.(default: gh-pages)
 # publish:                # if you want upload to gitlab or other git platform, you can set full git url in it
 
+# use search plugin: provide ability for searching site globally in the site.
+# default value: true
+search: true
+host: 'muyunyun.cn'            # the url host to search
+search_map: {                  # search_map is connected to menu props
+  '/packages/templates/default/Introduction': 'Introduction'
+}
+
 # Available values: en | zh-cn
 language: en

package.json

@@ -57,7 +57,6 @@
     "css-loader": "^0.28.7",
     "detect-port": "^1.2.2",
     "diana": "^1.0.2",
-    "directory-tree-md": "^2.0.7",
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-loader": "^2.0.0",

packages/scripts/package.json

@@ -28,7 +28,6 @@
     "css-loader": "^0.28.7",
     "detect-port": "^1.2.2",
     "diana": "^1.0.2",
-    "directory-tree-md": "^2.0.7",
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-loader": "^2.0.0",
@@ -75,5 +74,8 @@
   },
   "author": "muyunyun",
   "license": "MIT",
-  "gitHead": "ffc5e4cbc94a7356da558c2dbf46e2f39bb8b199"
+  "gitHead": "ffc5e4cbc94a7356da558c2dbf46e2f39bb8b199",
+  "devDependencies": {
+    "yamljs": "^0.3.0"
+  }
 }

packages/scripts/src/conf/createSpareWebpackPlugin.js

@@ -1,8 +1,8 @@
-const DirectoryTree = require('directory-tree-md');
 const PATH = require('path');
 const UPATH = require('upath');
 const write = require('write');
 const fs = require('fs');
+const DirectoryTree = require('./node-directory-tree');
 const { ifInGitIgnore } = require('../utils/index');
 
 function getAllWatchPath(arr, pathArr = []) {

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

@@ -65,6 +65,8 @@ function directoryTree(path, options, onEachFile) {
         item.isEmpty = contentMatch
           ? !String.prototype.trim.call(contentStr.replace(contentMatch[0], ''))
           : true;
+        const uglifyContent = contentStr.replace(/\s/g, '');
+        item.content = uglifyContent;
         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`);

packages/scripts/src/conf/path.js

@@ -88,13 +88,13 @@ function getExcludeFoldersRegExp() {
 module.exports = {
   // markdown dir
   crdConf: getCrdConf(),
-  // docsPackage: resolveApp('./package.json'),
   docsGitIgnore: resolveApp('.gitignore'),
   docsNodeModules: resolveApp(''),
   docsConfig: resolveApp('config.yml'),
   docsReadme: resolveApp('README.md'),
   docsBuildDist: resolveApp('.crd-dist'),
   cacheDirPath: resolveApp('.cache'),
+  searchFilePath: resolveApp('.cache/search.js'),
   watchFilePath: resolveApp('.cache/watch-dir.js'),
   defaultHTMLPath: resolveApp('node_modules/crd-theme/index.html'),
   defaultTemplatePath: resolveTool('node_modules/crd-templates/default'),

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

@@ -112,7 +112,7 @@ module.exports = function (cmd) {
     // 将模块名称添加到工厂功能，以便它们显示在浏览器分析器中。
     // 当接收到热更新信号时，在浏览器 console 控制台打印更多可读性高的模块名称等信息
     new webpack.NamedModulesPlugin(),
-    // to search
+    // hot reload md file
     new CreateSpareWebpackPlugin({
       // 备用文件目录，比对是否存在，不存在生成，根据 sep 目录规则生成
       path: path.join(paths.cacheDirPath, './md'),

packages/scripts/src/conf/webpack.config.js

@@ -3,7 +3,7 @@
 const path = require('path');
 const webpack = require('webpack');
 const webpackbar = require('webpackbar');
-const { getDocsConfig } = require('../utils');
+const { getDocsConfig, getSearchContent } = require('../utils');
 const paths = require('./path');
 const pkg = require('../../package.json');
 
@@ -14,10 +14,11 @@ const define = {
 if (paths.crdConf && paths.crdConf.footer && typeof paths.crdConf.footer === 'string') {
   define.FOOTER = JSON.stringify(paths.crdConf.footer);
 }
-
 /* custom define docs config */
 if (paths.docsConfig) {
+  const searchContent = getSearchContent();
   define.DOCSCONFIG = JSON.stringify(getDocsConfig());
+  define.SEARCHCONTENT = searchContent && searchContent.toString();
 }
 
 module.exports = {
@@ -71,11 +72,12 @@ module.exports = {
             test: /\.md$/,
             use: [
               {
+                // https://github.com/react-doc/raw-content-replace-loader/blob/master/index.js
                 loader: require.resolve('raw-content-replace-loader'),
                 options: {
-                  path: path.join(paths.cacheDirPath, './md'), // 需要替换的目录
-                  replace: paths.projectPath, // 替换成目标目录
-                  sep: /___/g, // 文件名存储，文件夹+下划线间隔+文件名
+                  path: path.join(paths.cacheDirPath, './md'), // dir need to replace
+                  replace: paths.projectPath, // the dir to replace
+                  sep: /___/g, // name saved, folder + __ + file
                 },
               },
             ],
@@ -98,6 +100,7 @@ module.exports = {
     ],
   },
   plugins: [
+    // eslint-disable-next-line new-cap
     new webpackbar({ name: pkg.name }),
     new webpack.DefinePlugin({
       VERSION: JSON.stringify(pkg.version),

packages/scripts/src/server.js

@@ -8,7 +8,7 @@ const createDevServerConfig = require('./conf/webpack.config.server');
 require('colors-cli/toxic');
 
 function clearConsole() {
-  process.stdout.write(process.platform === 'win32' ? '\x1B[2J\x1B[0f' : '\x1B[2J\x1B[3J\x1B[H');
+  // process.stdout.write(process.platform === 'win32' ? '\x1B[2J\x1B[0f' : '\x1B[2J\x1B[3J\x1B[H');
 }
 
 module.exports = function server(cmd) {

packages/scripts/src/utils/index.js

@@ -53,3 +53,11 @@ exports.getDocsConfig = () => {
   }
   return yaml.safeLoad(fs.readFileSync(paths.docsConfig));
 };
+
+exports.getSearchContent = () => {
+  if (!fs.existsSync(paths.searchFilePath)) {
+    console.log('there is no find .cache/search.js in root dir!\n');
+    return null;
+  }
+  return fs.readFileSync(paths.searchFilePath);
+};

packages/scripts/src/utils/initCache.js

@@ -1,53 +1,105 @@
-const DirectoryTree = require('directory-tree-md');
 const write = require('write');
 const path = require('path');
 const fs = require('fs');
+const DirectoryTree = require('../conf/node-directory-tree');
 const paths = require('../conf/path');
-const { ifInGitIgnore } = require('./index');
+const { ifInGitIgnore, getDocsConfig } = require('./index');
 
 function restRuctureMarkdown(items, arr = []) {
   items.forEach((item) => {
     if (item.type === 'directory') {
       restRuctureMarkdown(item.children, arr);
     } else if (/\.md$/.test(item.path)) {
-      // console.log('item.path', item.path);
       arr.push(item.path);
     }
   });
   return arr;
 }
 
 module.exports = function (program, cb) {
-  const treeData = program.markdownPaths.map((path) => {
-    return DirectoryTree(path, {
+  const treeData = program.markdownPaths.map((markdownPath) => {
+    return DirectoryTree(markdownPath, {
       mdconf: true, // 存在 Markdown 设置
       extensions: /\.md/,
     });
   });
-  // 缓存 Markdown 存储 Markdown
-  // Markdown 文件命名规则 `文件夹__文件夹__Markdown名.md`
+  // cache Markdown, Markdown file name rule: `folder__folder__Markdown name.md`
   const flatTreeData = restRuctureMarkdown(treeData);
+  // to collect search data
+  const searchData = [];
+  const docsConfig = getDocsConfig();
+  const useSearchPlugin = docsConfig.search && docsConfig.host;
   // eslint-disable-next-line no-plusplus
   for (let i = 0; i < flatTreeData.length; i++) {
     const mdfile = flatTreeData[i];
-    const mdfilePathInProject = mdfile.replace(
+    const mdfilePath = mdfile.replace(
       process.cwd() + path.sep,
       ''
     );
     // generate file cache only it isn't in .gitignore
-    if (!ifInGitIgnore(mdfilePathInProject)) {
-      const underlineFileName = mdfilePathInProject.split(path.sep).join('___');
-      let writeMarkdownPath = path.resolve(
+    if (!ifInGitIgnore(mdfilePath)) {
+      const underlineFileName = mdfilePath.split(path.sep).join('___');
+      const writeMarkdownPath = path.resolve(
         process.cwd(),
         paths.cacheDirPath,
-        'md'
+        'md',
+        underlineFileName
       );
-      writeMarkdownPath = path.resolve(writeMarkdownPath, underlineFileName);
       if (fs.existsSync(mdfile)) {
         const content = fs.readFileSync(mdfile);
         write.sync(writeMarkdownPath, content);
       }
     }
   }
+
+  function dfsMap(data) {
+    // eslint-disable-next-line no-plusplus
+    for (let i = 0; i < data.length; i++) {
+      if (data[i].children) {
+        dfsMap(data[i].children);
+      } else {
+        const searchMapKeys = docsConfig.search_map ? Object.keys(docsConfig.search_map) : [];
+        // eslint-disable-next-line no-plusplus
+        for (let x = 0; x < searchMapKeys.length; x++) {
+          if (data[i].relative) {
+            const searchMapIndex = data[i].relative.indexOf(searchMapKeys[x]);
+            if (searchMapIndex !== -1 && typeof searchMapIndex === 'number') {
+              const effectedPath = data[i].relative.replace(
+                searchMapKeys[x],
+                docsConfig.search_map[searchMapKeys[x]]
+              );
+              searchData.push({
+                title: data[i].name,
+                url: `${effectedPath.replace(/.md/g, '')}`,
+                content: data[i].content,
+              });
+              break;
+            }
+          }
+        }
+      }
+    }
+  }
+  if (useSearchPlugin) {
+    // README
+    searchData.push({
+      title: 'README',
+      url: 'README',
+      content: treeData[0].content,
+    });
+    // map treeData to generate search data source
+    dfsMap(treeData);
+    const writeSearchPath = path.resolve(
+      process.cwd(),
+      paths.cacheDirPath,
+      'search.js'
+    );
+    write.sync(
+      writeSearchPath,
+      `${JSON.stringify(
+        searchData
+      )}`
+    );
+  }
   cb();
 };

packages/templates/default/_config.yml

@@ -17,5 +17,11 @@ branch: master            # the default value of branch is master
 deploy_branch: gh-pages   # which branch to deploy.(default: gh-pages)
 # publish:                # if you want upload to gitlab or other git platform, you can set full git url in it
 
+# use search plugin: provide ability for searching site globally in the site.
+# default value: true
+search: true
+# host: ''                # the url host to search
+# search_map: {}          # search_map is connected to menu props
+
 # Available values: en | zh-cn
 language: en

packages/theme/component/Header/index.js

@@ -3,6 +3,8 @@ import React from 'react';
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 import Switch from 'react-switch';
+import { isMobile } from '../../utils';
+import Search from '../Search';
 import styles from './index.less';
 
 const { useState } = React;
@@ -21,12 +23,17 @@ const Header = ({
   return (
     <div className={classNames(styles.header, className)}>
       <div className={styles.wrapper}>
-        <Link to="/" replace>
+        <Link to="/" replace className={styles.titleLink}>
           <div className={styles.logo}>
             {logo && <img alt="logo" src={logo} />}
-            <span>{(DOCSCONFIG && DOCSCONFIG.title) || 'Create React Doc'}</span>
+            {!isMobile && (
+              <span>
+                {(DOCSCONFIG && DOCSCONFIG.title) || 'Create React Doc'}
+              </span>
+            )}
           </div>
         </Link>
+        {DOCSCONFIG && DOCSCONFIG.search ? <Search className={styles.search} /> : null}
       </div>
       <div className={styles.rightArea}>
         <Switch