2.4.3

Trim whitespace

README.md

@@ -11,7 +11,7 @@ To contribute a change, [check out the contributing guide](CONTRIBUTING.md).
 
 ### Local Development
 
-Run `npm run start` to start a watching build rollup server. To view the sample pages in the repo, you can run `npm run serve` as a separate process which starts a static server. `npm run build` will run a one-time build.
+First, run `npm install` to install all node modules required. Then, run `npm run dev` to start a watching build rollup server. To view the sample pages in the repo, you can run `npm run serve` as a separate process which starts a static server. `npm run build` will run a one-time build.
 
 
 ## Disclaimer & License

bin/render.js

@@ -37,6 +37,7 @@ const options = { runScripts: 'outside-only', QuerySelector: true, virtualConsol
 JSDOM.fromFile(program.inputPath, options).then(dom => {
   const window = dom.window;
   const document = window.document;
+  const HTMLElement = window.HTMLElement;
 
   const data = new transforms.FrontMatter;
   data.inputHTMLPath = program.inputPath; // may be needed to resolve relative links!

examples/article.html

@@ -32,7 +32,7 @@
       {
         "author":"Chris Olah",
         "authorURL":"https://colah.github.io/",
-        "affiliations": [{"name": "Google Brain", "url": "https://g.co/brain"}]
+        "affiliations": [{"name": "Google Brain"}]
       },
       {
         "author":"Ludwig Schubert",
@@ -78,7 +78,7 @@
   <a class="marker" href="#section-1.1" id="section-1.1"><span>1.1</span></a>
   <h3>Citations</h3>
   <p><d-slider style="width: 200px;"></d-slider></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>. 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>
+  <p>We can<d-cite key="mercier2011humans"></d-cite> also cite <d-cite key="gregor2015draw,mercier2011humans,openai2018charter"></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>. And here's a javascript code block.</p>

examples/bibliography.bib

@@ -97,3 +97,12 @@
   year={2016},
   url={https://arxiv.org/pdf/1609.07009.pdf}
 }
+
+@misc{openai2018charter,
+  author={OpenAI},
+  title={OpenAI Charter},
+  type={Blog},
+  number={April 9},
+  year={2018},
+  url={https://blog.openai.com/charter},
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "distill-template",
-  "version": "2.2.23",
+  "version": "2.4.3",
   "description": "Template for creating Distill articles.",
   "main": "dist/template.v2.js",
   "bin": {
@@ -13,7 +13,7 @@
   },
   "scripts": {
     "dev": "rollup -c rollup.config.dev.js -w",
-    "serve": "python3 -m http.server --bind 127.0.0.1 8888",
+    "serve": "http-server",
     "test": "mocha",
     "lint": "eslint",
     "build": "rollup -c rollup.config.js",
@@ -28,11 +28,12 @@
     "chai": "^3.5.0",
     "eslint": "^4.3.0",
     "eslint-config-google": "^0.9.1",
+    "http-server": "^0.11.1",
     "js-yaml": "^3.7.0",
     "jsdom": "11.3.0",
     "jsdom-global": "3.0.2",
-    "marked": "^0.3.6",
-    "mocha": "^3.5.3",
+    "marked": "^0.6.0",
+    "mocha": "^5.2.0",
     "prismjs": "^1.6.0",
     "rollup": "^0.50.0",
     "rollup-plugin-babili": "^3.1.0",

src/components.js

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import { Controller } from './controller';
+import { domContentLoaded } from './helpers/domContentLoaded.js';
 
 /* Transforms */
 import { makeStyleTag }    from './styles/styles';
@@ -55,13 +56,13 @@ const distillMain = function() {
     throw new Error('Runlevel 1: Distill Template is getting loaded more than once, aborting!');
   } else {
     window.distillTemplateIsLoading = true;
-    console.info('Runlevel 1: Distill Template has started loading.');
+    console.debug('Runlevel 1: Distill Template has started loading.');
   }
 
   /* 2. Add styles if they weren't added during prerendering */
   makeStyleTag(document);
-  console.info('Runlevel 1: Static Distill styles have been added.');
-  console.info('Runlevel 1->2.');
+  console.debug('Runlevel 1: Static Distill styles have been added.');
+  console.debug('Runlevel 1->2.');
   window.distillRunlevel += 1;
 
   /* 3. Register Controller listener functions */
@@ -73,8 +74,8 @@ const distillMain = function() {
       console.error('Runlevel 2: Controller listeners need to be functions!');
     }
   }
-  console.info('Runlevel 2: We can now listen to controller events.');
-  console.info('Runlevel 2->3.');
+  console.debug('Runlevel 2: We can now listen to controller events.');
+  console.debug('Runlevel 2->3.');
   window.distillRunlevel += 1;
 
   /* 4. Register components */
@@ -93,29 +94,31 @@ const distillMain = function() {
   }
   const allComponents = components.concat(distillComponents);
   for (const component of allComponents) {
-    console.info('Runlevel 2: Registering custom element: ' + component.is);
+    console.debug('Runlevel 2: Registering custom element: ' + component.is);
     customElements.define(component.is, component);
   }
 
-  console.info('Runlevel 3: Distill Template finished registering custom elements.');
-  console.info('Runlevel 3->4.');
+  console.debug('Runlevel 3: Distill Template finished registering custom elements.');
+  console.debug('Runlevel 3->4.');
   window.distillRunlevel += 1;
 
   // If template was added after DOMContentLoaded we may have missed that event.
   // Controller will check for that case, so trigger the event explicitly:
-  Controller.listeners.DOMContentLoaded();
+  if (domContentLoaded()) {
+    Controller.listeners.DOMContentLoaded();
+  }
 
-  console.info('Runlevel 4: Distill Template initialisation complete.');
+  console.debug('Runlevel 4: Distill Template initialisation complete.');
 };
 
 window.distillRunlevel = 0;
 /* 0. Check browser feature support; synchronously polyfill if needed */
 if (Polyfills.browserSupportsAllFeatures()) {
-  console.info('Runlevel 0: No need for polyfills.');
-  console.info('Runlevel 0->1.');
+  console.debug('Runlevel 0: No need for polyfills.');
+  console.debug('Runlevel 0->1.');
   window.distillRunlevel += 1;
   distillMain();
 } else {
-  console.info('Runlevel 0: Distill Template is loading polyfills.');
+  console.debug('Runlevel 0: Distill Template is loading polyfills.');
   Polyfills.load(distillMain);
 }

src/components/d-byline.js

@@ -24,11 +24,11 @@ export function bylineTemplate(frontMatter) {
         <p class="author">
           ${author.personalURL ? `
             <a class="name" href="${author.personalURL}">${author.name}</a>` : `
-            <div class="name">${author.name}</div>`}
+            <span class="name">${author.name}</span>`}
         </p>
         <p class="affiliation">
         ${author.affiliations.map(affiliation =>
-          affiliation.url ? `<a class="affiliation" href="${affiliation.url}">${affiliation.name}</a>` : `<div class="affiliation">${affiliation.name}</div>`
+          affiliation.url ? `<a class="affiliation" href="${affiliation.url}">${affiliation.name}</a>` : `<span class="affiliation">${affiliation.name}</span>`
         ).join(', ')}
         </p>
       `).join('')}

src/components/d-citation-list.js

@@ -16,7 +16,7 @@ import { bibliography_cite } from '../helpers/citation';
 
 const styles = `
 d-citation-list {
-  contain: layout style;
+  contain: style;
 }
 
 d-citation-list .references {

src/components/d-cite.js

@@ -23,7 +23,6 @@ const T = Template('d-cite', `
 }
 
 .citation {
-  display: inline-block;
   color: hsla(206, 90%, 20%, 0.7);
 }
 
@@ -48,10 +47,6 @@ figcaption .citation-number {
   line-height: 1em;
 }
 
-d-hover-box {
-  margin-top: 1.9em;
-}
-
 ul {
   margin: 0;
   padding: 0;
@@ -71,12 +66,19 @@ ul li:last-of-type {
 
 <d-hover-box id="hover-box"></d-hover-box>
 
-<div id="citation-" class="citation"><slot></slot><span class="citation-number"></span></div>
+<div id="citation-" class="citation">
+  <span class="citation-number"></span>
+</div>
 `);
 
 export class Cite extends T(HTMLElement) {
 
   /* Lifecycle */
+  constructor() {
+    super();
+    this._numbers = [];
+    this._entries = [];
+  }
 
   connectedCallback() {
     this.outerSpan = this.root.querySelector('#citation-');
@@ -85,6 +87,13 @@ export class Cite extends T(HTMLElement) {
     window.customElements.whenDefined('d-hover-box').then(() => {
       this.hoverBox.listen(this);
     });
+    // in case this component got connected after values were set
+    if (this.numbers) {
+      this.displayNumbers(this.numbers)
+    }
+    if (this.entries) {
+      this.displayEntries(this.entries)
+    }
   }
 
   //TODO This causes an infinite loop on firefox with polyfills.
@@ -103,7 +112,7 @@ export class Cite extends T(HTMLElement) {
 
   attributeChangedCallback(name, oldValue, newValue) {
     const eventName = oldValue ? 'onCiteKeyChanged' : 'onCiteKeyCreated';
-    const keys = newValue.split(',');
+    const keys = newValue.split(',').map(k => k.trim());
     const options = { detail: [this, keys], bubbles: true };
     const event = new CustomEvent(eventName, options);
     document.dispatchEvent(event);
@@ -124,21 +133,37 @@ export class Cite extends T(HTMLElement) {
   /* Setters & Rendering */
 
   set numbers(numbers) {
+    this._numbers = numbers;
+    this.displayNumbers(numbers);
+  }
+
+  get numbers() {
+    return this._numbers;
+  }
+
+  displayNumbers(numbers) {
+    if (!this.innerSpan) return;
     const numberStrings = numbers.map( index => {
       return index == -1 ? '?' : index + 1 + '';
     });
     const textContent = '[' + numberStrings.join(', ') + ']';
-    if (this.innerSpan) {
-      this.innerSpan.textContent = textContent;
-    }
+    this.innerSpan.textContent = textContent;
   }
 
   set entries(entries) {
-    if (this.hoverBox) {
-      this.hoverBox.innerHTML = `<ul>
+    this._entries = entries;
+    this.displayEntries(entries)
+  }
+
+  get entries() {
+    return this._entries;
+  }
+
+  displayEntries(entries) {
+    if (!this.hoverBox) return
+    this.hoverBox.innerHTML = `<ul>
       ${entries.map(hover_cite).map(html => `<li>${html}</li>`).join('\n')}
-      </ul>`;
-    }
+    </ul>`;
   }
 
 }

src/components/d-footnote.js

@@ -22,6 +22,7 @@ d-math[block] {
 }
 
 :host {
+
 }
 
 sup {
@@ -37,13 +38,6 @@ span {
   cursor: default;
 }
 
-.container {
-  position: absolute;
-  width: 100%;
-  left: 0;
-  z-index: 10000;
-}
-
 .footnote-container {
   padding: 10px;
 }

src/components/d-front-matter.js

@@ -30,12 +30,11 @@ export function _moveLegacyAffiliationFormatIntoArray(frontMatter) {
       author.affiliations = [newAffiliation];
     }
   }
-  console.log(frontMatter)
   return frontMatter
 }
 
 export function parseFrontmatter(element) {
-  const scriptTag = element.querySelector('script');
+  const scriptTag = element.firstElementChild;
   if (scriptTag) {
     const type = scriptTag.getAttribute('type');
     if (type.split('/')[1] == 'json') {

src/components/d-hover-box.js

@@ -20,9 +20,10 @@ const T = Template('d-hover-box', `
 :host {
   position: absolute;
   width: 100%;
-  left: 0;
+  left: 0px;
   z-index: 10000;
   display: none;
+  white-space: normal
 }
 
 .container {
@@ -40,10 +41,13 @@ const T = Template('d-hover-box', `
   left: 0;
   width: 100%;
   border: 1px solid rgba(0, 0, 0, 0.1);
-  background-color: rgb(250, 250, 250);
+  background-color: rgba(250, 250, 250, 0.95);
   box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   box-sizing: border-box;
+
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
 }
 
 </style>
@@ -117,11 +121,14 @@ export class HoverBox extends T(HTMLElement) {
   show(position) {
     this.visible = true;
     this.style.display = 'block';
+    // 10px extra offset from element
+    this.style.top = Math.round(position[1] + 10) + 'px';
   }
 
   showAtNode(node) {
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop
     const bbox = node.getBoundingClientRect();
-    this.show([bbox.right, bbox.bottom]);
+    this.show([node.offsetLeft + bbox.width, node.offsetTop + bbox.height]);
   }
 
   hide() {

src/components/d-math.js

@@ -30,7 +30,7 @@ ${katexCSSTag}
 
 :host {
   display: inline-block;
-  contain: content;
+  contain: style;
 }
 
 :host([block]) {
@@ -73,8 +73,7 @@ export class DMath extends Mutating(T(HTMLElement)) {
     }
     // transform inline delimited math to d-math tags
     if (DMath.katexOptions.delimiters) {
-      const article = document.querySelector('d-article');
-      renderMathInElement(article, DMath.katexOptions);
+      renderMathInElement(document.body, DMath.katexOptions);
     }
   }
 

src/controller.js

@@ -15,14 +15,12 @@
 import { FrontMatter, mergeFromYMLFrontmatter } from './front-matter';
 import { DMath } from './components/d-math';
 import { collect_citations } from './helpers/citation.js';
+import { domContentLoaded } from './helpers/domContentLoaded.js';
 import { parseFrontmatter } from './components/d-front-matter';
 import optionalComponents from './transforms/optional-components';
 
 const frontMatter = new FrontMatter();
 
-function domContentLoaded() {
-  return ['interactive', 'complete'].indexOf(document.readyState) !== -1;
-}
 
 export const Controller = {
 
@@ -109,7 +107,7 @@ export const Controller = {
 
 
       if (citationListTag.hasAttribute('distill-prerendered')) {
-        console.info('Citation list was prerendered; not updating it.');
+        console.debug('Citation list was prerendered; not updating it.');
       } else {
         const entries = new Map(frontMatter.citations.map( citationKey => {
           return [citationKey, frontMatter.bibliography.get(citationKey)];
@@ -167,11 +165,11 @@ export const Controller = {
         console.warn('Controller received DOMContentLoaded but was already loaded!');
         return;
       } else if (!domContentLoaded()) {
-        console.warn('Controller received DOMContentLoaded before appropriate document.readyState!');
+        console.warn('Controller received DOMContentLoaded at document.readyState: ' + document.readyState + '!');
         return;
       } else {
         Controller.loaded = true;
-        console.log('Runlevel 4: Controller running DOMContentLoaded');
+        console.debug('Runlevel 4: Controller running DOMContentLoaded');
       }
 
       const frontMatterTag = document.querySelector('d-front-matter');

src/distill-components/distill-footer-template.js

@@ -0,0 +1,74 @@
+import logo from '../assets/distill-logo.svg';
+
+export const footerTemplate = `
+<style>
+
+:host {
+  color: rgba(255, 255, 255, 0.5);
+  font-weight: 300;
+  padding: 2rem 0;
+  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;
+}
+
+.footer-container .logo svg {
+  width: 24px;
+  position: relative;
+  top: 4px;
+  margin-right: 2px;
+}
+
+.footer-container .logo svg path {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.8);
+  stroke-width: 3px;
+}
+
+.footer-container .logo {
+  font-size: 17px;
+  font-weight: 200;
+  color: rgba(255, 255, 255, 0.8);
+  text-decoration: none;
+  margin-right: 6px;
+}
+
+.footer-container {
+  grid-column: text;
+}
+
+.footer-container .nav {
+  font-size: 0.9em;
+  margin-top: 1.5em;
+}
+
+.footer-container .nav a {
+  color: rgba(255, 255, 255, 0.8);
+  margin-right: 6px;
+  text-decoration: none;
+}
+
+</style>
+
+<div class='footer-container'>
+
+  <a href="/" class="logo">
+    ${logo}
+    Distill
+  </a> is dedicated to clear explanations of machine learning
+
+  <div class="nav">
+    <a href="https://distill.pub/about/">About</a>
+    <a href="https://distill.pub/journal/">Submit</a>
+    <a href="https://distill.pub/prize/">Prize</a>
+    <a href="https://distill.pub/archive/">Archive</a>
+    <a href="https://distill.pub/rss.xml">RSS</a>
+    <a href="https://github.com/distillpub">GitHub</a>
+    <a href="https://twitter.com/distillpub">Twitter</a>
+    &nbsp;&nbsp;&nbsp;&nbsp; ISSN 2476-0757
+  </div>
+
+</div>
+
+`;

src/distill-components/distill-footer.js

@@ -13,80 +13,10 @@
 // limitations under the License.
 
 import { Template } from '../mixins/template';
-import logo from '../assets/distill-logo.svg';
 
-const T = Template('distill-footer', `
-<style>
+import {footerTemplate} from './distill-footer-template';
 
-:host {
-  color: rgba(255, 255, 255, 0.5);
-  font-weight: 300;
-  padding: 2rem 0;
-  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 {
-  width: 24px;
-  position: relative;
-  top: 4px;
-  margin-right: 2px;
-}
-
-.logo svg path {
-  fill: none;
-  stroke: rgba(255, 255, 255, 0.8);
-  stroke-width: 3px;
-}
-
-.logo {
-  font-size: 17px;
-  font-weight: 200;
-  color: rgba(255, 255, 255, 0.8);
-  text-decoration: none;
-  margin-right: 6px;
-}
-
-.container {
-  grid-column: text;
-}
-
-.nav {
-  font-size: 0.9em;
-  margin-top: 1.5em;
-}
-
-.nav a {
-  color: rgba(255, 255, 255, 0.8);
-  margin-right: 6px;
-  text-decoration: none;
-}
-
-</style>
-
-<div class='container'>
-
-  <a href="/" class="logo">
-    ${logo}
-    Distill
-  </a> is dedicated to clear explanations of machine learning
-
-  <div class="nav">
-    <a href="https://distill.pub/about/">About</a>
-    <a href="https://distill.pub/journal/">Submit</a>
-    <a href="https://distill.pub/prize/">Prize</a>
-    <a href="https://distill.pub/archive/">Archive</a>
-    <a href="https://distill.pub/rss.xml">RSS</a>
-    <a href="https://github.com/distillpub">GitHub</a>
-    <a href="https://twitter.com/distillpub">Twitter</a>
-    &nbsp;&nbsp;&nbsp;&nbsp; ISSN 2476-0757
-  </div>
-
-</div>
-
-`);
+const T = Template('distill-footer', footerTemplate);
 
 export class DistillFooter extends T(HTMLElement) {
 

src/distill-components/distill-header-template.js

@@ -0,0 +1,79 @@
+import logo from '../assets/distill-logo.svg';
+
+export const headerTemplate = `
+<style>
+distill-header {
+  position: relative;
+  height: 60px;
+  background-color: hsl(200, 60%, 15%);
+  width: 100%;
+  box-sizing: border-box;
+  z-index: 2;
+  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);
+}
+distill-header .content {
+  height: 70px;
+  grid-column: page;
+}
+distill-header a {
+  font-size: 16px;
+  height: 60px;
+  line-height: 60px;
+  text-decoration: none;
+  color: rgba(255, 255, 255, 0.8);
+  padding: 22px 0;
+}
+distill-header a:hover {
+  color: rgba(255, 255, 255, 1);
+}
+distill-header svg {
+  width: 24px;
+  position: relative;
+  top: 4px;
+  margin-right: 2px;
+}
+@media(min-width: 1080px) {
+  distill-header {
+    height: 70px;
+  }
+  distill-header a {
+    height: 70px;
+    line-height: 70px;
+    padding: 28px 0;
+  }
+  distill-header .logo {
+  }
+}
+distill-header svg path {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.8);
+  stroke-width: 3px;
+}
+distill-header .logo {
+  font-size: 17px;
+  font-weight: 200;
+}
+distill-header .nav {
+  float: right;
+  font-weight: 300;
+}
+distill-header .nav a {
+  font-size: 12px;
+  margin-left: 24px;
+  text-transform: uppercase;
+}
+</style>
+<div class="content">
+  <a href="/" class="logo">
+    ${logo}
+    Distill
+  </a>
+  <nav class="nav">
+    <a href="/about/">About</a>
+    <a href="/prize/">Prize</a>
+    <a href="/journal/">Submit</a>
+  </nav>
+</div>
+`;

src/distill-components/distill-header.js

@@ -14,86 +14,9 @@
 
 import { Template } from '../mixins/template';
 
-import logo from '../assets/distill-logo.svg';
-
-const T = Template('distill-header', `
-<style>
-distill-header {
-  position: relative;
-  height: 60px;
-  background-color: hsl(200, 60%, 15%);
-  width: 100%;
-  box-sizing: border-box;
-  z-index: 2;
-  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);
-}
-distill-header .content {
-  height: 70px;
-  grid-column: page;
-}
-distill-header a {
-  font-size: 16px;
-  height: 60px;
-  line-height: 60px;
-  text-decoration: none;
-  color: rgba(255, 255, 255, 0.8);
-  padding: 22px 0;
-}
-distill-header a:hover {
-  color: rgba(255, 255, 255, 1);
-}
-distill-header svg {
-  width: 24px;
-  position: relative;
-  top: 4px;
-  margin-right: 2px;
-}
-@media(min-width: 1080px) {
-  distill-header {
-    height: 70px;
-  }
-  distill-header a {
-    height: 70px;
-    line-height: 70px;
-    padding: 28px 0;
-  }
-  distill-header .logo {
-  }
-}
-distill-header svg path {
-  fill: none;
-  stroke: rgba(255, 255, 255, 0.8);
-  stroke-width: 3px;
-}
-distill-header .logo {
-  font-size: 17px;
-  font-weight: 200;
-}
-distill-header .nav {
-  float: right;
-  font-weight: 300;
-}
-distill-header .nav a {
-  font-size: 12px;
-  margin-left: 24px;
-  text-transform: uppercase;
-}
-</style>
-<div class="content">
-  <a href="/" class="logo">
-    ${logo}
-    Distill
-  </a>
-  <nav class="nav">
-    <a href="/about/">About</a>
-    <a href="/prize/">Prize</a>
-    <a href="/journal/">Submit</a>
-  </nav>
-</div>
-`, false);
+import {headerTemplate} from './distill-header-template';
 
+const T = Template('distill-header', headerTemplate, false);
 
 export class DistillHeader extends T(HTMLElement) {
 

src/distill-transforms/distill-footer.js

@@ -12,10 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { footerTemplate } from '../distill-components/distill-footer-template';
+
 export default function(dom) {
   const footerTag = dom.querySelector('distill-footer');
   if(!footerTag) {
     const footer = dom.createElement('distill-footer');
+    footer.innerHTML = footerTemplate;
     const body = dom.querySelector('body');
     body.appendChild(footer);
   }

src/distill-transforms/distill-header.js

@@ -12,10 +12,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-export default function(dom) {
+
+import { headerTemplate } from '../distill-components/distill-header-template';
+
+export default function(dom, data) {
   const headerTag = dom.querySelector('distill-header');
   if (!headerTag) {
     const header = dom.createElement('distill-header');
+    header.innerHTML = headerTemplate;
+    header.setAttribute('distill-prerendered', "");
     const body = dom.querySelector('body');
     body.insertBefore(header, body.firstChild);
   }

src/front-matter.js

@@ -96,6 +96,9 @@ export function mergeFromYMLFrontmatter(target, source) {
   target.authors = source.authors.map( (authorObject) => new Author(authorObject));
   target.katex = source.katex;
   target.password = source.password;
+  if (source.doi) {
+    target.doi = source.doi;
+  }
 }
 
 export class FrontMatter {
@@ -160,6 +163,7 @@ export class FrontMatter {
     //  githubCompareUpdatesUrl: 'https://github.com/distillpub/post--augmented-rnns/compare/1596e094d8943d2dc0ea445d92071129c6419c59...3bd9209e0c24d020f87cf6152dcecc6017cbc193',
     //  updatedDate: 2017-03-21T07:13:16.000Z,
     //  doi: '10.23915/distill.00001',
+    this.doi = undefined;
     this.publishedDate = undefined;
   }
 
@@ -318,6 +322,7 @@ export class FrontMatter {
     Object.assign(target, this);
     target.bibliography = objectFromMap(this.bibliographyEntries);
     target.url = this.url;
+    target.doi = this.doi;
     target.githubUrl = this.githubUrl;
     target.previewURL = this.previewURL;
     if (this.publishedDate) {

src/helpers/citation.js

@@ -61,9 +61,11 @@ function author_string(ent, template, sep, finalSep){
     if (name.indexOf(',') != -1){
       var last = name.split(',')[0].trim();
       var firsts = name.split(',')[1];
-    } else {
+    } else if (name.indexOf(' ') != -1) {
       var last = name.split(' ').slice(-1)[0].trim();
       var firsts = name.split(' ').slice(0,-1).join(' ');
+    } else {
+      var last = name.trim();
     }
     var initials = '';
     if (firsts != undefined) {
@@ -72,7 +74,8 @@ function author_string(ent, template, sep, finalSep){
     }
     return template.replace('${F}', firsts)
       .replace('${L}', last)
-      .replace('${I}', initials);
+      .replace('${I}', initials)
+      .trim(); // in case one of first or last was empty
   });
   if (names.length > 1) {
     var str = name_strings.slice(0, names.length-1).join(sep);

src/helpers/domContentLoaded.js

@@ -0,0 +1,3 @@
+export function domContentLoaded() {
+  return ['interactive', 'complete'].indexOf(document.readyState) !== -1;
+}

src/helpers/polyfills.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 export function addPolyfill(polyfill, polyfillLoadedCallback) {
-  console.info('Runlevel 0: Polyfill required: ' + polyfill.name);
+  console.debug('Runlevel 0: Polyfill required: ' + polyfill.name);
   const script = document.createElement('script');
   script.src = polyfill.url;
   script.async = false;
@@ -58,11 +58,11 @@ export class Polyfills {
     // Define an intermediate callback that checks if all is loaded.
     const polyfillLoaded = function(polyfill) {
       polyfill.loaded = true;
-      console.info('Runlevel 0: Polyfill has finished loading: ' + polyfill.name);
-      // console.info(window[polyfill.name]);
+      console.debug('Runlevel 0: Polyfill has finished loading: ' + polyfill.name);
+      // console.debug(window[polyfill.name]);
       if (Polyfills.neededPolyfills.every((poly) => poly.loaded)) {
-        console.info('Runlevel 0: All required polyfills have finished loading.');
-        console.info('Runlevel 0->1.');
+        console.debug('Runlevel 0: All required polyfills have finished loading.');
+        console.debug('Runlevel 0->1.');
         window.distillRunlevel = 1;
         callback();
       }

src/mixins/template.js

@@ -40,6 +40,9 @@ export const Template = (name, templateString, useShadow = true) => {
       }
 
       connectedCallback() {
+        if (this.hasAttribute('distill-prerendered')) {
+          return;
+        }
         if (useShadow) {
           if ('ShadyCSS' in window) {
             ShadyCSS.styleElement(this);

src/styles/d-article.css

@@ -227,7 +227,7 @@ d-figure {
 /* KaTeX */
 
 .katex, .katex-prerendered {
-  contain: content;
+  contain: style;
   display: inline-block;
 }
 

src/styles/d-byline.css

@@ -15,7 +15,7 @@
  */
 
 d-byline {
-  contain: content;
+  contain: style;
   overflow: hidden;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   font-size: 0.8rem;

src/transforms/mathematics.js

@@ -17,20 +17,20 @@ import { renderMathInElement } from '../helpers/katex-auto-render';
 
 export default function(dom, data) {
   let needsCSS = false;
-  const article = dom.querySelector('d-article');
+  const body = dom.querySelector('body');
 
-  if (!article) {
-    console.warn("No d-article tag found!");
+  if (!body) {
+    console.warn("No body tag found!");
     return;
   }
 
   if (data.katex && data.katex.delimiters) {
     global.document = dom;
-    renderMathInElement(article, data.katex);
+    renderMathInElement(body, data.katex);
   }
 
   // render d-math tags
-  const mathTags = article.querySelectorAll('d-math');
+  const mathTags = body.querySelectorAll('d-math');
   if (mathTags.length > 0) {
     needsCSS = true;
     console.warn(`Prerendering ${mathTags.length} math tags...`);

src/transforms/optional-components.js

@@ -43,7 +43,7 @@ export default function(dom, data) {
 
   let title = dom.querySelector('d-title');
   if (!title) {
-    let title = dom.createElement('d-title');
+    title = dom.createElement('d-title');
     body.insertBefore(title, byline);
   }
 

src/transforms/polyfills.js

@@ -67,7 +67,7 @@ export default function render(dom) {
   if (templateTag) {
     templateTag.parentNode.removeChild(templateTag);
   } else {
-    console.info('FYI: Did not find template tag when trying to remove it. You may not have added it. Be aware that our polyfills will add it.')
+    console.debug('FYI: Did not find template tag when trying to remove it. You may not have added it. Be aware that our polyfills will add it.')
   }
 
   // add loader