Scoped global styling to all markdown

Make React compatible with markdown-style HTML by added components
with identical styling to markdown. This is done while CSS scoping
is maintained. Additional style is loaded through the markdown loader
by injecting default-styling tags into the components. This allows
default-margin to be added to these elements in addition to the styling
found in the React elements. The homepage reflects the domain, as defined
by an environmental variable.

2 files changed, 95 insertions, 1 deletions

diff --git a/loaders/marked-renderer.js b/loaders/marked-renderer.js
new file mode 100644
index 0000000..0b55304
--- /dev/null
+++ b/loaders/marked-renderer.js
@@ -0,0 +1,92 @@
+const prefix = "md-";
+const selectall = `${prefix}dl`;
+
+const renderer = {
+  // Block-level methods
+  code(code, infostring, escaped) {
+    return `<pre class="${selectall} ${prefix}pre"><code class="${selectall} ${prefix}code">${code}</code></pre>`;
+  },
+  blockquote(quote) {
+    return `<blockquote class="${selectall} ${prefix}blockquote">${quote}</blockquote>`;
+  },
+  html(html, block) {
+    return block ? html : `<span class="${selectall} ${prefix}inline-html">${html}</span>`;
+  },
+  heading(text, level, raw, slugger) {
+    return `<h${level} class="${selectall} ${prefix}h${level}">${text}</h${level}>`;
+  },
+  hr() {
+    return `<hr class="${selectall} ${prefix}hr" />`;
+  },
+  list(body, ordered, start) {
+    const tag = ordered ? 'ol' : 'ul';
+    return `<${tag} class="${selectall} ${prefix}list ${prefix}${tag}"${ordered && start !== 1 ? ` start="${start}"` : ''}>${body}</${tag}>`;
+  },
+  listitem(text, task, checked) {
+    let classList = `${prefix}li`;
+
+    if(task) {
+      classList += ` ${prefix}li-checkbox`;
+    } else {
+      classList += ` ${prefix}li-nocheckbox`;
+    }
+
+    return `<li class="${selectall} ${classList}">${text}</li>`;
+  },
+  checkbox(checked) {
+    return `<input type="checkbox" class="${selectall} ${prefix}checkbox" ${checked ? 'checked' : ''} disabled />`;
+  },
+  paragraph(text) {
+    return `<p class="${selectall} ${prefix}p">${text}</p>`;
+  },
+  table(header, body) {
+    return `<table class="${selectall} ${prefix}table"><thead class="${selectall} ${prefix}thead">${header}</thead><tbody class="${selectall} ${prefix}tbody">${body}</tbody></table>`;
+  },
+  tablerow(content) {
+    return `<tr class="${selectall} ${prefix}tr">${content}</tr>`;
+  },
+  tablecell(content, flags) {
+    const type = flags.header ? 'th' : 'td';
+    return `<${type} class="${selectall} ${prefix}${type}">${content}</${type}>`;
+  },
+
+  // Inline-level methods
+  strong(text) {
+    return `<strong class="${selectall} ${prefix}strong">${text}</strong>`;
+  },
+  em(text) {
+    return `<em class="${selectall} ${prefix}em">${text}</em>`;
+  },
+  codespan(code) {
+    return `<code class="${selectall} ${prefix}codespan">${code}</code>`;
+  },
+  br() {
+    return `<br class="${selectall} ${prefix}br" />`;
+  },
+  del(text) {
+    return `<del class="${selectall} ${prefix}del">${text}</del>`;
+  },
+  link(href, title, text) {
+    return `<a href="${href}" class="${selectall} ${prefix}a"${title ? ` title="${title}"` : ''}>${text}</a>`;
+  },
+  image(href, title, text) {
+    return `<img src="${href}" alt="${text}" class="${selectall} ${prefix}img"${title ? ` title="${title}"` : ''} />`;
+  },
+  text(text) {
+    return text; // text-level elements typically don't have classes
+  },
+};
+
+const hooks = {
+  postprocess(html) {
+    return `<div class="${selectall} ${prefix}wrapper" >${html}</div>`;
+  },
+  preprocess(md) {
+    return md;
+  }
+};
+
+module.exports = {
+  renderer,
+  hooks
+};
diff --git a/loaders/marked.js b/loaders/marked.js
index f3c8fcb..a1ed8c3 100644
--- a/loaders/marked.js
+++ b/loaders/marked.js
@@ -1,15 +1,17 @@
 const { Marked } = require('marked');
 const { markedHighlight } = require('marked-highlight');
 const hljs = require('highlight.js');
+const { renderer, hooks } = require('./marked-renderer.js');
 
 module.exports = function loader(source) {
   const marker = new Marked(
+    { renderer, hooks },
     markedHighlight({
       highlight(code, lang) {
         const language = hljs.getLanguage(lang) ? lang : 'plaintext';
         return hljs.highlight(code, { language }).value;
       }
-    })
+    }),
   );
 
   return marker.parse(source);