Try enabling travis builds with Github releases

Remove ES6 arrow functions from hover-box

.travis.yml

@@ -0,0 +1,18 @@
+language: node_js
+node_js:
+  - "node" # latest version
+cache:
+  yarn: true
+  directories:
+    - node_modules
+script:
+  - yarn build
+deploy:
+  provider: releases
+  api_key: $GITHUB_OAUTH_TOKEN
+  file_glob: true
+  file: dist/*
+  skip_cleanup: true
+  overwrite: true
+  on:
+    tags: true

README.md

@@ -1,8 +1,24 @@
 # Distill Templates
 
+This is the repository for the distill web framework. If you're interesting in just using the framework to write an article for the [Distill journal](http://distill.pub), visit http://distill.pub/guide/. 
+
+The general process for using this framework is to hotlink the compiled code in your dev environment. 
+
+```html
+<script src="http://distill.pub/template.v1.js"></script>
+```
+
+You can also install it as a local dependency through npm or with [yarn](https://yarnpkg.com).
+
+```
+npm install --D distill-template
+```
+
+If you're interested in submitting pull requests or developing on the framework itself, read on.
+
 ## Development
 
-Run `yarn start` to start a watching build rollup server.
+Run `yarn start` to start a watching build rollup server. To view the sample pages in the repo, you can run `yarn serve` as a separate process which starts a static server. `yarn build` will run a one-time build.
 
 ## Testing
 

components/appendix-distill.js

@@ -0,0 +1,28 @@
+export default function(dom, data) {
+  let el = dom.querySelector('dt-appendix > div');
+  if (el) {
+    let newHTML = "";
+
+    newHTML += `<h3>Updates and Corrections</h3>
+    <p><a href="${data.githubCompareUpdatesUrl}">View all changes</a> to this article since it was first published. If you see a mistake or want to suggest a change, please <a class="github-issue" href="${data.githubUrl}/issues/new">create an issue on GitHub</a>.</p>`;
+
+    newHTML += `<h3 id="citation">Citations and Reuse</h3>
+    <p>Diagrams and text are licensed under Creative Commons Attribution <a href="https://creativecommons.org/licenses/by/2.0/">CC-BY 2.0</a>, unless noted otherwise, with the <a class="github" href="${data.githubUrl}">source available on GitHub</a>. The figures that have been reused from other sources don't fall under this license and can be recognized by a note in their caption: “Figure from …”.</p>
+
+    <p>For attribution in academic contexts, please cite this work as</p>
+    <pre class="citation short">${data.concatenatedAuthors}, "${data.title}", ${data.journal.title}, ${data.publishedYear}. http://doi.org/${data.doi}</pre>
+
+    <p>BibTeX citation</p>
+<pre class="citation long">@article{${data.slug},
+  author = {${data.bibtexAuthors}},
+  title = {${data.title}},
+  journal = {${data.journal.title}},
+  year = {${data.publishedYear}},
+  url = {${data.url}},
+  doi = {${data.doi}}
+}</pre>`;
+
+    let existingHTML = el.innerHTML;
+    el.innerHTML = existingHTML + newHTML;
+  }
+}

components/appendix.js

@@ -1,4 +1,4 @@
-const html = `
+const templateHTML = `
 <style>
   dt-appendix {
     display: block;
@@ -45,45 +45,28 @@ const html = `
 </style>
 
 <div class="l-body">
-  <h3>References</h3>
-  <dt-bibliography></dt-bibliography>
-  <h3 id="citation">Errors, Reuse, and Citation</h3>
-  <p>If you see mistakes or want to suggest changes, please <a class="github-issue">create an issue on GitHub</a>.</p>
-  <p>Diagrams and text are licensed under Creative Commons Attribution <a href="https://creativecommons.org/licenses/by/2.0/">CC-BY 2.0</a>, unless noted otherwise, with the <a class="github">source available on GitHub</a>. The figures that have been reused from other sources don't fall under this license and can be recognized by a note in their caption: “Figure from …”.</p>
-  <p>For attribution in academic contexts, please cite this work as</p>
-  <pre class="citation short"></pre>
-  <p>BibTeX citation</p>
-  <pre class="citation long"></pre>
 </div>
 `;
 
 export default function(dom, data) {
   let el = dom.querySelector('dt-appendix')
   if (el) {
-    let oldHtml = el.innerHTML;
-    el.innerHTML = html;
-    let div = el.querySelector("div.l-body")
+    let userHTML = el.innerHTML;
+    el.innerHTML = templateHTML;
+    let newHTML = "";
 
+    // If we have some footnotes on the page, render a container for the footnote list.
     if (dom.querySelector("dt-fn")) {
-      div.innerHTML = `<h3>Footnotes</h3><dt-fn-list></dt-fn-list>` + div.innerHTML;
+      newHTML = newHTML + `<h3>Footnotes</h3><dt-fn-list></dt-fn-list>`;
     }
 
-    div.innerHTML = oldHtml + div.innerHTML;
-    if (data.githubCompareUpdatesUrl) {
-      div.innerHTML = `<h3>Updates</h3><p><a href="${data.githubCompareUpdatesUrl}">View all changes</a> to this article since it was first published.</p>` + div.innerHTML;
+    // If we have any citations on the page, render a container for the bibliography.
+    if (dom.querySelector("dt-cite")) {
+      newHTML = newHTML + `<h3>References</h3><dt-bibliography></dt-bibliography>`;
     }
 
-    el.querySelector("a.github").setAttribute("href", data.githubUrl);
-    el.querySelector("a.github-issue").setAttribute("href", data.githubUrl + "/issues/new");
-    el.querySelector(".citation.short").textContent = data.concatenatedAuthors + ", " + '"' + data.title + '", Distill, ' + data.publishedYear + ".";
-    var bibtex  = "@article{" + data.slug + ",\n";
-        bibtex += "  author = {" + data.bibtexAuthors + "},\n";
-        bibtex += "  title = {" + data.title + "},\n";
-        bibtex += "  journal = {Distill},\n";
-        bibtex += "  year = {" + data.publishedYear + "},\n";
-        bibtex += "  note = {" + data.url + "}\n";
-        bibtex += "}";
-    el.querySelector(".citation.long").textContent = bibtex;
+    let div = el.querySelector("div.l-body")
+    div.innerHTML = userHTML + newHTML;
   }
 
 }

components/bibliography.js

@@ -2,7 +2,6 @@ import bibtexParse from "bibtex-parse-js";
 
 export default function(dom, data) {
   let el = dom.querySelector('script[type="text/bibliography"]');
-  let citations = [];
   let bibliography = {};
   //TODO If we don't have a local element, make a request for the document.
   if (el) {
@@ -17,30 +16,12 @@ export default function(dom, data) {
                             (full, x, char) => char);
           val = val.replace(/{\\([a-zA-Z])}/g,
                             (full, char) => char);
-          e.entryTags[k] = val;
+          e.entryTags[k.toLowerCase()] = val;
         }
         bibliography[e.citationKey] = e.entryTags;
         bibliography[e.citationKey].type = e.entryType;
       });
     }
-
-
-    var citeTags = [].slice.apply(dom.querySelectorAll("dt-cite"));
-    citeTags.forEach(el => {
-      let key = el.getAttribute("key");
-      if (key) {
-        let citationKeys = key.split(",");
-        citationKeys.forEach(key => {
-          if (citations.indexOf(key) == -1){
-            citations.push(key);
-            if (!(key in bibliography)){
-              console.warn("No bibliography entry found for: " + key);
-            }
-          }
-        });
-      }
-    });
   }
   data.bibliography = bibliography;
-  data.citations = citations;
 }

components/byline.js

@@ -134,14 +134,18 @@ const template = `
     </div>
     {{/authors}}
   </div>
+  {{#publishedYear}}
   <div class="date">
     <div class="month">{{publishedMonth}}. {{publishedDay}}</div>
     <div class="year">{{publishedYear}}</div>
   </div>
+  {{/publishedYear}}
+  {{#publishedYear}}
   <a class="citation" href="#citation">
     <div>Citation:</div>
     <div>{{concatenatedAuthors}}, {{publishedYear}}</div>
   </a>
+  {{/publishedYear}}
 </div>
 `
 

components/citation.js

@@ -35,6 +35,25 @@ export default function(dom, data) {
       return a.author.localeCompare(b.author);
     });
   }*/
+  
+  var appendCiteHoverDiv = (function() {
+    function nodeFromString(str) {
+      var div = dom.createElement("div");
+      div.innerHTML = str;
+      return div.firstChild;
+    }
+    var hover_boxes_container = nodeFromString(`<div id="cite-hover-boxes-container"></div>`)
+    dom.querySelector("body").appendChild(hover_boxes_container);
+    var hover_n = 0;
+    return function appendHoverDiv(content) {
+      var id = `dt-cite-hover-box-${hover_n}`;
+      hover_n += 1;
+      var str = `<div style="display:none;" class="dt-hover-box" id="${id}" >${content}</div>`;
+      var div = nodeFromString(str);
+      hover_boxes_container.appendChild(div);
+      return id;
+    }
+  })();
 
   var citeTags = [].slice.apply(dom.querySelectorAll("dt-cite"));
   citeTags.forEach((el,n) => {
@@ -47,10 +66,11 @@ export default function(dom, data) {
         if (n>0) cite_hover_str += "<br><br>";
         cite_hover_str += hover_cite(data.bibliography[key]);
       });
-      cite_hover_str = cite_hover_str.replace(/"/g, "&#39;")
+      var ref_id = appendCiteHoverDiv(cite_hover_str);
+      //cite_hover_str = cite_hover_str.replace(/"/g, "&#39;")
       var orig_string = el.innerHTML;
       if (orig_string != "") orig_string += " ";
-      el.innerHTML = `<span id="citation-${n}" data-hover="${cite_hover_str}">${orig_string}<span class="citation-number">${cite_string}</span></span>`;
+      el.innerHTML = `<span id="citation-${n}" data-hover-ref="${ref_id}">${orig_string}<span class="citation-number">${cite_string}</span></span>`;
     }
   });
 

components/code.js

@@ -1,4 +1,12 @@
 import Prism from "prismjs";
+import "prismjs/components/prism-python";
+import "prismjs/components/prism-clike";
+import "prismjs/components/prism-lua";
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-go";
+import "prismjs/components/prism-markdown";
+import "prismjs/components/prism-julia";
+
 
 export default function(dom, data) {
   let codeElements = [].slice.call(dom.querySelectorAll("dt-code"));

components/data.js

@@ -0,0 +1,152 @@
+import {timeFormat} from "d3-time-format";
+
+export default function(dom, data) {
+
+  //
+  // Properties from source
+  //
+
+  //   title: 'Attention and Augmented Recurrent Neural Networks',
+  //   description: 'A visual overview of neural attention, and the powerful extensions of neural networks being built on top of it.',
+  //   url: 'http://distill.pub/2016/augmented-rnns',
+  //   tags: [ 'rnn' ],
+  //   doiSuffix: 1,
+  //   doi: '10.23915/distill.00001',
+  //   volume: 1,
+  //   issue: 9,
+  //   distillPath: '2016/augmented-rnns',
+  //   githubPath: 'distillpub/post--augmented-rnns',
+  //   githubCompareUpdatesUrl: 'https://github.com/distillpub/post--augmented-rnns/compare/1596e094d8943d2dc0ea445d92071129c6419c59...3bd9209e0c24d020f87cf6152dcecc6017cbc193',
+  //   updatedDate: 2017-03-21T07:13:16.000Z,
+  //   publishedDate: 2016-09-08T07:00:00.000Z,
+  //   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": [...]
+  //   }
+
+  //
+  // Computed Properties
+  //
+
+  //   githubUrl: 'https://github.com/distillpub/post--augmented-rnns',
+  //   previewURL: 'http://distill.pub/2016/augmented-rnns/thumbnail.jpg',
+  //   publishedDateRFC: 'Thu, 08 Sep 2016 00:00:00 -0700',
+  //   publishedYear: 2016,
+  //   publishedMonth: 'Sept',
+  //   publishedDay: 8,
+  //   publishedMonthPadded: '09',
+  //   publishedDayPadded: '08',
+  //   updatedDateRFC: 'Tue, 21 Mar 2017 00:13:16 -0700',
+  //   concatenatedAuthors: 'Olah & Carter',
+  //   bibtexAuthors: 'Olah, Chris and Carter, Shan',
+  //   slug: 'olah2016attention'
+  //   authors: [
+  //     {
+  //       "personalURL": null,
+  //       "name": "Chris Olah",
+  //       "firstName": "Chris",
+  //       "lastName": "Olah",
+  //       "affiliationURL": null,
+  //       "affiliation": "Google Brain"
+  //     }
+  //   ],
+  //   bibliography: {
+  //     "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"
+  //     },
+  //     ...
+  //   },
+  //   citations: [
+  //     "gregor2015draw",
+  //     "mercier2011humans",
+  //     "dong2014image",
+  //     "dumoulin2016guide",
+  //     "mordvintsev2015inceptionism"
+  //   ],
+
+
+  // citations:
+  let citations = [];
+  var citeTags = [].slice.apply(dom.querySelectorAll("dt-cite"));
+  citeTags.forEach(el => {
+    let key = el.getAttribute("key");
+    if (key) {
+      let citationKeys = key.split(",");
+      citationKeys.forEach(key => {
+        if (citations.indexOf(key) == -1){
+          citations.push(key);
+          if (!(key in data.bibliography)){
+            console.warn("No bibliography entry found for: " + key);
+          }
+        }
+      });
+    }
+  });
+  data.citations = citations;
+
+
+  data.authors = data.authors || [];
+
+  // paths
+  if (!data.distillPath && !data.url) {
+    data.url = "http://distill.pub/";
+  } else if (!data.url) {
+    data.url = "http://distill.pub/" + data.distillPath;
+  }
+  data.githubUrl = "https://github.com/" + data.githubPath;
+
+  data.previewURL = data.previewURL ? data.previewURL : data.url + "/thumbnail.jpg"
+
+  // Homepage
+  //data.homepage = !post.noHomepage;
+  data.journal = data.journal || {};
+
+  // Dates
+  if (data.publishedDate){//} && data.journal) {
+    data.volume = data.publishedDate.getFullYear() - 2015;
+    data.issue = data.publishedDate.getMonth() + 1;
+  }
+
+  data.publishedDate = data.publishedDate ? data.publishedDate : new Date("Invalid");
+  data.updatedDate = data.updatedDate ? data.updatedDate : new Date("Invalid");
+
+  data.publishedDateRFC
+  let RFC = timeFormat("%a, %d %b %Y %H:%M:%S %Z");
+  let months = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
+  let zeroPad = (n) => { return n < 10 ? "0" + n : n; };
+  data.publishedDateRFC = RFC(data.publishedDate);
+  data.publishedYear = data.publishedDate.getFullYear();
+  data.publishedMonth = months[data.publishedDate.getMonth()];
+  data.publishedDay = data.publishedDate.getDate();
+  data.publishedMonthPadded = zeroPad(data.publishedDate.getMonth() + 1);
+  data.publishedDayPadded = zeroPad(data.publishedDate.getDate());
+  data.updatedDateRFC = RFC(data.updatedDate);
+
+  if (data.authors.length  > 2) {
+    data.concatenatedAuthors = data.authors[0].lastName + ", et al.";
+  } else if (data.authors.length === 2) {
+    data.concatenatedAuthors = data.authors[0].lastName + " & " + data.authors[1].lastName;
+  } else if (data.authors.length === 1) {
+    data.concatenatedAuthors = data.authors[0].lastName
+  }
+
+  data.bibtexAuthors = data.authors.map(function(author){
+    return author.lastName + ", " + author.firstName;
+  }).join(" and ");
+
+  data.slug = data.authors.length ? data.authors[0].lastName.toLowerCase() + data.publishedYear + data.title.split(" ")[0].toLowerCase() : "Untitled";
+
+}

components/dt-math.js

@@ -0,0 +1,18 @@
+import katex from "katex";
+
+const html = `
+<style>
+dt-math[block] {
+  display: block;
+}
+</style>
+`;
+
+export default function(dom, data) {
+  let equationElements = [].slice.call(dom.querySelectorAll("dt-math"));
+  equationElements.forEach(el => {
+    let content = el.textContent;
+    let displayMode = el.hasAttribute("block") ? true : false;
+    el.innerHTML = html + katex.renderToString(content, {displayMode: displayMode});
+  });
+}

components/expand-data.js

@@ -1,50 +0,0 @@
-import {timeFormat} from "d3-time-format";
-
-export default function(dom, data) {
-
-    data.authors = data.authors || [];
-
-    // paths
-    data.url = "http://distill.pub/" + data.distillPath;
-    data.githubUrl = "https://github.com/" + data.githubPath;
-
-    // Homepage
-    //data.homepage = !post.noHomepage;
-    data.journal = data.journal || {};
-
-    // Dates
-    if (data.publishedDate){//} && data.journal) {
-      data.volume = data.publishedDate.getFullYear() - 2015;
-      data.issue = data.publishedDate.getMonth() + 1;
-    }
-
-    data.publishedDate = data.publishedDate ? data.publishedDate : new Date("Invalid");
-    data.updatedDate = data.updatedDate ? data.updatedDate : new Date("Invalid");
-
-    data.publishedDateRFC
-    let RFC = timeFormat("%a, %d %b %Y %H:%M:%S %Z");
-    let months = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
-    let zeroPad = (n) => { return n < 10 ? "0" + n : n; };
-    data.publishedDateRFC = RFC(data.publishedDate);
-    data.publishedYear = data.publishedDate.getFullYear();
-    data.publishedMonth = months[data.publishedDate.getMonth()];
-    data.publishedDay = data.publishedDate.getDate();
-    data.publishedMonthPadded = zeroPad(data.publishedDate.getMonth() + 1);
-    data.publishedDayPadded = zeroPad(data.publishedDate.getDate());
-    data.updatedDateRFC = RFC(data.updatedDate);
-
-    if (data.authors.length  > 2) {
-      data.concatenatedAuthors = data.authors[0].lastName + ", et al.";
-    } else if (data.authors.length === 2) {
-      data.concatenatedAuthors = data.authors[0].lastName + " & " + data.authors[1].lastName;
-    } else if (data.authors.length === 1) {
-      data.concatenatedAuthors = data.authors[0].lastName
-    }
-
-    data.bibtexAuthors = data.authors.map(function(author){
-      return author.lastName + ", " + author.firstName;
-    }).join(" and ");
-
-    data.slug = data.authors.length ? data.authors[0].lastName.toLowerCase() + data.publishedYear + data.title.split(" ")[0].toLowerCase() : "Untitled";
-
-}

components/footer.js

@@ -29,13 +29,33 @@ dt-footer .logo {
   text-decoration: none;
   margin-right: 6px;
 }
+dt-footer .nav {
+  margin-top: 12px;
+}
+dt-footer .nav a {
+  color: rgba(255, 255, 255, 0.8);
+  margin-right: 6px;
+}
 </style>
 
-<div class="l-screen-inset">
+<div class="l-page">
+  <div class="description">
   <a href="/" class="logo">
     ${logo}
     Distill
-  </a> is dedicated to clear explanations of machine learning
+  </a>
+  is dedicated to clear explanations of machine learning
+  </div>
+  <div class="nav">
+    <a href="http://distill.pub/about/">About</a>
+    <a href="http://distill.pub/journal/">Submit</a>
+    <a href="http://distill.pub/prize/">Prize</a>
+    <a href="http://distill.pub/archive/">Archive</a>
+    <a href="http://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>
 `;
 

components/footnote.js

@@ -1,14 +1,35 @@
 export default function(dom, data) {
 
+  var appendFootnoteHoverDiv = (function() {
+    function nodeFromString(str) {
+      var div = dom.createElement("div");
+      div.innerHTML = str;
+      return div.firstChild;
+    }
+    var hover_boxes_container = nodeFromString(`<div id="footnote-hover-boxes-container"></div>`)
+    dom.querySelector("body").appendChild(hover_boxes_container);
+    var hover_n = 0;
+    return function appendHoverDiv(content) {
+      var id = `dt-fn-hover-box-${hover_n}`;
+      hover_n += 1;
+      var str = `<div style="display:none;" class="dt-hover-box" id="${id}" >${content}</div>`;
+      var div = nodeFromString(str);
+      hover_boxes_container.appendChild(div);
+      return id;
+    }
+  })();
+
+
   var fnTags = [].slice.apply(dom.querySelectorAll("dt-fn"));
   var fnContent = [];
   fnTags.forEach((el,n) => {
     var content = el.innerHTML;
+    var ref_id = appendFootnoteHoverDiv(content)
     fnContent.push(content);
     n = (n+1)+"";
     var key = "fn-"+n;
     var escaped_content = content.replace(/"/g, "&#39;");
-    el.innerHTML = `<sup><span id="${key}" data-hover="${escaped_content}" style="cursor:pointer">${n}</span></sup>`;
+    el.innerHTML = `<sup><span id="${key}" data-hover-ref="${ref_id}" style="cursor:pointer">${n}</span></sup>`;
   });
 
   let fnList = dom.querySelector("dt-fn-list");

components/header.js

@@ -72,9 +72,9 @@ dt-header .nav a {
     Distill
   </a>
   <div class="nav">
-    <a href="/faq">About</a>
-    <a href="https://github.com/distillpub">GitHub</a>
-    <!-- https://twitter.com/distillpub -->
+    <a href="/about/">About</a>
+    <a href="/prize/">Prize</a>
+    <a href="/journal/">Submit</a>
   </div>
 </div>
 `

components/hover-box.txt

@@ -1,96 +1,4 @@
-// DistillHoverBox
-//=====================================
 
-function DistillHoverBox(key, pos){
-
-  if (!(key in DistillHoverBox.contentMap)){
-    console.error("No DistillHoverBox content registered for key", key);
-  }
-  if (key in DistillHoverBox.liveBoxes) {
-    console.error("There already exists a DistillHoverBox for key", key);
-  } else {
-    for (var k in DistillHoverBox.liveBoxes)
-      DistillHoverBox.liveBoxes[k].remove();
-    DistillHoverBox.liveBoxes[key] = this;
-  }
-  this.key = key;
-
-  var pretty = window.innerWidth > 600;
-
-  var padding = pretty? 18 : 12;
-  var outer_padding = pretty ? 18 : 0;
-  var bbox = document.querySelector("body").getBoundingClientRect();
-  var left = pos[0] - bbox.left, top = pos[1] - bbox.top;
-  var width = Math.min(window.innerWidth-2*outer_padding, 648);
-  left = Math.min(left, window.innerWidth-width-outer_padding);
-  width = width - 2*padding;
-
-  var str = `<div style="position: absolute;
-                          background-color: #FFF;
-                          white-s
-                          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}" >
-              ${DistillHoverBox.contentMap[key]}
-              </div>`;
-
-  this.div = appendBody(str);
-
-  DistillHoverBox.bind (this.div, key);
-}
-
-DistillHoverBox.prototype.remove = function remove(){
-  if (this.div) this.div.remove();
-  if (this.timeout) clearTimeout(this.timeout);
-  delete DistillHoverBox.liveBoxes[this.key];
-}
-
-DistillHoverBox.prototype.stopTimeout = function stopTimeout() {
-  if (this.timeout) clearTimeout(this.timeout);
-}
-
-DistillHoverBox.prototype.extendTimeout = function extendTimeout(T) {
-  //console.log("extend", T)
-  var this_ = this;
-  this.stopTimeout();
-  this.timeout = setTimeout(() => this_.remove(), T);
-}
-
-DistillHoverBox.liveBoxes = {};
-DistillHoverBox.contentMap = {};
-
-DistillHoverBox.bind = function bind(node, key) {
-  if (typeof node == "string"){
-    node = document.querySelector(node);
-  }
-  node.addEventListener("mouseover", () => {
-    var bbox = node.getBoundingClientRect();
-    if (!(key in DistillHoverBox.liveBoxes)){
-      new DistillHoverBox(key, [bbox.right, bbox.bottom]);
-    }
-    DistillHoverBox.liveBoxes[key].stopTimeout();
-  });
-  node.addEventListener("mouseout", () => {
-    if (key in DistillHoverBox.liveBoxes){
-      DistillHoverBox.liveBoxes[key].extendTimeout(250);
-    }
-  });
-
-}
-
-
-function appendBody(str){
-  var node = nodeFromString(str);
-  var body = document.querySelector("body");
-  body.appendChild(node);
-  return node;
-}
 
 function nodeFromString(str) {
   var div = document.createElement("div");
@@ -98,11 +6,118 @@ function nodeFromString(str) {
   return div.firstChild;
 }
 
-var hover_es = document.querySelectorAll("span[data-hover]");
+function make_hover_css(pos) {
+  var pretty = window.innerWidth > 600;
+  var padding = pretty? 18 : 12;
+  var outer_padding = pretty ? 18 : 0;
+  var bbox = document.querySelector("body").getBoundingClientRect();
+  var left = pos[0] - bbox.left, top = pos[1] - bbox.top;
+  var 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};`);
+}
+
+
+function DtHoverBox(div_id) {
+  this.div = document.querySelector("#"+div_id);
+  this.visible = false;
+  this.bindDivEvents();
+  DtHoverBox.box_map[div_id] = this;
+}
+
+DtHoverBox.box_map = {};
+
+DtHoverBox.get_box = function get_box(div_id) {
+  if (div_id in DtHoverBox.box_map) {
+    return DtHoverBox.box_map[div_id];
+  } else {
+    return new DtHoverBox(div_id);
+  }
+}
+
+DtHoverBox.prototype.show = function show(pos){
+  this.visible = true;
+  this.div.setAttribute("style", make_hover_css(pos) );
+  for (var box_id in DtHoverBox.box_map) {
+    var box = DtHoverBox.box_map[box_id];
+    if (box != this) box.hide();
+  }
+}
+
+DtHoverBox.prototype.showAtNode = function showAtNode(node){
+    var bbox = node.getBoundingClientRect();
+    this.show([bbox.right, bbox.bottom]);
+}
+
+DtHoverBox.prototype.hide = function hide(){
+  this.visible = false;
+  if (this.div) this.div.setAttribute("style", "display:none");
+  if (this.timeout) clearTimeout(this.timeout);
+}
+
+DtHoverBox.prototype.stopTimeout = function stopTimeout() {
+  if (this.timeout) clearTimeout(this.timeout);
+}
+
+DtHoverBox.prototype.extendTimeout = function extendTimeout(T) {
+  //console.log("extend", T)
+  var this_ = this;
+  this.stopTimeout();
+  this.timeout = setTimeout(function(){this_.hide();}.bind(this), T);
+}
+
+// Bind events to a link to open this box
+DtHoverBox.prototype.bind = function bind(node) {
+  if (typeof node == "string"){
+    node = document.querySelector(node);
+  }
+
+  node.addEventListener("mouseover", function(){
+    if (!this.visible) this.showAtNode(node);
+    this.stopTimeout();
+  }.bind(this));
+
+  node.addEventListener("mouseout", function(){this.extendTimeout(250);}.bind(this));
+
+  node.addEventListener("touchstart", function(e) {
+    if (this.visible) {
+      this.hide();
+    } else {
+      this.showAtNode(node);
+    }
+    // Don't trigger body touchstart event when touching link
+    e.stopPropagation();
+  }.bind(this));
+}
+
+DtHoverBox.prototype.bindDivEvents = function bindDivEvents(){
+  // For mice, same behavior as hovering on links
+  this.div.addEventListener("mouseover", function(){
+    if (!this.visible) this.showAtNode(node);
+    this.stopTimeout();
+  }.bind(this));
+  this.div.addEventListener("mouseout", function(){this.extendTimeout(250);}.bind(this));
+
+  // Don't trigger body touchstart event when touching within box
+  this.div.addEventListener("touchstart", function(e){e.stopPropagation();});
+  // Close box when touching outside box
+  document.body.addEventListener("touchstart", function(){this.hide();}.bind(this));
+}
+
+var hover_es = document.querySelectorAll("span[data-hover-ref]");
 hover_es = [].slice.apply(hover_es);
-hover_es.forEach((e,n) => {
-  var key = "hover-"+n;
-  var content = e.getAttribute("data-hover");
-  DistillHoverBox.contentMap[key] = content;
-  DistillHoverBox.bind(e, key);
-});
+hover_es.forEach(function(e,n){
+  var ref_id = e.getAttribute("data-hover-ref");
+  DtHoverBox.get_box(ref_id).bind(e);
+})

components/meta.js

@@ -1,12 +1,13 @@
 import favicon from './distill-favicon.base64';
+import escape from 'escape-html';
 
 export default function(dom, data) {
   let head = dom.querySelector("head");
   let appendHead = html => appendHtml(head, html);
 
-  function meta(name, content) {
-    if (content)
-      appendHead(`    <meta name="${name}" content="${content}" >\n`);
+  function meta(name, content, force) {
+    if (content || force)
+      appendHead(`    <meta name="${name}" content="${escape(content)}" >\n`);
   }
 
   appendHead(`
@@ -20,6 +21,7 @@ export default function(dom, data) {
   appendHead(`
     <!--  https://schema.org/Article -->
     <meta property="article:published" itemprop="datePublished" content="${data.publishedYear}-${data.publishedMonthPadded}-${data.publishedDayPadded}" />
+    <meta property="article:created" itemprop="dateCreated" content="${data.publishedDate}" />
     <meta property="article:modified" itemprop="dateModified" content="${data.updatedDate}" />
   `);
   data.authors.forEach((a) => {
@@ -33,7 +35,7 @@ export default function(dom, data) {
     <meta property="og:title" content="${data.title}"/>
     <meta property="og:description" content="${data.description}">
     <meta property="og:url" content="${data.url}"/>
-    <meta property="og:image" content="${data.url}/thumbnail.jpg"/>
+    <meta property="og:image" content="${data.previewURL}"/>
     <meta property="og:locale" content="en_US" />
     <meta property="og:site_name" content="Distill" />
   `);
@@ -44,7 +46,7 @@ export default function(dom, data) {
     <meta name="twitter:title" content="${data.title}">
     <meta name="twitter:description" content="${data.description}">
     <meta name="twitter:url" content="${data.url}">
-    <meta name="twitter:image" content="${data.url}/thumbnail.jpg">
+    <meta name="twitter:image" content="${data.previewURL}">
     <meta name="twitter:image:width" content="560">
     <meta name="twitter:image:height" content="295">
   `);
@@ -55,20 +57,23 @@ export default function(dom, data) {
       <!--  https://scholar.google.com/intl/en/scholar/inclusion.html#indexing -->\n`);
 
     meta("citation_title", data.title);
-    meta("citation_fulltext_html_url", data.url);
+    //meta("citation_fulltext_html_url", data.url);
     meta("citation_volume", data.volume);
     meta("citation_issue", data.issue);
     meta("citation_firstpage", data.doiSuffix? `e${data.doiSuffix}` : undefined);
     meta("citation_doi", data.doi);
 
     let journal = data.journal || {};
-    meta("citation_journal_title", journal.name);
-    meta("citation_journal_abbrev", journal.nameAbbrev);
+    meta("citation_journal_title", journal.full_title || journal.title);
+    meta("citation_journal_abbrev", journal.abbrev_title);
     meta("citation_issn", journal.issn);
     meta("citation_publisher", journal.publisher);
+    meta("citation_fulltext_world_readable", "", true);
 
     if (data.publishedDate){
       let zeroPad = (n) => { return n < 10 ? "0" + n : n; };
+      meta("citation_online_date", `${data.publishedYear}/${data.publishedMonthPadded}/${data.publishedDayPadded}`);
+      // Should we do something different here?
       meta("citation_publication_date", `${data.publishedYear}/${data.publishedMonthPadded}/${data.publishedDayPadded}`);
     }
 
@@ -95,10 +100,32 @@ function appendHtml(el, html) {
 }
 
 function citation_meta_content(ref){
+  // Special test for arxiv
   var content = `citation_title=${ref.title};`;
-  ref.author.split(" and ").forEach(author => {
-    content += `citation_author=${author.trim()};`;
+
+  let name_strings = ref.author.split(" and ").forEach(name => {
+    name = name.trim();
+    if (name.indexOf(",") != -1){
+      var last = name.split(",")[0].trim();
+      var firsts = name.split(",")[1].trim();
+    } else {
+      var last = name.split(" ").slice(-1)[0].trim();
+      var firsts = name.split(" ").slice(0,-1).join(" ");
+    }
+    content += `citation_author=${firsts} ${last};`;
   });
+
+  if ("year" in ref) {
+    content += `citation_publication_date=${ref.year};`;
+  }
+
+  var arxiv_id_search = /https?:\/\/arxiv\.org\/pdf\/([0-9]*\.[0-9]*)\.pdf/.exec(ref.url);
+  arxiv_id_search = arxiv_id_search || /https?:\/\/arxiv\.org\/abs\/([0-9]*\.[0-9]*)/.exec(ref.url);
+  arxiv_id_search = arxiv_id_search || /arXiv preprint arXiv:([0-9]*\.[0-9]*)/.exec(ref.journal);
+  if (arxiv_id_search && arxiv_id_search[1]){
+    content += `citation_arxiv_id=${arxiv_id_search[1]};`;
+    return content;
+  }
   if ("journal" in ref){
     content += `citation_journal_title=${ref.journal};`;
   }

components/styles-article.css

@@ -3,9 +3,7 @@ dt-article {
   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) {
@@ -186,6 +184,25 @@ dt-article section {
   margin-bottom: 60px;
 }
 
+/* Tables */
+
+dt-article table {
+  border-collapse: collapse;
+}
+
+dt-article table th {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+dt-article table td {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+dt-article table th,
+dt-article table td {
+  font-size: 15px;
+  padding: 2px 0;
+}
 
 /* Figure */
 
@@ -233,15 +250,6 @@ 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%;

components/styles-layout.css

@@ -24,8 +24,11 @@ dt-article > h2,
 dt-article > h3,
 dt-article > h4,
 dt-article > figure,
+dt-article > table,
+dt-article > ol,
 dt-article > ul,
 dt-article > dt-byline,
+dt-article > dt-math,
 dt-article > dt-code,
 dt-article section > div,
 dt-article section > p,
@@ -34,6 +37,8 @@ dt-article section > h2,
 dt-article section > h3,
 dt-article section > h4,
 dt-article section > figure,
+dt-article section > table,
+dt-article section > ol,
 dt-article section > ul,
 dt-article section > dt-byline,
 dt-article section > dt-code {
@@ -57,8 +62,11 @@ dt-article section > dt-code {
   dt-article > h3,
   dt-article > h4,
   dt-article > figure,
+  dt-article > table,
+  dt-article > ol,
   dt-article > ul,
   dt-article > dt-byline,
+  dt-article > dt-math,
   dt-article > dt-code,
   dt-article section > div,
   dt-article section > p,
@@ -67,6 +75,8 @@ dt-article section > dt-code {
   dt-article section > h3,
   dt-article section > h4,
   dt-article section > figure,
+  dt-article section > table,
+  dt-article section > ol,
   dt-article section > ul,
   dt-article section > dt-byline,
   dt-article section > dt-code {
@@ -83,8 +93,11 @@ dt-article section > dt-code {
   dt-article > h3,
   dt-article > h4,
   dt-article > figure,
+  dt-article > table,
+  dt-article > ol,
   dt-article > ul,
   dt-article > dt-byline,
+  dt-article > dt-math,
   dt-article > dt-code,
   dt-article section > div,
   dt-article section > p,
@@ -92,6 +105,8 @@ dt-article section > dt-code {
   dt-article section > h3,
   dt-article section > h4,
   dt-article section > figure,
+  dt-article section > table,
+  dt-article section > ol,
   dt-article section > ul,
   dt-article section > dt-byline,
   dt-article section > dt-code {
@@ -218,6 +233,8 @@ dt-article section > dt-code {
   dt-article.centered > h3,
   dt-article.centered > h4,
   dt-article.centered > figure,
+  dt-article.centered > table,
+  dt-article.centered > ol,
   dt-article.centered > ul,
   dt-article.centered > dt-byline,
   dt-article.centered > dt-code,
@@ -227,6 +244,8 @@ dt-article section > dt-code {
   dt-article.centered section > h3,
   dt-article.centered section > h4,
   dt-article.centered section > figure,
+  dt-article.centered section > table,
+  dt-article.cebtered section > ol,
   dt-article.centered section > ul,
   dt-article.centered section > dt-byline,
   dt-article.centered section > dt-code,
@@ -236,6 +255,8 @@ dt-article section > dt-code {
   dt-article section.centered > h3,
   dt-article section.centered > h4,
   dt-article section.centered > figure,
+  dt-article section.centered > table,
+  dt-article section.centered > ol,
   dt-article section.centered > ul,
   dt-article section.centered > dt-byline,
   dt-article section.centered > dt-code {

components/typeset.js

@@ -51,16 +51,19 @@ function punctuation(text){
   text = text.replace(/--/g, '\u2014');
   text = text.replace(/ \u2014 /g,"\u2009\u2014\u2009"); //this has thin spaces
 
+  // The following are temporary commented out because incompatibility
+  // with katex
+
   // Elipses
-  text = text.replace(/\.\.\./g,'…');
+  // text = text.replace(/\.\.\./g,'…');
 
   // Nbsp for punc with spaces
-  var NBSP = "\u00a0";
-  var NBSP_PUNCTUATION_START = /([«¿¡]) /g;
-  var NBSP_PUNCTUATION_END = / ([\!\?:;\.,‽»])/g;
+  // var NBSP = "\u00a0";
+  // var NBSP_PUNCTUATION_START = /([«¿¡]) /g;
+  // var NBSP_PUNCTUATION_END = / ([\!\?:;\.,‽»])/g;
 
-  text = text.replace(NBSP_PUNCTUATION_START, '$1' + NBSP);
-  text = text.replace(NBSP_PUNCTUATION_END, NBSP + '$1');
+  // text = text.replace(NBSP_PUNCTUATION_START, '$1' + NBSP);
+  // text = text.replace(NBSP_PUNCTUATION_END, NBSP + '$1');
 
   return text;
 }
@@ -91,8 +94,8 @@ function quotes(text) {
 
 function ligatures(text){
 
-    text = text.replace(/fi/g, 'fi');
-    text = text.replace(/fl/g, 'fl');
+    // text = text.replace(/fi/g, 'fi');
+    // text = text.replace(/fl/g, 'fl');
 
     return text;
 };

examples/article.html

@@ -1,6 +1,9 @@
 <!doctype html>
 <meta charset="utf8">
 <script src="../dist/template.js"></script>
+
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" integrity="sha384-wITovz90syo1dJWVh32uuETPVEtGigN07tkttEqPv+uR2SE/mbQcG7ATL28aI9H0" crossorigin="anonymous">
+
 <script type="text/front-matter">
   title: Article Title
   published: Jan 10, 2017
@@ -17,11 +20,37 @@
   <h1>Hello World</h1>
   <h2>A description of the article</h2>
   <dt-byline></dt-byline>
-  <p>This is the first paragraph of the article.</p>
-  <p>Test a long&thinsp;&mdash;&thinsp;dash -- here it is.</p>
-  <p>Test for owner's possessive.</p>
-  <p>Test for "quoting a passage." And another sentence. Or two.</p>
-  <p>We can also cite <dt-cite key="gregor2015draw,mercier2011humans"></dt-cite> external publications. <dt-cite key="dong2014image,dumoulin2016guide,mordvintsev2015inceptionism"></dt-cite></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.</p>
+  <p>Here's a test of an inline equation <dt-math>c = a^2 + b^2</dt-math>.</p>
+  <dt-math block>c = \pm\sqrt{a^2 + b^2}</dt-math>
+  <p>We can also cite <dt-cite key="gregor2015draw,mercier2011humans"></dt-cite> external publications. <dt-cite key="dong2014image,dumoulin2016guide,mordvintsev2015inceptionism"></dt-cite> We should also be testing footnotes<dt-fn>This will become a hoverable footnote.</dt-fn>.</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>Here's a javascript code block.</p>
+  <dt-code block language="javascript">
+    var x = 25;
+    function(x){
+      return x * x;
+    }
+  </dt-code>
+  <p>We also support python.</p>
+  <dt-code block language="python">
+    # Python 3: Fibonacci series up to n
+      def fib(n):
+        a, b = 0, 1
+          while a < n:
+            print(a, end=' ')
+            a, b = b, a+b
+  </dt-code>
 </dt-article>
 
 <script type="text/bibliography">

examples/tutorial.html

@@ -164,7 +164,7 @@
   }
   </script>
   <p>The citation is presented inline like this: <dt-cite key="gregor2015draw"></dt-cite> (a number that displays more information on hover). If you have an appendix, a bibliography is automatically created and populated in it.</p>
-  <p>Distill chose a numerical inline citation style to improve readability of citation dense articles and because many of the benefits of longer citations are obviated by dispalying more information on hover. However, we consider it good style to mention author last names if you discuss something at length and it fits into the flow well -- the authors are human and it's nice for them to have the community associate them with their work.</p>
+  <p>Distill chose a numerical inline citation style to improve readability of citation dense articles and because many of the benefits of longer citations are obviated by displaying more information on hover. However, we consider it good style to mention author last names if you discuss something at length and it fits into the flow well -- the authors are human and it's nice for them to have the community associate them with their work.</p>
 
 
   <hr>

index.js

@@ -2,20 +2,22 @@ import html from "./components/html";
 import styles from "./components/styles";
 import frontMatter from "./components/front-matter";
 import bibliography from "./components/bibliography";
-import expandData from "./components/expand-data";
+import expandData from "./components/data";
 import meta from "./components/meta";
 import banner from "./components/banner";
-import header from "./components/header";
 import byline from "./components/byline";
 import appendix from "./components/appendix";
-import footer from "./components/footer";
+import appendixDistill from "./components/appendix-distill";
 import citation from "./components/citation";
 import footnote from "./components/footnote";
+import DTMath from "./components/dt-math";
 import markdown from "./components/markdown";
 import code from "./components/code";
 import typeset from "./components/typeset";
 import hoverBox from "./components/hover-box-include";
 import generateCrossref from "./components/generate-crossref";
+import header from "./components/header";
+import footer from "./components/footer";
 
 function renderImmediately(dom) {
   html(dom);
@@ -27,11 +29,10 @@ function renderOnLoad(dom, data) {
   bibliography(dom, data);
   expandData(dom, data);
   meta(dom, data);
-  header(dom, data);
   byline(dom, data);
   appendix(dom, data);
-  footer(dom, data);
   markdown(dom, data);
+  DTMath(dom, data);
   code(dom, data);
   citation(dom, data);
   footnote(dom, data);
@@ -40,17 +41,23 @@ function renderOnLoad(dom, data) {
 }
 
 // If we are in a browser, render automatically...
-if(window && window.document) {
-  let data = {};
-  renderImmediately(window.document);
-  window.document.addEventListener("DOMContentLoaded", (event) => {
-    renderOnLoad(window.document, data);
-    // Add a banner if we're not on localhost.
-    if (window.location.hostname !== "localhost" && window.location.origin !== "file://") {
-      banner(window.document, data);
-    }
-    generateCrossref(data);
-  });
+var browser = new Function("try { return this === window; }catch(e){ return false; }");
+if (browser) {
+  try {
+    var data = {};
+    renderImmediately(window.document);
+    window.document.addEventListener("DOMContentLoaded", function (event) {
+      renderOnLoad(window.document, data);
+      // Add a banner if we're not on localhost.
+      if (window.location.hostname !== "localhost" && window.location.origin !== "file://") {
+        banner(window.document, data);
+      }
+      generateCrossref(data);
+      // console.log(data);
+    });
+  } catch (error) {
+    console.error("Window not defined");
+  }
 }
 
 // If we are in node...
@@ -58,9 +65,17 @@ function render(dom, data) {
   renderImmediately(dom);
   renderOnLoad(dom, data);
   // Remove script tag so it doesn't run again in the client
-  let s = dom.querySelector('script[src="http://distill.pub/template.js"]');
+  let s = dom.querySelector('script[src*="distill.pub/template"]');
   if (s) { s.parentElement.removeChild(s); };
 }
 
+// Distill specific rendering
+function distillify(dom, data) {
+  header(dom, data);
+  appendixDistill(dom, data);
+  footer(dom, data);
+}
+
 export {render as render};
+export {distillify as distillify};
 export {generateCrossref as generateCrossref};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "distill-template",
-  "version": "0.0.21",
+  "version": "1.1.1",
   "description": "Template for creating Distill articles.",
   "main": "dist/template.js",
   "scripts": {
@@ -18,27 +18,24 @@
     "url": "https://github.com/distillpub/distill-template/issues"
   },
   "homepage": "https://github.com/distillpub/distill-template#readme",
-  "devDependencies": {
+  "dependencies": {
     "bibtex-parse-js": "^0.0.23",
     "chai": "^3.5.0",
+    "commander": "^2.9.0",
+    "d3-time-format": "^2.0.3",
+    "escape-html": "^1.0.3",
     "js-yaml": "^3.7.0",
     "jsdom": "^9.10.0",
+    "katex": "^0.7.1",
     "marked": "^0.3.6",
     "mocha": "^3.2.0",
+    "mustache": "^2.3.0",
     "prismjs": "^1.6.0",
     "rollup": "^0.36.4",
     "rollup-plugin-buble": "^0.14.0",
     "rollup-plugin-commonjs": "^7.0.0",
-    "rollup-plugin-livereload": "^0.3.1",
     "rollup-plugin-node-resolve": "^2.0.0",
-    "rollup-plugin-serve": "^0.1.0",
     "rollup-plugin-string": "^2.0.2",
-    "rollup-plugin-uglify": "^1.0.1",
     "rollup-watch": "^2.5.0"
-  },
-  "dependencies": {
-    "commander": "^2.9.0",
-    "d3-time-format": "^2.0.3",
-    "mustache": "^2.3.0"
   }
 }

rollup.config.js

@@ -1,12 +1,9 @@
 import buble from 'rollup-plugin-buble';
 import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
-import liveReload from 'rollup-plugin-livereload';
-import serve from 'rollup-plugin-serve';
-import uglify from 'rollup-plugin-uglify';
 import string from 'rollup-plugin-string';
 
-const PORT = 8080;
+// const PORT = 8080;
 // console.log(`open http://localhost:${PORT}/`);
 
 export default {
@@ -16,7 +13,7 @@ export default {
     {
       format: 'umd',
       moduleName: 'dl',
-      dest: `dist/template.js`,
+      dest: `dist/template.v1.js`,
     }
   ],
   plugins: [

scaffolds/gulp/README.md

@@ -0,0 +1,7 @@
+# Gulp with Mustache Templates
+
+To get started, make sure to run `yarn install` or `npm install` to install dependencies.
+
+Run `gulp` to build the project. Running `gulp serve` will run a watching server.
+
+There is very little processing going on, the only thing we've added is support for mustache partials.

yarn.lock

@@ -389,6 +389,10 @@ ecc-jsbn@~0.1.1:
   dependencies:
     jsbn "~0.1.0"
 
+escape-html@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+
 escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
@@ -809,6 +813,12 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.3.6"
 
+katex@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/katex/-/katex-0.7.1.tgz#06bb5298efad05e1e7228035ba8e1591f3061b8f"
+  dependencies:
+    match-at "^0.1.0"
+
 kind-of@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.1.0.tgz#475d698a5e49ff5e53d14e3e732429dc8bf4cf47"
@@ -905,7 +915,11 @@ marked@^0.3.6:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.6.tgz#b2c6c618fccece4ef86c4fc6cb8a7cbf5aeda8d7"
 
-micromatch@^2.1.5:
+match-at@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/match-at/-/match-at-0.1.0.tgz#f561e7709ff9a105b85cc62c6b8ee7c15bf24f31"
+
+micromatch@^2.1.5, micromatch@^2.3.11:
   version "2.3.11"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
   dependencies:
@@ -1280,6 +1294,13 @@ rollup-plugin-string@^2.0.2:
   dependencies:
     rollup-pluginutils "^1.5.0"
 
+rollup-plugin-svelte@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-svelte/-/rollup-plugin-svelte-1.8.0.tgz#4cefe4fcf453cd051378babb5c4804645acd1652"
+  dependencies:
+    rollup-pluginutils "^2.0.1"
+    svelte "^1.11.2"
+
 rollup-plugin-uglify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/rollup-plugin-uglify/-/rollup-plugin-uglify-1.0.1.tgz#11d0b0c8bcd2d07e6908f74fd16b0152390b922a"
@@ -1293,6 +1314,13 @@ rollup-pluginutils@^1.5.0, rollup-pluginutils@^1.5.1:
     estree-walker "^0.2.1"
     minimatch "^3.0.2"
 
+rollup-pluginutils@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.0.1.tgz#7ec95b3573f6543a46a6461bd9a7c544525d0fc0"
+  dependencies:
+    estree-walker "^0.3.0"
+    micromatch "^2.3.11"
+
 rollup-watch@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/rollup-watch/-/rollup-watch-2.5.0.tgz#852d660ddecc51696890aa8c22e95ed4558cc5f7"
@@ -1410,6 +1438,10 @@ supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
 
+svelte@^1.11.2:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-1.15.0.tgz#d5d00c89fc158bbaf5a19a159236fe56dad6d63c"
+
 symbol-tree@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.1.tgz#8549dd1d01fa9f893c18cc9ab0b106b4d9b168cb"