From c89c6341f2cdbe08b880314e609b1ac512bced99 Mon Sep 17 00:00:00 2001 From: Marvin Heilemann Date: Tue, 1 Oct 2019 14:40:46 +0200 Subject: [PATCH] Add plugins to wrap AST nodes and add span to checkbox text --- TODO.md | 9 +- content/projects/__demo__/index.md | 18 +- gatsby-config.js | 11 +- package-lock.json | 6 +- package.json | 2 +- plugins/remark-checkbox-spanner/index.js | 14 ++ plugins/remark-checkbox-spanner/package.json | 1 + plugins/remark-custom-classes/index.js | 164 +++++++++---------- reports/v3.0.0/treemap.html | 4 +- src/layouts/Article.jsx | 2 - src/styles/app.scss | 1 + src/styles/components/_code.scss | 7 +- src/styles/components/_footnote.scss | 16 +- src/styles/components/_input.scss | 72 ++++++++ src/styles/components/_list.scss | 2 +- src/templates/test.css | 6 +- 16 files changed, 215 insertions(+), 120 deletions(-) create mode 100644 plugins/remark-checkbox-spanner/index.js create mode 100644 plugins/remark-checkbox-spanner/package.json create mode 100644 src/styles/components/_input.scss diff --git a/TODO.md b/TODO.md index a165ce5..6950ba8 100644 --- a/TODO.md +++ b/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/ diff --git a/content/projects/__demo__/index.md b/content/projects/__demo__/index.md index b4e06cc..ea7fcce 100644 --- a/content/projects/__demo__/index.md +++ b/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 +
+

this is already HTML

+
+ +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 wiggle come -here, eat a plant, kill a hand prance along on **_top of the garden +here, eat a plant, kill 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 was chasing the mouse meowing chowing and wowing. I’m so hungry i’m so hungry but ew not for that try to hold own back foot to clean it but foot reflexively 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 diff --git a/gatsby-config.js b/gatsby-config.js index 8cfcd92..0424f02 100644 --- a/gatsby-config.js +++ b/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', diff --git a/package-lock.json b/package-lock.json index 5ec316f..9108ca7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5584,9 +5584,9 @@ "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" }, "eslint": { - "version": "6.5.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.5.0.tgz", - "integrity": "sha512-IIbSW+vKOqMatPmS9ayyku4tvWxHY2iricSRtOz6+ZA5IPRlgXzEL0u/j6dr4eha0ugmhMwDTqxtmNu3kj9O4w==", + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.5.1.tgz", + "integrity": "sha512-32h99BoLYStT1iq1v2P9uwpyznQ4M2jRiFB6acitKz52Gqn+vPaMDUTB1bYi1WN4Nquj2w+t+bimYUG83DC55A==", "dev": true, "requires": { "@babel/code-frame": "^7.0.0", diff --git a/package.json b/package.json index 89bafda..d1ca930 100644 --- a/package.json +++ b/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", diff --git a/plugins/remark-checkbox-spanner/index.js b/plugins/remark-checkbox-spanner/index.js new file mode 100644 index 0000000..f321805 --- /dev/null +++ b/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: '' }) + paragraph.push({ type: 'html', value: '' }) + }) + + return markdownAST +} diff --git a/plugins/remark-checkbox-spanner/package.json b/plugins/remark-checkbox-spanner/package.json new file mode 100644 index 0000000..9e26dfe --- /dev/null +++ b/plugins/remark-checkbox-spanner/package.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/plugins/remark-custom-classes/index.js b/plugins/remark-custom-classes/index.js index 5802502..8f3626d 100644 --- a/plugins/remark-custom-classes/index.js +++ b/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,87 +31,82 @@ 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 + } + }) } /** @@ -119,33 +114,30 @@ module.exports = (component, pluginOptions) => { * 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 = `
${node.value}
` + 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 = `
${node.value}
` + } + }) + 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 } diff --git a/reports/v3.0.0/treemap.html b/reports/v3.0.0/treemap.html index 52bd60d..1843fe6 100644 --- a/reports/v3.0.0/treemap.html +++ b/reports/v3.0.0/treemap.html @@ -3,7 +3,7 @@ - marvin-digital [30 Sep 2019 at 17:4] + marvin-digital [1 Oct 2019 at 13:21] diff --git a/src/layouts/Article.jsx b/src/layouts/Article.jsx index 87c3b0a..7994169 100644 --- a/src/layouts/Article.jsx +++ b/src/layouts/Article.jsx @@ -44,8 +44,6 @@ class Article extends React.Component { ) - console.log(this.props) - return ( <>
code[class*='language-'] { diff --git a/src/styles/components/_footnote.scss b/src/styles/components/_footnote.scss index 207438c..dad146c 100644 --- a/src/styles/components/_footnote.scss +++ b/src/styles/components/_footnote.scss @@ -1,8 +1,16 @@ article { - sup a { - font-family: var(--font-mono); - text-decoration: none; - margin-left: 2px; + sup { + display: inline-block; + font-size: var(--text-sm); + margin-left: 4px; + + a { + font-family: var(--font-mono); + text-decoration: none; + display: block; + margin: 0; + line-height: 1; + } } } diff --git a/src/styles/components/_input.scss b/src/styles/components/_input.scss new file mode 100644 index 0000000..ad905e2 --- /dev/null +++ b/src/styles/components/_input.scss @@ -0,0 +1,72 @@ +[type='checkbox'] { + display: none; + + & + .task-list-item, + & + span { + position: relative; + user-select: none; + + &::before { + display: inline-block; + width: var(--spacing-lg); + height: var(--spacing-lg); + margin-right: var(--spacing-sm); + border: 1px solid var(--color-gray-200); + border-radius: var(--border-radius); + content: ''; + vertical-align: top; + transition: var(--transition-fast); + } + + &::after { + display: none; + position: absolute; + top: 4px; + left: 5px; + width: 14px; + height: 7px; + transform: rotate(-45deg); + border-left: 2px solid var(--color-white); + border-bottom: 2px solid var(--color-white); + content: ''; + } + } + + &:checked + span { + &::before { + background: var(--jobportal-color-primary); + border-color: var(--jobportal-color-primary); + } + + &::after { + display: block; + } + } +} + +.task-list-item { + &::before { + display: inline-block; + width: var(--spacing-lg); + height: var(--spacing-lg); + margin-left: negative(var(--spacing-sm)); + border: 1px solid var(--color-08); + border-radius: var(--border-radius); + content: ''; + vertical-align: top; + transition: var(--transition-fast); + } + + &::after { + display: none; + position: absolute; + top: 4px; + left: 5px; + width: 14px; + height: 7px; + transform: rotate(-45deg); + border-left: 2px solid var(--color-white); + border-bottom: 2px solid var(--color-white); + content: ''; + } +} diff --git a/src/styles/components/_list.scss b/src/styles/components/_list.scss index a34898d..ab9345a 100644 --- a/src/styles/components/_list.scss +++ b/src/styles/components/_list.scss @@ -28,7 +28,7 @@ article { } ul { - > li { + > li:not(.task-list-item) { &::before { content: '▁'; left: 0; diff --git a/src/templates/test.css b/src/templates/test.css index a3fc5e7..4104972 100644 --- a/src/templates/test.css +++ b/src/templates/test.css @@ -1,8 +1,8 @@ -/* #hero .backdrop::after { +#hero .backdrop::after { background-image: linear-gradient( to top, - #1f232e, + #1e252d, cubic-bezier(0.61, 0, 0.23, 0.91), transparent ); -} */ +}