Merge should be done; adds test for Google Scholar arxiv citation style.

README.md

@@ -1,39 +1,25 @@
-# Distill Templates
+# Distill Template [![Build Status](https://travis-ci.org/distillpub/template.svg?branch=master)](https://travis-ci.org/distillpub/template)
+
+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="https://distill.pub/template.v2.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 `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.
 
 ## Testing
 
-Run `yarn test`. That's it.
-
-
-## TODO:
-
--[ ] auto detection/adding behavior
-  * title
-  * appendix
-  * footnote list ?
--[x] should work without distill-appendix
--[x] YML author without ":" should work?
--[ ] throw warning on <hr>
--[ ] h numbering:
-  h2: position relative
-  a: position: absolute;
-  right: calc(100% + 16px);
-  /* text-align: right; */
-  /* width: 80px; */
-  /* font-size: 20px; */
-  /* font-weight: 200; */
-
-
-auto-added elements:
- title in front, no h1 -> add it
- no title in front, h1 -> read and put into frontMatter
- footnote -> footnote list
- break up bib
- if citation, no bib-list -> add citation-list
- if authors, no byline -> add byline
- no appendix -> add appendix
- 
+Run `npm test`. That's it.

examples/article.html

@@ -128,4 +128,6 @@
 
 </d-appendix>
 
+<distill-footer></distill-footer>
+
 </body>

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>

package-lock.json

@@ -1587,6 +1587,11 @@
         "is-arrayish": "0.2.1"
       }
     },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+    },
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",

package.json

@@ -58,6 +58,7 @@
     "d3-scale": "^1.0.6",
     "d3-selection": "^1.1.0",
     "d3-time-format": "^2.0.3",
+    "escape-html": "^1.0.3",
     "intersection-observer": "^0.4.0",
     "jsdom-wc": "^11.0.0-alpha-1",
     "katex": "^0.7.1"

src/components/d-byline.js

@@ -27,11 +27,15 @@ export function bylineTemplate(frontMatter) {
     </div>
     <div>
       <h3>Published</h3>
-      <p>${frontMatter.publishedMonth}. ${frontMatter.publishedDay} ${frontMatter.publishedYear}</p>
+      ${frontMatter.published ? `
+        <p>${frontMatter.publishedMonth}. ${frontMatter.publishedDay} ${frontMatter.publishedYear}</p> ` : `
+        <p><em>Not yet published</em></p>`}
     </div>
     <div>
       <h3>DOI</h3>
-      <p>${frontMatter.doi}</p>
+      ${frontMatter.doi ? `
+        <p>${frontMatter.doi}</p>` : `
+        <p><em>No DOI yet</em></p>`}
     </div>
   </div>
 `;

src/components/d-code.js

@@ -1,6 +1,13 @@
 import Prism from 'prismjs';
 import 'prismjs/components/prism-python';
 import 'prismjs/components/prism-clike';
+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';
 import css from 'prismjs/themes/prism.css';
 
 import { Template } from '../mixins/template.js';
@@ -43,7 +50,7 @@ export class Code extends Mutating(T(HTMLElement)) {
     }
     const language = Prism.languages[this.languageName];
     if (language == undefined) {
-      console.warn(`Distill does not yet support highlighting your code block in "${this.languageName}".`);
+      console.warn(`Distill does not yet support highlighting your code block in "${this.languageName}'.`);
       return;
     }
 

src/distill-components/distill-footer.js

@@ -12,7 +12,6 @@ const T = Template('distill-footer', `
   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;
 }
 
@@ -38,16 +37,42 @@ const T = Template('distill-footer', `
 }
 
 .container {
-  grid-column: left / text;
+  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
+
+  <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>
+
 `);
 
 export class DistillFooter extends T(HTMLElement) {

src/helpers/bibtex.js

@@ -13,7 +13,7 @@ export function parseBibtex(bibtex) {
   for (const entry of parsedEntries) {
     // normalize tags; note entryTags is an object, not Map
     for (const [key, value] of Object.entries(entry.entryTags)) {
-      entry.entryTags[key] = normalizeTag(value);
+      entry.entryTags[key.toLowerCase()] = normalizeTag(value);
     }
     entry.entryTags.type = entry.entryType;
     // add to bibliography

src/styles/d-article.css

@@ -192,3 +192,33 @@ d-figure {
   contain: content;
   display: inline-block;
 }
+
+/* Tables */
+
+d-article table {
+  border-collapse: collapse;
+  margin-bottom: 1.5rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+d-article table th {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+d-article table td {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+d-article table tr:last-of-type td {
+  border-bottom: none;
+}
+
+d-article table th,
+d-article table td {
+  font-size: 15px;
+  padding: 2px 8px;
+}
+
+d-article table tbody :first-child td {
+  padding-top: 2px;
+}

src/transforms.js

@@ -95,6 +95,7 @@ export function usesTemplateV2(dom) {
     return usesV2;
   }
 }
+
 export { FrontMatter }; // TODO: removable?
 
 export const testing = {

src/transforms/meta.js

@@ -1,12 +1,13 @@
 import favicon from '../assets/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,7 +21,8 @@ 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:modified" itemprop="dateModified" content="${data.updatedDate}" />
+    <meta property="article:created"   itemprop="dateCreated"   content="${data.publishedDate}" />
+    <meta property="article:modified"  itemprop="dateModified"  content="${data.updatedDate}" />
   `);
 
   (data.authors || []).forEach((a) => {
@@ -34,7 +36,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" />
   `);
@@ -45,7 +47,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">
   `);
@@ -63,12 +65,14 @@ export default function(dom, data) {
     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){
+      meta('citation_online_date', `${data.publishedYear}/${data.publishedMonthPadded}/${data.publishedDayPadded}`);
       meta('citation_publication_date', `${data.publishedYear}/${data.publishedMonthPadded}/${data.publishedDayPadded}`);
     }
 
@@ -99,10 +103,33 @@ 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()};`;
+
+  ref.author.split(' and ').forEach(name => {
+    name = name.trim();
+    let last, firsts;
+    if (name.indexOf(',') != -1){
+      last = name.split(',')[0].trim();
+      firsts = name.split(',')[1].trim();
+    } else {
+      last = name.split(' ').slice(-1)[0].trim();
+      firsts = name.split(' ').slice(0,-1).join(' ');
+    }
+    content += `citation_author=${firsts} ${last};`;
   });
+
+  if ('year' in ref) {
+    content += `citation_publication_date=${ref.year};`;
+  }
+
+  let 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; // arXiv is not considered a journal, so we don't need journal/volume/issue
+  }
   if ('journal' in ref){
     content += `citation_journal_title=${ref.journal};`;
   }
@@ -112,7 +139,5 @@ function citation_meta_content(ref){
   if ('issue' in ref || 'number' in ref){
     content += `citation_number=${ref.issue || ref.number};`;
   }
-  /*content += `citation_first_page=${};`;
-  content += `citation_publication_date=${};`;*/
   return content;
 }

test/transforms.js

@@ -161,6 +161,41 @@ describe('Distill V2 (transforms)', function() {
         expect(metaTags).to.not.be.empty;
       });
 
+      it('given an arxiv article, it should add a special Google scholar arxiv citation', function() {
+        const dom = new JSDOM('', options);
+        const data = {
+          doiSuffix: 'test-doi-suffix',
+          citations: ['dumoulin2016guide'],
+          bibliography: new Map([[
+            'dumoulin2016guide', {
+              title: 'A guide to convolution arithmetic for deep learning',
+              author: 'Dumoulin, Vincent and Visin, Francesco',
+              journal: 'arXiv preprint arXiv:1603.07285',
+              year: '2016',
+              url: 'https://arxiv.org/pdf/1603.07285.pdf'
+            }
+          ]])
+        };
+
+        const meta = distill.testing.transforms.get('Meta');
+        expect(meta).to.be.a('function');
+        meta(dom.window.document, data);
+
+        const metaTags = [].slice.call(dom.window.document.querySelectorAll('meta[name="citation_reference"]'));
+        expect(metaTags).to.not.be.empty;
+
+        const metaTag = metaTags[0];
+        expect(metaTag).to.have.property('content');
+
+        const content = metaTag.content;
+        expect(content).to.include('citation_title');
+        expect(content).to.include('citation_author');
+        expect(content.match(/citation_author=/g).length).to.equal(2);
+        expect(content).to.include('citation_publication_date');
+        expect(content).to.include('citation_arxiv_id');
+        expect(content).to.not.include('journal');
+      });
+
       it('given only a DOM, it should add Google scholar references information', function() {
         const dom = new JSDOM(`
           <d-cite key="mercier2011humans">sth</d-cite>