2.4.1

examples/article.html

@@ -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-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "distill-template",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "distill-template",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "description": "Template for creating Distill articles.",
   "main": "dist/template.v2.js",
   "bin": {

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-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

@@ -19,11 +19,10 @@ const T = Template('d-cite', `
 <style>
 
 :host {
-
+  display: inline-block;
 }
 
 .citation {
-  display: inline-block;
   color: hsla(206, 90%, 20%, 0.7);
 }
 
@@ -68,7 +67,6 @@ 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>
 `);
@@ -76,6 +74,11 @@ ul li:last-of-type {
 export class Cite extends T(HTMLElement) {
 
   /* Lifecycle */
+  constructor() {
+    super();
+    this._numbers = [];
+    this._entries = [];
+  }
 
   connectedCallback() {
     this.outerSpan = this.root.querySelector('#citation-');
@@ -84,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.
@@ -123,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-front-matter.js

@@ -30,7 +30,6 @@ export function _moveLegacyAffiliationFormatIntoArray(frontMatter) {
       author.affiliations = [newAffiliation];
     }
   }
-  console.log(frontMatter)
   return frontMatter
 }
 

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/front-matter.js

@@ -96,7 +96,9 @@ export function mergeFromYMLFrontmatter(target, source) {
   target.authors = source.authors.map( (authorObject) => new Author(authorObject));
   target.katex = source.katex;
   target.password = source.password;
-  target.doi = source.doi;
+  if (source.doi) {
+    target.doi = source.doi;
+  }
 }
 
 export class FrontMatter {
@@ -161,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;
   }
 
@@ -319,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/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/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