Add plugins to wrap AST nodes and add span to checkbox text

TODO.md

@@ -16,7 +16,7 @@
   - [ ] Everything pushed to master -> marvin.digital
   - [ ] Everything pushed to development -> dev.marvin.digital
   - [ ] Everything pushed to by hand -> dev.marvin.digital
-- [ ] ~~replace React with [Preact][1]~~
+- [ ] ~~replace React with [Preact][1]~~ (does not work ATM)
 - [x] test react helmet async
 - [x] add "increase version" by script
 - [x] add bundle analyzer
@@ -37,7 +37,10 @@
 - [ ] check all pages with reduced transparency
 - [ ] add tests?!
 - [ ] move from bash script to [Nim][2]
+- [ ] check markdown for ["Vary sentence length"][3]
+- [ ] check markdown for [Readability][4]
 
-[1]:
-  https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-preact
+[1]: https://www.gatsbyjs.org/packages/gatsby-plugin-preact/
 [2]: https://nim-lang.org/docs/tut1.html
+[3]: https://github.com/wooorm/write-music
+[4]: https://wooorm.com/readability/

content/projects/__demo__/index.md

@@ -34,12 +34,16 @@ categories: [website]
 
 ## Text block
 
-Sleep in the bathroom sink allways wanting ⛱ food. Rub whiskers on :+1: bare
+<div class="container container--small hello">
+ <p>this is already HTML</p>
+</div>
+
+Sleep in the bathroom sink allways wantings ⛱ food. Rub whiskers on :+1: bare
 skin act innocent intently sniff hand intrigued by the shower, but hide from
 vacuum cleaner yet i see a bird i stare at it i meow at it i do a <b>wiggle come
-here, eat a plant, kill</b> a hand prance along on **_top of the garden
+here, eat a plant, kill</b> a hands prance along on **_top of the garden
 fence_**, annoy the neighbor's dog and make it bark. Throw down 😍 all the stuff
-in the kitchen white cat sleeps on a https://marvin.digital black shirt the cat
+in the kitchen white cat sleep on a https://marvin.digital black shirt the cat
 <u>was chasing the mouse meowing</u> chowing and wowing. I’m so hungry i’m so
 hungry but ew not for that try to hold own back foot <s>to clean it but foot
 reflexively</s> kicks you in face, go into a rage and bite own foot, hard decide
@@ -55,11 +59,11 @@ This site was built using [GitHub Pages](https://pages.github.com/). let me out,
 _let me-out, let me-aow, let meaow,_ meaow!. Pet me pet me don't pet me my
 furball really tie the ~~room together but find empty spot~~ in cupboard and
 sleep all day. Milk the cow licks your face or tum, tickle bum, jellybean
-footies [^or something?] curly toes. Curl into a furry donut.
+footies[^or something?] cudasrly toes. Curl into a furry donut.
 
 ## Lists
 
-- this´
+- this
 - is
 - a
 - complete
@@ -83,9 +87,9 @@ _Some normal text because the parser has problems here._
 
 ### Task list
 
-- [x] Finish my changes
+- [x] Checkbox list
 - [ ] Push my commits to GitHub
-- [ ] Open a pull request
+- [ ] One with **inner** html
 
 ## Tables
 

gatsby-config.js

@@ -62,7 +62,7 @@ module.exports = {
         tableOfContents: {
           maxDepth: 3,
         },
-        commonmark: false,
+        commonmark: true,
         footnotes: true,
         pedantic: true,
         gfm: true,
@@ -95,21 +95,22 @@ module.exports = {
               },
             },
           },
+          `remark-checkbox-spanner`,
           {
             resolve: `remark-custom-classes`,
             options: {
-              types: {
+              root: {
                 image: 'container',
                 heading: 'container container--small',
                 blockquote: 'container container--small',
-                // thematicBreak: 'container container--small',
+                thematicBreak: 'container container--small',
                 list: 'container container--small',
                 table: 'container container--small',
                 footnoteDefinition: 'container container--small',
                 paragraph: 'container container--small',
               },
-              tags: {
-                hr: 'container',
+              tag: {
+                h2: 'color--red',
               },
               remark: {
                 images: 'container',

package.json

@@ -77,7 +77,7 @@
   },
   "devDependencies": {
     "del-cli": "^3.0.0",
-    "eslint": "^6.5.0",
+    "eslint": "^6.5.1",
     "eslint-config-react-app": "^5.0.2",
     "lighthouse": "^5.4.0",
     "npm-run-all": "^4.1.5",

plugins/remark-checkbox-spanner/index.js

@@ -0,0 +1,14 @@
+const visit = require('unist-util-visit')
+
+module.exports = ({ markdownAST }, pluginOptions) => {
+  const isCheckBox = node =>
+    node.type === 'listItem' && typeof node.checked === 'boolean'
+
+  visit(markdownAST, isCheckBox, node => {
+    const paragraph = node.children[0].children
+    paragraph.unshift({ type: 'html', value: '<span>' })
+    paragraph.push({ type: 'html', value: '</span>' })
+  })
+
+  return markdownAST
+}

plugins/remark-checkbox-spanner/package.json

@@ -0,0 +1 @@
+{}

plugins/remark-custom-classes/index.js

@@ -1,7 +1,7 @@
-const fs = require('fs')
 const visit = require('unist-util-visit')
+const fs = require('fs')
 
-const tagTypes = {
+const typesAliasses = {
   heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
   paragraph: ['p'],
   image: ['img'],
@@ -20,7 +20,7 @@ const tagTypes = {
   tableRow: ['tr'],
 }
 
-const remarkTypes = {
+const remarkPluginOptions = {
   images: {
     type: 'html',
     value: 'gatsby-resp-image-figure',
@@ -31,121 +31,113 @@ const remarkTypes = {
   },
 }
 
-function getRandomInt(max) {
-  return Math.floor(Math.random() * Math.floor(max))
-}
-
 function getTypeByAlias(alias) {
-  return Object.keys(tagTypes).find(t => tagTypes[t].indexOf(alias) > -1)
+  return Object.keys(typesAliasses).find(
+    type => typesAliasses[type].indexOf(alias) > -1
+  )
 }
 
-module.exports = (component, pluginOptions) => {
-  const { markdownAST } = component
-  const { types, tags, remark } = pluginOptions
+module.exports = ({ markdownAST }, pluginOptions) => {
+  const rootClasses = pluginOptions.root
+  const tagClasses = pluginOptions.tag
+  const remarkClasses = pluginOptions.remark
 
   /**
    * Loop through the top level nodes in
    * root to prevent duplicated/nested
    * classes, e.g. for paragraphs.
    */
-  const children = markdownAST.children.map(node => {
-    /**
-     * Search for definite node types.
-     */
-    if (types) {
-      const typeNames = Object.keys(types)
-      typeNames.forEach(name => {
-        if (node.type === name) {
-          if (!node.data) node.data = {}
-          node.data.hProperties = { className: types[name] }
-        }
-      })
+  markdownAST.children.forEach((node, i) => {
+    if (
+      node.type === 'html' ||
+      (node.children && node.children[0].type === 'html')
+    ) {
+      // skip plugin generated and inline HTML
+      return
     }
 
     /**
-     * Search for node types by an alias (tag).
+     * Search for definite node root types.
      */
-    if (tags) {
-      const tagNames = Object.keys(tags)
-      tagNames.forEach(name => {
-        const tagType = getTypeByAlias(name) // e.g. `heading`
-        console.log(tagType)
-
-        if (node.type === tagType) {
-          if (!node.data) node.data = {}
-          switch (tagType) {
-            case 'heading':
-              const depth = Number(name[1])
-              if (node.depth === depth) {
-                node.data.hProperties = { className: tags[name] }
-              }
-              break
-            case 'thematicBreak':
-              console.log(node)
-              node = {
-                type: 'paragraph',
-                data: {
-                  hName: 'div',
-                  hProperties: { className: tags[name] },
-                },
-                position: node.position,
-                children: node,
-              }
-              delete node.children.position
-
-              break
-
-            default:
-              node.data.hProperties = { className: tags[name] }
-              break
+    if (rootClasses) {
+      const typeNames = Object.keys(rootClasses)
+      typeNames.forEach(name => {
+        if (node.type === name) {
+          node = {
+            type: 'div',
+            data: {
+              hProperties: {
+                className: rootClasses[name],
+              },
+            },
+            children: [node],
           }
         }
       })
     }
 
-    return node
+    // override linked object node
+    markdownAST.children[i] = node
   })
 
   /**
-   * Build new AST tree.
+   * Search for each node types by an alias (tag) globally.
    */
-  const newMAST = {
-    type: 'root',
-    children,
+  if (tagClasses) {
+    const tags = Object.keys(tagClasses)
+    tags.forEach(name => {
+      const tagType = getTypeByAlias(name) /** @return {string} e.g. heading */
+
+      switch (tagType) {
+        case 'heading':
+          const depth = Number(name[1]) // get depth from tag name `h1`[1]
+          const isHDepth = node =>
+            node.type === 'heading' && node.depth === depth
+          visit(markdownAST, isHDepth, node => {
+            if (!node.data) node.data = {}
+            node.data.hProperties = { className: tagClasses[name] }
+          })
+          break
+
+        default:
+          visit(markdownAST, tagType, node => {
+            if (!node.data) node.data = {}
+            node.data.hProperties = { className: tagClasses[name] }
+          })
+          break
+      }
+    })
   }
 
   /**
    * Search globally in AST because the most time
    * those plugin generated stuff is inside a
    * paragraph node.
    */
-  if (remark) {
-    const remarkNames = Object.keys(remark)
-    remarkNames.forEach(name => {
-      const remarkNode = remarkTypes[name]
-      visit(newMAST, remarkNode.type, node => {
-        if (node.value.includes(remarkNode.value)) {
-          node.value = `<div class="${remark[name]}">${node.value}</div>`
+  if (remarkClasses) {
+    const plgNames = Object.keys(remarkClasses)
+    plgNames.forEach(name => {
+      if (Object.keys(remarkPluginOptions).indexOf(name) > -1) {
+        const { type, value } = remarkPluginOptions[name]
+
+        switch (type) {
+          case 'html':
+            visit(markdownAST, 'html', node => {
+              if (node.value.includes(value)) {
+                node.value = `<div class="${remarkClasses[name]}">${node.value}</div>`
+              }
+            })
+            break
+
+          default:
+            // noop
+            break
         }
-      })
+      }
     })
   }
 
-  // const id = getRandomInt(99999)
-  // fs.writeFile(
-  //   `./tmp/md-ast-${id}.json`,
-  //   JSON.stringify(markdownAST, null, 2),
-  //   () => {
-  //     console.log('DONE:', id)
-  //   }
-  // )
-  // fs.writeFile(
-  //   `./tmp/md-ast-${id}-new.json`,
-  //   JSON.stringify(newMAST, null, 2),
-  //   () => {
-  //     console.log('NEW:', id)
-  //   }
-  // )
+  fs.writeFileSync('./tmp/md-ast.json', JSON.stringify(markdownAST, null, 2))
 
-  return newMAST
+  return markdownAST
 }

src/layouts/Article.jsx

@@ -44,8 +44,6 @@ class Article extends React.Component {
       </div>
     )
 
-    console.log(this.props)
-
     return (
       <>
         <article

src/styles/app.scss

@@ -35,6 +35,7 @@
 @import 'components/dot';
 @import 'components/footnote';
 @import 'components/image';
+@import 'components/input';
 @import 'components/link';
 @import 'components/overlay';
 @import 'components/list';

src/styles/components/_code.scss

@@ -1,11 +1,11 @@
 p code {
-  background: var(--color-08);
+  background: var(--color-09);
   font-size: var(--text-sm);
   margin: 0 2px;
   padding: 2px 7px;
   border-radius: var(--border-radius-sm);
-  border: 1px solid var(--color-07);
-  color: var(--color-03);
+  border: 1px solid var(--color-dark);
+  color: var(--color-05);
 }
 
 .gatsby-highlight {
@@ -24,6 +24,7 @@ pre[class*='language-'] {
   font-size: var(--text-sm);
   color: #efd563;
   line-height: 1.6;
+  margin: 0;
 }
 
 pre > code[class*='language-'] {