Rebuild Custom code blocks languages

js-with-links.js

@@ -0,0 +1,78 @@
+// const visit = require('unist-util-visit');
+// var remark = require('remark');
+// var parse = require('remark-parse');
+// var html = require('remark-html');
+// var stringify = require('remark-stringify');
+// var fs = require('fs');
+
+// var file = fs.readFileSync('./src/content/api/node.md', { encoding: 'utf8' });
+
+// remark()
+//   .use(parse)
+//   .use(jsWithLinks)
+//   .use(html)
+//   .process(file, function(err, file) {
+//     if (file) {
+//       console.log('----------------');
+//       console.log(file.contents);
+//       console.log('----------------');
+//     }
+//   });
+
+// module.exports = jsWithLinks;
+
+// function jsWithLinks(options) {
+//   return function transformer(tree, file) {
+//     visit(tree, 'code', visitor);
+
+//     function visitor(node) {
+//       console.log(node)
+//       remark()
+//         .use(function() {
+//           return function t(tr) {
+//             // tr.children.forEach(ch => console.log(ch))
+//           };
+//         })
+//         .use(html)
+//         .process(node.value, (err, file) => {
+//           // console.log('file')
+//           // console.log(file)
+//           // console.log(node.value)
+//           // return file.contents;
+//           node.value = file.toString()
+//         });
+
+//         // console.log(node)
+//     }
+
+//     // console.log('t',transformed);
+//   };
+// }
+
+// function logType(tree) {
+//   console.log(JSON.stringify(tree, null, 2));
+// }
+
+module.exports = jslinks;
+
+jslinks.displayName = 'jslinks';
+jslinks.aliases = [];
+
+function jslinks(Prism) {
+  Prism.languages.jslinks = Prism.languages.extend('javascript', {});
+
+  // Prism.hooks.add('wrap', function(env) {
+    // if (env.type === 'comment') {
+    //   env.content = env.content.value.replace(/\[([^[\]]+?)\]\((.+?)\)/g, match => {
+    //     match = /\[([^[\]]+?)\]\((.+?)\)/.exec(match);
+    //     return `\x3Ca class="code-link" href="${match[2]}"\x3E${match[1]}\x3C/a\x3E`;
+    //   });
+
+      // console.log(code)
+
+      // env.content.value = env.content.value.replace(/&#x3C;/g, '<')
+
+      // env.content.value = code;
+    // }
+  // });
+}

package.json

@@ -48,19 +48,6 @@
     "serve": "npm run build && sirv start ./dist --port 4000",
     "deploy": "gh-pages -d dist"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.{js,jsx,md}": [
-      "npm run lint:js"
-    ],
-    "*.md": [
-      "npm run lint:markdown"
-    ]
-  },
   "devDependencies": {
     "@octokit/rest": "^15.9.4",
     "alex": "^5.1.0",
@@ -87,6 +74,7 @@
     "fontgen-loader": "git://github.com/EugeneHlushko/fontgen-loader.git#a26a73843900ca4b518853952b1fc3c816103512",
     "front-matter": "^2.3.0",
     "gh-pages": "^1.0.0",
+    "github": "^10.0.0",
     "html-webpack-plugin": "^2.30.1",
     "html-webpack-template": "^6.1.0",
     "http-server": "^0.10.0",

prism-links.js

@@ -0,0 +1,110 @@
+const refractor = require('refractor/core.js');
+const visit = require('unist-util-visit');
+const languages = require('prism-languages');
+
+var remark = require('remark');
+var parse = require('remark-parse');
+var htmlRemark = require('remark-html');
+
+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'));
+refractor.register(require('./js-with-links.js'));
+
+// var fs = require('fs');
+
+// var file = fs.readFileSync('./src/content/api/node.md', { encoding: 'utf8' });
+
+// remark()
+//   .use(parse)
+//   .use(attacher)
+//   .use(htmlRemark)
+//   .process(file, function(err, file) {
+//     if (err) throw err;
+//     if (file) {
+//       console.log('************************************');
+//       console.log(file.contents);
+//       console.log('----------------');
+//       fs.writeFileSync('./index.html', file.contents);
+//     }
+//   });
+
+function attacher({ include, exclude } = {}) {
+  return function transformer(tree, file) {
+    visit(tree, 'code', visitor);
+
+    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);
+
+        for (let index = 0; index < data.hChildren.length; index++) {
+          const element = data.hChildren[index];
+
+          if (element.properties && element.properties.className.includes('comment')) {
+            const { value } = element.children[0];
+
+            let match = /\[([^[\]]+?)\]\((.+?)\)/.exec(value);
+
+            if (match !== null) {
+              const [, text, url] = match;
+
+              element.children = [
+                {
+                  type: 'text',
+                  value: '//'
+                },
+                {
+                  type: 'text',
+                  value: ' '
+                },
+                {
+                  type: 'element',
+                  tagName: 'a',
+                  properties: {
+                    href: url,
+                    className: ['code-link']
+                  },
+                  children: [
+                    {
+                      type: 'text',
+                      value: text
+                    }
+                  ]
+                }
+              ];
+            }
+          }
+        }
+
+        node.children = [node.data.hChildren];
+      } 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}`];
+    }
+  };
+}
+
+module.exports = attacher;

src/content/api/cli.md

@@ -39,7 +39,7 @@ See [configuration](/configuration) for the options in the configuration file.
 
 ## Usage without config file
 
-```sh
+```bash
 webpack <entry> [<entry>] -o <output>
 ```
 

src/content/api/node.md

@@ -37,7 +37,7 @@ import webpack from 'webpack';
 
 The imported `webpack` function is fed a webpack [Configuration Object](/configuration/) and runs the webpack compiler if a callback function is provided:
 
-``` js-with-links
+``` jslinks
 const webpack = require("webpack");
 
 webpack({

src/content/guides/dependency-management.md

@@ -27,7 +27,7 @@ require('./template/' + name + '.ejs');
 
 webpack parses the `require()` call and extracts some information:
 
-```code
+```
 Directory: ./template
 Regular expression: /^.*\.ejs$/
 ```

src/content/plugins/source-map-dev-tool-plugin.md

@@ -87,7 +87,7 @@ new webpack.SourceMapDevToolPlugin({
 
 And for cases when source maps are stored in the upper level directory:
 
-```code
+```
 project
 |- dist
   |- public
@@ -108,6 +108,6 @@ new webpack.SourceMapDevToolPlugin({
 
 Will produce the following URL:
 
-```code
+```
 https://example.com/project/sourcemaps/bundle-[hash].js.map
 ```

src/utilities/process-readme.js

@@ -50,5 +50,8 @@ module.exports = function processREADME(body, options = {}) {
     .replace(/<h2[^>]*>/g, '## ')
     .replace(/<\/h2>/g, '')
     // Drop any comments
-    .replace(/<!--[\s\S]*?-->/g, '');
+    .replace(/<!--[\s\S]*?-->/g, '')
+    // Replace code
+    .replace(/```console/g, '```bash')
+    .replace(/```sh/, '```bash');
 };

webpack.common.js

@@ -28,7 +28,8 @@ module.exports = (env = {}) => ({
             plugins: [
               require('remark-slug'),
               require('remark-mermaid'),
-              require('remark-refractor'),
+              require('./prism-links'),
+              // require('remark-refractor'),
               [
                 require('remark-custom-blockquotes'),
                 {