feat(doc): make doc sync with readme.md

Create a script to convert and inject README.md to documentation. Replace Emoji in this page with image from github. Because emoji in Ubuntu is ridiculously ugly...
2025-02-17 13:20:52 +08:00 · 2019-07-10 14:08:16 +08:00 · 2019-07-10 14:08:16 +08:00 · d6dc5eea7a
commit d6dc5eea7a
parent 85e90d5b10
6 changed files with 1245 additions and 23 deletions
--- a/README.md
+++ b/README.md
@ -1,7 +1,9 @@
 # naive-ui
 TuSimple Vue-Based Frontend Component Library
 ## Documentation
-http://***REMOVED***/#/start
+[http://***REMOVED***/#/start](http://***REMOVED***/#/start)
+## Repository
+[https://***REMOVED***/naive-ui/tree/develop](https://***REMOVED***/naive-ui/tree/develop)
 ## Develop Guidelines
 ### Git Commit Message Style
 You **Must** follow [Angular Commit Format](https://gist.github.com/brianclements/841ea7bffdb01346392c).
@ -45,8 +47,9 @@ Vue.use(naiveUi)
 ...
 ```
 ## Component Develop Status
+
 |Component|Unit Test|
-|-|-|
+|--|:--:|
 |Alert|❌|
 |Button|🆗|
 |Checkbox|🆗|
--- a/demo/components/startPage.vue
+++ b/demo/components/startPage.vue
--- a/demo/readme.js
+++ b/demo/readme.js
@ -0,0 +1,125 @@
+export default `<div class="markdown-body"><h1 id="naiveui">naive-ui</h1>
+<p>TuSimple Vue-Based Frontend Component Library</p>
+<h2 id="documentation">Documentation</h2>
+<p><a href="http://***REMOVED***/#/start">http://***REMOVED***/#/start</a></p>
+<h2 id="repository">Repository</h2>
+<p><a href="https://***REMOVED***/naive-ui/tree/develop">https://***REMOVED***/naive-ui/tree/develop</a></p>
+<h2 id="developguidelines">Develop Guidelines</h2>
+<h3 id="gitcommitmessagestyle">Git Commit Message Style</h3>
+<p>You <strong>Must</strong> follow <a href="https://gist.github.com/brianclements/841ea7bffdb01346392c">Angular Commit Format</a>.</p>
+<p>If you want see some example, see <a href="https://github.com/angular/angular/commits/master">Angular Commits on Github</a>.</p>
+<h3 id="codestyles">Code Styles</h3>
+<h4 id="javascriptstyle">Javascript Style</h4>
+<p>You <strong>Must</strong> follow <a href="https://standardjs.com/">Standard JS</a>.</p>
+<h4 id="scssstyle">SCSS Style</h4>
+<p>Run <code>npm run lint-style</code> to echeck styles.</p>
+<h4 id="checkboth">Check Both</h4>
+<p>Run <code>npm run lint</code>
+You <strong>MUST</strong> fix all lint warnings and errors before you push your branch.</p>
+<h3 id="unittest">Unit test</h3>
+<p>If you create a component, you <strong>MUST</strong> add unit test for it.</p>
+<p>Run <code>npm run test</code> to test all components.
+Run <code>npm run test-cov</code> to test all components and see detailed test coverage report.</p>
+<h2 id="wanttoseehowcomponentworks">Want to see how component works</h2>
+<ol>
+<li>Run <code>npm run build</code></li>
+<li>Open <code>http://localhost:8086/</code> in browser.</li>
+</ol>
+<h2 id="wanttoaddyourowncomponent">Want to add your own component</h2>
+<p>Explore by your self or ask <code>lecong.zhang@tusimple.ai</code></p>
+<h2 id="publishanewversion">Publish a new version</h2>
+<ol>
+<li>You <strong>MUST</strong> change your version according to <a href="https://semver.org/">semver</a></li>
+<li><code>npm run release</code></li>
+<li>You <strong>MAY</strong> publish documentation by running <code>npm run release-doc</code></li>
+</ol>
+<h2 id="installationusage">Installation &amp; Usage</h2>
+<p>First install it.</p>
+<pre><code>npm install --save-dev naive-ui
+</code></pre>
+<p>Then add the following lines in you entry point js file.</p>
+<pre><code>...
+import naiveUi from 'naive-ui'
+import 'naive-ui/dist/lib/index.css
+
+Vue.use(naiveUi)
+...
+</code></pre>
+<h2 id="componentdevelopstatus">Component Develop Status</h2>
+<table>
+<thead>
+<tr>
+<th>Component</th>
+<th style="text-align:center;">Unit Test</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Alert</td>
+<td style="text-align:center;">❌</td>
+</tr>
+<tr>
+<td>Button</td>
+<td style="text-align:center;">🆗</td>
+</tr>
+<tr>
+<td>Checkbox</td>
+<td style="text-align:center;">🆗</td>
+</tr>
+<tr>
+<td>DatePicker</td>
+<td style="text-align:center;">❌</td>
+</tr>
+<tr>
+<td>GradientText</td>
+<td style="text-align:center;">🆗</td>
+</tr>
+<tr>
+<td>Icon</td>
+<td style="text-align:center;">🆗</td>
+</tr>
+<tr>
+<td>Input</td>
+<td style="text-align:center;">🆗</td>
+</tr>
+<tr>
+<td>Message</td>
+<td style="text-align:center;">❌</td>
+</tr>
+<tr>
+<td>Modal</td>
+<td style="text-align:center;">❌</td>
+</tr>
+<tr>
+<td>Notification</td>
+<td style="text-align:center;">❌</td>
+</tr>
+<tr>
+<td>Pagination</td>
+<td style="text-align:center;">❌</td>
+</tr>
+<tr>
+<td>Popup</td>
+<td style="text-align:center;">❌</td>
+</tr>
+<tr>
+<td>Select</td>
+<td style="text-align:center;">🆗</td>
+</tr>
+<tr>
+<td>Switch</td>
+<td style="text-align:center;">❌</td>
+</tr>
+<tr>
+<td>Tooltip</td>
+<td style="text-align:center;">❌</td>
+</tr>
+</tbody>
+</table>
+<h2 id="todo">Todo</h2>
+<ol>
+<li>Z-index management on <code>Select</code> &amp; <code>Tooltip</code> &amp; <code>Modal</code>(Low Priority)</li>
+<li>Full featured table component(Medium Priority)</li>
+<li>Form component(Medium Priority)</li>
+<li>Complete unit test for all existing components(High Priority)</li>
+</ol></div>`
--- a/demo/utils.js
+++ b/demo/utils.js
@ -0,0 +1,134 @@
+/* eslint-disable */
+import emojiRegex from 'emoji-regex';
+const regex = emojiRegex();
+const emojiUnicode = require("emoji-unicode")
+/**
+ *
+ * Here's a thing that will look through all the text nodes of a document, and
+ * upon encountering an emoji codepoint, will replace it with an image.
+ * For now, those images are pulled from GitHub, which isn't very nice, so I
+ * need to find a more suitable host.
+ *
+ * Much of this code was gleaned from staring at the minified GitHub JS.
+ *
+ * Copyright (c) 2013 Mark Wunsch. Licensed under the MIT License.
+ * @markwunsch
+ *
+ */
+export const replaceEmojiWithImages = function (root) {
+
+  var REGIONAL_INDICATOR_A = parseInt("1f1e6", 16),
+      REGIONAL_INDICATOR_Z = parseInt("1f1ff", 16),
+      IMAGE_HOST = "github.githubassets.com",
+      IMAGE_PATH = "/images/icons/emoji/unicode/",
+      IMAGE_EXT = ".png";
+
+  // String.fromCodePoint is super helpful
+  if (!String.fromCodePoint) {
+    /*!
+     * ES6 Unicode Shims 0.1
+     * (c) 2012 Steven Levithan <http://slevithan.com/>
+     * MIT License
+     **/
+    String.fromCodePoint = function fromCodePoint () {
+      var chars = [], point, offset, units, i;
+      for (i = 0; i < arguments.length; ++i) {
+        point = arguments[i];
+        offset = point - 0x10000;
+        units = point > 0xFFFF ? [0xD800 + (offset >> 10), 0xDC00 + (offset & 0x3FF)] : [point];
+        chars.push(String.fromCharCode.apply(null, units));
+      }
+      return chars.join("");
+    }
+  }
+
+  /**
+   * Create a treewalker to walk an element and return an Array of Text Nodes.
+   * This function is (hopefully) smart enough to exclude unwanted text nodes
+   * like whitespace and script tags.
+   * https://gist.github.com/mwunsch/4693383
+   */
+  function getLegitTextNodes(element) {
+    if (!document.createTreeWalker) return [];
+
+    var blacklist = ['SCRIPT', 'OPTION', 'TEXTAREA'],
+        textNodes = [],
+        walker = document.createTreeWalker(
+            element,
+            NodeFilter.SHOW_TEXT,
+            function excludeBlacklistedNodes(node) {
+              if (blacklist.indexOf(node.parentElement.nodeName.toUpperCase()) >= 0) return NodeFilter.FILTER_REJECT;
+              if (String.prototype.trim && !node.nodeValue.trim().length) return NodeFilter.FILTER_SKIP;
+              return NodeFilter.FILTER_ACCEPT;
+            },
+            false
+        );
+
+    while(walker.nextNode()) textNodes.push(walker.currentNode);
+
+    return textNodes;
+  }
+
+  /**
+   * For a UTF-16 (JavaScript's preferred encoding...kinda) surrogate pair,
+   * return a Unicode codepoint.
+   */
+  function surrogatePairToCodepoint(lead, trail) {
+    return (lead - 0xD800) * 0x400 + (trail - 0xDC00) + 0x10000;
+  }
+
+  /**
+   * Get an Image element for an emoji codepoint (in hex).
+   */
+  function getImageForCodepoint(hex) {
+    var img = document.createElement('IMG');
+
+    img.style.width = "1.4em";
+    img.style.verticalAlign = "top";
+    img.src = "//" + IMAGE_HOST + IMAGE_PATH + hex + IMAGE_EXT;
+
+    return img;
+  }
+
+  /**
+   * Convert an HTML string into a DocumentFragment, for insertion into the dom.
+   */
+  function fragmentForString(htmlString) {
+    var tmpDoc = document.createElement('DIV'),
+        fragment = document.createDocumentFragment(),
+        childNode;
+
+    tmpDoc.innerHTML = htmlString;
+
+    while(childNode = tmpDoc.firstChild) {
+      fragment.appendChild(childNode);
+    }
+    return fragment;
+  }
+
+  /**
+   * Iterate through a list of nodes, find emoji, replace with images.
+   */
+  function emojiReplace(nodes) {
+    var PATTERN = regex;
+
+    nodes.forEach(function (node) {
+      var replacement,
+          value = node.nodeValue,
+          matches = value.match(PATTERN);
+
+      if (matches) {
+        replacement = value.replace(PATTERN, function (match) {
+          var codepoint = emojiUnicode(matches[0]),
+              img = getImageForCodepoint(codepoint);
+          return img.outerHTML;
+        });
+        // console.log(matches)
+        node.parentNode.replaceChild(fragmentForString(replacement), node);
+      }
+    });
+  }
+
+  // Call everything we've defined
+  emojiReplace(getLegitTextNodes(root));
+}
--- a/doc/injectReadme.js
+++ b/doc/injectReadme.js
@ -0,0 +1,12 @@
+const path = require('path')
+const fs = require('fs')
+
+const showdown = require('showdown')
+const converter = new showdown.Converter({
+  tables: true
+})
+const text = fs.readFileSync(path.resolve(__dirname, '..', 'README.md')).toString()
+const html = converter.makeHtml(text)
+
+const htmlPath = path.resolve(__dirname, '../demo/readme.js')
+fs.writeFileSync(htmlPath, 'export default `<div class="markdown-body">' + html + '</div>`\n')
--- a/package.json
+++ b/package.json
@ -14,7 +14,7 @@
    "test": "cross-env NODE_ENV=development BABEL_ENV=test karma start test/unit/karma.conf.js",
    "test-cov": "cross-env NODE_ENV=development BABEL_ENV=test karma start test/unit/karma.conf.js && http-server test/unit/coverage",
    "test-release": "cross-env NODE_ENV=production webpack-dev-server --config build/webpack.release.js",
-    "release-doc": "cross-env NODE_ENV=development && rm -rf doc/dist && node doc/changeDemoVersion.js && webpack --config build/webpack.doc.js && sudo bash doc/deploy-doc.sh"
+    "release-doc": "cross-env NODE_ENV=development && rm -rf doc/dist && node doc/changeDemoVersion.js && node doc/injectReadme.js && webpack --config build/webpack.doc.js && sudo bash doc/deploy-doc.sh"
  },
  "author": "lecong.zhang",
  "license": "ISC",
@ -38,6 +38,8 @@
    "copy-webpack-plugin": "^5.0.3",
    "cross-env": "^5.2.0",
    "css-loader": "^2.1.1",
+    "emoji-regex": "^8.0.0",
+    "emoji-unicode": "^1.0.10",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.2.2",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
@ -63,6 +65,7 @@
    "prettier-eslint": "^9.0.0",
    "progress-bar-webpack-plugin": "^1.12.1",
    "regenerator-runtime": "^0.13.2",
+    "showdown": "^1.9.0",
    "sinon": "^7.3.2",
    "style-loader": "^0.23.1",
    "stylelint": "^10.1.0",