Merge

bin/render

@@ -1,9 +1,8 @@
 #!/usr/bin/env node
 
-const fs = require('fs');
-const jsdom = require('jsdom').jsdom;
-const serialize = require('jsdom').serializeDocument;
 const program = require('commander');
+const jsdom = require('jsdom');
+const { JSDOM } = jsdom;
 const transforms = require('../dist/transforms.v2.js');
 
 program
@@ -11,10 +10,19 @@ program
   .option('-i, --input <path>', 'path to input file.')
   .parse(process.argv);
 
-const htmlString = fs.readFileSync(program.input, 'utf8');
-const data = new transforms.FrontMatter;
-const dom = jsdom(htmlString, {features: {ProcessExternalResources: false, FetchExternalResources: false, runScripts: 'dangerously'}});
-transforms.render(dom, data);
-transforms.distillify(dom, data);
-const transformedHtml = serialize(dom);
-process.stdout.write(transformedHtml);
+const virtualConsole = new jsdom.VirtualConsole();
+// omitJSDOMErrors as JSDOM routinely can't parse modern CSS
+virtualConsole.sendTo(console, { omitJSDOMErrors: true });
+
+const options = { runScripts: 'outside-only', QuerySelector: true, virtualConsole: virtualConsole };
+JSDOM.fromFile(program.input, options).then(dom => {
+  const window = dom.window;
+  const document = window.document;
+
+  const data = new transforms.FrontMatter;
+  transforms.render(document, data);
+  transforms.distillify(document, data);
+
+  const transformedHtml = dom.serialize();
+  process.stdout.write(transformedHtml);
+}).catch(console.error);

package.json

@@ -26,7 +26,7 @@
     "eslint": "^4.3.0",
     "eslint-config-google": "^0.9.1",
     "js-yaml": "^3.7.0",
-    "jsdom": "^9.10.0",
+    "jsdom": "^11.2.0",
     "marked": "^0.3.6",
     "mocha": "^3.2.0",
     "prismjs": "^1.6.0",

src/components/d-math.js

@@ -2,8 +2,11 @@
 import { Mutating } from '../mixins/mutating.js';
 import { Template } from '../mixins/template.js';
 
-const katexJSURL = 'https://distill.pub/third-party/katex/katex.min.js';
-const katexCSSTag = '<link rel="stylesheet" href="https://distill.pub/third-party/katex/katex.min.css" crossorigin="anonymous">';
+// attaches renderMathInElement to window
+import { renderMathInElement } from '../helpers/katex-auto-render';
+
+export const katexJSURL = 'https://distill.pub/third-party/katex/katex.min.js';
+export const katexCSSTag = '<link rel="stylesheet" href="https://distill.pub/third-party/katex/katex.min.css" crossorigin="anonymous">';
 
 const T = Template('d-math', `
 <style>
@@ -17,19 +20,6 @@ const T = Template('d-math', `
   display: block;
 }
 
-#katex-container .katex-display {
-  text-align: left;
-  padding: 8px 0 8px 40px;
-  margin: 20px 0 ;
-  /*border-left: solid 1px rgba(0, 0, 0, 0.1);*/
-}
-
-#katex-container .katex {
-  -webkit-font-smoothing: antialiased;
-  color: rgba(0, 0, 0, 0.8);
-  font-size: 1.18em;
-}
-
 </style>
 
 ${katexCSSTag}
@@ -38,38 +28,66 @@ ${katexCSSTag}
 `);
 
 
-// DMath, not Math, because that's a JS built-in
+// DMath, not Math, because that would conflict with the JS built-in
 export class DMath extends Mutating(T(HTMLElement)) {
 
+  static set katexOptions(options) {
+    DMath._katexOptions = options;
+    if (DMath.katexOptions.delimiters && !DMath.katexAdded) {
+      DMath.addKatex();
+    }
+  }
+
+  static get katexOptions() {
+    if (!DMath._katexOptions) {
+      DMath._katexOptions = {};
+    }
+    return DMath._katexOptions;
+  }
+
   static katexLoadedCallback() {
+    // render all d-math tags
     const mathTags = document.querySelectorAll('d-math');
     for (const mathTag of mathTags) {
       mathTag.renderContent();
     }
+    // transform inline delimited math to d-math tags
+    if (DMath.katexOptions.delimiters) {
+      const article = document.querySelector('d-article');
+      renderMathInElement(article, DMath.katexOptions);
+    }
+  }
+
+  static addKatex() {
+    // script tag has to be created to work properly
+    const scriptTag = document.createElement('script');
+    scriptTag.src = katexJSURL;
+    scriptTag.async = true;
+    scriptTag.onload = DMath.katexLoadedCallback;
+    scriptTag.crossorigin = 'anonymous';
+    document.head.appendChild(scriptTag);
+    // css tag can use this convenience function
+    document.head.insertAdjacentHTML('beforeend', katexCSSTag);
+
+    DMath.katexAdded = true;
+  }
+
+  get options() {
+    const localOptions = { displayMode: this.hasAttribute('block') };
+    return Object.assign(localOptions, DMath.katexOptions);
   }
 
   connectedCallback() {
     super.connectedCallback();
     if (!DMath.katexAdded) {
-      // script tag has to be created to work properly
-      const scriptTag = document.createElement('script');
-      scriptTag.src = katexJSURL;
-      scriptTag.async = true;
-      scriptTag.onload = DMath.katexLoadedCallback;
-      scriptTag.crossorigin = 'anonymous';
-      document.head.appendChild(scriptTag);
-      // css tag can use this convenience function
-      document.head.insertAdjacentHTML('beforeend', katexCSSTag);
-
-      DMath.katexAdded = true;
+      DMath.addKatex();
     }
   }
 
   renderContent() {
     if (typeof katex !== 'undefined') {
-      const options = { displayMode: this.hasAttribute('block') };
       const container = this.root.querySelector('#katex-container');
-      katex.render(this.textContent, container, options);
+      katex.render(this.textContent, container, this.options);
     }
   }
 

src/controller.js

@@ -1,4 +1,5 @@
 import { FrontMatter } from './front-matter';
+import { DMath } from './components/d-math';
 import { collectCitations } from './components/d-cite';
 import { parseFrontmatter } from './components/d-front-matter';
 
@@ -116,6 +117,10 @@ export const Controller = {
       if (byline && !byline.getAttribute('prerendered')) {
         byline.frontMatter = frontMatter;
       }
+
+      if (data.katex) {
+        DMath.katexOptions = data.katex;
+      }
     },
 
     DOMContentLoaded() {

src/front-matter.js

@@ -96,6 +96,8 @@ export class FrontMatter {
     //  issue: 9,
     this.publishedDate = new Date();
 
+    this.katex = {};
+
     //
     // Assigned from publishing process
     //
@@ -121,6 +123,7 @@ export class FrontMatter {
     this.publishedDate = new Date(data.published);
     this.description = data.description;
     this.authors = data.authors.map( (authorObject) => new Author(authorObject));
+    this.katex = data.katex;
   }
 
   //

src/helpers/katex-auto-render.js

@@ -0,0 +1,204 @@
+// This is a straight concatenation of code from KaTeX's contrib folder,
+// but we aren't using some of their helpers that don't work well outside a browser environment.
+
+/*global katex */
+
+const findEndOfMath = function(delimiter, text, startIndex) {
+  // Adapted from
+  // https://github.com/Khan/perseus/blob/master/src/perseus-markdown.jsx
+  let index = startIndex;
+  let braceLevel = 0;
+
+  const delimLength = delimiter.length;
+
+  while (index < text.length) {
+    const character = text[index];
+
+    if (braceLevel <= 0 &&
+      text.slice(index, index + delimLength) === delimiter) {
+      return index;
+    } else if (character === '\\') {
+      index++;
+    } else if (character === '{') {
+      braceLevel++;
+    } else if (character === '}') {
+      braceLevel--;
+    }
+
+    index++;
+  }
+
+  return -1;
+};
+
+const splitAtDelimiters = function(startData, leftDelim, rightDelim, display) {
+  const finalData = [];
+
+  for (let i = 0; i < startData.length; i++) {
+    if (startData[i].type === 'text') {
+      const text = startData[i].data;
+
+      let lookingForLeft = true;
+      let currIndex = 0;
+      let nextIndex;
+
+      nextIndex = text.indexOf(leftDelim);
+      if (nextIndex !== -1) {
+        currIndex = nextIndex;
+        finalData.push({
+          type: 'text',
+          data: text.slice(0, currIndex),
+        });
+        lookingForLeft = false;
+      }
+
+      while (true) { // eslint-disable-line no-constant-condition
+        if (lookingForLeft) {
+          nextIndex = text.indexOf(leftDelim, currIndex);
+          if (nextIndex === -1) {
+            break;
+          }
+
+          finalData.push({
+            type: 'text',
+            data: text.slice(currIndex, nextIndex),
+          });
+
+          currIndex = nextIndex;
+        } else {
+          nextIndex = findEndOfMath(
+            rightDelim,
+            text,
+            currIndex + leftDelim.length);
+          if (nextIndex === -1) {
+            break;
+          }
+
+          finalData.push({
+            type: 'math',
+            data: text.slice(
+              currIndex + leftDelim.length,
+              nextIndex),
+            rawData: text.slice(
+              currIndex,
+              nextIndex + rightDelim.length),
+            display: display,
+          });
+
+          currIndex = nextIndex + rightDelim.length;
+        }
+
+        lookingForLeft = !lookingForLeft;
+      }
+
+      finalData.push({
+        type: 'text',
+        data: text.slice(currIndex),
+      });
+    } else {
+      finalData.push(startData[i]);
+    }
+  }
+
+  return finalData;
+};
+
+
+const splitWithDelimiters = function(text, delimiters) {
+  let data = [{type: 'text', data: text}];
+  for (let i = 0; i < delimiters.length; i++) {
+    const delimiter = delimiters[i];
+    data = splitAtDelimiters(
+      data, delimiter.left, delimiter.right,
+      delimiter.display || false);
+  }
+  return data;
+};
+
+/* Note: optionsCopy is mutated by this method. If it is ever exposed in the
+ * API, we should copy it before mutating.
+ */
+const renderMathInText = function(text, optionsCopy) {
+  const data = splitWithDelimiters(text, optionsCopy.delimiters);
+  const fragment = document.createDocumentFragment();
+
+  for (let i = 0; i < data.length; i++) {
+    if (data[i].type === 'text') {
+      fragment.appendChild(document.createTextNode(data[i].data));
+    } else {
+      const tag = document.createElement('d-math');
+      const math = data[i].data;
+      // Override any display mode defined in the settings with that
+      // defined by the text itself
+      optionsCopy.displayMode = data[i].display;
+      try {
+        tag.textContent = math;
+        if (optionsCopy.displayMode) {
+          tag.setAttribute('block', '');
+        }
+      } catch (e) {
+        if (!(e instanceof katex.ParseError)) {
+          throw e;
+        }
+        optionsCopy.errorCallback(
+          'KaTeX auto-render: Failed to parse `' + data[i].data +
+          '` with ',
+          e
+        );
+        fragment.appendChild(document.createTextNode(data[i].rawData));
+        continue;
+      }
+      fragment.appendChild(tag);
+    }
+  }
+
+  return fragment;
+};
+
+const renderElem = function(elem, optionsCopy) {
+  for (let i = 0; i < elem.childNodes.length; i++) {
+    const childNode = elem.childNodes[i];
+    if (childNode.nodeType === 3) {
+      // Text node
+      const frag = renderMathInText(childNode.textContent, optionsCopy);
+      i += frag.childNodes.length - 1;
+      elem.replaceChild(frag, childNode);
+    } else if (childNode.nodeType === 1) {
+      // Element node
+      const shouldRender = optionsCopy.ignoredTags.indexOf(
+        childNode.nodeName.toLowerCase()) === -1;
+
+      if (shouldRender) {
+        renderElem(childNode, optionsCopy);
+      }
+    }
+    // Otherwise, it's something else, and ignore it.
+  }
+};
+
+const defaultAutoRenderOptions = {
+  delimiters: [
+    {left: '$$', right: '$$', display: true},
+    {left: '\\[', right: '\\]', display: true},
+    {left: '\\(', right: '\\)', display: false},
+    // LaTeX uses this, but it ruins the display of normal `$` in text:
+    // {left: '$', right: '$', display: false},
+  ],
+
+  ignoredTags: [
+    'script', 'noscript', 'style', 'textarea', 'pre', 'code', 'svg',
+  ],
+
+  errorCallback: function(msg, err) {
+    console.error(msg, err);
+  },
+};
+
+export const renderMathInElement = function(elem, options) {
+  if (!elem) {
+    throw new Error('No element provided to render');
+  }
+
+  const optionsCopy = Object.assign({}, defaultAutoRenderOptions, options);
+  renderElem(elem, optionsCopy);
+};

src/styles/styles-article.css

@@ -185,3 +185,22 @@ d-figure {
   overflow: hidden;
   height: 300px;
 }
+
+/* KaTeX */
+
+d-article .katex-display {
+  text-align: left;
+  padding: 8px 0 8px 0;
+  margin: 20px 0;
+}
+
+d-article .katex {
+  -webkit-font-smoothing: antialiased;
+  color: rgba(0, 0, 0, 0.8);
+  font-size: 1.18em;
+}
+
+.katex, .katex-prerendered {
+  contain: content;
+  display: inline-block;
+}

src/styles/styles.js

@@ -5,14 +5,18 @@ import print from './styles-print.css';
 import { style as byline } from '../components/d-byline.js';
 
 export const styles = base + layout + byline + article + print;
-const styleTagId = 'distill-prerendered-styles';
 
 export function makeStyleTag(dom) {
+
+  const styleTagId = 'distill-prerendered-styles';
   const prerenderedTag = dom.getElementById(styleTagId);
   if (!prerenderedTag) {
-    let styleTag = dom.createElement('style');
+    const styleTag = dom.createElement('style');
     styleTag.id = styleTagId;
-    styleTag.textContent =  styles;
+    styleTag.type = 'text/css';
+    const cssTextTag = dom.createTextNode(styles);
+    styleTag.appendChild(cssTextTag);
     dom.head.insertBefore(styleTag, dom.head.firstChild);
   }
+
 }

src/transforms.js

@@ -17,14 +17,15 @@ const extractors = [
 import HTML from './transforms/html';
 import Byline from './transforms/byline';
 import Polyfills from './transforms/polyfills';
+import Mathematics from './transforms/mathematics';
 import Meta from './transforms/meta';
 import { makeStyleTag } from './styles/styles';
 import TOC from './transforms/toc';
-// import Typeset from './transforms/typeset';
+import Typeset from './transforms/typeset';
 // import Bibliography from './transforms/bibliography';
 
 const transforms = [
-  HTML, makeStyleTag, TOC, Byline, Polyfills, Meta//, Typeset//, Bibliography
+  HTML, makeStyleTag, TOC, Byline, Polyfills, Mathematics, Meta, Typeset//, Bibliography
 ];
 
 /* Distill Transforms */
@@ -41,18 +42,21 @@ const distillTransforms = [
 export function render(dom, data) {
   // first, we collect static data from the dom
   for (const extract of extractors) {
+    // console.warn('Running extractor: ', extract);
     extract(dom, data);
   }
   // secondly we use it to transform parts of the dom
   for (const transform of transforms) {
+    // console.warn('Running transform: ', transform);
     transform(dom, data);
   }
   // the function calling us can now use the transformed dom and filled data object
 }
 
 export function distillify(dom, data) {
-  // thirdly, we optionally use these additional transforms when publishing on the Distill website
+  // thirdly, we can use these additional transforms when publishing on the Distill website
   for (const transform of distillTransforms) {
+    // console.warn('Running distillify: ', transform);
     transform(dom, data);
   }
 }

src/transforms/bibliography.js

@@ -14,7 +14,6 @@ export default function(dom, data) {
 
   const prerenderedBibliography = dom.createElement('d-bibliography-prerendered');
 
-
   const template = dom.createElement('template');
   template.innerHTML = templateString;
   const clone = dom.importNode(template.content, true);

src/transforms/mathematics.js

@@ -0,0 +1,34 @@
+import katex from 'katex';
+import { renderMathInElement } from '../helpers/katex-auto-render';
+
+export default function(dom, data) {
+  let needsCSS = false;
+  const article = dom.querySelector('d-article');
+
+  if (data.katex && data.katex.delimiters) {
+    global.document = dom;
+    renderMathInElement(article, data.katex);
+  }
+
+  // render d-math tags
+  const mathTags = article.querySelectorAll('d-math');
+  if (mathTags.length > 0) {
+    needsCSS = true;
+    console.warn(`Prerendering ${mathTags.length} math tags...`);
+    for (const mathTag of mathTags) {
+      const localOptions = { displayMode: mathTag.hasAttribute('block') };
+      const options = Object.assign(localOptions, data.katex);
+      const html = katex.renderToString(mathTag.textContent, options);
+      const container = dom.createElement('span');
+      container.innerHTML = html;
+      mathTag.parentElement.insertBefore(container, mathTag);
+      mathTag.parentElement.removeChild(mathTag);
+    }
+  }
+
+  if (needsCSS) {
+    const katexCSSTag = '<link rel="stylesheet" href="https://distill.pub/third-party/katex/katex.min.css" crossorigin="anonymous">';
+    dom.head.insertAdjacentHTML('beforeend', katexCSSTag);
+  }
+
+}

src/transforms/styles-article.css

@@ -1,269 +0,0 @@
-dt-article {
-  display: block;
-  color: rgba(0, 0, 0, 0.8);
-  font: 17px/1.55em -apple-system, BlinkMacSystemFont, "Roboto", sans-serif;
-  padding-bottom: 72px;
-  overflow: hidden;
-  background: white;
-  min-height: calc(100vh - 70px - 182px);
-}
-
-@media(min-width: 1024px) {
-  dt-article {
-    font-size: 20px;
-  }
-}
-
-/* H1 */
-
-dt-article h1 {
-  margin-top: 18px;
-  font-weight: 400;
-  font-size: 40px;
-  line-height: 1em;
-  font-family: HoeflerText-Regular, Cochin, Georgia, serif;
-}
-@media(min-width: 768px) {
-  dt-article h1 {
-    font-size: 46px;
-    margin-top: 48px;
-    margin-bottom: 12px;
-  }
-}
-
-@media(min-width: 1080px) {
-  .centered h1 {
-    text-align: center;
-  }
-
-  dt-article h1 {
-    font-size: 50px;
-    letter-spacing: -0.02em;
-  }
-
-  dt-article > h1:first-of-type,
-  dt-article section > h1:first-of-type {
-    margin-top: 80px;
-  }
-}
-
-
-@media(min-width: 1200px) {
-  dt-article h1 {
-    font-size: 56px;
-  }
-
-  dt-article > h1:first-of-type {
-    margin-top: 100px;
-  }
-}
-
-/* H2 */
-
-dt-article h2 {
-  font-family: HoeflerText-Regular, Cochin, Georgia, serif;
-  font-weight: 400;
-  font-size: 26px;
-  line-height: 1.25em;
-  margin-top: 36px;
-  margin-bottom: 24px;
-}
-
-@media(min-width: 1024px) {
-  dt-article h2 {
-    margin-top: 48px;
-    font-size: 30px;
-  }
-}
-
-dt-article h1 + h2 {
-  font-weight: 300;
-  font-size: 20px;
-  line-height: 1.4em;
-  margin-top: 8px;
-  font-style: normal;
-}
-
-
-@media(min-width: 1080px) {
-  .centered h1 + h2 {
-    text-align: center;
-  }
-  dt-article h1 + h2 {
-    margin-top: 12px;
-    font-size: 24px;
-  }
-}
-
-/* H3 */
-
-dt-article h3 {
-  font-family: HoeflerText-Regular, Georgia, serif;
-  font-weight: 400;
-  font-size: 20px;
-  line-height: 1.4em;
-  margin-top: 36px;
-  margin-bottom: 18px;
-  font-style: italic;
-}
-
-dt-article h1 + h3 {
-  margin-top: 48px;
-}
-
-@media(min-width: 1024px) {
-  dt-article h3 {
-    font-size: 26px;
-  }
-}
-
-/* H4 */
-
-dt-article h4 {
-  font-weight: 600;
-  text-transform: uppercase;
-  font-size: 14px;
-  line-height: 1.4em;
-}
-
-dt-article a {
-  color: inherit;
-}
-
-dt-article p,
-dt-article ul,
-dt-article ol {
-  margin-bottom: 24px;
-  font-family: Georgia, serif;
-}
-
-dt-article p b,
-dt-article ul b,
-dt-article ol b {
-  -webkit-font-smoothing: antialiased;
-}
-
-dt-article a {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
-  text-decoration: none;
-}
-
-dt-article a:hover {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.8);
-}
-
-dt-article .link {
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-dt-article ul,
-dt-article ol {
-  padding-left: 24px;
-}
-
-dt-article li {
-  margin-bottom: 24px;
-  margin-left: 0;
-  padding-left: 0;
-}
-
-dt-article pre {
-  font-size: 14px;
-  margin-bottom: 20px;
-}
-
-
-dt-article hr {
-  border: none;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-  margin-top: 60px;
-  margin-bottom: 60px;
-}
-
-dt-article section {
-  margin-top: 60px;
-  margin-bottom: 60px;
-}
-
-
-/* Figure */
-
-dt-article figure {
-  position: relative;
-  margin-top: 30px;
-  margin-bottom: 30px;
-}
-
-@media(min-width: 1024px) {
-  dt-article figure {
-    margin-top: 48px;
-    margin-bottom: 48px;
-  }
-}
-
-dt-article figure img {
-  width: 100%;
-}
-
-dt-article figure svg text,
-dt-article figure svg tspan {
-}
-
-dt-article figure figcaption {
-  color: rgba(0, 0, 0, 0.6);
-  font-size: 12px;
-  line-height: 1.5em;
-}
-@media(min-width: 1024px) {
-  dt-article figure figcaption {
-    font-size: 13px;
-  }
-}
-
-dt-article figure.external img {
-  background: white;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
-  padding: 18px;
-  box-sizing: border-box;
-}
-
-dt-article figure figcaption a {
-  color: rgba(0, 0, 0, 0.6);
-}
-
-/*dt-article figure figcaption::before {
-  position: relative;
-  display: block;
-  top: -20px;
-  content: "";
-  width: 25px;
-  border-top: 1px solid rgba(0, 0, 0, 0.3);
-}*/
-
-dt-article span.equation-mimic {
-  font-family: georgia;
-  font-size: 115%;
-  font-style: italic;
-}
-
-dt-article figure figcaption b {
-  font-weight: 600;
-  color: rgba(0, 0, 0, 1.0);
-}
-
-dt-article > dt-code,
-dt-article section > dt-code  {
-  display: block;
-}
-
-dt-article .citation {
-  color: #668;
-  cursor: pointer;
-}
-
-dt-include {
-  width: auto;
-  display: block;
-}

src/transforms/styles-base.css

@@ -1,67 +0,0 @@
-html {
-  font: 400 16px/1.55em -apple-system, BlinkMacSystemFont, "Roboto", Helvetica, sans-serif;
-  /*background-color: hsl(223, 9%, 25%);*/
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  text-size-adjust: 100%;
-}
-body {
-  margin: 0;
-  /*background-color: hsl(223, 9%, 25%);*/
-}
-
-a {
-  color: #004276;
-}
-
-figure {
-  margin: 0;
-}
-
-h1 {
-  font-family: Cochin, Georgia, serif;
-}
-
-/*
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-	display: block;
-}
-body {
-	line-height: 1;
-}
-ol, ul {
-	list-style: none;
-}
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}*/

src/transforms/styles-code.css

@@ -1,147 +0,0 @@
-/**
- * prism.js default theme for JavaScript, CSS and HTML
- * Based on dabblet (http://dabblet.com)
- * @author Lea Verou
- */
-
-code {
-  white-space: nowrap;
-  background: rgba(0, 0, 0, 0.04);
-  border-radius: 2px;
-  padding: 4px 7px;
-  font-size: 15px;
-  color: rgba(0, 0, 0, 0.6);
-}
-
-pre code {
-  display: block;
-  background: white;
-  border-left: 3px solid rgba(0, 0, 0, 0.05);
-  padding: 0 0 0 24px;
-}
-
-
-code[class*="language-"],
-pre[class*="language-"] {
-  text-shadow: 0 1px white;
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  line-height: 1.5;
-
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-
-pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
-code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-  text-shadow: none;
-  background: #b3d4fc;
-}
-
-pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
-code[class*="language-"]::selection, code[class*="language-"] ::selection {
-  text-shadow: none;
-  background: #b3d4fc;
-}
-
-@media print {
-  code[class*="language-"],
-  pre[class*="language-"] {
-  text-shadow: none;
-  }
-}
-
-/* Code blocks */
-pre[class*="language-"] {
-  overflow: auto;
-}
-
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-}
-
-/* Inline code */
-:not(pre) > code[class*="language-"] {
-  white-space: normal;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: slategray;
-}
-
-.token.punctuation {
-  color: #999;
-}
-
-.namespace {
-  opacity: .7;
-}
-
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted {
-  color: #905;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-  color: #690;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-  color: #a67f59;
-  background: hsla(0, 0%, 100%, .5);
-}
-
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-  color: #07a;
-}
-
-.token.function {
-  color: #DD4A68;
-}
-
-.token.regex,
-.token.important,
-.token.variable {
-  color: #e90;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}

src/transforms/styles-layout.css

@@ -1,353 +0,0 @@
-/*
-  Column: 60px
-  Gutter: 24px
-
-  Body: 648px
-    - 8 columns
-    - 7 gutters
-  Middle: 816px
-  Page: 984px
-    - 12 columns
-    - 11 gutters
-*/
-
-.l-body,
-.l-body-outset,
-.l-page,
-.l-page-outset,
-.l-middle,
-.l-middle-outset,
-dt-article > div,
-dt-article > p,
-dt-article > h1,
-dt-article > h2,
-dt-article > h3,
-dt-article > h4,
-dt-article > figure,
-dt-article > ul,
-dt-article > dt-byline,
-dt-article > dt-code,
-dt-article section > div,
-dt-article section > p,
-dt-article section > h1,
-dt-article section > h2,
-dt-article section > h3,
-dt-article section > h4,
-dt-article section > figure,
-dt-article section > ul,
-dt-article section > dt-byline,
-dt-article section > dt-code {
-  width: auto;
-  margin-left: 24px;
-  margin-right: 24px;
-  box-sizing: border-box;
-}
-
-@media(min-width: 768px) {
-  .l-body,
-  .l-body-outset,
-  .l-page,
-  .l-page-outset,
-  .l-middle,
-  .l-middle-outset,
-  dt-article > div,
-  dt-article > p,
-  dt-article > h1,
-  dt-article > h2,
-  dt-article > h3,
-  dt-article > h4,
-  dt-article > figure,
-  dt-article > ul,
-  dt-article > dt-byline,
-  dt-article > dt-code,
-  dt-article section > div,
-  dt-article section > p,
-  dt-article section > h1,
-  dt-article section > h2,
-  dt-article section > h3,
-  dt-article section > h4,
-  dt-article section > figure,
-  dt-article section > ul,
-  dt-article section > dt-byline,
-  dt-article section > dt-code {
-    margin-left: 72px;
-    margin-right: 72px;
-  }
-}
-
-@media(min-width: 1080px) {
-  .l-body,
-  dt-article > div,
-  dt-article > p,
-  dt-article > h2,
-  dt-article > h3,
-  dt-article > h4,
-  dt-article > figure,
-  dt-article > ul,
-  dt-article > dt-byline,
-  dt-article > dt-code,
-  dt-article section > div,
-  dt-article section > p,
-  dt-article section > h2,
-  dt-article section > h3,
-  dt-article section > h4,
-  dt-article section > figure,
-  dt-article section > ul,
-  dt-article section > dt-byline,
-  dt-article section > dt-code {
-    margin-left: calc(50% - 984px / 2);
-    width: 648px;
-  }
-  .l-body-outset,
-  dt-article .l-body-outset {
-    margin-left: calc(50% - 984px / 2 - 96px/2);
-    width: calc(648px + 96px);
-  }
-  .l-middle,
-  dt-article .l-middle {
-    width: 816px;
-    margin-left: calc(50% - 984px / 2);
-    margin-right: auto;
-  }
-  .l-middle-outset,
-  dt-article .l-middle-outset {
-    width: calc(816px + 96px);
-    margin-left: calc(50% - 984px / 2 - 48px);
-    margin-right: auto;
-  }
-  dt-article > h1,
-  dt-article section > h1,
-  .l-page,
-  dt-article .l-page,
-  dt-article.centered .l-page {
-    width: 984px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .l-page-outset,
-  dt-article .l-page-outset,
-  dt-article.centered .l-page-outset {
-    width: 1080px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .l-screen,
-  dt-article .l-screen,
-  dt-article.centered .l-screen {
-    margin-left: auto;
-    margin-right: auto;
-    width: auto;
-  }
-  .l-screen-inset,
-  dt-article .l-screen-inset,
-  dt-article.centered .l-screen-inset {
-    margin-left: 24px;
-    margin-right: 24px;
-    width: auto;
-  }
-  .l-gutter,
-  dt-article .l-gutter {
-    clear: both;
-    float: right;
-    margin-top: 0;
-    margin-left: 24px;
-    margin-right: calc((100vw - 984px) / 2 + 168px);
-    width: calc((984px - 648px) / 2 - 24px);
-  }
-
-  /* Side */
-  .side.l-body,
-  dt-article .side.l-body {
-    clear: both;
-    float: right;
-    margin-top: 0;
-    margin-left: 48px;
-    margin-right: calc((100vw - 984px + 648px) / 2);
-    width: calc(648px / 2 - 24px - 84px);
-  }
-  .side.l-body-outset,
-  dt-article .side.l-body-outset {
-    clear: both;
-    float: right;
-    margin-top: 0;
-    margin-left: 48px;
-    margin-right: calc((100vw - 984px + 648px - 48px) / 2);
-    width: calc(648px / 2 - 48px + 24px);
-  }
-  .side.l-middle,
-  dt-article .side.l-middle {
-    clear: both;
-    float: right;
-    width: calc(456px - 84px);
-    margin-left: 48px;
-    margin-right: calc((100vw - 984px) / 2 + 168px);
-  }
-  .side.l-middle-outset,
-  dt-article .side.l-middle-outset {
-    clear: both;
-    float: right;
-    width: 456px;
-    margin-left: 48px;
-    margin-right: calc((100vw - 984px) / 2 + 168px);
-  }
-  .side.l-page,
-  dt-article .side.l-page {
-    clear: both;
-    float: right;
-    margin-left: 48px;
-    width: calc(624px - 84px);
-    margin-right: calc((100vw - 984px) / 2);
-  }
-  .side.l-page-outset,
-  dt-article .side.l-page-outset {
-    clear: both;
-    float: right;
-    width: 624px;
-    margin-right: calc((100vw - 984px) / 2);
-  }
-}
-
-/* Centered */
-
-@media(min-width: 1080px) {
-  .centered .l-body,
-  .centered.l-body,
-  dt-article.centered > div,
-  dt-article.centered > p,
-  dt-article.centered > h2,
-  dt-article.centered > h3,
-  dt-article.centered > h4,
-  dt-article.centered > figure,
-  dt-article.centered > ul,
-  dt-article.centered > dt-byline,
-  dt-article.centered > dt-code,
-  dt-article.centered section > div,
-  dt-article.centered section > p,
-  dt-article.centered section > h2,
-  dt-article.centered section > h3,
-  dt-article.centered section > h4,
-  dt-article.centered section > figure,
-  dt-article.centered section > ul,
-  dt-article.centered section > dt-byline,
-  dt-article.centered section > dt-code,
-  dt-article section.centered > div,
-  dt-article section.centered > p,
-  dt-article section.centered > h2,
-  dt-article section.centered > h3,
-  dt-article section.centered > h4,
-  dt-article section.centered > figure,
-  dt-article section.centered > ul,
-  dt-article section.centered > dt-byline,
-  dt-article section.centered > dt-code {
-    margin-left: auto;
-    margin-right: auto;
-    width: 648px;
-  }
-  .centered .l-body-outset,
-  .centered.l-body-outset,
-  dt-article.centered .l-body-outset {
-    margin-left: auto;
-    margin-right: auto;
-    width: calc(648px + 96px);
-  }
-  dt-article.centered > h1,
-  dt-article.centered section > h1,
-  dt-article section.centered > h1,
-  .centered .l-middle,
-  .centered.l-middle,
-  dt-article.centered .l-middle {
-    width: 816px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .centered .l-middle-outset,
-  .centered.l-middle-outset,
-  dt-article.centered .l-middle-outset {
-    width: calc(816px + 96px);
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  /* page and screen are already centered */
-
-  /* Side */
-
-  .centered .side.l-body,
-  .centered dt-article .side.l-body {
-    clear: both;
-    float: right;
-    margin-top: 0;
-    margin-left: 48px;
-    margin-right: calc((100vw - 648px) / 2);
-    width: calc(4 * 60px + 3 * 24px);
-  }
-  .centered .side.l-body-outset,
-  .centered dt-article .side.l-body-outset {
-    clear: both;
-    float: right;
-    margin-top: 0;
-    margin-left: 48px;
-    margin-right: calc((100vw - 648px) / 2);
-    width: calc(4 * 60px + 3 * 24px);
-  }
-  .centered .side.l-middle,
-  .centered dt-article .side.l-middle {
-    clear: both;
-    float: right;
-    width: 396px;
-    margin-left: 48px;
-    margin-right: calc((100vw - 984px) / 2 + 168px / 2);
-  }
-  .centered .side.l-middle-outset,
-  .centered dt-article .side.l-middle-outset {
-    clear: both;
-    float: right;
-    width: 456px;
-    margin-left: 48px;
-    margin-right: calc((100vw - 984px) / 2 + 168px);
-  }
-  .centered .side.l-page,
-  .centered dt-article .side.l-page {
-    clear: both;
-    float: right;
-    width: 480px;
-    margin-right: calc((100vw - 984px) / 2);
-  }
-  .centered .side.l-page-outset,
-  .centered dt-article .side.l-page-outset {
-    clear: both;
-    float: right;
-    width: 480px;
-    margin-right: calc((100vw - 984px) / 2);
-  }
-  .centered .l-gutter,
-  .centered.l-gutter,
-  dt-article.centered .l-gutter {
-    clear: both;
-    float: right;
-    margin-top: 0;
-    margin-left: 24px;
-    margin-right: calc((100vw - 984px) / 2);
-    width: calc((984px - 648px) / 2 - 24px);
-  }
-
-}
-
-/* Rows and Columns */
-
-.row {
-  display: flex;
-}
-.column {
-  flex: 1;
-  box-sizing: border-box;
-  margin-right: 24px;
-  margin-left: 24px;
-}
-.row > .column:first-of-type {
-  margin-left: 0;
-}
-.row > .column:last-of-type {
-  margin-right: 0;
-}

src/transforms/styles-print.css

@@ -1,20 +0,0 @@
-
-@media print {
-  @page {
-    size: 8in 11in;
-  }
-  html {
-  }
-  p, code {
-    page-break-inside: avoid;
-  }
-  h2, h3 {
-    page-break-after: avoid;
-  }
-  dt-header {
-    visibility: hidden;
-  }
-  dt-footer {
-    display: none!important;
-  }
-}

src/transforms/styles.js

@@ -1,11 +0,0 @@
-import base from './styles-base.css';
-import layout from './styles-layout.css';
-import article from './styles-article.css';
-import code from './styles-code.css';
-import print from './styles-print.css';
-
-export default function(dom) {
-  let s = dom.createElement('style');
-  s.textContent = base + layout + article + code + print;
-  dom.querySelector('head').appendChild(s);
-}