feat(site) Parse Tips custom markdown

Author: montogeek

DISCUSSION.md

@@ -8,7 +8,7 @@ easier to discuss...
 Here's the TLDR; in terms of actual blocking TODOs if we wanted to stick with
 this branch:
 
-- [ ] Finish porting the markdown process to `remark` (may require new plugins)
+- [ ] Finish porting the markdown process to `remark` (may require new plugins) (Fernando)
 - [ ] Rethink external population process
 - [x] Extract anchors into `_content.json` via `DirectoryTreePlugin` (Fernando)
 - [ ] Finish re-incorporating mobile sidebar

src/components/Markdown/Markdown.scss

@@ -78,6 +78,7 @@
     border-left: 4px solid #dddddd;
     padding:0.75em 1em;
     color:getColor(dove-grey);
+    font-style: italic;
 
     > :first-child { margin-top: 0; }
     > :last-child { margin-bottom: 0; }

tip.js

@@ -0,0 +1,76 @@
+// var unified = require('unified');
+// var parse = require('remark-parse');
+// var html = require('remark-html');
+var visit = require('unist-util-visit');
+
+// const md = `T> This is a tip.
+
+// The [configuration](/configuration) properties should be ordered alphabetically as well:
+
+// W> This is a warning.
+
+// ?> This is a todo.`;
+
+// const header = `## Header`;
+
+// const md = "T> The `output` property has [many more configurable features](/configuration/output) and if you like to know more about the concepts behind the `output` property, you can [read more in the concepts section](/concepts/output)."
+
+const classMap = {
+  'T>': 'tip',
+  'W>': 'warning',
+  '?>': 'todo'
+};
+
+// unified()
+//   .use(parse)
+//   .use(tip)
+//   .use(html)
+//   .process(md, function(err, file) {
+//     console.log({ err })
+//     console.log(file);
+//   });
+
+module.exports = tip;
+
+function tip(options) {
+  return transformer;
+}
+
+function transformer(tree, file) {
+  visit(tree, 'paragraph', visitor);
+
+  function visitor(node) {
+    const { children } = node;
+    const textNode = children[0].value;
+
+    if (!textNode) return;
+
+    if (
+      textNode.startsWith('T>') ||
+      textNode.startsWith('W>') ||
+      textNode.startsWith('?>')
+    ) {
+      let className = classMap[textNode.substr(0, 2)];
+
+      node.type = 'blockquote';
+      node.data = {
+        hName: 'blockquote',
+        hProperties: {
+          className
+        }
+      };
+      node.children = [
+        {
+          type: 'paragraph',
+          children: [
+            {
+              ...children[0],
+              value: children[0].value.slice(3)
+            },
+            ...children.slice(1)
+          ]
+        }
+      ];
+    }
+  }
+}

webpack.common.js

@@ -37,14 +37,15 @@ module.exports = (env = {}) => ({
           options: {
             plugins: [
               // TODO: Add necessary remark plugins
+              require('./tip'),
               require('remark-slug'),
               [
                 require('remark-autolink-headings'),
                 {
                   behaviour: 'append'
                 }
               ],
-              require('remark-html')
+              require('remark-html'),
               require('remark-mermaid')
             ]
           }