Extracting distill specific sections from the template

components/appendix-distill.js

@@ -0,0 +1,28 @@
+export default function(dom, data) {
+  let el = dom.querySelector('dt-appendix > div');
+  if (el) {
+    let existingHTML = el.innerHTML;
+    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>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>`;
+
+newHTML += `<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>`;
+
+newHTML += `<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>`;
+
+    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/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/styles-article.css

@@ -5,7 +5,6 @@ dt-article {
   padding-bottom: 72px;
   overflow: hidden;
   background: white;
-  min-height: calc(100vh - 70px - 182px);
 }
 
 @media(min-width: 1024px) {

examples/article.html

@@ -22,6 +22,7 @@
   <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>We should also be testing footnotes<dt-fn>This will become a hoverable footnote.</dt-fn>.</p>
 </dt-article>
 
 <script type="text/bibliography">

index.js

@@ -7,6 +7,7 @@ import meta from "./components/meta";
 import banner from "./components/banner";
 import byline from "./components/byline";
 import appendix from "./components/appendix";
+import appendixDistill from "./components/appendix-distill";
 import citation from "./components/citation";
 import footnote from "./components/footnote";
 import markdown from "./components/markdown";
@@ -48,6 +49,7 @@ if(window && window.document) {
       banner(window.document, data);
     }
     generateCrossref(data);
+    // console.log(data);
   });
 }
 
@@ -63,6 +65,7 @@ function render(dom, data) {
 // Distill specific rendering
 function distillify(dom, data) {
   header(dom, data);
+  appendixDistill(dom, data);
   footer(dom, data);
 }