From 6a0479c317eb01c65b7942cf0496c1eefb6b8a31 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Thu, 10 May 2018 23:47:05 -0400 Subject: [PATCH 1/3] chore(rebuild): start parsing anchors @montogeek started this work, I just rebased on the latest `rebuild` and cleaned things up slightly. I also renamed the misspelled enhancer utility. --- package.json | 5 +++ src/utilities/remark-anchors.js | 31 +++++++++++++++++++ ...uginEnhacer.js => tree-plugin-enhancer.js} | 3 +- webpack.common.js | 5 +-- 4 files changed, 41 insertions(+), 3 deletions(-) create mode 100644 src/utilities/remark-anchors.js rename src/utilities/{treePluginEnhacer.js => tree-plugin-enhancer.js} (86%) diff --git a/package.json b/package.json index 1a78360f57ed..2d1f6b6e7c51 100644 --- a/package.json +++ b/package.json @@ -84,6 +84,7 @@ "prismjs": "^1.9.0", "raw-loader": "^0.5.1", "redirect-webpack-plugin": "^0.1.1", + "remark": "^9.0.0", "remark-autolink-headings": "^5.0.0", "remark-loader": "^0.3.0", "remark-mermaid": "^0.2.0", @@ -116,7 +117,11 @@ "react-hot-loader": "^4.0.0-beta.12", "react-router": "^4.2.0", "react-router-dom": "^4.2.2", + "remark-parse": "^5.0.0", + "remark-slug": "^5.0.0", "tool-list": "^0.11.0", + "unified": "^6.1.6", + "unist-util-visit": "^1.3.0", "webpack.vote": "^0.1.2", "whatwg-fetch": "^2.0.3" } diff --git a/src/utilities/remark-anchors.js b/src/utilities/remark-anchors.js new file mode 100644 index 000000000000..4edd0f7302db --- /dev/null +++ b/src/utilities/remark-anchors.js @@ -0,0 +1,31 @@ +var remark = require('remark'); +var slug = require('remark-slug'); +var visit = require('unist-util-visit'); + +module.exports = function getAnchors(content) { + let anchors = []; + + remark() + .use(slug) + .use(pl) + .process(content, (err, file) => { + if (err) { + throw err; + } + }); + + function pl() { + return function transformer(ast) { + visit(ast, 'heading', visitor); + }; + + function visitor(node) { + anchors.push({ + title: node.children[0].value, + id: node.data.id + }); + } + } + + return anchors; +}; diff --git a/src/utilities/treePluginEnhacer.js b/src/utilities/tree-plugin-enhancer.js similarity index 86% rename from src/utilities/treePluginEnhacer.js rename to src/utilities/tree-plugin-enhancer.js index d67fc72d47c8..697f5784049d 100644 --- a/src/utilities/treePluginEnhacer.js +++ b/src/utilities/tree-plugin-enhancer.js @@ -1,5 +1,6 @@ const fs = require('fs'); const FrontMatter = require('front-matter'); +const RemarkAnchors = require('./remark-anchors'); module.exports = function(item, options) { item.url = item.path @@ -19,6 +20,6 @@ module.exports = function(item, options) { let { attributes } = FrontMatter(content); Object.assign(item, attributes); - item.anchors = []; // TODO: Add actual anchors + item.anchors = RemarkAnchors(content); } } diff --git a/webpack.common.js b/webpack.common.js index a1bf3263581e..6a1fb2a29c3f 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -5,7 +5,7 @@ const CleanPlugin = require('clean-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const DirectoryTreePlugin = require('directory-tree-webpack-plugin'); -const treePluginEnhacer = require('./src/utilities/treePluginEnhacer.js'); +const TreeEnhancer = require('./src/utilities/tree-plugin-enhancer.js'); module.exports = (env = {}) => ({ devtool: 'source-map', @@ -35,6 +35,7 @@ module.exports = (env = {}) => ({ options: { plugins: [ // TODO: Add necessary remark plugins + require('remark-slug'), require('remark-autolink-headings'), require('remark-mermaid') ] @@ -109,7 +110,7 @@ module.exports = (env = {}) => ({ dir: 'src/content', path: 'src/_content.json', extensions: /\.md/, - enhance: treePluginEnhacer, + enhance: TreeEnhancer, filter: item => item.name !== 'images', sort: (a, b) => { let group1 = (a.group || '').toLowerCase(); From 4a902524435daf39762bedd7ffb54de9aa9eb5a6 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Fri, 11 May 2018 00:35:03 -0400 Subject: [PATCH 2/3] refactor(rebuild): remove unused deps and create proper `remark` plugin --- package.json | 6 ++--- src/utilities/remark-anchors.js | 31 ------------------------- src/utilities/remark-extract-anchors.js | 27 +++++++++++++++++++++ src/utilities/tree-plugin-enhancer.js | 23 ++++++++++++++---- 4 files changed, 48 insertions(+), 39 deletions(-) delete mode 100644 src/utilities/remark-anchors.js create mode 100644 src/utilities/remark-extract-anchors.js diff --git a/package.json b/package.json index 2d1f6b6e7c51..4b1768905796 100644 --- a/package.json +++ b/package.json @@ -88,6 +88,7 @@ "remark-autolink-headings": "^5.0.0", "remark-loader": "^0.3.0", "remark-mermaid": "^0.2.0", + "remark-slug": "^5.0.0", "request-promise": "^4.2.2", "sass-loader": "^6.0.6", "sitemap-static": "^0.4.2", @@ -97,6 +98,7 @@ "tap-parser": "^6.0.1", "through2": "^2.0.3", "uglifyjs-webpack-plugin": "^1.1.6", + "unist-util-visit": "^1.3.0", "url-loader": "^0.5.9", "webpack": "^3.10.0", "webpack-dev-server": "^2.9.7", @@ -117,11 +119,7 @@ "react-hot-loader": "^4.0.0-beta.12", "react-router": "^4.2.0", "react-router-dom": "^4.2.2", - "remark-parse": "^5.0.0", - "remark-slug": "^5.0.0", "tool-list": "^0.11.0", - "unified": "^6.1.6", - "unist-util-visit": "^1.3.0", "webpack.vote": "^0.1.2", "whatwg-fetch": "^2.0.3" } diff --git a/src/utilities/remark-anchors.js b/src/utilities/remark-anchors.js deleted file mode 100644 index 4edd0f7302db..000000000000 --- a/src/utilities/remark-anchors.js +++ /dev/null @@ -1,31 +0,0 @@ -var remark = require('remark'); -var slug = require('remark-slug'); -var visit = require('unist-util-visit'); - -module.exports = function getAnchors(content) { - let anchors = []; - - remark() - .use(slug) - .use(pl) - .process(content, (err, file) => { - if (err) { - throw err; - } - }); - - function pl() { - return function transformer(ast) { - visit(ast, 'heading', visitor); - }; - - function visitor(node) { - anchors.push({ - title: node.children[0].value, - id: node.data.id - }); - } - } - - return anchors; -}; diff --git a/src/utilities/remark-extract-anchors.js b/src/utilities/remark-extract-anchors.js new file mode 100644 index 000000000000..f7e9098c3838 --- /dev/null +++ b/src/utilities/remark-extract-anchors.js @@ -0,0 +1,27 @@ +const visit = require('unist-util-visit'); + +/** + * A remark plugin to extract anchors markdown headers + * + * @param {object} options - ... + * @return {function} - ... + */ +module.exports = function extractAnchors(options = {}) { + let { anchors, levels } = options + + if ( !Array.isArray(anchors) ) { + throw new Error('Missing or malformed `anchors` in options.') + } + + return function transformer(ast) { + visit(ast, 'heading', visitor); + }; + + function visitor(node) { + // TODO: Default header `levels` and check it to filter the `push`ed anchors + options.anchors.push({ + title: node.children[0].value, + id: node.data.id + }); + } +} diff --git a/src/utilities/tree-plugin-enhancer.js b/src/utilities/tree-plugin-enhancer.js index 697f5784049d..1fae0143fc79 100644 --- a/src/utilities/tree-plugin-enhancer.js +++ b/src/utilities/tree-plugin-enhancer.js @@ -1,6 +1,10 @@ const fs = require('fs'); const FrontMatter = require('front-matter'); -const RemarkAnchors = require('./remark-anchors'); +const remark = require('remark'); +const slug = require('remark-slug'); + +// TODO: Extract these to separate packages +const ExtractAnchors = require('./remark-extract-anchors'); module.exports = function(item, options) { item.url = item.path @@ -10,16 +14,27 @@ module.exports = function(item, options) { .replace(/^$/, '/'); if (item.type === 'file') { + let anchors = []; + let content = fs.readFileSync(item.path, 'utf8'); + let { attributes } = FrontMatter(content); + // remove underscore from fetched files if (item.name[0] === '_') { item.name = item.name.replace('_', ''); item.url = item.url.replace('_', ''); } - let content = fs.readFileSync(item.path, 'utf8'); - let { attributes } = FrontMatter(content); + remark() + .use(slug) + .use(ExtractAnchors, { anchors }) + .process(content, (err, file) => { + if (err) { + throw err; + } + }); + + item.anchors = anchors; Object.assign(item, attributes); - item.anchors = RemarkAnchors(content); } } From 33bff8521449bcbdd2be4049997684eaf6fb020a Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Fri, 11 May 2018 00:36:08 -0400 Subject: [PATCH 3/3] chore(rebuild): remove unused `preact` deps --- package.json | 2 -- 1 file changed, 2 deletions(-) diff --git a/package.json b/package.json index 4b1768905796..c3a846fc3faf 100644 --- a/package.json +++ b/package.json @@ -109,8 +109,6 @@ "ajv": "^5.5.2", "docsearch.js": "^2.5.2", "gitter-sidecar": "^1.2.3", - "preact": "^8.2.7", - "preact-compat": "3.17.0", "prop-types": "^15.5.10", "react": "^16.2.0", "react-banner": "^1.0.0-rc.0",