feat(site) Add Prism color theme

Author: montogeek

DISCUSSION.md

@@ -19,6 +19,9 @@ this branch:
 - [x] Add custom route for landing page (greg)
 - [x] Fixed sidebar (Fernando)
 - [x] Add anchor icons (Fernando)
+- [x] Add color theme (Fernando)
+- [ ] Create remark plugins for custom languages: `js-with-link`, `js-with-link-with-details` (Fernando)
+- [ ] Normalize all code tags: javascript -> js, sh|shell -> bash (Fernando)
 
 Some of these should be fairly quick adds now that the site works. The two
 toughest ones are most likely the markdown parsing and external population. The

highlight.js

@@ -0,0 +1,50 @@
+const refractor = require('refractor/core.js');
+const visit = require('unist-util-visit');
+const languages = require('prism-languages');
+
+refractor.register(require('refractor/lang/bash.js'));
+refractor.register(require('refractor/lang/diff.js'));
+refractor.register(require('refractor/lang/yaml.js'));
+refractor.register(require('refractor/lang/json.js'));
+refractor.register(require('refractor/lang/typescript.js'));
+refractor.register(require('refractor/lang/nginx.js'));
+refractor.register(require('refractor/lang/ruby.js'));
+
+module.exports = function attacher({ include, exclude } = {}) {
+  function visitor(node) {
+    const { lang } = node;
+
+    if (
+      !lang ||
+      (include && !~include.indexOf(lang)) ||
+      (exclude && ~exclude.indexOf(lang))
+    ) {
+      return;
+    }
+
+    let { data } = node;
+
+    if (!data) {
+      node.data = data = {};
+    }
+
+    try {
+      data.hChildren = refractor.highlight(node.value, lang);
+    } catch (e) {
+      if (!languages[lang]) {
+        console.warn('Prism does not support this language: ', lang);
+      } else {
+        console.warn('Prism failed to highlight: ', e);
+      }
+    }
+
+    data.hProperties = data.hProperties || {};
+    data.hProperties.className = [
+      'hljs',
+      ...(data.hProperties.className || []),
+      `language-${lang}`
+    ];
+  }
+
+  return ast => visit(ast, 'code', visitor);
+};

package.json

@@ -84,6 +84,7 @@
     "prism-languages": "^0.3.3",
     "prismjs": "^1.9.0",
     "raw-loader": "^0.5.1",
+    "refractor": "2.3.0",
     "remark-autolink-headings": "^5.0.0",
     "remark-loader": "^0.3.0",
     "remark-mermaid": "^0.2.0",

src/content/api/node.md

@@ -266,7 +266,7 @@ webpack({
 
 By default, webpack reads files and writes files to disk using a normal file system. However, it is possible to change the input or output behavior using a different kind of file system (memory, webDAV, etc). To accomplish this, one can change the `inputFileSystem` or `outputFileSystem`. For example, you can replace the default `outputFileSystem` with [`memory-fs`](https://github.com/webpack/memory-fs) to write files to memory instead of to disk:
 
-``` js
+```js
 const MemoryFS = require("memory-fs");
 const webpack = require("webpack");
 

src/content/contribute/release-process.md

@@ -16,7 +16,7 @@ When merging pull requests into the `master` branch, select the _Create Merge Co
 
 ## Releasing
 
-```sh
+```bash
 npm version patch && git push --follow-tags && npm publish
 npm version minor && git push --follow-tags && npm publish
 npm version major && git push --follow-tags && npm publish

src/content/contribute/writing-a-loader.md

@@ -17,7 +17,7 @@ To test a single loader, you can simply use `path` to `resolve` a local file wit
 
 __webpack.config.js__
 
-``` js
+```js
 {
   test: /\.js$/
   use: [
@@ -33,7 +33,7 @@ To test multiple, you can utilize the `resolveLoader.modules` configuration to u
 
 __webpack.config.js__
 
-``` js
+```js
 resolveLoader: {
   modules: [
     'node_modules',
@@ -66,7 +66,7 @@ So, in the following example, the `foo-loader` would be passed the raw resource
 
 __webpack.config.js__
 
-``` js
+```js
 {
   test: /\.js/,
   use: [
@@ -122,7 +122,7 @@ Take advantage of the [`loader-utils`](https://github.com/webpack/loader-utils)
 
 __loader.js__
 
-``` js
+```js
 import { getOptions } from 'loader-utils';
 import validateOptions from 'schema-utils';
 
@@ -152,7 +152,7 @@ If a loader uses external resources (i.e. by reading from filesystem), they __mu
 
 __loader.js__
 
-``` js
+```js
 import path from 'path';
 
 export default function(source) {
@@ -197,7 +197,7 @@ If the loader you're working on is a simple wrapper around another package, then
 
 For instance, the `sass-loader` [specifies `node-sass`](https://github.com/webpack-contrib/sass-loader/blob/master/package.json) as peer dependency like so:
 
-``` js
+```js
 "peerDependencies": {
   "node-sass": "^4.0.0"
 }
@@ -208,13 +208,13 @@ For instance, the `sass-loader` [specifies `node-sass`](https://github.com/webpa
 
 So you've written a loader, followed the guidelines above, and have it set up to run locally. What's next? Let's go through a simple unit testing example to ensure our loader is working the way we expect. We'll be using the [Jest](https://facebook.github.io/jest/) framework to do this. We'll also install `babel-jest` and some presets that will allow us to use the `import` / `export` and `async` / `await`. Let's start by installing and saving these as a `devDependencies`:
 
-``` bash
+```bash
 npm install --save-dev jest babel-jest babel-preset-env
 ```
 
 __.babelrc__
 
-``` json
+```json
 {
   "presets": [[
     "env",
@@ -231,7 +231,7 @@ Our loader will process `.txt` files and simply replace any instance of `[name]`
 
 __src/loader.js__
 
-``` js
+```js
 import { getOptions } from 'loader-utils';
 
 export default function loader(source) {
@@ -247,19 +247,19 @@ We'll use this loader to process the following file:
 
 __test/example.txt__
 
-``` text
+```text
 Hey [name]!
 ```
 
 Pay close attention to this next step as we'll be using the [Node.js API](/api/node) and [`memory-fs`](https://github.com/webpack/memory-fs) to execute webpack. This lets us avoid emitting `output` to disk and will give us access to the `stats` data which we can use to grab our transformed module:
 
-``` bash
+```bash
 npm install --save-dev webpack memory-fs
 ```
 
 __test/compiler.js__
 
-``` js
+```js
 import path from 'path';
 import webpack from 'webpack';
 import memoryfs from 'memory-fs';
@@ -303,7 +303,7 @@ And now, finally, we can write our test and add an npm script to run it:
 
 __test/loader.test.js__
 
-``` js
+```js
 import compiler from './compiler.js';
 
 test('Inserts name and outputs JavaScript', async () => {
@@ -316,15 +316,15 @@ test('Inserts name and outputs JavaScript', async () => {
 
 __package.json__
 
-``` js
+```js
 "scripts": {
   "test": "jest"
 }
 ```
 
 With everything in place, we can run it and see if our new loader passes the test:
 
-``` bash
+```bash
  PASS  test/loader.test.js
   ✓ Inserts name and outputs JavaScript (229ms)
 

src/content/plugins/normal-module-replacement-plugin.md

@@ -79,7 +79,7 @@ console.log(config.title);
 
 And now you just get the right config imported depending on which target you're building for:
 
-``` shell
+```bash
 webpack --env.APP_TARGET VERSION_A
 => 'I am version A'
 

webpack.common.js

@@ -37,6 +37,7 @@ module.exports = (env = {}) => ({
           options: {
             plugins: [
               require('./tip'),
+              require('./highlight'),
               require('remark-slug'),
               [
                 require('remark-autolink-headings'),