2.1.0

Update render.js script; expose it as bin when used as npm dependency.
Merge branch 'v2' into v2.1
2026-06-28 03:03:49 +08:00 · 2017-10-09 14:45:00 -07:00 · 2017-10-09 14:33:25 -07:00 · 2017-10-09 11:17:09 -07:00 · 2017-10-06 21:46:30 -07:00 · 2017-10-06 21:27:55 -07:00
68 changed files with 1746 additions and 3154 deletions
@@ -38,3 +38,7 @@ jspm_packages
 # Copied fonts
 examples/fonts
 dist
+article-rendered.html
+
+# dependency graph
+rollup-grapher.html
@@ -26,3 +26,14 @@ Run `yarn test`. That's it.
  /* width: 80px; */
  /* font-size: 20px; */
  /* font-weight: 200; */
+
+
+auto-added elements:
+ title in front, no h1 -> add it
+ no title in front, h1 -> read and put into frontMatter
+ footnote -> footnote list
+ break up bib
+ if citation, no bib-list -> add citation-list
+ if authors, no byline -> add byline
+ no appendix -> add appendix
+ 
@@ -1,20 +0,0 @@
-#!/usr/bin/env node
-
-const fs = require('fs');
-const jsdom = require('jsdom').jsdom;
-const serialize = require('jsdom').serializeDocument;
-const program = require('commander');
-const transforms = require('../dist/transforms.js');
-
-program
-  .version('0.0.1')
-  .option('-i, --input <path>', 'path to input file.')
-  .parse(process.argv);
-
-const htmlString = fs.readFileSync(program.input, 'utf8');
-const data = {};
-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);
@@ -0,0 +1,35 @@
+#!/usr/bin/env node
+
+const path = require('path');
+const fs = require('fs');
+const program = require('commander');
+const jsdom = require('jsdom');
+const { JSDOM } = jsdom;
+const transforms = require('../dist/transforms.v2.js');
+
+program
+  .version('1.0.0')
+  .description('Pre-renders distill articles for publication.')
+  .usage('-i <input path> -o <output path>')
+  .option('-i, --input_path <path>', 'path to input HTML file.')
+  .option('-o, --output_path <path>', 'path to write rendered HTML file to.')
+  .parse(process.argv);
+
+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;
+  data.inputHTMLPath = program.input; // may be needed to resolve relative links!
+  data.inputDirectory = path.dirname(program.input);
+  transforms.render(document, data);
+  transforms.distillify(document, data);
+
+  const transformedHtml = dom.serialize();
+  fs.writeFileSync(program.output, transformedHtml);
+}).catch(console.error);
@@ -2,64 +2,69 @@

 <head>
  <meta charset="utf8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="../dist/template.v2.js"></script>
-
-  <d-front-matter>
-    <script type="text/yml">
-      title: Demo Title Attention and Augmented Recurrent Neural Networks
-      published: Jan 10, 2017
-      authors:
-      - Chris Olah:
-      - Shan Carter: http://shancarter.com
-      affiliations:
-      - Google Brain
-      - Google Brain: http://g.co/brain
-    </script>
-  </d-front-matter>
 </head>

 <body>
+<d-front-matter>
+  <script id='distill-front-matter' type="text/json">{
+    "title": "Why Momentum Really Works",
+    "description": "Although extremely useful for visualizing high-dimensional data, t-SNE plots can sometimes be mysterious or misleading.",
+    "published": "Jan 10, 2017",
+    "authors": [
+      {
+        "author":"Chris Olah",
+        "authorURL":"https://colah.github.io/",
+        "affiliation":"Google Brain",
+        "affiliationURL":"https://g.co/brain"
+      },
+      {
+        "author":"Shan Carter",
+        "authorURL":"https://shancarter.com/",
+        "affiliation":"Google Brain",
+        "affiliationURL":"https://g.co/brain"
+      },
+      {
+        "author":"Ludwig Schubert",
+        "authorURL":"https://shancarter.com/",
+        "affiliation":"Google Brain",
+        "affiliationURL":"https://g.co/brain"
+      }
+    ],
+    "katex": {
+      "delimiters": [
+        {"left": "$$", "right": "$$", "display": false}
+      ]
+    }
+  }</script>
+</d-front-matter>
+<distill-header></distill-header>
+<d-abstract>
+  <figure style="grid-column: page; margin: 1rem 0;"><img src="momentum.png" style="width:100%; border: 1px solid rgba(0, 0, 0, 0.2);"/></figure>
+  <p>We often think of Momentum as a means of dampening oscillations and speeding up the iterations, leading to faster convergence. But it has other interesting behavior. It allows a larger range of step-sizes to be used, and creates its own oscillations. What is going on?</p>
+</d-abstract>
 <d-article>
-  <d-title>
-    <h1>Attention and Augmented Recurrent Neural Networks</h1>
-    <h2>Some people want a deck</h2>
-    <d-byline></d-byline>
-  </d-title>
-  <d-abstract>
-    <p>This is the first paragraph of the article. Test a long&thinsp;&mdash;&thinsp;dash -- here it is.</p>
-  </d-abstract>
+  <a class="marker" href="#section-1" id="section-1"><span>1</span></a>
+  <h2>A Brief Survey of Techniques</h2>
+  <p>Before diving in: if you haven’t encountered t-SNE before, here’s what you need to know about the math behind it. The goal is to take a set of points in a high-dimensional space and find a faithful representation of those points in a lower-dimensional space, typically the 2D plane. The algorithm is non-linear and adapts to the underlying data, performing different transformations on different regions. Those differences can be a major source of confusion.</p>
  <p>This is the first paragraph of the article. Test a long&thinsp;&mdash;&thinsp;dash -- here it is.</p>
  <p>Test for owner's possessive. Test for "quoting a passage." And another sentence. Or two. Some flopping fins; for diving.</p>
-  <hr>
-  <div style="max-width: 800px; background-color: red; height: 100px; border-radius: 50px;"></div>
-  <p>Here's a test of an inline equation <d-math>c = a^2 + b^2</d-math>. And then there's a block equation:</p>
+  <aside>Some text in an aside, margin notes, etc...</aside>
+  <p>Here's a test of an inline equation <d-math>c = a^2 + b^2</d-math>. Also with configurable katex standards just using inline '$' signs: $$x^2$$ And then there's a block equation:</p>
  <d-math block>
-      c = \pm \sqrt{ \sum_{i=0}^{n}{a^{222} + b^2}}
+    c = \pm \sqrt{ \sum_{i=0}^{n}{a^{222} + b^2}}
  </d-math>
-  <p>
-    Math can also be quite involved:
-    <d-math block>
-      f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
-    </d-math>
-    <d-math block>
-      \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }
-    </d-math>
-  </p>
-  <p>We can<d-cite key="mercier2011humans"></d-cite> also cite <d-cite key="gregor2015draw,mercier2011humans"></d-cite> external publications. <d-cite key="dong2014image,dumoulin2016guide,mordvintsev2015inceptionism"></d-cite></p>
-  <p>We should also be testing footnotes<d-footnote>This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote.</d-footnote>. There are multiple footnotes, and they appear in the appendix<d-footnote>Given I have coded them right. Also, here's math in a footnote: <d-math>c = \sum_0^i{x}</d-math>. Also, a citation. Box-ception<d-cite key='gregor2015draw'></d-cite>!</d-footnote> as well.</p>
-  <table>
-    <thead>
-      <tr><th>First</th><th>Second</th><th>Third</th></tr>
-    </thead>
-    <tbody>
-      <tr><td>23</td><td>654</td><td>23</td></tr>
-      <tr><td>14</td><td>54</td><td>34</td></tr>
-      <tr><td>234</td><td>54</td><td>23</td></tr>
-    </tbody>
-  </table>
+  <p>Math can also be quite involved:</p>
+  <d-math block>
+    \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }
+  </d-math>
+  <a class="marker" href="#section-1.1" id="section-1.1"><span>1.1</span></a>
+  <h3>Citations</h3>
+  <p>We can<d-cite key="mercier2011humans"></d-cite> also cite <d-cite key="gregor2015draw,mercier2011humans"></d-cite> external publications. <d-cite key="dong2014image,dumoulin2016guide,mordvintsev2015inceptionism"></d-cite>. We should also be testing footnotes<d-footnote>This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote.</d-footnote>. There are multiple footnotes, and they appear in the appendix<d-footnote>Given I have coded them right. Also, here's math in a footnote: <d-math>c = \sum_0^i{x}</d-math>. Also, a citation. Box-ception<d-cite key='gregor2015draw'></d-cite>!</d-footnote> as well.</p>
+  <a class="marker" href="#section-2" id="section-2"><span>2</span></a>
  <h2>Displaying code snippets</h2>
-  <p>Some inline javascript:<d-code language="javascript">var x = 25;</d-code></p>
-  <p>Here's a javascript code block.</p>
+  <p>Some inline javascript:<d-code language="javascript">var x = 25;</d-code>. And here's a javascript code block.</p>
  <d-code block language="javascript">
      var x = 25;
      function(x){
@@ -75,6 +80,17 @@
          print(a, end=' ')
          a, b = b, a+b
  </d-code>
+  <p>And a table</p>
+  <table>
+      <thead>
+        <tr><th>First</th><th>Second</th><th>Third</th></tr>
+      </thead>
+      <tbody>
+        <tr><td>23</td><td>654</td><td>23</td></tr>
+        <tr><td>14</td><td>54</td><td>34</td></tr>
+        <tr><td>234</td><td>54</td><td>23</td></tr>
+      </tbody>
+    </table>
  <d-figure id="last-figure"></d-figure>
  <script>
    const figure = document.querySelector("d-figure#last-figure");
@@ -98,123 +114,18 @@
    });
  </script>
  <p>That's it for the example article!</p>
-  <aside>Some text.</aside>
+
 </d-article>

 <d-appendix>
-  <d-acknowledgements>
-    <h3>Contributions</h3>
-    <p>Some text describing who did what.</p>
-    <h4>Reviewers</h4>
-    <p>Some text with links describing who reviewed the article.</p>
-  </d-acknowledgements>

-  <d-footnote-list></d-footnote-list>
+  <h3>Contributions</h3>
+  <p>Some text describing who did what.</p>
+  <h3>Reviewers</h3>
+  <p>Some text with links describing who reviewed the article.</p>

-  <d-bibliography><script type="text/bibtex">
+  <d-bibliography src="bibliography.bib"></d-bibliography>

-      @article{gregor2015draw,
-        title={DRAW: A recurrent neural network for image generation},
-        author={Gregor, Karol and Danihelka, Ivo and Graves, Alex and Rezende, Danilo Jimenez and Wierstra, Daan},
-        journal={arXiv preprint arXiv:1502.04623},
-        year={2015},
-        url ={https://arxiv.org/pdf/1502.04623.pdf}
-      }
-      @article{mercier2011humans,
-        title={Why do humans reason? Arguments for an argumentative theory},
-        author={Mercier, Hugo and Sperber, Dan},
-        journal={Behavioral and brain sciences},
-        volume={34},
-        number={02},
-        pages={57--74},
-        year={2011},
-        publisher={Cambridge Univ Press},
-        doi={10.1017/S0140525X10000968}
-      }
-
-      @article{dong2014image,
-        title={Image super-resolution using deep convolutional networks},
-        author={Dong, Chao and Loy, Chen Change and He, Kaiming and Tang, Xiaoou},
-        journal={arXiv preprint arXiv:1501.00092},
-        year={2014},
-        url={https://arxiv.org/pdf/1501.00092.pdf}
-      }
-
-      @article{dumoulin2016adversarially,
-        title={Adversarially Learned Inference},
-        author={Dumoulin, Vincent and Belghazi, Ishmael and Poole, Ben and Lamb, Alex and Arjovsky, Martin and Mastropietro, Olivier and Courville, Aaron},
-        journal={arXiv preprint arXiv:1606.00704},
-        year={2016},
-        url={https://arxiv.org/pdf/1606.00704.pdf}
-      }
-
-      @article{dumoulin2016guide,
-        title={A guide to convolution arithmetic for deep learning},
-        author={Dumoulin, Vincent and Visin, Francesco},
-        journal={arXiv preprint arXiv:1603.07285},
-        year={2016},
-        url={https://arxiv.org/pdf/1603.07285.pdf}
-      }
-
-      @article{gauthier2014conditional,
-        title={Conditional generative adversarial nets for convolutional face generation},
-        author={Gauthier, Jon},
-        journal={Class Project for Stanford CS231N: Convolutional Neural Networks for Visual Recognition, Winter semester},
-        volume={2014},
-        year={2014},
-        url={http://www.foldl.me/uploads/papers/tr-cgans.pdf}
-      }
-
-      @article{johnson2016perceptual,
-        title={Perceptual losses for real-time style transfer and super-resolution},
-        author={Johnson, Justin and Alahi, Alexandre and Fei-Fei, Li},
-        journal={arXiv preprint arXiv:1603.08155},
-        year={2016},
-        url={https://arxiv.org/pdf/1603.08155.pdf}
-      }
-
-      @article{mordvintsev2015inceptionism,
-        title={Inceptionism: Going deeper into neural networks},
-        author={Mordvintsev, Alexander and Olah, Christopher and Tyka, Mike},
-        journal={Google Research Blog},
-        year={2015},
-        url={https://research.googleblog.com/2015/06/inceptionism-going-deeper-into-neural.html}
-      }
-
-      @misc{mordvintsev2016deepdreaming,
-        title={DeepDreaming with TensorFlow},
-        author={Mordvintsev, Alexander},
-        year={2016},
-        url={https://github.com/tensorflow/tensorflow/blob/master/tensorflow/examples/tutorials/deepdream/deepdream.ipynb},
-      }
-
-      @article{radford2015unsupervised,
-        title={Unsupervised representation learning with deep convolutional generative adversarial networks},
-        author={Radford, Alec and Metz, Luke and Chintala, Soumith},
-        journal={arXiv preprint arXiv:1511.06434},
-        year={2015},
-        url={https://arxiv.org/pdf/1511.06434.pdf}
-      }
-
-      @inproceedings{salimans2016improved,
-        title={Improved techniques for training gans},
-        author={Salimans, Tim and Goodfellow, Ian and Zaremba, Wojciech and Cheung, Vicki and Radford, Alec and Chen, Xi},
-        booktitle={Advances in Neural Information Processing Systems},
-        pages={2226--2234},
-        year={2016},
-        url={https://arxiv.org/pdf/1606.03498.pdf}
-      }
-
-      @article{shi2016deconvolution,
-        title={Is the deconvolution layer the same as a convolutional layer?},
-        author={Shi, Wenzhe and Caballero, Jose and Theis, Lucas and Huszar, Ferenc and Aitken, Andrew and Ledig, Christian and Wang, Zehan},
-        journal={arXiv preprint arXiv:1609.07009},
-        year={2016},
-        url={https://arxiv.org/pdf/1609.07009.pdf}
-      }
-
-    </script></d-bibliography>
-
-  <distill-appendix> </distill-appendix>
 </d-appendix>
+
 </body>
@@ -1,8 +1,9 @@
@article{gregor2015draw,
  title={DRAW: A recurrent neural network for image generation},
  author={Gregor, Karol and Danihelka, Ivo and Graves, Alex and Rezende, Danilo Jimenez and Wierstra, Daan},
-  journal={arXivreprint arXiv:1502.04623},
-  year={2015}
+  journal={arXiv preprint arXiv:1502.04623},
+  year={2015},
+  url ={https://arxiv.org/pdf/1502.04623.pdf}
 }
@article{mercier2011humans,
  title={Why do humans reason? Arguments for an argumentative theory},
@@ -12,5 +13,87 @@
  number={02},
  pages={57--74},
  year={2011},
-  publisher={Cambridge Univ Press}
+  publisher={Cambridge Univ Press},
+  doi={10.1017/S0140525X10000968}
+}
+
+@article{dong2014image,
+  title={Image super-resolution using deep convolutional networks},
+  author={Dong, Chao and Loy, Chen Change and He, Kaiming and Tang, Xiaoou},
+  journal={arXiv preprint arXiv:1501.00092},
+  year={2014},
+  url={https://arxiv.org/pdf/1501.00092.pdf}
+}
+
+@article{dumoulin2016adversarially,
+  title={Adversarially Learned Inference},
+  author={Dumoulin, Vincent and Belghazi, Ishmael and Poole, Ben and Lamb, Alex and Arjovsky, Martin and Mastropietro, Olivier and Courville, Aaron},
+  journal={arXiv preprint arXiv:1606.00704},
+  year={2016},
+  url={https://arxiv.org/pdf/1606.00704.pdf}
+}
+
+@article{dumoulin2016guide,
+  title={A guide to convolution arithmetic for deep learning},
+  author={Dumoulin, Vincent and Visin, Francesco},
+  journal={arXiv preprint arXiv:1603.07285},
+  year={2016},
+  url={https://arxiv.org/pdf/1603.07285.pdf}
+}
+
+@article{gauthier2014conditional,
+  title={Conditional generative adversarial nets for convolutional face generation},
+  author={Gauthier, Jon},
+  journal={Class Project for Stanford CS231N: Convolutional Neural Networks for Visual Recognition, Winter semester},
+  volume={2014},
+  year={2014},
+  url={http://www.foldl.me/uploads/papers/tr-cgans.pdf}
+}
+
+@article{johnson2016perceptual,
+  title={Perceptual losses for real-time style transfer and super-resolution},
+  author={Johnson, Justin and Alahi, Alexandre and Fei-Fei, Li},
+  journal={arXiv preprint arXiv:1603.08155},
+  year={2016},
+  url={https://arxiv.org/pdf/1603.08155.pdf}
+}
+
+@article{mordvintsev2015inceptionism,
+  title={Inceptionism: Going deeper into neural networks},
+  author={Mordvintsev, Alexander and Olah, Christopher and Tyka, Mike},
+  journal={Google Research Blog},
+  year={2015},
+  url={https://research.googleblog.com/2015/06/inceptionism-going-deeper-into-neural.html}
+}
+
+@misc{mordvintsev2016deepdreaming,
+  title={DeepDreaming with TensorFlow},
+  author={Mordvintsev, Alexander},
+  year={2016},
+  url={https://github.com/tensorflow/tensorflow/blob/master/tensorflow/examples/tutorials/deepdream/deepdream.ipynb},
+}
+
+@article{radford2015unsupervised,
+  title={Unsupervised representation learning with deep convolutional generative adversarial networks},
+  author={Radford, Alec and Metz, Luke and Chintala, Soumith},
+  journal={arXiv preprint arXiv:1511.06434},
+  year={2015},
+  url={https://arxiv.org/pdf/1511.06434.pdf}
+}
+
+@inproceedings{salimans2016improved,
+  title={Improved techniques for training gans},
+  author={Salimans, Tim and Goodfellow, Ian and Zaremba, Wojciech and Cheung, Vicki and Radford, Alec and Chen, Xi},
+  booktitle={Advances in Neural Information Processing Systems},
+  pages={2226--2234},
+  year={2016},
+  url={https://arxiv.org/pdf/1606.03498.pdf}
+}
+
+@article{shi2016deconvolution,
+  title={Is the deconvolution layer the same as a convolutional layer?},
+  author={Shi, Wenzhe and Caballero, Jose and Theis, Lucas and Huszar, Ferenc and Aitken, Andrew and Ledig, Christian and Wang, Zehan},
+  journal={arXiv preprint arXiv:1609.07009},
+  year={2016},
+  url={https://arxiv.org/pdf/1609.07009.pdf}
 }
@@ -1,6 +1,6 @@
 {
  "name": "distill-template",
-  "version": "2.0.0",
+  "version": "2.1.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@@ -71,6 +71,23 @@
        }
      }
    },
+    "acorn-object-spread": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/acorn-object-spread/-/acorn-object-spread-1.0.0.tgz",
+      "integrity": "sha1-SOrQ9KjrFplaF6Dbn/xqyq2kumg=",
+      "dev": true,
+      "requires": {
+        "acorn": "3.3.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
+          "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo=",
+          "dev": true
+        }
+      }
+    },
    "ajv": {
      "version": "4.11.8",
      "resolved": "https://registry.npmjs.org/ajv/-/ajv-4.11.8.tgz",
@@ -100,8 +117,7 @@
    "amdefine": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
-      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
-      "optional": true
+      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
    },
    "ansi-escapes": {
      "version": "2.0.0",
@@ -852,6 +868,44 @@
        "pako": "0.2.9"
      }
    },
+    "buble": {
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/buble/-/buble-0.15.2.tgz",
+      "integrity": "sha1-VH/EdIP45egXbYKqXrzLGDsC1hM=",
+      "dev": true,
+      "requires": {
+        "acorn": "3.3.0",
+        "acorn-jsx": "3.0.1",
+        "acorn-object-spread": "1.0.0",
+        "chalk": "1.1.3",
+        "magic-string": "0.14.0",
+        "minimist": "1.2.0",
+        "os-homedir": "1.0.2"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
+          "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo=",
+          "dev": true
+        },
+        "magic-string": {
+          "version": "0.14.0",
+          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.14.0.tgz",
+          "integrity": "sha1-VyJK7xcByu7Sc7F6OalW5ysXJGI=",
+          "dev": true,
+          "requires": {
+            "vlq": "0.2.2"
+          }
+        },
+        "minimist": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+          "dev": true
+        }
+      }
+    },
    "buffer": {
      "version": "4.9.1",
      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
@@ -2605,14 +2659,6 @@
            }
          }
        },
-        "string_decoder": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "safe-buffer": "5.0.1"
-          }
-        },
        "string-width": {
          "version": "1.0.2",
          "bundled": true,
@@ -2623,6 +2669,14 @@
            "strip-ansi": "3.0.1"
          }
        },
+        "string_decoder": {
+          "version": "1.0.1",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "safe-buffer": "5.0.1"
+          }
+        },
        "stringstream": {
          "version": "0.0.5",
          "bundled": true,
@@ -2926,6 +2980,35 @@
      "integrity": "sha1-Dqd0NxXbjY3ixe3hd14bRayFwC8=",
      "dev": true
    },
+    "handlebars": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.0.10.tgz",
+      "integrity": "sha1-PTDHGLCaPZbyPqTMH0A8TTup/08=",
+      "dev": true,
+      "requires": {
+        "async": "1.5.2",
+        "optimist": "0.6.1",
+        "source-map": "0.4.4",
+        "uglify-js": "2.8.29"
+      },
+      "dependencies": {
+        "async": {
+          "version": "1.5.2",
+          "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
+          "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
+          "dev": true,
+          "requires": {
+            "amdefine": "1.0.1"
+          }
+        }
+      }
+    },
    "har-schema": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-1.0.5.tgz",
@@ -3181,6 +3264,11 @@
      "integrity": "sha1-y8NcYu7uc/Gat7EKgBURQBr8D5A=",
      "dev": true
    },
+    "intersection-observer": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.4.0.tgz",
+      "integrity": "sha512-hBECeRcNPMrQP02IlicMCDiL19KQweoWukv35juIVehB2lE+spel5UyfTux/YCkXaR8Zz0jq3xMZeWYZBAU2SA=="
+    },
    "invariant": {
      "version": "2.2.2",
      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.2.tgz",
@@ -3411,9 +3499,9 @@
      "dev": true
    },
    "jsdom": {
-      "version": "9.12.0",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-9.12.0.tgz",
-      "integrity": "sha1-6MVG//ywbADUgzyoRBD+1/igl9Q=",
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-11.2.0.tgz",
+      "integrity": "sha512-+5wd6vJuh/Evw3wkmCuKXKibDd5RS7PYZjKaP4s2Hj5W7tvmbuFuaDN4erbH07VznTBFcK+lcsrGVnP6EugXow==",
      "dev": true,
      "requires": {
        "abab": "1.0.3",
@@ -3426,22 +3514,29 @@
        "escodegen": "1.8.1",
        "html-encoding-sniffer": "1.0.1",
        "nwmatcher": "1.4.1",
-        "parse5": "1.5.1",
+        "parse5": "3.0.2",
+        "pn": "1.0.0",
        "request": "2.81.0",
+        "request-promise-native": "1.0.4",
        "sax": "1.2.4",
        "symbol-tree": "3.2.2",
        "tough-cookie": "2.3.2",
        "webidl-conversions": "4.0.1",
        "whatwg-encoding": "1.0.1",
-        "whatwg-url": "4.8.0",
+        "whatwg-url": "6.1.0",
        "xml-name-validator": "2.0.1"
      },
      "dependencies": {
-        "parse5": {
-          "version": "1.5.1",
-          "resolved": "https://registry.npmjs.org/parse5/-/parse5-1.5.1.tgz",
-          "integrity": "sha1-m387DeMr543CQBsXVzzK8Pb1nZQ=",
-          "dev": true
+        "whatwg-url": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-6.1.0.tgz",
+          "integrity": "sha1-X8gnm5PXVIO5ztiyYjmFSEehhXg=",
+          "dev": true,
+          "requires": {
+            "lodash.sortby": "4.7.0",
+            "tr46": "0.0.3",
+            "webidl-conversions": "4.0.1"
+          }
        }
      }
    },
@@ -3710,6 +3805,12 @@
      "integrity": "sha1-G7nzFO9ri63tE7VJFpsqlF62jk0=",
      "dev": true
    },
+    "lodash.sortby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
+      "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
+      "dev": true
+    },
    "longest": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
@@ -4121,6 +4222,24 @@
      "integrity": "sha1-XG2ixdflgx6P+jlklQ+NZnSskLg=",
      "dev": true
    },
+    "optimist": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
+      "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
+      "dev": true,
+      "requires": {
+        "minimist": "0.0.8",
+        "wordwrap": "0.0.3"
+      },
+      "dependencies": {
+        "wordwrap": {
+          "version": "0.0.3",
+          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
+          "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc=",
+          "dev": true
+        }
+      }
+    },
    "optionator": {
      "version": "0.8.2",
      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
@@ -4699,13 +4818,10 @@
      }
    },
    "rollup": {
-      "version": "0.45.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.45.2.tgz",
-      "integrity": "sha512-2+bq5GQSrocdhr+M92mOQRmF1evtLRzv9NdmEC2wo7BILvTG8irHCtD0q+zg8ikNu63iJicdN5IzyxAXRTFKOQ==",
-      "dev": true,
-      "requires": {
-        "source-map-support": "0.4.15"
-      }
+      "version": "0.49.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.49.2.tgz",
+      "integrity": "sha512-9mySqItSwq5/dXYQyFGrrzqV282EZfz4kSCU2m4e6OjgqLmIsp9zK6qNQ6wbBWR4EhASEqQMBQ/IF45jaNPAtw==",
+      "dev": true
    },
    "rollup-plugin-babili": {
      "version": "3.1.0",
@@ -4718,6 +4834,34 @@
        "babel-preset-babili": "0.1.4"
      }
    },
+    "rollup-plugin-buble": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-buble/-/rollup-plugin-buble-0.15.0.tgz",
+      "integrity": "sha1-g8PonH/SJmx5GPQbo5gDE1Gcf9A=",
+      "dev": true,
+      "requires": {
+        "buble": "0.15.2",
+        "rollup-pluginutils": "1.5.2"
+      },
+      "dependencies": {
+        "estree-walker": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.2.1.tgz",
+          "integrity": "sha1-va/oCVOD2EFNXcLs9MkXO225QS4=",
+          "dev": true
+        },
+        "rollup-pluginutils": {
+          "version": "1.5.2",
+          "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz",
+          "integrity": "sha1-HhVud4+UtyVb+hs9AXi+j1xVJAg=",
+          "dev": true,
+          "requires": {
+            "estree-walker": "0.2.1",
+            "minimatch": "3.0.4"
+          }
+        }
+      }
+    },
    "rollup-plugin-commonjs": {
      "version": "7.1.0",
      "resolved": "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-7.1.0.tgz",
@@ -4741,6 +4885,15 @@
        "fs-extra": "3.0.1"
      }
    },
+    "rollup-plugin-grapher": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-grapher/-/rollup-plugin-grapher-0.2.0.tgz",
+      "integrity": "sha1-FtbJZkRfV6LgjDgFiFCUuZsiyv4=",
+      "dev": true,
+      "requires": {
+        "handlebars": "4.0.10"
+      }
+    },
    "rollup-plugin-gzip": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/rollup-plugin-gzip/-/rollup-plugin-gzip-1.2.0.tgz",
@@ -5050,15 +5203,6 @@
        "xtend": "4.0.1"
      }
    },
-    "string_decoder": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "5.1.1"
-      }
-    },
    "string-width": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
@@ -5086,6 +5230,15 @@
        }
      }
    },
+    "string_decoder": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "5.1.1"
+      }
+    },
    "stringstream": {
      "version": "0.0.5",
      "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
@@ -1,8 +1,11 @@
 {
  "name": "distill-template",
-  "version": "2.0.0-alpha",
+  "version": "2.1.0",
  "description": "Template for creating Distill articles.",
-  "main": "dist/template.js",
+  "main": "dist/template.v2.js",
+  "bin": {
+    "distill-render": "./bin/render.js"
+  },
  "author": "Shan Carter",
  "homepage": "https://github.com/distillpub/distill-template#readme",
  "bugs": {
@@ -10,10 +13,11 @@
  },
  "scripts": {
    "start": "rollup -c rollup.config.dev.js -w",
-    "serve": "python3 -m http.server --bind 127.0.0.1",
+    "serve": "python3 -m http.server --bind 127.0.0.1 8888",
    "test": "mocha",
    "lint": "eslint",
-    "build": "rollup -c rollup.config.js"
+    "build": "rollup -c rollup.config.js",
+    "prepublishOnly": "npm run build"
  },
  "repository": {
    "url": "git+https://github.com/distillpub/distill-template.git",
@@ -26,14 +30,16 @@
    "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",
    "rollup": "latest",
    "rollup-plugin-babili": "^3.1.0",
+    "rollup-plugin-buble": "^0.15.0",
    "rollup-plugin-commonjs": "^7.0.0",
    "rollup-plugin-copy": "^0.2.3",
+    "rollup-plugin-grapher": "^0.2.0",
    "rollup-plugin-gzip": "^1.2.0",
    "rollup-plugin-node-resolve": "^2.0.0",
    "rollup-plugin-serve": "^0.1.0",
@@ -1,19 +1,24 @@
 import resolve  from 'rollup-plugin-node-resolve';
 import string   from 'rollup-plugin-string';
 import commonjs from 'rollup-plugin-commonjs';
+import buble    from 'rollup-plugin-buble';
+
+// uncomment to show dependencies [1/2]
+// import rollupGrapher from 'rollup-plugin-grapher'

 const componentsConfig = {
-  entry: 'src/components.js',
-  targets: [{format: 'umd', moduleName: 'dl', dest: 'dist/template.v2.js'}],
+  input: 'src/components.js',
+  output: [{ format: 'umd', name: 'dl', file: 'dist/template.v2.js' }],
 };

 const transformsConfig = {
-  entry: 'src/transforms.js',
-  targets: [{format: 'umd', moduleName: 'dl', dest: 'dist/transforms.v2.js'}],
+  input: 'src/transforms.js',
+  output: [{ format: 'umd', name: 'dl', file: 'dist/transforms.v2.js', globals: {fs: 'fs'} }],
+  external: ['fs']
 };

 const defaultConfig = {
-  sourceMap: true,
+  sourcemap: true,
  plugins: [
    resolve({
      jsnext: true,
@@ -23,12 +28,28 @@ const defaultConfig = {
      include: ['**/*.txt', '**/*.svg', '**/*.html', '**/*.css', '**/*.base64']
    }),
    commonjs(),
+
  ]
 };

 Object.assign(componentsConfig, defaultConfig);
 Object.assign(transformsConfig, defaultConfig);

+// transpile transforms so the node render script works…
+transformsConfig.plugins.push(
+  buble({
+    target: { 'node': 6 }
+  })
+);
+
+// uncomment to show dependencies [2/2]
+// transformsConfig.plugins.push(
+//   rollupGrapher({
+//     dest: '/dev/null',
+//     verbose: true
+//   })
+// );
+
 export default [
  componentsConfig,
  transformsConfig,
@@ -1,28 +1,30 @@
 /* Static styles and other modules */
-import './styles/styles';
+import { makeStyleTag } from './styles/styles';
+makeStyleTag(document);

 /* Components */
-import { Abstract }         from './components/d-abstract';
-import { Acknowledgements } from './components/d-acknowledgements';
-import { Appendix }         from './components/d-appendix';
-import { Article }          from './components/d-article';
-import { Bibliography }     from './components/d-bibliography';
-import { Byline }           from './components/d-byline';
-import { Cite }             from './components/d-cite';
-import { Code }             from './components/d-code';
-import { Footnote }         from './components/d-footnote';
-import { FootnoteList }     from './components/d-footnote-list';
-import { FrontMatter }      from './components/d-front-matter';
-import { DMath }            from './components/d-math';
-import { References }       from './components/d-references';
-import { Title }            from './components/d-title';
-import { TOC }              from './components/d-toc';
-import { Figure }           from './components/d-figure';
+import { Abstract }     from './components/d-abstract';
+import { Appendix }     from './components/d-appendix';
+import { Article }      from './components/d-article';
+import { Bibliography } from './components/d-bibliography';
+import { Byline }       from './components/d-byline';
+import { Cite }         from './components/d-cite';
+import { CitationList } from './components/d-citation-list';
+import { Code }         from './components/d-code';
+import { Footnote }     from './components/d-footnote';
+import { FootnoteList } from './components/d-footnote-list';
+import { FrontMatter }  from './components/d-front-matter';
+import { Title }        from './components/d-title';
+import { DMath }        from './components/d-math';
+import { References }   from './components/d-references';
+import { TOC }          from './components/d-toc';
+import { Figure }       from './components/d-figure';
+import { Interstitial } from './components/d-interstitial';

 const components = [
-  Abstract, Acknowledgements, Appendix, Article, Bibliography,
-  Byline, Cite, Code, Footnote, FootnoteList, FrontMatter, DMath,
-  References, Title, TOC, Figure,
+  Abstract, Appendix, Article, Bibliography, Byline, Cite, CitationList, Code,
+  Footnote, FootnoteList, FrontMatter, Title, DMath, References, TOC, Figure,
+  Interstitial,
 ];

 /* Distill website specific components */
@@ -5,9 +5,18 @@ const T = Template('d-abstract', `
 <style>
  :host {
    display: block;
-    font-size: 23px;
-    line-height: 1.7em;
-    margin-bottom: 140px;
+    font-size: 1.25rem;
+    line-height: 1.6em;
+    padding-bottom: 1.5em;
+    color: rgba(0, 0, 0, 0.7);
+    font-family: georgia, serif;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  ::slotted(p) {
+    margin-top: 0;
+    margin-bottom: 0;
+    grid-column: text-start / middle-end;
  }
  ${body('d-abstract')}
 </style>
@@ -1,23 +0,0 @@
-import { Template } from '../mixins/template';
-
-const T = Template('d-acknowledgements', `
-<style>
-::slotted(h3) {
-  font-size: 15px;
-  font-weight: 500;
-  margin-top: 20px;
-  margin-bottom: 0;
-  color: rgba(0,0,0,0.65);
-  line-height: 1em;
-}
-::slotted(*) a {
-  color: rgba(0, 0, 0, 0.6);
-}
-</style>
-
-<slot></slot>
-`);
-
-export class Acknowledgements extends T(HTMLElement) {
-
-}
@@ -4,29 +4,38 @@ import { body } from '../helpers/layout';
 const T = Template('d-appendix', `
 <style>

-:host {
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-
+d-appendix {
+  contain: content;
  font-size: 13px;
  line-height: 1.7em;
  margin-bottom: 0;
  border-top: 1px solid rgba(0,0,0,0.1);
  color: rgba(0,0,0,0.5);
-  background: hsl(180, 5%, 98%);
  padding-top: 36px;
  padding-bottom: 48px;
 }

-${body('.content')}
+d-appendix h3 {
+  grid-column: page-start / text-start;
+  font-size: 15px;
+  font-weight: 500;
+  margin-top: 20px;
+  margin-bottom: 0;
+  color: rgba(0,0,0,0.65);
+  line-height: 1em;
+}
+
+d-appendix a {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+d-appendix > * {
+  grid-column: text;
+}

 </style>

-<div class='content'>
-<slot></slot>
-</div>
-`, true);
+`, false);

 export class Appendix extends T(HTMLElement) {

@@ -1,21 +1,11 @@
 import { Template } from '../mixins/template';
 import { Controller } from '../controller';
-
-const T = Template('d-article', `
-<style></style>
-`, false);
-
-// export function addInferableTags(dom, frontMatter) {
-//   const title = frontMatter.title;
-//   if (title) {
-//     const titleTag = document.querySelector()
-//
-//   }
-// }
+import style from '../styles/d-article.css';

 const isOnlyWhitespace = /^\s*$/;

-export class Article extends T(HTMLElement) {
+export class Article extends HTMLElement {
+  static get is() { return 'd-article'; }

  constructor() {
    super();
@@ -1,90 +1,46 @@
-import { Template } from '../mixins/template';
 import { parseBibtex } from '../helpers/bibtex';
-import { bibliography_cite } from '../helpers/citation';
-
-export const templateString = `
-<style>
-  .references {
-    font-size: 12px;
-    line-height: 20px;
-  }
-  .title {
-    font-weight: 600;
-  }
-  ol {
-    padding: 0 0 0 18px;
-  }
-  li {
-    margin-bottom: 12px;
-  }
-  h3 {
-    font-size: 15px;
-    font-weight: 500;
-    margin-top: 20px;
-    margin-bottom: 0;
-    color: rgba(0,0,0,0.65);
-    line-height: 1em;
-  }
-  a {
-    color: rgba(0, 0, 0, 0.6);
-  }
-</style>
-
-<h3>References</h3>
-<ol class='references' id='references-list' ></ol>
-`;
-const T = Template('d-bibliography', templateString);

 export function parseBibliography(element) {
  if (element.firstElementChild && element.firstElementChild.tagName === 'SCRIPT') {
    const bibtex = element.firstElementChild.textContent;
-    const bibliography = parseBibtex(bibtex);
-    return bibliography;
+    return parseBibtex(bibtex);
  }
 }

-export function renderBibliography(element, entries) {
-  if (entries.size) {
-    element.host.style.display = 'initial';
-    let list = element.querySelector('#references-list');
-    list.innerHTML = '';
+export class Bibliography extends HTMLElement {

-    for (const [key, entry] of entries) {
-      const listItem = document.createElement('li');
-      listItem.id = key;
-      listItem.innerHTML = bibliography_cite(entry);
-      list.appendChild(listItem);
-    }
-  } else {
-    element.host.style.display = 'none';
-  }
-}
-
-export class Bibliography extends T(HTMLElement) {
+  static get is() { return 'd-bibliography'; }

  constructor() {
    super();

    // set up mutation observer
    const options = {childList: true, characterData: true, subtree: true};
-    const observer = new MutationObserver( () => {
-      observer.disconnect();
-      this.parseIfPossible();
-      observer.observe(this, options);
+    const observer = new MutationObserver( (entries) => {
+      for (const entry of entries) {
+        if (entry.target.nodeName === 'SCRIPT' || entry.type === 'characterData') {
+          this.parseIfPossible();
+        }
+      }
    });
-    this.parseIfPossible();
-    // ...and listen for changes
    observer.observe(this, options);
  }

  parseIfPossible() {
-    if (this.firstElementChild && this.firstElementChild.tagName === 'SCRIPT') {
-      const newBibtex = this.firstElementChild.textContent;
+    const scriptTag = this.querySelector('script');
+    if (!scriptTag) return;
+    if (scriptTag.type == 'text/bibtex') {
+      const newBibtex = scriptTag.textContent;
      if (this.bibtex !== newBibtex) {
        this.bibtex = newBibtex;
        const bibliography = parseBibtex(this.bibtex);
        this.notify(bibliography);
      }
+    } else if (scriptTag.type == 'text/json') {
+      const bibliography = new Map(JSON.parse(scriptTag.textContent));
+      this.notify(bibliography);
+    } else {
+      console.warn('Unsupported bibliography script tag type: ' + scriptTag.type);
    }
  }

@@ -94,8 +50,25 @@ export class Bibliography extends T(HTMLElement) {
    this.dispatchEvent(event);
  }

-  set entries(newEntries) {
-    renderBibliography(this.root, newEntries);
+  /* observe 'src' attribute */
+
+  static get observedAttributes() {
+    return ['src'];
  }

+  receivedBibtex(event) {
+    const bibliography = parseBibtex(event.target.response);
+    this.notify(bibliography);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    var oReq = new XMLHttpRequest();
+    oReq.onload = (e) => this.receivedBibtex(e);
+    oReq.onerror = () => console.warn(`Could not load Bibtex! (tried ${newValue})`);
+    oReq.responseType = 'text';
+    oReq.open('GET', newValue, true);
+    oReq.send();
+  }
+
+
 }
@@ -1,158 +1,48 @@
-import { Template } from '../mixins/template';
-import { page } from '../helpers/layout';
-
-const T = Template('d-byline', `
-<style>
-  :host {
-    box-sizing: border-box;
-    font-size: 13px;
-    line-height: 20px;
-    display: block;
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-    color: rgba(0, 0, 0, 0.6);
-    padding-top: 20px;
-    padding-bottom: 20px;
-  }
-  ${page('.byline')}
-  d-article.centered {
-    text-align: center;
-  }
-  a,
-  d-article a {
-    color: rgba(0, 0, 0, 0.8);
-    text-decoration: none;
-    border-bottom: none;
-  }
-  d-article a:hover {
-    text-decoration: underline;
-    border-bottom: none;
-  }
-  .authors {
-    text-align: left;
-  }
-  .name {
-    font-weight: 600;
-    display: inline;
-    text-transform: uppercase;
-  }
-  .affiliation {
-    display: inline;
-  }
-  .date {
-    display: block;
-    text-align: left;
-    margin-top: 8px;
-  }
-  .year, .month {
-    display: inline;
-  }
-  .citation {
-    display: block;
-    text-align: left;
-  }
-  .citation div {
-    display: inline;
-  }
-
-  @media screen and (min-width: 768px), print {
-    d-byline {
-      border-bottom: none;
-    }
-
-    a:hover {
-      color: rgba(0, 0, 0, 0.9);
-    }
-
-    .authors {
-      display: inline-block;
-    }
-
-    .author {
-      display: inline-block;
-      margin-right: 12px;
-      /*padding-left: 20px;*/
-      /*border-left: 1px solid #ddd;*/
-    }
-
-    .affiliation {
-      display: block;
-    }
-
-    .author:last-child {
-      margin-right: 0;
-    }
-
-    .name {
-      display: block;
-    }
-
-    .date {
-
-      border-left: 1px solid rgba(0, 0, 0, 0.1);
-      padding-left: 15px;
-      margin-left: 15px;
-      margin-top: 0;
-      display: inline-block;
-    }
-    .year, .month {
-      display: block;
-    }
-
-    .citation {
-      align-self: flex-end;
-      border-left: 1px solid rgba(0, 0, 0, 0.15);
-      padding-left: 15px;
-      margin-left: 15px;
-      display: inline-block;
-    }
-    .citation div {
-      display: block;
-    }
-
-    .byline {
-      display: flex;
-      min-height: 40px;
-    }
-  }
-</style>
-
-<div class='byline'>
-</div>
-`, true);
+import style from '../styles/d-byline.css';

 export function bylineTemplate(frontMatter) {
  return `
-  <div class="authors">
-    ${frontMatter.authors.map( author => `<div class="author">
-      ${author.personalURL ?
-    `<a class="name" href="${author.personalURL}">${author.name}</a>`
-    :
-    `<div class="name">${author.name}</div>`
-}
-      ${author.affiliationURL ?
-    `<a class="affiliation" href="${author.affiliationURL}">${author.affiliation}</a>`
-    :
-    `<div class="affiliation">${author.affiliation}</div>`
-}
-    </div>`).join('\n')}
+  <div class="byline grid">
+    <div class="authors">
+      <h3>Authors</h3>
+      ${frontMatter.authors.map(author => `
+        <p>
+          ${author.personalURL
+            ? `<a class="name" href="${author.personalURL}">${author.name}</a>`
+            : `<div class="name">${author.name}</div>`
+          }
+        </pdiv>
+      `).join("")}
+    </div>
+    <div class="affiliations">
+      <h3>Affiliations</h3>
+      ${frontMatter.authors.map(author => `
+        <p>
+          ${author.affiliationURL
+            ? `<a class="affiliation" href="${author.affiliationURL}">${author.affiliation}</a>`
+            : `<div class="affiliation">${author.affiliation}</div>`
+          }
+        </p>
+      `).join("")}
+    </div>
+    <div>
+      <h3>Published</h3>
+      <p>${frontMatter.publishedMonth}. ${frontMatter.publishedDay} ${frontMatter.publishedYear}</p>
+    </div>
+    <div>
+      <h3>DOI</h3>
+      <p>${frontMatter.doi}</p>
+    </div>
  </div>
-  <div class="date">
-    <div class="month">${frontMatter.publishedMonth}. ${frontMatter.publishedDay}</div>
-    <div class="year">${frontMatter.publishedYear}</div>
-  </div>
-  <a class="citation" href="#citation">
-    <div>Citation:</div>
-    <div>${frontMatter.concatenatedAuthors}, ${frontMatter.publishedYear}</div>
-  </a>
-  `;
+`;
 }

-export class Byline extends T(HTMLElement) {
+export class Byline extends HTMLElement {
+
+  static get is() { return 'd-byline'; }

  set frontMatter(frontMatter) {
-    const container = this.root.querySelector('.byline');
-    container.innerHTML = bylineTemplate(frontMatter);
+    this.innerHTML = bylineTemplate(frontMatter);
  }

 }
@@ -0,0 +1,68 @@
+import { Template } from '../mixins/template';
+import { bibliography_cite } from '../helpers/citation';
+
+const T = Template('d-citation-list', `
+<style>
+
+:host {
+  contain: content;
+}
+.references {
+  font-size: 12px;
+  line-height: 20px;
+}
+.title {
+  font-weight: 600;
+}
+ol {
+  padding: 0 0 0 18px;
+}
+li {
+  margin-bottom: 12px;
+}
+h3 {
+  font-size: 15px;
+  font-weight: 500;
+  margin-top: 20px;
+  margin-bottom: 0;
+  color: rgba(0,0,0,0.65);
+  line-height: 1em;
+}
+a {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+</style>
+
+<h3>References</h3>
+<ol class='references' id='references-list' ></ol>
+`);
+
+export function renderCitationList(element, entries) {
+  if (entries.size > 0) {
+    element.host.style.display = 'initial';
+    const list = element.querySelector('#references-list');
+    list.innerHTML = '';
+
+    for (const [key, entry] of entries) {
+      const listItem = document.createElement('li');
+      listItem.id = key;
+      listItem.innerHTML = bibliography_cite(entry);
+      list.appendChild(listItem);
+    }
+  } else {
+    element.host.style.display = 'none';
+  }
+}
+
+export class CitationList extends T(HTMLElement) {
+
+  connectedCallback() {
+    this.root.host.style.display = 'none';
+  }
+
+  set citations(citations) {
+    renderCitationList(this.root, citations);
+  }
+
+}
@@ -1,5 +1,5 @@
 import { Template } from '../mixins/template';
-import { hover_cite } from '../helpers/citation';
+import { hover_cite, bibliography_cite } from '../helpers/citation';
 import { HoverBox } from '../helpers/hover-box';

 const T = Template('d-cite', `
@@ -69,7 +69,6 @@ export class Cite extends T(HTMLElement) {
    // this.hoverDiv.id = `dt-cite-hover-box-${this.citeId}`;
    // console.log(this, this.hoverDiv, this.outerSpan, this.innerSpan);
    this.hoverbox = new HoverBox(this.hoverDiv, this.outerSpan);
-
  }

  disconnectedCallback() {
@@ -20,9 +20,8 @@ code {

 pre code {
  display: block;
-  background: white;
-  border-left: 3px solid rgba(0, 0, 0, 0.05);
-  padding: 0 0 0 24px;
+  border-left: 2px solid rgba(0, 0, 0, .1);
+  padding: 0 0 0 36px;
 }

 ${css}
@@ -17,8 +17,39 @@ export class Figure extends HTMLElement {

  static get is() { return 'd-figure'; }

+  static get readyQueue() {
+    if (!Figure._readyQueue) {
+      Figure._readyQueue = [];
+    }
+    return Figure._readyQueue;
+  }
+
+  static addToReadyQueue(figure) {
+    if (Figure.readyQueue.indexOf(figure) === -1) {
+      Figure.readyQueue.push(figure);
+      Figure.runReadyQueue();
+    }
+  }
+
+  static runReadyQueue() {
+    // console.log("Checking to run readyQueue, length: " + Figure.readyQueue.length + ", scrolling: " + Figure.isScrolling);
+    if (Figure.isScrolling) return;
+
+    // console.log("Running ready Queue");
+    const figure = Figure.readyQueue
+      .sort((a,b) => a._seenOnScreen - b._seenOnScreen )
+      .filter((figure) => !figure._ready)
+      .pop();
+    if (figure) {
+      figure.ready();
+      requestAnimationFrame(Figure.runReadyQueue);
+    }
+
+  }
+
  constructor() {
    super();
+    // debugger
    this._ready = false;
    this._onscreen = false;
    this._offscreen = true;
@@ -54,7 +85,7 @@ export class Figure extends HTMLElement {
    for (const entry of entries) {
      const figure = entry.target;
      if (entry.isIntersecting && !figure._ready) {
-        figure.ready();
+        Figure.addToReadyQueue(figure);
      }
    }
  }
@@ -74,7 +105,8 @@ export class Figure extends HTMLElement {
    for (const entry of entries) {
      const figure = entry.target;
      if (entry.isIntersecting) {
-        if (!figure._ready) { figure.ready(); }
+        figure._seenOnScreen = new Date();
+        // if (!figure._ready) { figure.ready(); }
        if (figure._offscreen) { figure.onscreen(); }
      } else {
        if (figure._onscreen) { figure.offscreen(); }
@@ -87,19 +119,22 @@ export class Figure extends HTMLElement {
  addEventListener(eventName, callback) {
    super.addEventListener(eventName, callback);
    // if we had already dispatched something while presumingly no one was listening, we do so again
-    setTimeout(() => {
-      if (this._ready && eventName === 'ready') {
-        this.ready();
+    // debugger
+    if (eventName === 'ready') {
+      if (Figure.readyQueue.indexOf(this) !== -1) {
+        this._ready = false;
+        Figure.runReadyQueue();
      }
-      if (this._onscreen && eventName === 'onscreen') {
-        this.onscreen();
-      }
-    }, 1);
+    }
+    if (eventName === 'onscreen') {
+      this.onscreen();
+    }
  }

  // Custom Events

  ready() {
+    // debugger
    this._ready = true;
    Figure.marginObserver.unobserve(this);
    const event = new CustomEvent('ready');
@@ -121,3 +156,20 @@ export class Figure extends HTMLElement {
  }

 }
+
+if (typeof window !== 'undefined') {
+
+  Figure.isScrolling = false;
+  let timeout;
+  const resetTimer = () => {
+    Figure.isScrolling = true;
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      Figure.isScrolling = false;
+      console.log('Stopped Scrolling')
+      Figure.runReadyQueue();
+    }, 500);
+  };
+  window.addEventListener('scroll', resetTimer, true);
+
+}
@@ -2,6 +2,14 @@ import { Template } from '../mixins/template';

 const T = Template('d-footnote-list', `
 <style>
+:host {
+  contain: content;
+}
+
+* {
+  grid-column: text;
+}
+
 ol {
  padding: 0 0 0 18px;
 }
@@ -1,6 +1,5 @@
 import { Template } from '../mixins/template.js';
 import { HoverBox } from '../helpers/hover-box';
-// import { Store } from './store';

 const T = Template('d-footnote', `
 <style>
@@ -9,13 +8,28 @@ d-math[block] {
  display: block;
 }

+sup {
+  line-height: 1em;
+  font-size: 0.75em;
+  position: relative;
+  top: 0;
+  vertical-align: baseline;
+  position: relative;
+  top: -6px;
+}
+
+span {
+  color: hsla(206, 90%, 20%, 0.7);
+  cursor: default;
+}
+
 </style>

 <div id="hover-box" class="dt-hover-box">
  <slot id="slot"></slot>
 </div>

-<sup><span id="fn-" data-hover-ref="" style="cursor:pointer"></span></sup>
+<sup><span id="fn-" data-hover-ref=""></span></sup>

 `);

@@ -1,15 +1,17 @@
-import ymlParse from 'js-yaml';
-
 export function parseFrontmatter(element) {
  const scriptTag = element.querySelector('script');
  if (scriptTag) {
-    const yml = scriptTag.textContent;
-    const data = ymlParse.safeLoad(yml);
-    return data;
+    const type = scriptTag.getAttribute('type');
+    if (type.split('/')[1] == 'json') {
+      const content = scriptTag.textContent;
+      return JSON.parse(content);
+    } else {
+      console.error('Distill only supports JSON frontmatter tags anymore; no more YAML.');
+    }
  } else {
    console.error('You added a frontmatter tag but did not provide a script tag with front matter data in it. Please take a look at our templates.');
-    return {};
  }
+  return {};
 }

 export class FrontMatter extends HTMLElement {
@@ -19,10 +21,10 @@ export class FrontMatter extends HTMLElement {
  constructor() {
    super();

-    const options = {childList: true};
+    const options = {childList: true, characterData: true, subtree: true};
    const observer = new MutationObserver( (entries) => {
      for (const entry of entries) {
-        if (entry.target.nodeName === 'SCRIPT') {
+        if (entry.target.nodeName === 'SCRIPT' || entry.type === 'characterData') {
          const data = parseFrontmatter(this);
          this.notify(data);
        }
@@ -0,0 +1,114 @@
+import { Template } from '../mixins/template';
+
+// This overlay is not secure.
+// It is only meant as a social deterrent.
+
+const T = Template('d-interstitial', `
+<style>
+
+.overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: white;
+
+  opacity: 1;
+  visibility: visible;
+
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  z-index: 2147483647 /* MaxInt32 */
+
+}
+
+.overlay.transparent {
+  background: hsla(0, 0%, 100%, 0.7);
+  transition: background 1s;
+}
+
+.container {
+  position: relative;
+  left: 25%;
+  width: 50%;
+}
+
+h1 {
+  text-decoration: underline;
+  text-decoration-color: hsl(0,100%,40%);
+  margin-bottom: 1em;
+}
+
+input[type="password"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  -webkit-border-radius: none;
+  -moz-border-radius: none;
+  -ms-border-radius: none;
+  -o-border-radius: none;
+  border-radius: none;
+  outline: none;
+
+  font-size: 18px;
+  background: none;
+  width: 25%;
+  padding: 10px;
+  border: none;
+  border-bottom: solid 2px #999;
+  transition: border .3s;
+}
+
+input[type="password"]:focus {
+  border-bottom: solid 2px #333;
+}
+
+input[type="password"].wrong {
+  border-bottom: solid 2px hsl(0,100%,40%);
+}
+
+p small {
+  color: #888;
+}
+
+</style>
+
+<div class="overlay">
+  <div class="container">
+    <h1>This article is in review.</h1>
+    <p>Do not share this URL, or the contents of this article. Thank you!</p>
+    <input id="interstitial-password-input" type="password" name="password" autofocus/>
+    <p><small>Enter the password we shared with you as part of the review process to view the article.</small></p>
+  </div>
+</div>
+`);
+
+export class Interstitial extends T(HTMLElement) {
+
+  connectedCallback() {
+    const passwordInput = this.root.querySelector('#interstitial-password-input');
+    passwordInput.oninput = (event) => this.passwordChanged(event);
+    setTimeout(() => {
+      this.article = document.querySelector('d-article');
+      this.article.style = 'filter: blur(15px)';
+      const overlay = this.root.querySelector('.overlay');
+      overlay.classList.add('transparent');
+    }, 500);
+  }
+
+  passwordChanged(event) {
+    const entered = event.target.value;
+    if (entered === this.password) {
+      console.log('Correct password entered.');
+      event.target.classList.add('right');
+      this.article.style = '';
+      this.parentElement.removeChild(this);
+    }
+  }
+
+}
@@ -2,59 +2,99 @@
 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">';
+import style from '../styles/d-math.css';
+
+// 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', `
+${katexCSSTag}
 <style>

-d-math[block] {
+:host {
+  display: inline-block;
+  contain: content;
+}
+
+:host([block]) {
  display: block;
 }

+${style}
 </style>
-
-${katexCSSTag}
-
-<span id="katex-container"></span>
+<span id='katex-container'></span>
 `);

-
-// 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 = {
+        delimiters: [ { 'left':'$', 'right':'$', 'display':true } ]
+      };
+    }
+    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() {
+    // css tag can use this convenience function
+    document.head.insertAdjacentHTML('beforeend', katexCSSTag);
+    // 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);
+
+    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);
    }
  }

 }

 DMath.katexAdded = false;
+DMath.inlineMathRendered = false;
 window.DMath = DMath; // TODO: check if this can be removed, or if we should expose a distill global
@@ -1,59 +1,37 @@
 import { Template } from '../mixins/template';
-import { page } from '../helpers/layout';

 const T = Template('d-title', `
 <style>
-
-:host {
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-  margin-bottom: 64px;
-}
-
-
-::slotted(h1) {
-  padding-top: 16px;
-  padding-bottom: 16px;
-  margin: 0;
-  line-height: 1.3;
-  font-size: 32px;
-  font-weight: 700;
-}
-
-::slotted(h2) {
-  border-bottom: none !important;
-}
-
-@media screen and (min-width: 768px), print {
-  ::slotted(h1) {
-    font-size: 42px;
-    padding-bottom: 32px;
+  :host {
+    padding-top: 1rem;
+    contain: content;
+    display: block;
  }
-}
-@media(min-width: 1024px) {
  ::slotted(h1) {
-    padding-top: 64px;
-    padding-bottom: 32px;
-    font-size: 48px;
+    grid-column: text-start / span 5;
+    font-size: 50px;
+    font-weight: 700;
+    line-height: 1.05em;
+    margin: 0 0 0.5rem;
  }
-}
-@media(min-width: 1280px) {
-  ::slotted(h1) {
-    padding-top: 96px;
-    padding-bottom: 32px;
-    font-size: 56px;
+  .status {
+    margin-top: 0px;
+    font-size: 12px;
+    color: #009688;
+    opacity: 0.8;
+    grid-column: kicker;
+  }
+  .status span {
+    line-height: 1;
+    display: inline-block;
+    padding: 6px 0;
+    border-bottom: 1px solid #80cbc4;
+    font-size: 11px;
+    text-transform: uppercase;
  }
-}
-
-d-byline {
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-${page('::slotted(h1), ::slotted(h2)')}
-
 </style>

+<div class="status"><span>✓ Peer Reviewed</span></div>
 <slot></slot>
 `);

@@ -1,13 +1,66 @@
-import {Template} from '../mixins/template';
+export class TOC extends HTMLElement {

-const T = Template('d-toc', `
-<style>
-d-toc {
-  display: block;
-}
-</style>
-`, false);
+  static get is() { return 'd-toc'; }

-export class TOC extends T(HTMLElement) {
+  connectedCallback() {
+    if (!this.getAttribute('prerendered')) {
+      window.onload = () => {
+        const article = document.querySelector('d-article');
+        const headings = article.querySelectorAll('h2, h3');
+        renderTOC(this, headings);
+      };
+    }
+  }

 }
+
+export function renderTOC(element, headings) {
+
+  let ToC =`
+  <style>
+
+  d-toc {
+    contain: content;
+    display: block;
+  }
+
+  d-toc ul {
+    padding-left: 0;
+  }
+
+  d-toc ul > ul {
+    padding-left: 24px;
+  }
+
+  d-toc a {
+    border-bottom: none;
+    text-decoration: none;
+  }
+
+  </style>
+  <nav role="navigation" class="table-of-contents"></nav>
+  <h2>Table of contents</h2>
+  <ul>`;
+
+  for (const el of headings) {
+    // should element be included in TOC?
+    const isInTitle = el.parentElement.tagName == 'D-TITLE';
+    const isException = el.getAttribute('no-toc');
+    if (isInTitle || isException) continue;
+    // create TOC entry
+    const title = el.textContent;
+    const link = '#' + el.getAttribute('id');
+
+    let newLine = '<li>' + '<a href="' + link + '">' + title + '</a>' + '</li>';
+    if (el.tagName == 'H3') {
+      newLine = '<ul>' + newLine + '</ul>';
+    } else {
+      newLine += '<br>';
+    }
+    ToC += newLine;
+
+  }
+
+  ToC += '</ul></nav>';
+  element.innerHTML = ToC;
+}
@@ -1,6 +1,8 @@
 import { FrontMatter } from './front-matter';
+import { DMath } from './components/d-math';
 import { collectCitations } from './components/d-cite';
 import { parseFrontmatter } from './components/d-front-matter';
+import optionalComponents from './transforms/optional-components';

 const frontMatter = new FrontMatter();

@@ -47,11 +49,11 @@ export const Controller = {
      }

      // update bibliography
-      const bibliographyTag = document.querySelector('d-bibliography');
+      const citationListTag = document.querySelector('d-citation-list');
      const bibliographyEntries = new Map(frontMatter.citations.map( citationKey => {
        return [citationKey, frontMatter.bibliography.get(citationKey)];
      }));
-      bibliographyTag.entries = bibliographyEntries;
+      citationListTag.citations = bibliographyEntries;

      const citeTags = document.querySelectorAll('d-cite');
      for (const citeTag of citeTags) {
@@ -69,7 +71,7 @@ export const Controller = {
    },

    onBibliographyChanged(event) {
-      const bibliographyTag = event.target;
+      const citationListTag = document.querySelector('d-citation-list');
      const bibliography = event.detail;

      frontMatter.bibliography = bibliography;
@@ -90,7 +92,7 @@ export const Controller = {
        return [citationKey, frontMatter.bibliography.get(citationKey)];
      }));

-      bibliographyTag.entries = entries;
+      citationListTag.citations = entries;
    },

    onFootnoteChanged() {
@@ -107,15 +109,30 @@ export const Controller = {
      const data = event.detail;
      frontMatter.mergeFromYMLFrontmatter(data);

-      const appendix = document.querySelector('distill-appendix');
-      if (appendix) {
-        appendix.frontMatter = frontMatter;
+      const interstitial = document.querySelector('d-interstitial');
+      if (interstitial) {
+        interstitial.password = frontMatter.password;
      }

-      const byline = document.querySelector('d-byline');
-      if (byline) {
-        byline.frontMatter = frontMatter;
+      const prerendered = document.body.hasAttribute('distill-prerendered');
+      if (!prerendered) {
+        optionalComponents(document, frontMatter);
+
+        const appendix = document.querySelector('distill-appendix');
+        if (appendix) {
+          appendix.frontMatter = frontMatter;
+        }
+
+        const byline = document.querySelector('d-byline');
+        if (byline) {
+          byline.frontMatter = frontMatter;
+        }
+
+        if (data.katex) {
+          DMath.katexOptions = data.katex;
+        }
      }
+
    },

    DOMContentLoaded() {
@@ -2,6 +2,9 @@ import { serializeFrontmatterToBibtex } from '../helpers/bibtex';

 const styles = `
 <style>
+  distill-appendix {
+    contain: content;
+  }
  distill-appendix h3 {
    font-size: 15px;
    font-weight: 500;
@@ -12,6 +12,8 @@ const T = Template('distill-footer', `
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background-color: hsl(180, 5%, 15%); /*hsl(200, 60%, 15%);*/
  text-align: left;
+
+  contain: content;
 }

 .logo svg {
@@ -36,7 +38,7 @@ const T = Template('distill-footer', `
 }

 .container {
-  grid-column: margin-left / body;
+  grid-column: left / text;
 }
 </style>

@@ -10,97 +10,76 @@ const T = Template('distill-header', `
  top: 0;
  left: 0;
  width: 100%;
-  height: 60px;
-  background-color: transparent;
  z-index: ${1e6};
  color: rgba(0, 0, 0, 0.8);
-  /*border-bottom: 1px solid rgba(0, 0, 0, 0.08);*/
-  /*box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);*/
-}
-.content {
-  height: 70px;
-}
-a {
-  font-size: 16px;
-  height: 60px;
-  line-height: 60px;
-  text-decoration: none;
-  color: rgba(255, 255, 255, 0.8);
-  padding: 22px 0;
-}
-a:hover {
-  color: rgba(255, 255, 255, 1);
-}
-svg {
-  background-color: hsl(0, 0%, 15%);;
-  padding: 8px;
-  border-radius: 12px;
-  width: 24px;
-  position: relative;
-  top: 16px;
-  left: 16px;
-  margin-right: 2px;
-}
-@media(min-width: 768px) {
-  svg {
-    top: 40px;
-    left: 40px;
-  }
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  contain: content;
 }

-@media(min-width: 1080px) {
-  :host {
-    height: 70px;
-  }
-  a {
-    height: 70px;
-    line-height: 70px;
-    padding: 28px 0;
-  }
-  .logo {
-  }
+.content > * {
+  line-height: 30px;
+  font-size: 14px;
+  padding: 3px 7px;
+  margin: 8px 0;
+}
+
+.name {
+  grid-column-end: span 8;
+  font-weight: 500;
+  border-radius: 3px;
+  font-size: 18px;
+  letter-spacing: -0.05em;
+}
+
+.content a {
+  font-size: 12px;
+  text-decoration: none;
+  color: black;
+  text-transform: uppercase;
+}
+svg {
+  display: none;
+  background-color: hsl(0, 0%, 15%);
+  padding: 8px;
+  border-radius: 6px;
+  width: 24px;
+  position: relative;
+  margin-right: 2px;
 }
 svg path {
  fill: white;
  stroke: rgba(255, 255, 255, 1.0);
  stroke-width: 3px;
 }
+.content {
+  grid-column: page;
+  grid-template-columns: repeat(12, 1fr);
+  display: grid;
+  grid-column-gap: 40px;
+}
 .logo {
+  display: none;
  font-size: 17px;
  font-weight: 200;
 }
-.nav {
-  float: right;
-  font-weight: 300;
-}
-.nav a {
-  font-size: 12px;
-  margin-left: 24px;
-  text-transform: uppercase;
-}

-.name {
-  opacity: 0.0;
-  transition: opacity 0.5s
-}
-
-a:hover .name {
-  opacity: 1.0;
-}
 </style>

-<div class="content l-page">
+<div class="content grid">
  <a href="/" class="logo">
    ${logo}
  </a>
-  <span class='name'>
+  <div class='name'>
    Distill
-  </span>
+  </div>
+  <a href="/faq">Latest</a>
+  <a href="/faq">About</a>
+  <a href="/faq">Prize</a>
+  <a href="/faq">Submit</a>
 </div>
 `);

 // <div class="nav">
-//   <a href="/faq">About</a>
 //   <a href="https://github.com/distillpub">GitHub</a>
 //   <!-- https://twitter.com/distillpub -->
 // </div>
@@ -7,5 +7,5 @@ export default function(dom, data) {
    return;
  }
  const extractedData = parseFrontmatter(frontMatterTag);
-  Object.assign(data, extractedData);
+  data.mergeFromYMLFrontmatter(extractedData);
 }
@@ -1,25 +1,41 @@
-import {timeFormat} from 'd3-time-format';
-
-const zeroPad = n => n < 10 ? '0' + n : n;
-const RFC = timeFormat('%a, %d %b %Y %H:%M:%S %Z');
+const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
 const months = ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
+const zeroPad = n => n < 10 ? '0' + n : n;
+
+const RFC = function(date) {
+  const day = days[date.getDay()].substring(0, 3);
+  const paddedDate = zeroPad(date.getDate());
+  const month = months[date.getMonth()].substring(0,3);
+  const year = date.getFullYear().toString();
+  const hours = date.getUTCHours().toString();
+  const minutes = date.getUTCMinutes().toString();
+  const seconds = date.getUTCSeconds().toString();
+  return `${day}, ${paddedDate} ${month} ${year} ${hours}:${minutes}:${seconds} Z`;
+};

 class Author {

-  constructor(name='', personalURL='', affiliation='', affiliationURL='') {
-    this.name = name; // "Chris Olah"
-    this.personalURL = personalURL; // "https://colah.github.io"
-    this.affiliation = affiliation; // "Google Brain"
-    this.affiliationURL = affiliationURL; // "https://g.co/brain"
+  // constructor(name='', personalURL='', affiliation='', affiliationURL='') {
+  //   this.name = name; // 'Chris Olah'
+  //   this.personalURL = personalURL; // 'https://colah.github.io'
+  //   this.affiliation = affiliation; // 'Google Brain'
+  //   this.affiliationURL = affiliationURL; // 'https://g.co/brain'
+  // }
+
+  constructor(object) {
+    this.name = object.author; // 'Chris Olah'
+    this.personalURL = object.authorURL; // 'https://colah.github.io'
+    this.affiliation = object.affiliation; // 'Google Brain'
+    this.affiliationURL = object.affiliationURL; // 'https://g.co/brain'
  }

-  // "Chris"
+  // 'Chris'
  get firstName() {
    const names = this.name.split(' ');
    return names.slice(0, names.length - 1).join(' ');
  }

-  // "Olah"
+  // 'Olah'
  get lastName() {
    const names = this.name.split(' ');
    return names[names.length -1];
@@ -28,26 +44,26 @@ class Author {

 export class FrontMatter {
  constructor() {
-    this.title = ''; // "Attention and Augmented Recurrent Neural Networks"
-    this.description = ''; // "A visual overview of neural attention..."
+    this.title = ''; // 'Attention and Augmented Recurrent Neural Networks'
+    this.description = ''; // 'A visual overview of neural attention...'
    this.authors = []; // Array of Author(s)

    this.bibliography = new Map();
    this.bibliographyParsed = false;
    //  {
-    //    "gregor2015draw": {
-    //      "title": "DRAW: A recurrent neural network for image generation",
-    //      "author": "Gregor, Karol and Danihelka, Ivo and Graves, Alex and Rezende, Danilo Jimenez and Wierstra, Daan",
-    //      "journal": "arXiv preprint arXiv:1502.04623",
-    //      "year": "2015",
-    //      "url": "https://arxiv.org/pdf/1502.04623.pdf",
-    //      "type": "article"
+    //    'gregor2015draw': {
+    //      'title': 'DRAW: A recurrent neural network for image generation',
+    //      'author': 'Gregor, Karol and Danihelka, Ivo and Graves, Alex and Rezende, Danilo Jimenez and Wierstra, Daan',
+    //      'journal': 'arXiv preprint arXiv:1502.04623',
+    //      'year': '2015',
+    //      'url': 'https://arxiv.org/pdf/1502.04623.pdf',
+    //      'type': 'article'
    //    },
    //  }

    // Citation keys should be listed in the order that they are appear in the document.
    // Each key refers to a key in the bibliography dictionary.
-    this.citations = []; // [ "gregor2015draw", "mercier2011humans" ]
+    this.citations = []; // [ 'gregor2015draw', 'mercier2011humans' ]
    this.citationsCollected = false;

    //
@@ -65,21 +81,23 @@ export class FrontMatter {
    //
    this.journal = {};
    //  journal: {
-    //    "title": "Distill",
-    //    "full_title": "Distill",
-    //    "abbrev_title": "Distill",
-    //    "url": "http://distill.pub",
-    //    "doi": "10.23915/distill",
-    //    "publisherName": "Distill Working Group",
-    //    "publisherEmail": "admin@distill.pub",
-    //    "issn": "2476-0757",
-    //    "editors": [...],
-    //    "committee": [...]
+    //    'title': 'Distill',
+    //    'full_title': 'Distill',
+    //    'abbrev_title': 'Distill',
+    //    'url': 'http://distill.pub',
+    //    'doi': '10.23915/distill',
+    //    'publisherName': 'Distill Working Group',
+    //    'publisherEmail': 'admin@distill.pub',
+    //    'issn': '2476-0757',
+    //    'editors': [...],
+    //    'committee': [...]
    //  }
    //  volume: 1,
    //  issue: 9,
    this.publishedDate = new Date();

+    this.katex = {};
+
    //
    // Assigned from publishing process
    //
@@ -104,38 +122,9 @@ export class FrontMatter {
    this.title = data.title;
    this.publishedDate = new Date(data.published);
    this.description = data.description;
-    const zipped = data.authors.map( (author, index) => [author, data.affiliations[index]]);
-    this.authors = zipped.map( ([authorEntry, affiliationEntry]) => {
-      const author = new Author();
-
-      // try to get name and personal url
-      switch (typeof authorEntry) {
-      case 'object':
-        author.name = Object.keys(authorEntry)[0];
-        author.personalURL = authorEntry[author.name];
-        break;
-      case 'string':
-        author.name = authorEntry;
-        break;
-      default:
-        throw new Error('Invalid type in frontmatter author field: ' + authorEntry);
-      }
-
-      // try to get affiliation name and affiliation url
-      switch (typeof affiliationEntry) {
-      case 'object':
-        author.affiliation = Object.keys(affiliationEntry)[0];
-        author.affiliationURL = affiliationEntry[author.affiliation];
-        break;
-      case 'string':
-        author.affiliation = affiliationEntry;
-        break;
-      default:
-        throw new Error('Invalid type in frontmatter affiliation field: ' + affiliationEntry);
-      }
-
-      return author;
-    });
+    this.authors = data.authors.map( (authorObject) => new Author(authorObject));
+    this.katex = data.katex;
+    this.password = data.password;
  }

  //
@@ -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);
+};
@@ -13,14 +13,14 @@

 export function body(selector) {
  return `${selector} {
-      grid-column: margin-left / body;
+      grid-column: left / text;
    }
  `;
 }

 export function page(selector) {
  return `${selector} {
-      grid-column: margin-left / page;
+      grid-column: left / page;
    }
  `;
 }
@@ -1,73 +1,82 @@
-
 d-article {
+  contain: content;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  padding-top: 2rem;
  color: rgba(0, 0, 0, 0.8);
-  padding-top: 0;
-  padding-bottom: 72px;
-  overflow: hidden;
-  font-size: 14px;
-  line-height: 1.6em;
-  /*border-top: 1px solid rgba(0, 0, 0, 0.2);*/
 }
+
+d-article > * {
+  grid-column: text;
+}
+
@media(min-width: 768px) {
  d-article {
    font-size: 16px;
  }
 }
+
@media(min-width: 1024px) {
  d-article {
-    font-size: 18px;
+    font-size: 1rem;
+    line-height: 1.7em;
  }
 }

+
 /* H2 */

-d-article h2 {
-  font-weight: 600;
-  font-size: 26px;
-  line-height: 1.25em;
-  margin-top: 16px;
-  margin-bottom: 24px;
-  padding-bottom: 24px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+d-article .marker {
+  text-decoration: none;
+  border: none;
+  counter-reset: section;
+  grid-column: kicker;
+  line-height: 1.7em;
 }
+
+d-article .marker:hover {
+  border: none;
+}
+
+d-article .marker span {
+  padding: 0 3px 4px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  position: relative;
+  top: 4px;
+}
+
+d-article .marker:hover span {
+  color: rgba(0, 0, 0, 0.7);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
+}
+
+d-article h2 {
+  grid-column-end: page-end;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 1.25em;
+  margin: 0 0 1rem 0;
+}
+
@media(min-width: 1024px) {
  d-article h2 {
-    margin-top: 2em;
-    font-size: 32px;
-  }
-}
-d-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;
-  }
-  d-article h1 + h2 {
-    margin-top: 12px;
-    font-size: 32px;
+    font-size: 24px;
  }
 }

 /* H3 */

 d-article h3 {
-  font-weight: 600;
-  font-size: 20px;
+  font-weight: 700;
+  font-size: 18px;
  line-height: 1.4em;
-  margin-top: 36px;
-  margin-bottom: 18px;
-}
-d-article h1 + h3 {
-  margin-top: 48px;
+  margin-bottom: 24px;
+  margin-top: 0;
 }
+
@media(min-width: 1024px) {
  d-article h3 {
-    font-size: 26px;
+    font-size: 20px;
  }
 }

@@ -79,49 +88,57 @@ d-article h4 {
  font-size: 14px;
  line-height: 1.4em;
 }
+
 d-article a {
  color: inherit;
 }
+
 d-article p,
 d-article ul,
 d-article ol {
-  margin-bottom: 24px;
-}
-d-article p b,
-d-article ul b,
-d-article ol b {
+  font-family: georgia, serif;
+  margin-top: 0;
+  margin-bottom: 1.7em;
  -webkit-font-smoothing: antialiased;
 }
+
 d-article a {
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  text-decoration: none;
 }
+
 d-article a:hover {
  border-bottom: 1px solid rgba(0, 0, 0, 0.8);
 }
+
 d-article .link {
  text-decoration: underline;
  cursor: pointer;
 }
+
 d-article ul,
 d-article ol {
  padding-left: 24px;
 }
+
 d-article li {
  margin-bottom: 24px;
  margin-left: 0;
  padding-left: 0;
 }
+
 d-article pre {
  font-size: 14px;
  margin-bottom: 20px;
 }
+
 d-article hr {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin-top: 60px;
  margin-bottom: 60px;
 }
+
 d-article section {
  margin-top: 60px;
  margin-bottom: 60px;
@@ -131,31 +148,29 @@ d-article section {

 d-article figure {
  position: relative;
-  margin-top: 30px;
-  margin-bottom: 30px;
-}
-@media(min-width: 1024px) {
-  d-article figure {
-    margin-top: 48px;
-    margin-bottom: 48px;
-  }
+  margin-bottom: 36px;
 }
+
 d-article figure img {
  width: 100%;
 }
+
 d-article figure svg text,
 d-article figure svg tspan {
 }
+
 d-article figure figcaption {
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  line-height: 1.5em;
 }
+
@media(min-width: 1024px) {
  d-article figure figcaption {
    font-size: 13px;
  }
 }
+
 d-article figure.external img {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
@@ -163,39 +178,51 @@ d-article figure.external img {
  padding: 18px;
  box-sizing: border-box;
 }
+
 d-article figure figcaption a {
  color: rgba(0, 0, 0, 0.6);
 }
-/*d-article figure figcaption::before {
-  position: relative;
-  display: block;
-  top: -20px;
-  content: "";
-  width: 25px;
-  border-top: 1px solid rgba(0, 0, 0, 0.3);
-}*/
+
 d-article span.equation-mimic {
  font-family: georgia;
  font-size: 115%;
  font-style: italic;
 }
+
 d-article figure figcaption b {
  font-weight: 600;
  color: rgba(0, 0, 0, 1.0);
 }
+
 d-article > d-code,
 d-article section > d-code  {
  display: block;
 }
+
 d-article > d-math[block],
 d-article section > d-math[block]  {
  display: block;
 }
+
 d-article .citation {
  color: #668;
  cursor: pointer;
 }
+
 d-include {
  width: auto;
  display: block;
 }
+
+d-figure {
+  contain: content;
+  overflow: hidden;
+  height: 300px;
+}
+
+/* KaTeX */
+
+.katex, .katex-prerendered {
+  contain: content;
+  display: inline-block;
+}
@@ -0,0 +1,43 @@
+d-byline {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  contain: content;
+  font-size: 0.7rem;
+  line-height: 1.8em;
+  padding: 1.5rem 0;
+}
+
+d-byline .byline {
+  grid-template-columns: repeat(4, 1fr);
+  grid-column: text;
+}
+
+d-byline h3 {
+  font-size: 0.55rem;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.5);
+  margin: 0;
+  text-transform: uppercase;
+}
+
+d-byline p {
+  margin: 0;
+}
+
+d-byline a,
+d-article d-byline a {
+  color: rgba(0, 0, 0, 0.8);
+  text-decoration: none;
+  border-bottom: none;
+}
+
+d-article d-byline a:hover {
+  text-decoration: underline;
+  border-bottom: none;
+}
+
+d-byline .authors p {
+  font-weight: 600;
+}
+d-byline .affiliations {
+
+}
@@ -0,0 +1,11 @@
+span.katex-display {
+  text-align: left;
+  padding: 8px 0 8px 0;
+  margin: 0 0 1.7em 1em;
+}
+
+span.katex {
+  -webkit-font-smoothing: antialiased;
+  color: rgba(0, 0, 0, 0.8);
+  font-size: 1.18em;
+}
@@ -1,7 +1,8 @@
 html {
-  font-size: 20px;
+  font-size: 19px;
 	line-height: 1rem;
-	font-family: "Libre Franklin", "Helvetica Neue", sans-serif;
+  /* font-family: "Libre Franklin", "Helvetica Neue", sans-serif; */
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
@@ -44,3 +45,10 @@ pre {
  overflow: auto;
  max-width: 100%;
 }
+
+.kicker,
+.marker {
+  font-size: 15px;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.5);
+}
@@ -1,68 +1,109 @@
@supports not (display: grid) {
-  d-article,
+  distill-header,
  d-title,
-  d-byline,
+  d-abstract,
+  d-article,
  d-appendix,
+  d-byline,
+  d-footnote-list,
  distill-footer {
    display: block;
    padding: 8px;
  }
 }

-d-article,
+distill-header,
 d-title,
-d-byline,
+d-abstract,
+d-article,
 d-appendix,
+d-byline,
+d-footnote-list,
 distill-footer {
  display: grid;
  justify-items: stretch;
-  grid-template-columns: [start] 8px [margin-left-outset] 8px [margin-left] 1fr [body] 0px [page] 8px [body-outset] 0px [page-outset] 8px [end];
+  grid-template-columns: [screen-start] 0.5fr [page-start kicker-start text-start gutter-start middle-start] 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr [text-end page-end gutter-end kicker-end middle-end] 0.5fr [screen-end];
+  grid-column-gap: 30px;
 }

@media(min-width: 768px) {
-
-  d-article,
+  distill-header,
  d-title,
-  d-byline,
+  d-abstract,
+  d-article,
  d-appendix,
+  d-byline,
+  d-footnote-list,
  distill-footer {
-    grid-template-columns: [start] 32px [margin-left-outset] 32px [margin-left] 3fr [body] 32px [body-outset] 1fr [page] 32px [page-outset] 32px [end];
+    grid-template-columns: [screen-start] 1fr [page-start kicker-start middle-start text-start] 45px 45px 45px 45px 45px 45px 45px 45px [ kicker-end text-end gutter-start] 45px [middle-end] 45px [page-end gutter-end] 1fr [screen-end];
+    grid-column-gap: 30px;
  }
 }

-@media(min-width: 1024px) {
-  d-article,
+@media(min-width: 1000px) {
+  distill-header,
  d-title,
-  d-byline,
+  d-abstract,
+  d-article,
  d-appendix,
+  d-byline,
+  d-footnote-list,
  distill-footer {
-    grid-template-columns: [start] 1fr [margin-left-outset] 32px [margin-left] 672px [body] 32px [body-outset] 224px [page] 32px [page-outset] 1fr [end];
+    grid-template-columns: [screen-start] 1fr [page-start kicker-start] 50px [middle-start] 50px [text-start kicker-end] 50px 50px 50px 50px 50px 50px 50px 50px [text-end gutter-start] 50px [middle-end] 50px [page-end gutter-end] 1fr [screen-end];
+    grid-column-gap: 30px;
  }
 }

-d-appendix,
-d-article > d-title,
-d-article > d-title > d-byline,
-d-article > distill-footer {
-  grid-column: start / end;
+@media(min-width: 1280px) {
+  distill-header,
+  d-title,
+  d-abstract,
+  d-article,
+  d-appendix,
+  d-byline,
+  d-footnote-list,
+  distill-footer {
+    grid-template-columns: [screen-start] 1fr [page-start kicker-start] 60px [middle-start] 60px [text-start kicker-end] 60px 60px 60px 60px 60px 60px 60px 60px [text-end gutter-start] 60px [middle-end] 60px [page-end gutter-end] 1fr [screen-end];
+    grid-column-gap: 30px;
+  }
 }

-.l-body,
-d-article > * {
-  grid-column: margin-left / body;
+
+.grid {
+  display: grid;
+  grid-column-gap: 30px;
+}
+
+.col-3 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-column-gap: 30px;
+}
+
+.col-2 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-column-gap: 30px;
+}
+
+
+/* .l-body,
+d-article > *  {
+  grid-column: text;
 }

 .l-page,
+d-title > *,
 d-figure {
-  grid-column: margin-left / page;
-}
+  grid-column: page;
+} */

 .l-body-outset {
-  grid-column: margin-left-outset / body-outset;
+  grid-column: left-outset / right-outset;
 }

 .l-page-outset {
-  grid-column: margin-left-outset / page-outset;
+  grid-column: left-outset / right-outset;
 }

 .l-screen {
@@ -78,254 +119,20 @@ d-figure {

 /* Aside */

-aside {
-  grid-column: margin-left / body;
+d-article aside {
+  grid-column: gutter;
 }

@media(min-width: 768px) {
  aside {
-    grid-column: body-outset / page;
+    grid-column: right-outset / right-page;
    font-size: 14px;
    line-height: 1.3;
  }
-}
-/*
-.l-body,
-.l-page,
-.l-middle,
-d-article > div,
-d-article > p,
-d-article > h1,
-d-article > h2,
-d-article > h3,
-d-article > h4,
-d-article > figure,
-d-article > ul,
-d-article > d-abstract,
-d-article > d-code,
-d-article > d-math,
-d-article > table,
-d-article section > div,
-d-article section > p,
-d-article section > h1,
-d-article section > h2,
-d-article section > h3,
-d-article section > h4,
-d-article section > figure,
-d-article section > ul,
-d-article section > d-abstract,
-d-article section > d-code,
-d-article section > d-math,
-d-article section > table {
-  width: calc(100% - 32px);
-  margin-left: 16px;
-  margin-right: 16px;
-  box-sizing: border-box;
-}

-.l-body-outset,
-.l-page-outset,
-.l-middle-outset {
-  width: calc(100% - 16px);
-  margin-left: 8px;
-  margin-right: 8px;
-}
-
-.l-screen {
-  margin-left: 0px;
-  margin-right: 0px;
-  width: 100%;
-  background-color: #F8F8FC;
-  border-top: 1px solid #E8E8EC;
-  border-bottom: 1px solid #E8E8EC;
-}
-
-@media(min-width: 768px) {
-  .l-body,
-  d-article > div,
-  d-article > p,
-  d-article > h1,
-  d-article > h2,
-  d-article > h3,
-  d-article > h4,
-  d-article > figure,
-  d-article > ul,
-  d-article > d-abstract,
-  d-article > d-code,
-  d-article > d-math,
-  d-article > d-math,
-  d-article section > div,
-  d-article section > p,
-  d-article section > h1,
-  d-article section > h2,
-  d-article section > h3,
-  d-article section > h4,
-  d-article section > figure,
-  d-article section > ul,
-  d-article section > d-abstract,
-  d-article section > d-code,
-  d-article section > d-math,
-  d-article section > table {
-    margin-left: 64px;
-    width: calc((100% - 2 * 64px - 3 * 16px)/4*3 + 2*16px );
-  }
-
-  .l-body-outset {
-    margin-left: 32px;
-    width: calc((100% - 2 * 64px - 3 * 16px)/4*3 + 2*16px + 64px );;
-  }
-
-  .l-middle,
-  .l-middle-outset,
-  .l-page {
-    margin-left: 64px;
-    margin-right: 64px;
-    width: calc(100% - 2*64px);
-  }
-
-  .l-page-outset {
-    margin-left: 32px;
-    margin-right: 32px;
-    width: calc(100% - 64px);
-  }
-
-  .margin {
-    font-size: 14px;
-    line-height: normal;
-    clear: both;
+  .side {
+    margin-left: 24px;
    float: right;
-    margin-top: 0;
-    margin-left: 0;
-    margin-right: 64px;
-    width: calc((100% - 2 * 64px - 3 * 16px)/4);
+    width: 50%;
  }
 }
-
-@media(min-width: 1024px) {
-  .l-body,
-  d-article > div,
-  d-article > p,
-  d-article > h2,
-  d-article > h3,
-  d-article > h4,
-  d-article > figure,
-  d-article > ul,
-  d-article > d-abstract,
-  d-article > d-code,
-  d-article > d-math,
-  d-article > table,
-  d-article section > div,
-  d-article section > p,
-  d-article section > h2,
-  d-article section > h3,
-  d-article section > h4,
-  d-article section > figure,
-  d-article section > ul,
-  d-article section > d-abstract,
-  d-article section > d-code,
-  d-article section > d-math,
-  d-article section > table {
-    margin-left: calc(50% - (1024px - 2*64px) / 2);
-    width: 668px;
-  }
-
-  .l-body-outset {
-    margin-left: calc((50% - (1024px - 2*64px) / 2) - 32px);
-    width: calc(668px + 64px)
-  }
-
-  .l-middle,
-  .l-middle-outset,
-  .l-page {
-    margin-left: calc(50% - (1024px - 2*64px) / 2);
-    width: calc(100% - 2* (50% - (1024px - 2*64px) / 2));
-  }
-
-  .l-page-outset {
-    margin-left: calc((50% - (1024px - 2*64px) / 2) - 32px);
-    width: calc(100% - 2* (50% - (1024px - 2*64px) / 2) + 64px);
-  }
-
-  .margin {
-    font-size: 14px;
-    line-height: normal;
-    clear: both;
-    float: right;
-    margin-top: 0;
-    margin-left: 0;
-    margin-right: calc(50% - (1024px - 2*64px) / 2);
-    width: 206px;
-  }
-
-
-  /* Side */
-
-  /*
-  .side.l-body,
-  d-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,
-  d-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,
-  d-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,
-  d-article .side.l-middle-outset {
-    clear: both;
-    float: right;
-    width: 456px;
-    margin-left: 48px;
-    margin-right: calc((100vw - 984px) / 2 + 168px);
-  }
-  .side.l-page,
-  d-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,
-  d-article .side.l-page-outset {
-    clear: both;
-    float: right;
-    width: 624px;
-    margin-right: calc((100vw - 984px) / 2);
-  }
-}*/
-
-/* 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;
-}
@@ -1,9 +1,23 @@
 import base from './styles-base.css';
 import layout from './styles-layout.css';
-import article from './styles-article.css';
 import print from './styles-print.css';
+import byline from './d-byline.css';
+import article from './d-article.css';
+import math from './d-math.css';

-let s = document.createElement('style');
-s.textContent =  base + layout + print + article;
-document.querySelector('head').appendChild(s);
-export default s;
+export const styles = base + layout + byline + article + math + print;
+
+export function makeStyleTag(dom) {
+
+  const styleTagId = 'distill-prerendered-styles';
+  const prerenderedTag = dom.getElementById(styleTagId);
+  if (!prerenderedTag) {
+    const styleTag = dom.createElement('style');
+    styleTag.id = styleTagId;
+    styleTag.type = 'text/css';
+    const cssTextTag = dom.createTextNode(styles);
+    styleTag.appendChild(cssTextTag);
+    dom.head.insertBefore(styleTag, dom.head.firstChild);
+  }
+
+}
@@ -1,5 +1,7 @@
 /* eslint-env node, mocha */

+import { FrontMatter } from './front-matter';
+
 /* Extractors */
 import ExtractFrontmatter from './extractors/front-matter';
 import ExtractBibliography from './extractors/bibliography';
@@ -13,13 +15,19 @@ const extractors = [

 /* Transforms */
 import HTML from './transforms/html';
+import Byline from './transforms/byline';
 import Polyfills from './transforms/polyfills';
+import OptionalComponents from './transforms/optional-components';
+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 Bibliography from './transforms/bibliography';
+import Bibliography from './transforms/bibliography';

 const transforms = [
-  HTML, Polyfills, Meta, Typeset//, Bibliography
+  HTML, makeStyleTag, Polyfills, OptionalComponents, TOC, Byline, Mathematics,
+  Meta, Typeset, Bibliography,
 ];

 /* Distill Transforms */
@@ -36,18 +44,25 @@ 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(dom, data);
  }
  // secondly we use it to transform parts of the dom
  for (const transform of transforms) {
+    console.warn('Running transform...');
+    // console.warn('Running transform: ', transform);
    transform(dom, data);
  }
+  dom.body.setAttribute('distill-prerendered', '');
  // 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);
  }
 }
+
+export { FrontMatter };
@@ -1,27 +1,39 @@
-import { renderBibliography, templateString } from '../components/d-bibliography';
+// import { renderBibliography, templateString } from '../components/d-bibliography';
+import { parseBibtex } from '../helpers/bibtex';
+import fs from 'fs';

 export default function(dom, data) {
  const bibliographyTag = dom.querySelector('d-bibliography');
  if (!bibliographyTag) {
-    console.warn('No bibliography tag found!');
+    console.warn('No bibliography tag present!');
    return;
  }

-  const bibliographyEntries = new Map(data.citations.map( citationKey => {
-    const entry = data.bibliography.get(citationKey);
-    return [citationKey, entry];
-  }));
-
-  const prerenderedBibliography = dom.createElement('d-bibliography-prerendered');
-
-
-  const template = dom.createElement('template');
-  template.innerHTML = templateString;
-  const clone = dom.importNode(template.content, true);
-  prerenderedBibliography.innerHTML = template.content;
-  renderBibliography(prerenderedBibliography, bibliographyEntries, dom);
-
-  bibliographyTag.parentElement.insertBefore(bibliographyTag, prerenderedBibliography);
-  bibliographyTag.parentElement.removeChild(bibliographyTag);
+  const src = bibliographyTag.getAttribute('src');
+  if (src) {
+    const path = data.inputDirectory + '/' + src;
+    const text = fs.readFileSync(path, 'utf-8');
+    const bibliography = parseBibtex(text);
+    const scriptTag = dom.createElement('script');
+    scriptTag.type = 'text/json';
+    scriptTag.textContent = JSON.stringify([...bibliography]);
+    bibliographyTag.appendChild(scriptTag);
+    bibliographyTag.removeAttribute('src');
+  }
+  // const bibliographyEntries = new Map(data.citations.map( citationKey => {
+  //   const entry = data.bibliography.get(citationKey);
+  //   return [citationKey, entry];
+  // }));
+  //
+  // const prerenderedBibliography = dom.createElement('d-bibliography-prerendered');
+  //
+  // const template = dom.createElement('template');
+  // template.innerHTML = templateString;
+  // const clone = dom.importNode(template.content, true);
+  // prerenderedBibliography.innerHTML = template.content;
+  // renderBibliography(prerenderedBibliography, bibliographyEntries, dom);
+  //
+  // bibliographyTag.parentElement.insertBefore(bibliographyTag, prerenderedBibliography);
+  // bibliographyTag.parentElement.removeChild(bibliographyTag);

 }
@@ -1,155 +1,9 @@
-import mustache from 'mustache';
-
-const html = `
-<style>
-  dt-byline {
-    font-size: 12px;
-    line-height: 18px;
-    display: block;
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-    color: rgba(0, 0, 0, 0.5);
-    padding-top: 12px;
-    padding-bottom: 12px;
-    min-height: 90px;
-
-  }
-  dt-article.centered dt-byline {
-    text-align: center;
-
-  }
-  dt-byline a,
-  dt-article dt-byline a {
-    text-decoration: none;
-    border-bottom: none;
-  }
-  dt-article dt-byline a:hover {
-    text-decoration: underline;
-    border-bottom: none;
-  }
-  dt-byline .authors {
-    text-align: left;
-  }
-  dt-byline .name {
-    display: inline;
-    text-transform: uppercase;
-  }
-  dt-byline .affiliation {
-    display: inline;
-  }
-  dt-byline .date {
-    display: block;
-    text-align: left;
-  }
-  dt-byline .year, dt-byline .month {
-    display: inline;
-  }
-  dt-byline .citation {
-    display: block;
-    text-align: left;
-  }
-  dt-byline .citation div {
-    display: inline;
-  }
-
-  @media(min-width: 768px) {
-    dt-byline {
-    }
-  }
-
-  @media(min-width: 1080px) {
-    dt-byline {
-      border-bottom: none;
-      margin-bottom: 70px;
-    }
-
-    dt-byline a:hover {
-      color: rgba(0, 0, 0, 0.9);
-    }
-
-    dt-byline .authors {
-      display: inline-block;
-    }
-
-    dt-byline .author {
-      display: inline-block;
-      margin-right: 12px;
-      /*padding-left: 20px;*/
-      /*border-left: 1px solid #ddd;*/
-    }
-
-    dt-byline .affiliation {
-      display: block;
-    }
-
-    dt-byline .author:last-child {
-      margin-right: 0;
-    }
-
-    dt-byline .name {
-      display: block;
-    }
-
-    dt-byline .date {
-      border-left: 1px solid rgba(0, 0, 0, 0.1);
-      padding-left: 15px;
-      margin-left: 15px;
-      display: inline-block;
-    }
-    dt-byline .year, dt-byline .month {
-      display: block;
-    }
-
-    dt-byline .citation {
-      border-left: 1px solid rgba(0, 0, 0, 0.15);
-      padding-left: 15px;
-      margin-left: 15px;
-      display: inline-block;
-    }
-    dt-byline .citation div {
-      display: block;
-    }
-  }
-</style>
-
-`;
-
-const template = `
-<div class="byline">
-  <div class="authors">
-  {{#authors}}
-    <div class="author">
-      {{#personalURL}}
-        <a class="name" href="{{personalURL}}">{{name}}</a>
-      {{/personalURL}}
-      {{^personalURL}}
-        <div class="name">{{name}}</div>
-      {{/personalURL}}
-      {{#affiliation}}
-        {{#affiliationURL}}
-          <a class="affiliation" href="{{affiliationURL}}">{{affiliation}}</a>
-        {{/affiliationURL}}
-        {{^affiliationURL}}
-          <div class="affiliation">{{affiliation}}</div>
-        {{/affiliationURL}}
-      {{/affiliation}}
-    </div>
-    {{/authors}}
-  </div>
-  <div class="date">
-    <div class="month">{{publishedMonth}}. {{publishedDay}}</div>
-    <div class="year">{{publishedYear}}</div>
-  </div>
-  <a class="citation" href="#citation">
-    <div>Citation:</div>
-    <div>{{concatenatedAuthors}}, {{publishedYear}}</div>
-  </a>
-</div>
-`;
+import { bylineTemplate } from '../components/d-byline.js';

 export default function(dom, data) {
-  let el = dom.querySelector('dt-byline');
-  if (el) {
-    el.innerHTML = html + mustache.render(template, data);
+  const byline = dom.querySelector('d-byline');
+  if (byline) {
+    byline.innerHTML = bylineTemplate(data);
+    // byline.setAttribute('distill-prerendered', '');
  }
 }
@@ -1,33 +0,0 @@
-import bibtexParse from 'bibtex-parse-js';
-
-function normalizeTag(string) {
-  return string
-    .replace(/[\t\n ]+/g, ' ')
-    .replace(/{\\["^`.'acu~Hvs]( )?([a-zA-Z])}/g, (full, x, char) => char)
-    .replace(/{\\([a-zA-Z])}/g, (full, char) => char);
-}
-
-export function parseBibtex(bibtex) {
-  const bibliography = new Map();
-  const parsedEntries = bibtexParse.toJSON(bibtex);
-  for (const entry of parsedEntries) {
-    // normalize tags; note entryTags is an object, not Map
-    for (const [key, value] of Object.entries(entry.entryTags)) {
-      entry.entryTags[key] = normalizeTag(value);
-    }
-    entry.entryTags.type = entry.entryType;
-    // add to bibliography
-    bibliography.set(entry.citationKey, entry.entryTags);
-  }
-  return bibliography;
-}
-
-export function serializeFrontmatterToBibtex(frontMatter) {
-  return `@article{${frontMatter.slug},
-  author = {${frontMatter.bibtexAuthors}},
-  title = {${frontMatter.title}},
-  journal = {${frontMatter.journal.title}},
-  year = {${frontMatter.publishedYear}},
-  note = {${frontMatter.url}}
-}`;
-}
@@ -1,165 +0,0 @@
-export function inline_cite_short(keys){
-  function cite_string(key){
-    if (key in data.bibliography){
-      var n = data.citations.indexOf(key)+1;
-      return ''+n;
-    } else {
-      return '?';
-    }
-  }
-  return '['+keys.map(cite_string).join(', ')+']';
-}
-
-export function inline_cite_long(keys){
-  function cite_string(key){
-    if (key in data.bibliography){
-      var ent = data.bibliography[key];
-      var names = ent.author.split(' and ');
-      names = names.map(name => name.split(',')[0].trim());
-      var year = ent.year;
-      if (names.length == 1) return names[0] + ', ' + year;
-      if (names.length == 2) return names[0] + ' & ' + names[1] + ', ' + year;
-      if (names.length  > 2) return names[0] + ', et al., ' + year;
-    } else {
-      return '?';
-    }
-  }
-  return keys.map(cite_string).join(', ');
-}
-
-function author_string(ent, template, sep, finalSep){
-  var names = ent.author.split(' and ');
-  let name_strings = names.map(name => {
-    name = name.trim();
-    if (name.indexOf(',') != -1){
-      var last = name.split(',')[0].trim();
-      var firsts = name.split(',')[1];
-    } else {
-      var last = name.split(' ').slice(-1)[0].trim();
-      var firsts = name.split(' ').slice(0,-1).join(' ');
-    }
-    var initials = '';
-    if (firsts != undefined) {
-      initials = firsts.trim().split(' ').map(s => s.trim()[0]);
-      initials = initials.join('.')+'.';
-    }
-    return template.replace('${F}', firsts)
-      .replace('${L}', last)
-      .replace('${I}', initials);
-  });
-  if (names.length > 1) {
-    var str = name_strings.slice(0, names.length-1).join(sep);
-    str += (finalSep || sep) + name_strings[names.length-1];
-    return str;
-  } else {
-    return name_strings[0];
-  }
-}
-
-function venue_string(ent) {
-  var cite = (ent.journal || ent.booktitle || '');
-  if ('volume' in ent){
-    var issue = ent.issue || ent.number;
-    issue = (issue != undefined)? '('+issue+')' : '';
-    cite += ', Vol ' + ent.volume + issue;
-  }
-  if ('pages' in ent){
-    cite += ', pp. ' + ent.pages;
-  }
-  if (cite != '') cite += '. ';
-  if ('publisher' in ent){
-    cite += ent.publisher;
-    if (cite[cite.length-1] != '.') cite += '.';
-  }
-  return cite;
-}
-
-function link_string(ent){
-  if ('url' in ent){
-    var url = ent.url;
-    var arxiv_match = (/arxiv\.org\/abs\/([0-9\.]*)/).exec(url);
-    if (arxiv_match != null){
-      url = `http://arxiv.org/pdf/${arxiv_match[1]}.pdf`;
-    }
-
-    if (url.slice(-4) == '.pdf'){
-      var label = 'PDF';
-    } else if (url.slice(-5) == '.html') {
-      var label = 'HTML';
-    }
-    return ` &ensp;<a href="${url}">[${label||'link'}]</a>`;
-  }/* else if ("doi" in ent){
-    return ` &ensp;<a href="https://doi.org/${ent.doi}" >[DOI]</a>`;
-  }*/ else {
-    return '';
-  }
-}
-function doi_string(ent, new_line){
-  if ('doi' in ent) {
-    return `${new_line?'<br>':''} <a href="https://doi.org/${ent.doi}" style="text-decoration:inherit;">DOI: ${ent.doi}</a>`;
-  } else {
-    return '';
-  }
-}
-
-export function bibliography_cite(ent, fancy){
-  if (ent){
-    var cite =  '<b>' + ent.title + '</b> ';
-    cite += link_string(ent) + '<br>';
-    cite += author_string(ent, '${L}, ${I}', ', ', ' and ');
-    if (ent.year || ent.date){
-      cite += ', ' + (ent.year || ent.date) + '. ';
-    } else {
-      cite += '. ';
-    }
-    cite += venue_string(ent);
-    cite += doi_string(ent);
-    return cite;
-    /*var cite =  author_string(ent, "${L}, ${I}", ", ", " and ");
-    if (ent.year || ent.date){
-      cite += ", " + (ent.year || ent.date) + ". "
-    } else {
-      cite += ". "
-    }
-    cite += "<b>" + ent.title + "</b>. ";
-    cite += venue_string(ent);
-    cite += doi_string(ent);
-    cite += link_string(ent);
-    return cite*/
-  } else {
-    return '?';
-  }
-}
-
-export function hover_cite(ent){
-  if (ent){
-    var cite = '';
-    cite += '<b>' + ent.title + '</b>';
-    cite += link_string(ent);
-    cite += '<br>';
-
-    var a_str = author_string(ent, '${I} ${L}', ', ') + '.';
-    var v_str = venue_string(ent).trim() + ' ' + ent.year + '. ' + doi_string(ent, true);
-
-    if ((a_str+v_str).length < Math.min(40, ent.title.length)) {
-      cite += a_str + ' ' + v_str;
-    } else {
-      cite += a_str + '<br>' + v_str;
-    }
-    return cite;
-  } else {
-    return '?';
-  }
-}
-
-
-//https://scholar.google.com/scholar?q=allintitle%3ADocument+author%3Aolah
-function get_GS_URL(ent){
-  if (ent){
-    var names = ent.author.split(' and ');
-    names = names.map(name => name.split(',')[0].trim());
-    var title = ent.title.split(' ');//.replace(/[,:]/, "")
-    var url = 'http://search.labs.crossref.org/dois?';//""https://scholar.google.com/scholar?"
-    url += uris({q: names.join(' ') + ' ' + title.join(' ')});
-  }
-}
@@ -1,108 +0,0 @@
-function make_hover_css(pos) {
-  const pretty = window.innerWidth > 600;
-  const padding = pretty? 18 : 12;
-  const outer_padding = pretty ? 18 : 0;
-  const bbox = document.querySelector('body').getBoundingClientRect();
-  let left = pos[0] - bbox.left, top = pos[1] - bbox.top;
-  let width = Math.min(window.innerWidth-2*outer_padding, 648);
-  left = Math.min(left, window.innerWidth-width-outer_padding);
-  width = width - 2 * padding;
-  return (`position: absolute;
-     background-color: #FFF;
-     opacity: 0.95;
-     max-width: ${width}px;
-     top: ${top}px;
-     left: ${left}px;
-     border: 1px solid rgba(0, 0, 0, 0.25);
-     padding: ${padding}px;
-     border-radius: ${pretty? 3 : 0}px;
-     box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.2);
-     z-index: ${1e6};`);
-}
-
-export class HoverBox {
-
-  constructor(contentHTML, triggerElement) {
-    this.visible = false;
-    // div hold teh contents of the box that will become visible
-    this.div = contentHTML;
-    this.bindDivEvents(this.div);
-    // triggerElement holds the element that needs to be hovered etc to show contents
-    this.triggerElement = triggerElement;
-    this.bindTriggerEvents(this.triggerElement);
-    this.hide();
-  }
-
-  bindDivEvents(node) {
-    // For mice, same behavior as hovering on links
-    this.div.addEventListener('mouseover', () => {
-      if (!this.visible) this.showAtNode(node);
-      this.stopTimeout();
-    });
-    this.div.addEventListener('mouseout', () => {
-      this.extendTimeout(250);
-    });
-    // Don't trigger body touchstart event when touching within box
-    this.div.addEventListener('touchstart', (event) => {
-      event.stopPropagation();
-    }, {passive: true});
-    // Close box when touching outside box
-    document.body.addEventListener('touchstart', () => {
-      this.hide();
-    }, {passive: true});
-  }
-
-  bindTriggerEvents(node) {
-    node.addEventListener('mouseover', () => {
-      if (!this.visible) {
-        this.showAtNode(node);
-      }
-      this.stopTimeout();
-    });
-
-    node.addEventListener('mouseout', () => {
-      this.extendTimeout(250);
-    });
-
-    node.addEventListener('touchstart', (event) => {
-      if (this.visible) {
-        this.hide();
-      } else {
-        this.showAtNode(node);
-      }
-      // Don't trigger body touchstart event when touching link
-      event.stopPropagation();
-    }, {passive: true});
-  }
-
-  show(position) {
-    this.visible = true;
-    const css = make_hover_css(position);
-    this.div.setAttribute('style', css );
-  }
-
-  showAtNode(node) {
-    const bbox = node.getBoundingClientRect();
-    this.show([bbox.right, bbox.bottom]);
-  }
-
-  hide() {
-    this.visible = false;
-    this.div.setAttribute('style', 'display:none');
-    this.stopTimeout();
-  }
-
-  stopTimeout() {
-    if (this.timeout) {
-      clearTimeout(this.timeout);
-    }
-  }
-
-  extendTimeout(time) {
-    this.stopTimeout();
-    this.timeout = setTimeout(() => {
-      this.hide();
-    }, time);
-  }
-
-}
@@ -1,33 +0,0 @@
-// const marginSmall = 16;
-// const marginLarge = 3 * marginSmall;
-// const margin = marginSmall + marginLarge;
-// const gutter = marginSmall;
-// const outsetAmount = margin / 2;
-// const numCols = 4;
-// const numGutters = numCols - 1;
-// const columnWidth = (768 - 2 * marginLarge - numGutters * gutter) / numCols;
-//
-// const screenwidth = 768;
-// const pageWidth = screenwidth - 2 * marginLarge;
-// const bodyWidth = pageWidth - columnWidth - gutter;
-
-export function body(selector) {
-  return `${selector} {
-      grid-column: margin-left / body;
-    }
-  `;
-}
-
-export function page(selector) {
-  return `${selector} {
-      grid-column: margin-left / page;
-    }
-  `;
-}
-
-export function screen(selector) {
-  return `${selector} {
-    grid-column: start / end;
-  }
-  `;
-}
@@ -1,33 +0,0 @@
-import bibtexParse from 'bibtex-parse-js';
-
-function normalizeTag(string) {
-  return string
-    .replace(/[\t\n ]+/g, ' ')
-    .replace(/{\\["^`.'acu~Hvs]( )?([a-zA-Z])}/g, (full, x, char) => char)
-    .replace(/{\\([a-zA-Z])}/g, (full, char) => char);
-}
-
-export function parseBibtex(bibtex) {
-  const bibliography = new Map();
-  const parsedEntries = bibtexParse.toJSON(bibtex);
-  for (const entry of parsedEntries) {
-    // normalize tags; note entryTags is an object, not Map
-    for (const [key, value] of Object.entries(entry.entryTags)) {
-      entry.entryTags[key] = normalizeTag(value);
-    }
-    entry.entryTags.type = entry.entryType;
-    // add to bibliography
-    bibliography.set(entry.citationKey, entry.entryTags);
-  }
-  return bibliography;
-}
-
-export function serializeFrontmatterToBibtex(frontMatter) {
-  return `@article{${frontMatter.slug},
-  author = {${frontMatter.bibtexAuthors}},
-  title = {${frontMatter.title}},
-  journal = {${frontMatter.journal.title}},
-  year = {${frontMatter.publishedYear}},
-  note = {${frontMatter.url}}
-}`;
-}
@@ -1,165 +0,0 @@
-export function inline_cite_short(keys){
-  function cite_string(key){
-    if (key in data.bibliography){
-      var n = data.citations.indexOf(key)+1;
-      return ''+n;
-    } else {
-      return '?';
-    }
-  }
-  return '['+keys.map(cite_string).join(', ')+']';
-}
-
-export function inline_cite_long(keys){
-  function cite_string(key){
-    if (key in data.bibliography){
-      var ent = data.bibliography[key];
-      var names = ent.author.split(' and ');
-      names = names.map(name => name.split(',')[0].trim());
-      var year = ent.year;
-      if (names.length == 1) return names[0] + ', ' + year;
-      if (names.length == 2) return names[0] + ' & ' + names[1] + ', ' + year;
-      if (names.length  > 2) return names[0] + ', et al., ' + year;
-    } else {
-      return '?';
-    }
-  }
-  return keys.map(cite_string).join(', ');
-}
-
-function author_string(ent, template, sep, finalSep){
-  var names = ent.author.split(' and ');
-  let name_strings = names.map(name => {
-    name = name.trim();
-    if (name.indexOf(',') != -1){
-      var last = name.split(',')[0].trim();
-      var firsts = name.split(',')[1];
-    } else {
-      var last = name.split(' ').slice(-1)[0].trim();
-      var firsts = name.split(' ').slice(0,-1).join(' ');
-    }
-    var initials = '';
-    if (firsts != undefined) {
-      initials = firsts.trim().split(' ').map(s => s.trim()[0]);
-      initials = initials.join('.')+'.';
-    }
-    return template.replace('${F}', firsts)
-      .replace('${L}', last)
-      .replace('${I}', initials);
-  });
-  if (names.length > 1) {
-    var str = name_strings.slice(0, names.length-1).join(sep);
-    str += (finalSep || sep) + name_strings[names.length-1];
-    return str;
-  } else {
-    return name_strings[0];
-  }
-}
-
-function venue_string(ent) {
-  var cite = (ent.journal || ent.booktitle || '');
-  if ('volume' in ent){
-    var issue = ent.issue || ent.number;
-    issue = (issue != undefined)? '('+issue+')' : '';
-    cite += ', Vol ' + ent.volume + issue;
-  }
-  if ('pages' in ent){
-    cite += ', pp. ' + ent.pages;
-  }
-  if (cite != '') cite += '. ';
-  if ('publisher' in ent){
-    cite += ent.publisher;
-    if (cite[cite.length-1] != '.') cite += '.';
-  }
-  return cite;
-}
-
-function link_string(ent){
-  if ('url' in ent){
-    var url = ent.url;
-    var arxiv_match = (/arxiv\.org\/abs\/([0-9\.]*)/).exec(url);
-    if (arxiv_match != null){
-      url = `http://arxiv.org/pdf/${arxiv_match[1]}.pdf`;
-    }
-
-    if (url.slice(-4) == '.pdf'){
-      var label = 'PDF';
-    } else if (url.slice(-5) == '.html') {
-      var label = 'HTML';
-    }
-    return ` &ensp;<a href="${url}">[${label||'link'}]</a>`;
-  }/* else if ("doi" in ent){
-    return ` &ensp;<a href="https://doi.org/${ent.doi}" >[DOI]</a>`;
-  }*/ else {
-    return '';
-  }
-}
-function doi_string(ent, new_line){
-  if ('doi' in ent) {
-    return `${new_line?'<br>':''} <a href="https://doi.org/${ent.doi}" style="text-decoration:inherit;">DOI: ${ent.doi}</a>`;
-  } else {
-    return '';
-  }
-}
-
-export function bibliography_cite(ent, fancy){
-  if (ent){
-    var cite =  '<b>' + ent.title + '</b> ';
-    cite += link_string(ent) + '<br>';
-    cite += author_string(ent, '${L}, ${I}', ', ', ' and ');
-    if (ent.year || ent.date){
-      cite += ', ' + (ent.year || ent.date) + '. ';
-    } else {
-      cite += '. ';
-    }
-    cite += venue_string(ent);
-    cite += doi_string(ent);
-    return cite;
-    /*var cite =  author_string(ent, "${L}, ${I}", ", ", " and ");
-    if (ent.year || ent.date){
-      cite += ", " + (ent.year || ent.date) + ". "
-    } else {
-      cite += ". "
-    }
-    cite += "<b>" + ent.title + "</b>. ";
-    cite += venue_string(ent);
-    cite += doi_string(ent);
-    cite += link_string(ent);
-    return cite*/
-  } else {
-    return '?';
-  }
-}
-
-export function hover_cite(ent){
-  if (ent){
-    var cite = '';
-    cite += '<b>' + ent.title + '</b>';
-    cite += link_string(ent);
-    cite += '<br>';
-
-    var a_str = author_string(ent, '${I} ${L}', ', ') + '.';
-    var v_str = venue_string(ent).trim() + ' ' + ent.year + '. ' + doi_string(ent, true);
-
-    if ((a_str+v_str).length < Math.min(40, ent.title.length)) {
-      cite += a_str + ' ' + v_str;
-    } else {
-      cite += a_str + '<br>' + v_str;
-    }
-    return cite;
-  } else {
-    return '?';
-  }
-}
-
-
-//https://scholar.google.com/scholar?q=allintitle%3ADocument+author%3Aolah
-function get_GS_URL(ent){
-  if (ent){
-    var names = ent.author.split(' and ');
-    names = names.map(name => name.split(',')[0].trim());
-    var title = ent.title.split(' ');//.replace(/[,:]/, "")
-    var url = 'http://search.labs.crossref.org/dois?';//""https://scholar.google.com/scholar?"
-    url += uris({q: names.join(' ') + ' ' + title.join(' ')});
-  }
-}
@@ -1,108 +0,0 @@
-function make_hover_css(pos) {
-  const pretty = window.innerWidth > 600;
-  const padding = pretty? 18 : 12;
-  const outer_padding = pretty ? 18 : 0;
-  const bbox = document.querySelector('body').getBoundingClientRect();
-  let left = pos[0] - bbox.left, top = pos[1] - bbox.top;
-  let width = Math.min(window.innerWidth-2*outer_padding, 648);
-  left = Math.min(left, window.innerWidth-width-outer_padding);
-  width = width - 2 * padding;
-  return (`position: absolute;
-     background-color: #FFF;
-     opacity: 0.95;
-     max-width: ${width}px;
-     top: ${top}px;
-     left: ${left}px;
-     border: 1px solid rgba(0, 0, 0, 0.25);
-     padding: ${padding}px;
-     border-radius: ${pretty? 3 : 0}px;
-     box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.2);
-     z-index: ${1e6};`);
-}
-
-export class HoverBox {
-
-  constructor(contentHTML, triggerElement) {
-    this.visible = false;
-    // div hold teh contents of the box that will become visible
-    this.div = contentHTML;
-    this.bindDivEvents(this.div);
-    // triggerElement holds the element that needs to be hovered etc to show contents
-    this.triggerElement = triggerElement;
-    this.bindTriggerEvents(this.triggerElement);
-    this.hide();
-  }
-
-  bindDivEvents(node) {
-    // For mice, same behavior as hovering on links
-    this.div.addEventListener('mouseover', () => {
-      if (!this.visible) this.showAtNode(node);
-      this.stopTimeout();
-    });
-    this.div.addEventListener('mouseout', () => {
-      this.extendTimeout(250);
-    });
-    // Don't trigger body touchstart event when touching within box
-    this.div.addEventListener('touchstart', (event) => {
-      event.stopPropagation();
-    }, {passive: true});
-    // Close box when touching outside box
-    document.body.addEventListener('touchstart', () => {
-      this.hide();
-    }, {passive: true});
-  }
-
-  bindTriggerEvents(node) {
-    node.addEventListener('mouseover', () => {
-      if (!this.visible) {
-        this.showAtNode(node);
-      }
-      this.stopTimeout();
-    });
-
-    node.addEventListener('mouseout', () => {
-      this.extendTimeout(250);
-    });
-
-    node.addEventListener('touchstart', (event) => {
-      if (this.visible) {
-        this.hide();
-      } else {
-        this.showAtNode(node);
-      }
-      // Don't trigger body touchstart event when touching link
-      event.stopPropagation();
-    }, {passive: true});
-  }
-
-  show(position) {
-    this.visible = true;
-    const css = make_hover_css(position);
-    this.div.setAttribute('style', css );
-  }
-
-  showAtNode(node) {
-    const bbox = node.getBoundingClientRect();
-    this.show([bbox.right, bbox.bottom]);
-  }
-
-  hide() {
-    this.visible = false;
-    this.div.setAttribute('style', 'display:none');
-    this.stopTimeout();
-  }
-
-  stopTimeout() {
-    if (this.timeout) {
-      clearTimeout(this.timeout);
-    }
-  }
-
-  extendTimeout(time) {
-    this.stopTimeout();
-    this.timeout = setTimeout(() => {
-      this.hide();
-    }, time);
-  }
-
-}
@@ -1,33 +0,0 @@
-// const marginSmall = 16;
-// const marginLarge = 3 * marginSmall;
-// const margin = marginSmall + marginLarge;
-// const gutter = marginSmall;
-// const outsetAmount = margin / 2;
-// const numCols = 4;
-// const numGutters = numCols - 1;
-// const columnWidth = (768 - 2 * marginLarge - numGutters * gutter) / numCols;
-//
-// const screenwidth = 768;
-// const pageWidth = screenwidth - 2 * marginLarge;
-// const bodyWidth = pageWidth - columnWidth - gutter;
-
-export function body(selector) {
-  return `${selector} {
-      grid-column: margin-left / body;
-    }
-  `;
-}
-
-export function page(selector) {
-  return `${selector} {
-      grid-column: margin-left / page;
-    }
-  `;
-}
-
-export function screen(selector) {
-  return `${selector} {
-    grid-column: start / end;
-  }
-  `;
-}
@@ -1,33 +0,0 @@
-import bibtexParse from 'bibtex-parse-js';
-
-function normalizeTag(string) {
-  return string
-    .replace(/[\t\n ]+/g, ' ')
-    .replace(/{\\["^`.'acu~Hvs]( )?([a-zA-Z])}/g, (full, x, char) => char)
-    .replace(/{\\([a-zA-Z])}/g, (full, char) => char);
-}
-
-export function parseBibtex(bibtex) {
-  const bibliography = new Map();
-  const parsedEntries = bibtexParse.toJSON(bibtex);
-  for (const entry of parsedEntries) {
-    // normalize tags; note entryTags is an object, not Map
-    for (const [key, value] of Object.entries(entry.entryTags)) {
-      entry.entryTags[key] = normalizeTag(value);
-    }
-    entry.entryTags.type = entry.entryType;
-    // add to bibliography
-    bibliography.set(entry.citationKey, entry.entryTags);
-  }
-  return bibliography;
-}
-
-export function serializeFrontmatterToBibtex(frontMatter) {
-  return `@article{${frontMatter.slug},
-  author = {${frontMatter.bibtexAuthors}},
-  title = {${frontMatter.title}},
-  journal = {${frontMatter.journal.title}},
-  year = {${frontMatter.publishedYear}},
-  note = {${frontMatter.url}}
-}`;
-}
@@ -1,165 +0,0 @@
-export function inline_cite_short(keys){
-  function cite_string(key){
-    if (key in data.bibliography){
-      var n = data.citations.indexOf(key)+1;
-      return ''+n;
-    } else {
-      return '?';
-    }
-  }
-  return '['+keys.map(cite_string).join(', ')+']';
-}
-
-export function inline_cite_long(keys){
-  function cite_string(key){
-    if (key in data.bibliography){
-      var ent = data.bibliography[key];
-      var names = ent.author.split(' and ');
-      names = names.map(name => name.split(',')[0].trim());
-      var year = ent.year;
-      if (names.length == 1) return names[0] + ', ' + year;
-      if (names.length == 2) return names[0] + ' & ' + names[1] + ', ' + year;
-      if (names.length  > 2) return names[0] + ', et al., ' + year;
-    } else {
-      return '?';
-    }
-  }
-  return keys.map(cite_string).join(', ');
-}
-
-function author_string(ent, template, sep, finalSep){
-  var names = ent.author.split(' and ');
-  let name_strings = names.map(name => {
-    name = name.trim();
-    if (name.indexOf(',') != -1){
-      var last = name.split(',')[0].trim();
-      var firsts = name.split(',')[1];
-    } else {
-      var last = name.split(' ').slice(-1)[0].trim();
-      var firsts = name.split(' ').slice(0,-1).join(' ');
-    }
-    var initials = '';
-    if (firsts != undefined) {
-      initials = firsts.trim().split(' ').map(s => s.trim()[0]);
-      initials = initials.join('.')+'.';
-    }
-    return template.replace('${F}', firsts)
-      .replace('${L}', last)
-      .replace('${I}', initials);
-  });
-  if (names.length > 1) {
-    var str = name_strings.slice(0, names.length-1).join(sep);
-    str += (finalSep || sep) + name_strings[names.length-1];
-    return str;
-  } else {
-    return name_strings[0];
-  }
-}
-
-function venue_string(ent) {
-  var cite = (ent.journal || ent.booktitle || '');
-  if ('volume' in ent){
-    var issue = ent.issue || ent.number;
-    issue = (issue != undefined)? '('+issue+')' : '';
-    cite += ', Vol ' + ent.volume + issue;
-  }
-  if ('pages' in ent){
-    cite += ', pp. ' + ent.pages;
-  }
-  if (cite != '') cite += '. ';
-  if ('publisher' in ent){
-    cite += ent.publisher;
-    if (cite[cite.length-1] != '.') cite += '.';
-  }
-  return cite;
-}
-
-function link_string(ent){
-  if ('url' in ent){
-    var url = ent.url;
-    var arxiv_match = (/arxiv\.org\/abs\/([0-9\.]*)/).exec(url);
-    if (arxiv_match != null){
-      url = `http://arxiv.org/pdf/${arxiv_match[1]}.pdf`;
-    }
-
-    if (url.slice(-4) == '.pdf'){
-      var label = 'PDF';
-    } else if (url.slice(-5) == '.html') {
-      var label = 'HTML';
-    }
-    return ` &ensp;<a href="${url}">[${label||'link'}]</a>`;
-  }/* else if ("doi" in ent){
-    return ` &ensp;<a href="https://doi.org/${ent.doi}" >[DOI]</a>`;
-  }*/ else {
-    return '';
-  }
-}
-function doi_string(ent, new_line){
-  if ('doi' in ent) {
-    return `${new_line?'<br>':''} <a href="https://doi.org/${ent.doi}" style="text-decoration:inherit;">DOI: ${ent.doi}</a>`;
-  } else {
-    return '';
-  }
-}
-
-export function bibliography_cite(ent, fancy){
-  if (ent){
-    var cite =  '<b>' + ent.title + '</b> ';
-    cite += link_string(ent) + '<br>';
-    cite += author_string(ent, '${L}, ${I}', ', ', ' and ');
-    if (ent.year || ent.date){
-      cite += ', ' + (ent.year || ent.date) + '. ';
-    } else {
-      cite += '. ';
-    }
-    cite += venue_string(ent);
-    cite += doi_string(ent);
-    return cite;
-    /*var cite =  author_string(ent, "${L}, ${I}", ", ", " and ");
-    if (ent.year || ent.date){
-      cite += ", " + (ent.year || ent.date) + ". "
-    } else {
-      cite += ". "
-    }
-    cite += "<b>" + ent.title + "</b>. ";
-    cite += venue_string(ent);
-    cite += doi_string(ent);
-    cite += link_string(ent);
-    return cite*/
-  } else {
-    return '?';
-  }
-}
-
-export function hover_cite(ent){
-  if (ent){
-    var cite = '';
-    cite += '<b>' + ent.title + '</b>';
-    cite += link_string(ent);
-    cite += '<br>';
-
-    var a_str = author_string(ent, '${I} ${L}', ', ') + '.';
-    var v_str = venue_string(ent).trim() + ' ' + ent.year + '. ' + doi_string(ent, true);
-
-    if ((a_str+v_str).length < Math.min(40, ent.title.length)) {
-      cite += a_str + ' ' + v_str;
-    } else {
-      cite += a_str + '<br>' + v_str;
-    }
-    return cite;
-  } else {
-    return '?';
-  }
-}
-
-
-//https://scholar.google.com/scholar?q=allintitle%3ADocument+author%3Aolah
-function get_GS_URL(ent){
-  if (ent){
-    var names = ent.author.split(' and ');
-    names = names.map(name => name.split(',')[0].trim());
-    var title = ent.title.split(' ');//.replace(/[,:]/, "")
-    var url = 'http://search.labs.crossref.org/dois?';//""https://scholar.google.com/scholar?"
-    url += uris({q: names.join(' ') + ' ' + title.join(' ')});
-  }
-}
@@ -1,108 +0,0 @@
-function make_hover_css(pos) {
-  const pretty = window.innerWidth > 600;
-  const padding = pretty? 18 : 12;
-  const outer_padding = pretty ? 18 : 0;
-  const bbox = document.querySelector('body').getBoundingClientRect();
-  let left = pos[0] - bbox.left, top = pos[1] - bbox.top;
-  let width = Math.min(window.innerWidth-2*outer_padding, 648);
-  left = Math.min(left, window.innerWidth-width-outer_padding);
-  width = width - 2 * padding;
-  return (`position: absolute;
-     background-color: #FFF;
-     opacity: 0.95;
-     max-width: ${width}px;
-     top: ${top}px;
-     left: ${left}px;
-     border: 1px solid rgba(0, 0, 0, 0.25);
-     padding: ${padding}px;
-     border-radius: ${pretty? 3 : 0}px;
-     box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.2);
-     z-index: ${1e6};`);
-}
-
-export class HoverBox {
-
-  constructor(contentHTML, triggerElement) {
-    this.visible = false;
-    // div hold teh contents of the box that will become visible
-    this.div = contentHTML;
-    this.bindDivEvents(this.div);
-    // triggerElement holds the element that needs to be hovered etc to show contents
-    this.triggerElement = triggerElement;
-    this.bindTriggerEvents(this.triggerElement);
-    this.hide();
-  }
-
-  bindDivEvents(node) {
-    // For mice, same behavior as hovering on links
-    this.div.addEventListener('mouseover', () => {
-      if (!this.visible) this.showAtNode(node);
-      this.stopTimeout();
-    });
-    this.div.addEventListener('mouseout', () => {
-      this.extendTimeout(250);
-    });
-    // Don't trigger body touchstart event when touching within box
-    this.div.addEventListener('touchstart', (event) => {
-      event.stopPropagation();
-    }, {passive: true});
-    // Close box when touching outside box
-    document.body.addEventListener('touchstart', () => {
-      this.hide();
-    }, {passive: true});
-  }
-
-  bindTriggerEvents(node) {
-    node.addEventListener('mouseover', () => {
-      if (!this.visible) {
-        this.showAtNode(node);
-      }
-      this.stopTimeout();
-    });
-
-    node.addEventListener('mouseout', () => {
-      this.extendTimeout(250);
-    });
-
-    node.addEventListener('touchstart', (event) => {
-      if (this.visible) {
-        this.hide();
-      } else {
-        this.showAtNode(node);
-      }
-      // Don't trigger body touchstart event when touching link
-      event.stopPropagation();
-    }, {passive: true});
-  }
-
-  show(position) {
-    this.visible = true;
-    const css = make_hover_css(position);
-    this.div.setAttribute('style', css );
-  }
-
-  showAtNode(node) {
-    const bbox = node.getBoundingClientRect();
-    this.show([bbox.right, bbox.bottom]);
-  }
-
-  hide() {
-    this.visible = false;
-    this.div.setAttribute('style', 'display:none');
-    this.stopTimeout();
-  }
-
-  stopTimeout() {
-    if (this.timeout) {
-      clearTimeout(this.timeout);
-    }
-  }
-
-  extendTimeout(time) {
-    this.stopTimeout();
-    this.timeout = setTimeout(() => {
-      this.hide();
-    }, time);
-  }
-
-}
@@ -1,33 +0,0 @@
-// const marginSmall = 16;
-// const marginLarge = 3 * marginSmall;
-// const margin = marginSmall + marginLarge;
-// const gutter = marginSmall;
-// const outsetAmount = margin / 2;
-// const numCols = 4;
-// const numGutters = numCols - 1;
-// const columnWidth = (768 - 2 * marginLarge - numGutters * gutter) / numCols;
-//
-// const screenwidth = 768;
-// const pageWidth = screenwidth - 2 * marginLarge;
-// const bodyWidth = pageWidth - columnWidth - gutter;
-
-export function body(selector) {
-  return `${selector} {
-      grid-column: margin-left / body;
-    }
-  `;
-}
-
-export function page(selector) {
-  return `${selector} {
-      grid-column: margin-left / page;
-    }
-  `;
-}
-
-export function screen(selector) {
-  return `${selector} {
-    grid-column: start / end;
-  }
-  `;
-}
@@ -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);
+  }
+
+}
@@ -0,0 +1,71 @@
+// no appendix -> add appendix
+// title in front, no h1 -> add it
+// no title in front, h1 -> read and put into frontMatter
+// footnote -> footnote list
+// break up bib
+// if citation, no bib-list -> add citation-list
+
+// if authors, no byline -> add byline
+
+export default function(dom, data) {
+  const article = dom.querySelector('d-article');
+  const abstract = dom.querySelector('d-abstract');
+
+  let interstitial = dom.querySelector('d-interstitial');
+  if (!interstitial && data.password) {
+    interstitial = dom.createElement('d-interstitial');
+    interstitial.password = data.password;
+    dom.body.insertBefore(interstitial, article);
+  }
+
+  // let h1 = dom.querySelector('h1');
+  // if (h1) {
+  //   if (!data.title) {
+  //     data.title = h1.textContent;
+  //   }
+  // } else {
+  if (data.title) {
+    let headline = dom.createElement('d-title');
+    let h1 = dom.createElement('h1');
+    headline.appendChild(h1);
+    h1.textContent = data.title;
+    abstract.parentNode.insertBefore(headline, abstract);
+  }
+  // if (data.description) {
+  //   const h2 = dom.createElement('h2');
+  //   h2.textContent = data.description;
+  //   article.insertBefore(h2, h1.nextSibling);
+  // }
+  // }
+
+  let byline = dom.querySelector('d-byline');
+  if (!byline && data.authors) {
+    byline = dom.createElement('d-byline');
+    article.parentNode.insertBefore(byline, article);
+    // const skipTags = ['H1', 'FIGURE', 'D-ABSTRACT'];
+    // let candidate = h1;
+    // while (skipTags.indexOf(candidate.tagName) !== -1) {
+    //   candidate = candidate.nextSibling;
+    // }
+    // article.insertBefore(byline, candidate);
+  }
+
+  let appendix = dom.querySelector('d-appendix');
+  if (!appendix) {
+    appendix = dom.createElement('d-appendix');
+    dom.body.appendChild(appendix);
+  }
+
+  let footnoteList = dom.querySelector('d-footnote-list');
+  if (!footnoteList) {
+    footnoteList = dom.createElement('d-footnote-list');
+    appendix.appendChild(footnoteList);
+  }
+
+  let citationList = dom.querySelector('d-citation-list');
+  if (!citationList) {
+    citationList = dom.createElement('d-citation-list');
+    appendix.appendChild(citationList);
+  }
+
+}
@@ -42,11 +42,5 @@ export default function render(dom) {
  polyfillScriptTag.id = 'polyfills';

  // insert at appropriate position--before any other script tag
-  const head = dom.querySelector('head');
-  const firstScriptTag = dom.querySelector('script');
-  if (firstScriptTag) {
-    head.insertBefore(polyfillScriptTag, firstScriptTag);
-  } else {
-    head.appendChild(polyfillScriptTag);
-  }
+  dom.head.insertBefore(polyfillScriptTag, dom.head.firstChild);
 }
@@ -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;
-}
@@ -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;
-}*/
@@ -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;
-}
@@ -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;
-}
@@ -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;
-  }
-}
@@ -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);
-}
@@ -0,0 +1,11 @@
+import { renderTOC } from '../components/d-toc';
+
+export default function(dom) {
+  const article = dom.querySelector('d-article');
+  const toc = dom.querySelector('d-toc');
+  if (toc) {
+    const headings = article.querySelectorAll('h2, h3');
+    renderTOC(toc, headings);
+    toc.setAttribute('prerendered', 'true');
+  }
+}
@@ -53,7 +53,7 @@ function punctuation(text){

  // Dashes
  text = text.replace(/--/g, '\u2014');
-  text = text.replace(/ \u2014 /g,'\u2009\u2014\u2009'); //this has thin spaces
+  text = text.replace(/\s*\u2014\s*/g,'\u2009\u2014\u2009'); //this has thin spaces

  // Elipses
  text = text.replace(/\.\.\./g,'…');
Author	SHA1	Message	Date
Ludwig Schubert	ffb5eaf3f7	2.1.0 Update render.js script; expose it as bin when used as npm dependency.	2017-10-09 14:45:00 -07:00
Ludwig Schubert	90dca7580f	Merge branch 'v2' into v2.1 Adds Interstitial/password splash screen for drafts.distill.pub 2.0.0	2017-10-09 14:33:25 -07:00
Shan Carter	1b2d902c0e	tweaks	2017-10-09 11:17:09 -07:00
Shan Carter	1c75848b12	tweaks	2017-10-06 21:46:30 -07:00
Shan Carter	75a0a8228a	Distill header	2017-10-06 21:27:55 -07:00
Shan Carter	defd752b6e	tweaks	2017-10-05 20:45:45 -07:00
Shan Carter	de4514bcf3	Some responsive positions	2017-10-05 18:02:40 -07:00
Shan Carter	c011e67c96	checkpoint	2017-10-05 16:45:58 -07:00
Shan Carter	a1be3babff	checkpoint	2017-10-05 10:43:22 -07:00
Shan Carter	67f9429860	tweaks	2017-10-04 18:53:15 -07:00
Shan Carter	44414a5a67	New design	2017-10-04 17:51:42 -07:00
Ludwig Schubert	db254c3366	Add interstitial splash screen for use with in-review posts on drafts.distill.pub	2017-10-02 17:10:20 -07:00
Ludwig Schubert	e6202c5442	Suppress rollup warnings by stating transforms will be run in node, not browser	2017-09-05 14:20:14 -07:00
Ludwig Schubert	ab57a90b29	Auto-add optional components, rename grid & disentangle d-bibliography and d-citation-list	2017-09-05 13:54:35 -07:00
Ludwig Schubert	c69f39e25a	Add support for external bibtex files	2017-09-01 16:11:27 -07:00
Ludwig Schubert	31982778f8	Remove d-acknowledgements (useless) and d-title (actively hindering modularization)	2017-09-01 15:05:31 -07:00
Shan Carter	1fe29b6a32	Fixing shadow dom d-math weirdness	2017-08-30 17:06:24 -07:00
Shan Carter	bd3749547b	Merge	2017-08-30 16:52:42 -07:00
Shan Carter	ff7fccc79c	Spacing tweaks	2017-08-30 16:51:53 -07:00
Ludwig Schubert	b8c87b1baf	Resolve errors from merge + move math styles	2017-08-30 16:51:07 -07:00
Ludwig Schubert	d8d00e2102	Merge branch 'v2' of github.com:distillpub/template into v2	2017-08-30 16:35:18 -07:00
Ludwig Schubert	37a714f399	Prerendering of inline math	2017-08-30 16:35:03 -07:00
Shan Carter	efbb6e6a92	No line on math	2017-08-29 17:42:10 -07:00
Shan Carter	65a9563d3f	Making code and math same	2017-08-29 17:12:04 -07:00
Shan Carter	5d4f5ff530	Left aligned math	2017-08-29 17:09:36 -07:00
Shan Carter	d01420a048	Figures now supported inside d-title	2017-08-29 16:10:53 -07:00
Shan Carter	364dc01c3b	Adding super connected callback to math	2017-08-29 15:15:49 -07:00
Ludwig Schubert	3a62ccb1ba	Switch to JSON frontmatter; no error handling yet	2017-08-29 11:34:06 -07:00
Shan Carter	3b427052b8	Fixing margins on p tags and byline	2017-08-29 11:21:47 -07:00
Shan Carter	08696b36fd	Merge branch 'v2' of https://github.com/distillpub/distill-template into v2	2017-08-29 11:09:40 -07:00
Shan Carter	fd2566a430	Merging	2017-08-29 11:09:30 -07:00
Ludwig Schubert	f66e6fd11e	Math tag block display works again. (fixes contain display as block issue)	2017-08-29 11:08:35 -07:00
Shan Carter	b65ea8886b	Tweaking styles in header	2017-08-29 11:02:18 -07:00
Ludwig Schubert	8cd7760dd2	Merge branch 'v2' of github.com:distillpub/template into v2 # Conflicts: # examples/article.html # src/components/d-byline.js # src/components/d-title.js	2017-08-29 11:00:50 -07:00
Ludwig Schubert	80fd26b764	Remove copies of helpers dir	2017-08-29 10:34:27 -07:00
Ludwig Schubert	366a3da552	More work on perf: CSS contain etc.	2017-08-29 10:34:00 -07:00
Shan Carter	bdb7aa032c	More authoritative-ness	2017-08-28 18:18:29 -07:00
Shan Carter	f86f1d0a91	Tweaking spacing	2017-08-28 16:16:51 -07:00
Ludwig Schubert	9041141bf8	Testing release webhook; please ignore	2017-08-24 16:08:40 -07:00