Design changes

2026-08-01 13:00:27 +08:00 · 2017-08-09 16:48:07 -07:00
parent 27fbe9a932
commit a1800ca2b3
61 changed files with 22196 additions and 1092 deletions
@@ -1,89 +0,0 @@
-const html = `
-<style>
-  dt-appendix {
-    display: block;
-    font-size: 14px;
-    line-height: 24px;
-    margin-bottom: 0;
-    border-top: 1px solid rgba(0,0,0,0.1);
-    color: rgba(0,0,0,0.5);
-    background: rgb(250, 250, 250);
-    padding-top: 36px;
-    padding-bottom: 60px;
-  }
-  dt-appendix h3 {
-    font-size: 16px;
-    font-weight: 500;
-    margin-top: 18px;
-    margin-bottom: 18px;
-    color: rgba(0,0,0,0.65);
-  }
-  dt-appendix .citation {
-    font-size: 11px;
-    line-height: 15px;
-    border-left: 1px solid rgba(0, 0, 0, 0.1);
-    padding-left: 18px;
-    border: 1px solid rgba(0,0,0,0.1);
-    background: rgba(0, 0, 0, 0.02);
-    padding: 10px 18px;
-    border-radius: 3px;
-    color: rgba(150, 150, 150, 1);
-    overflow: hidden;
-    margin-top: -12px;
-  }
-  dt-appendix .references {
-    font-size: 12px;
-    line-height: 20px;
-  }
-  dt-appendix a {
-    color: rgba(0, 0, 0, 0.6);
-  }
-  dt-appendix ol,
-  dt-appendix ul {
-    padding-left: 24px;
-  }
-</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');
-
-    if (dom.querySelector('dt-fn')) {
-      div.innerHTML = '<h3>Footnotes</h3><dt-fn-list></dt-fn-list>' + div.innerHTML;
-    }
-
-    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;
-    }
-
-    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;
-  }
-
-}
@@ -1,46 +1,27 @@
-import bibtexParse from 'bibtex-parse-js';
+import { renderBibliography, templateString } from '../components/d-bibliography';

 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) {
-    let rawBib = el.textContent;
-    let parsed = bibtexParse.toJSON(rawBib);
-    if(parsed) {
-      parsed.forEach(e => {
-        for (var k in e.entryTags){
-          var val = e.entryTags[k];
-          val = val.replace(/[\t\n ]+/g, ' ');
-          val = val.replace(/{\\["^`.'acu~Hvs]( )?([a-zA-Z])}/g,
-            (full, x, char) => char);
-          val = val.replace(/{\\([a-zA-Z])}/g,
-            (full, char) => char);
-          e.entryTags[k] = 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);
-            }
-          }
-        });
-      }
-    });
+  const bibliographyTag = dom.querySelector('d-bibliography');
+  if (!bibliographyTag) {
+    console.warn('No bibliography tag found!');
+    return;
  }
-  data.bibliography = bibliography;
-  data.citations = citations;
+
+  const bibliographyEntries = new Map(data.citations.map( citationKey => {
+    const entry = data.bibliography.get(citationKey);
+    return [citationKey, entry];
+  }));
+
+  const prerenderedBibliography = dom.createElement('d-bibliography-prerendered');
+
+
+  const template = dom.createElement('template');
+  template.innerHTML = templateString;
+  const clone = dom.importNode(template.content, true);
+  prerenderedBibliography.innerHTML = template.content;
+  renderBibliography(prerenderedBibliography, bibliographyEntries, dom);
+
+  bibliographyTag.parentElement.insertBefore(bibliographyTag, prerenderedBibliography);
+  bibliographyTag.parentElement.removeChild(bibliographyTag);
+
 }
@@ -1 +0,0 @@
-iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA99JREFUeNrsG4t1ozDMzQSM4A2ODUonKBucN2hugtIJ6E1AboLcBiQTkJsANiAb9OCd/OpzMWBJBl5TvaeXPiiyJetry0J8wW3D3QpjRh3GjneXDq+fSQA9s2mH9x3KDhN4foJfCb8N/Jrv+2fnDn8vLRQOplWHVYdvHZYdZsBcZP1vBmh/n8DzEmhUQDPaOuP9pFuY+JwJHwHnCLQE2tnWBGEyXozY9xCUgHMhhjE2I4heVWtgIkZ83wL6Qgxj1obfWBxymPwe+b00BCCRNPbwfb60yleAkkBHGT5AEehIYz7eJrFDMF9CvH4wwhcGHiHMneFvLDQwlwvMLQq58trRcYBWfYn0A0OgHWQUSu25mE+BnoYKnnEJoeIWAifzOv7vLWd2ZKRfWAIme3tOiUaQ3UnLkb0xj1FxRIeEGKaGIHOs9nEgLaaA9i0JRYo1Ic67wJW86KSKE/ZAM8KuVMk8ITVhmxUxJ3Cl2xlm9Vtkeju1+mpCQNxaEGNCY8bs9X2YqwNoQeGjBWut/ma0QAWy/TqAsHx9wSya3I5IRxOfTC+leG+kA/4vSeEcGBtNUN6byhu3+keEZCQJUNh8MAO7HL6H8pQLnsW/Hd4T4lv93TPjfM7A46iEEqbB5EDOvwYNW6tGNZzT/o+CZ6sqZ6wUtR/wf7mi/VL8iNciT6rHih48Y55b4nKCHJCCzb4y0nwFmin3ZEMIoLfZF8F7nncFmvnWBaBj7CGAYA/WGJsUwHdYqVDwAmNsUgAx4CGgAA7GOOxADYOFWOaIKifuVYzmOpREqA21Mo7aPsgiY1PhOMAmxtR+AUbYH3Id2wc0SAFIQTsn9IUGWR8k9jx3vtXSiAacFxTAGakBk9UudkNECd6jLe+6HrshshvIuC6IlLMRy7er+JpcKma24SlE4cFZSZJDGVVrsNvitQhQrDhW0jfiOLfFd47C42eHT56D/BK0To+58Ahj+cAT8HT1UWlfLZCCd/uKawzU0Rh2EyIX/Icqth3niG8ybNroezwe6khdCNxRN+l4XGdOLVLlOOt2hTRJlr1ETIuMAltVTMz70mJrkdGAaZLSmnBEqmAE32JCMmuTlCnRgsBENtOUpHhvvsYIL0ibnBkaC6QvKcR7738GKp0AKnim7xgUSNv1bpS8QwhBt8r+EP47v/oyRK/S34yJ9nT+AN0Tkm4OdB9E4BsmXM3SnMlRFUrtp6IDpV2eKzdYvF3etm3KhQksbOLChGkSmcBdmcEwvqkrMy5BzL00NZeu3qPYJOOuCc+5NjcWKXQxFvTa3NoXJ4d8in7fiAUuTt781dkvuHX4K8AA2Usy7yNKLy0AAAAASUVORK5CYII=
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="64px" height="64px" viewBox="-1214 838 64 64" style="enable-background:new -1214 838 64 64;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:none;stroke:#000000;}
-</style>
-<g>
-	<g>
-		<path class="st0" d="M-1182,841.2c-15.9,0-28.8,12.9-28.8,28.8s12.9,28.8,28.8,28.8s28.8-12.9,28.8-28.8S-1166.1,841.2-1182,841.2
-			z M-1182,891.2c-7.7,0-13.9-6.1-13.9-13.8s13.9-22.2,13.9-36.3c0,14.2,13.9,28.7,13.9,36.3S-1174.3,891.2-1182,891.2z"/>
-	</g>
-</g>
-</svg>
@@ -1,3 +0,0 @@
-<svg viewBox="-607 419 64 64">
-  <path d="M-573.4,478.9c-8,0-14.6-6.4-14.6-14.5s14.6-25.9,14.6-40.8c0,14.9,14.6,32.8,14.6,40.8S-565.4,478.9-573.4,478.9z"/>
-</svg>
@@ -1,52 +0,0 @@
-import logo from './distill-logo.svg';
-
-let html = `
-<style>
-dt-footer {
-  display: block;
-  color: rgba(255, 255, 255, 0.4);
-  font-weight: 300;
-  padding: 40px 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  background-color: hsl(200, 60%, 15%);
-  text-align: center;
-}
-dt-footer .logo svg {
-  width: 24px;
-  position: relative;
-  top: 4px;
-  margin-right: 2px;
-}
-dt-footer .logo svg path {
-  fill: none;
-  stroke: rgba(255, 255, 255, 0.8);
-  stroke-width: 3px;
-}
-dt-footer .logo {
-  font-size: 17px;
-  font-weight: 200;
-  color: rgba(255, 255, 255, 0.8);
-  text-decoration: none;
-  margin-right: 6px;
-}
-</style>
-
-<div class="l-screen-inset">
-  <a href="/" class="logo">
-    ${logo}
-    Distill
-  </a> is dedicated to clear explanations of machine learning
-</div>
-`;
-
-export default function(dom, data) {
-  let el = dom.querySelector('dt-footer');
-  if(el) {
-    el.innerHTML = html;
-  } else {
-    let footer = dom.createElement('dt-footer');
-    footer.innerHTML = html;
-    let b = dom.querySelector('body');
-    b.appendChild(footer);
-  }
-}
@@ -1,92 +0,0 @@
-import logo from './distill-logo.svg';
-
-const html = `
-<style>
-dt-header {
-  display: block;
-  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);
-}
-dt-header .content {
-  height: 70px;
-}
-dt-header a {
-  font-size: 16px;
-  height: 60px;
-  line-height: 60px;
-  text-decoration: none;
-  color: rgba(255, 255, 255, 0.8);
-  padding: 22px 0;
-}
-dt-header a:hover {
-  color: rgba(255, 255, 255, 1);
-}
-dt-header svg {
-  width: 24px;
-  position: relative;
-  top: 4px;
-  margin-right: 2px;
-}
-@media(min-width: 1080px) {
-  dt-header {
-    height: 70px;
-  }
-  dt-header a {
-    height: 70px;
-    line-height: 70px;
-    padding: 28px 0;
-  }
-  dt-header .logo {
-  }
-}
-dt-header svg path {
-  fill: none;
-  stroke: rgba(255, 255, 255, 0.8);
-  stroke-width: 3px;
-}
-dt-header .logo {
-  font-size: 17px;
-  font-weight: 200;
-}
-dt-header .nav {
-  float: right;
-  font-weight: 300;
-}
-dt-header .nav a {
-  font-size: 12px;
-  margin-left: 24px;
-  text-transform: uppercase;
-}
-</style>
-
-<div class="content l-page">
-  <a href="/" class="logo">
-    ${logo}
-    Distill
-  </a>
-  <div class="nav">
-    <a href="/faq">About</a>
-    <a href="https://github.com/distillpub">GitHub</a>
-    <!-- https://twitter.com/distillpub -->
-  </div>
-</div>
-`;
-
-export default function(dom, data) {
-  let el = dom.querySelector('dt-header');
-  if(el) {
-    el.innerHTML = html;
-  } else {
-    let header = dom.createElement('dt-header');
-    header.innerHTML = html;
-    let b = dom.querySelector('body');
-    b.insertBefore(header, b.firstChild);
-  }
-}
@@ -1,17 +1,22 @@
 export default function(dom) {
+
+  const head = dom.querySelector('head');
+
+  // set language to 'en'
  if (!dom.querySelector('html').getAttribute('lang')) {
    dom.querySelector('html').setAttribute('lang', 'en');
  }

-  let head = dom.querySelector('head');
-
+  // set charset to 'utf-8'
  if (!dom.querySelector('meta[charset]')) {
-    let meta = dom.createElement('meta');
+    const meta = dom.createElement('meta');
    meta.setAttribute('charset', 'utf-8');
    head.appendChild(meta);
  }
+
+  // set viewport
  if (!dom.querySelector('meta[name=viewport]')) {
-    let meta = dom.createElement('meta');
+    const meta = dom.createElement('meta');
    meta.setAttribute('name', 'viewport');
    meta.setAttribute('content', 'width=device-width, initial-scale=1');
    head.appendChild(meta);
@@ -1,4 +1,4 @@
-import favicon from './distill-favicon.base64';
+import favicon from '../assets/distill-favicon.base64';

 export default function(dom, data) {
  let head = dom.querySelector('head');
@@ -68,7 +68,6 @@ export default function(dom, data) {
    meta('citation_publisher', journal.publisher);

    if (data.publishedDate){
-      let zeroPad = (n) => { return n < 10 ? '0' + n : n; };
      meta('citation_publication_date', `${data.publishedYear}/${data.publishedMonthPadded}/${data.publishedDayPadded}`);
    }

@@ -0,0 +1,31 @@
+const webcomponentPath = '../dist/webcomponents-lite.js';
+
+const template = `
+  if ('registerElement' in document &&
+      'import' in document.createElement('link') &&
+      'content' in document.createElement('template')) {
+    // Platform supports webcomponents natively! :-)
+  } else {
+    // Platform does not support webcomponents--loading polyfills synchronously.
+    const scriptTag = document.createElement('script');
+    scriptTag.src = '${webcomponentPath}';
+    scriptTag.async = false;
+    document.currentScript.parentNode.insertBefore(scriptTag, document.currentScript.nextSibling);
+  }
+`;
+
+export default function render(dom) {
+  // create polyfill script tag
+  const polyfillScriptTag = dom.createElement('script');
+  polyfillScriptTag.innerHTML = template;
+  polyfillScriptTag.id = 'polyfills';
+
+  // insert at appropriate position--before any other script tag
+  const head = dom.querySelector('head');
+  const firstScriptTag = dom.querySelector('script');
+  if (firstScriptTag) {
+    head.insertBefore(polyfillScriptTag, firstScriptTag);
+  } else {
+    head.appendChild(polyfillScriptTag);
+  }
+}
@@ -1,4 +1,4 @@
-export default function(dom, data) {
+export default function(dom) {

  var textNodes = dom.createTreeWalker(
    dom.body,
@@ -10,6 +10,7 @@ export default function(dom, data) {
    if (text && acceptNode(n)) {
      text = quotes(text);
      text = punctuation(text);
+      text = ligatures(text);
      n.nodeValue = text;
    }
  }
@@ -30,6 +31,9 @@ function acceptNode(node) {
         parent.nodeName !== 'D-CODE' &&
         parent.nodeName !== 'D-BIBLIOGRAPHY' &&
         parent.nodeName !== 'D-FOOTER' &&
+         parent.nodeName !== 'D-APPENDIX' &&
+         parent.nodeName !== 'D-FRONTMATTER' &&
+         parent.nodeName !== 'D-TOC' &&
         parent.nodeType !== 8 && //comment nodes
         !isMath;
 }
@@ -57,7 +61,7 @@ function punctuation(text){
  // Nbsp for punc with spaces
  var NBSP = '\u00a0';
  var NBSP_PUNCTUATION_START = /([«¿¡]) /g;
-  var NBSP_PUNCTUATION_END = / ([\!\?:;\.,‽»])/g;
+  var NBSP_PUNCTUATION_END = / ([!?:;.,‽»])/g;

  text = text.replace(NBSP_PUNCTUATION_START, '$1' + NBSP);
  text = text.replace(NBSP_PUNCTUATION_END, NBSP + '$1');
@@ -68,7 +72,7 @@ function punctuation(text){
 function quotes(text) {

  text = text
-    .replace(/(\W|^)"([^\s\!\?:;\.,‽»])/g, '$1\u201c$2') // beginning "
+    .replace(/(\W|^)"([^\s!?:;.,‽»])/g, '$1\u201c$2') // beginning "
    .replace(/(\u201c[^"]*)"([^"]*$|[^\u201c"]*\u201c)/g, '$1\u201d$2') // ending "
    .replace(/([^0-9])"/g,'$1\u201d') // remaining " at end of word
    .replace(/(\W|^)'(\S)/g, '$1\u2018$2') // beginning '
@@ -81,8 +85,8 @@ function quotes(text) {
    .replace(/'/g, '\u2032');

  // Allow escaped quotes
-  text = text.replace(/\\“/, '\"');
-  text = text.replace(/\\”/, '\"');
+  text = text.replace(/\\“/, '"');
+  text = text.replace(/\\”/, '"');
  text = text.replace(/\\’/, '\'');
  text = text.replace(/\\‘/, '\'');
				`@@ -1 +0,0 @@`
				iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA99JREFUeNrsG4t1ozDMzQSM4A2ODUonKBucN2hugtIJ6E1AboLcBiQTkJsANiAb9OCd/OpzMWBJBl5TvaeXPiiyJetry0J8wW3D3QpjRh3GjneXDq+fSQA9s2mH9x3KDhN4foJfCb8N/Jrv+2fnDn8vLRQOplWHVYdvHZYdZsBcZP1vBmh/n8DzEmhUQDPaOuP9pFuY+JwJHwHnCLQE2tnWBGEyXozY9xCUgHMhhjE2I4heVWtgIkZ83wL6Qgxj1obfWBxymPwe+b00BCCRNPbwfb60yleAkkBHGT5AEehIYz7eJrFDMF9CvH4wwhcGHiHMneFvLDQwlwvMLQq58trRcYBWfYn0A0OgHWQUSu25mE+BnoYKnnEJoeIWAifzOv7vLWd2ZKRfWAIme3tOiUaQ3UnLkb0xj1FxRIeEGKaGIHOs9nEgLaaA9i0JRYo1Ic67wJW86KSKE/ZAM8KuVMk8ITVhmxUxJ3Cl2xlm9Vtkeju1+mpCQNxaEGNCY8bs9X2YqwNoQeGjBWut/ma0QAWy/TqAsHx9wSya3I5IRxOfTC+leG+kA/4vSeEcGBtNUN6byhu3+keEZCQJUNh8MAO7HL6H8pQLnsW/Hd4T4lv93TPjfM7A46iEEqbB5EDOvwYNW6tGNZzT/o+CZ6sqZ6wUtR/wf7mi/VL8iNciT6rHih48Y55b4nKCHJCCzb4y0nwFmin3ZEMIoLfZF8F7nncFmvnWBaBj7CGAYA/WGJsUwHdYqVDwAmNsUgAx4CGgAA7GOOxADYOFWOaIKifuVYzmOpREqA21Mo7aPsgiY1PhOMAmxtR+AUbYH3Id2wc0SAFIQTsn9IUGWR8k9jx3vtXSiAacFxTAGakBk9UudkNECd6jLe+6HrshshvIuC6IlLMRy7er+JpcKma24SlE4cFZSZJDGVVrsNvitQhQrDhW0jfiOLfFd47C42eHT56D/BK0To+58Ahj+cAT8HT1UWlfLZCCd/uKawzU0Rh2EyIX/Icqth3niG8ybNroezwe6khdCNxRN+l4XGdOLVLlOOt2hTRJlr1ETIuMAltVTMz70mJrkdGAaZLSmnBEqmAE32JCMmuTlCnRgsBENtOUpHhvvsYIL0ibnBkaC6QvKcR7738GKp0AKnim7xgUSNv1bpS8QwhBt8r+EP47v/oyRK/S34yJ9nT+AN0Tkm4OdB9E4BsmXM3SnMlRFUrtp6IDpV2eKzdYvF3etm3KhQksbOLChGkSmcBdmcEwvqkrMy5BzL00NZeu3qPYJOOuCc+5NjcWKXQxFvTa3NoXJ4d8in7fiAUuTt781dkvuHX4K8AA2Usy7yNKLy0AAAAASUVORK5CYII=