0.0.17

components/bibliography.js

@@ -2,30 +2,36 @@ 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) {
     let rawBib = el.textContent;
-    let bibliography = {};
+    let parsed = bibtexParse.toJSON(rawBib);
-    bibtexParse.toJSON(rawBib).forEach(e => {
+    if(parsed) {
-      bibliography[e.citationKey] = e.entryTags;
+      parsed.forEach(e => {
-      bibliography[e.citationKey].type = e.entryType;
+        bibliography[e.citationKey] = e.entryTags;
-    });
+        bibliography[e.citationKey].type = e.entryType;
+      });
+    }
+
 
-    let citations = [];
     var citeTags = [].slice.apply(dom.querySelectorAll("dt-cite"));
     citeTags.forEach(el => {
-      let citationKeys = el.getAttribute("key").split(",");
+      let key = el.getAttribute("key");
-      citationKeys.forEach(key => {
+      if (key) {
-        if (citations.indexOf(key) == -1){
+        let citationKeys = key.split(",");
-          citations.push(key);
+        citationKeys.forEach(key => {
-          if (! (key in bibliography)){
+          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;
   }
+  data.bibliography = bibliography;
+  data.citations = citations;
 }

components/citation.js

@@ -8,12 +8,21 @@ export default function(dom, data) {
   }*/
 
   var citeTags = [].slice.apply(dom.querySelectorAll("dt-cite"));
-  console.log(citeTags);
+  citeTags.forEach((el,n) => {
-  citeTags.forEach(el => {
+    var key = el.getAttribute("key");
-    var keys = el.getAttribute("key").split(",");
+    if (key) {
-    console.log(keys)
+      var keys = key.split(",");
-    var cite_string = inline_cite_short(keys);
+      var cite_string = inline_cite_short(keys);
-    el.innerHTML = cite_string;
+      el.innerHTML = `<span id="citation-${n}" class="citation">${cite_string}</span>`;
+      DistillHoverBox.bind(`#citation-${n}`, key)
+
+      DistillHoverBox.contentMap[key] = "";
+      keys.map((key,n) => {
+        if (n>0) DistillHoverBox.contentMap[key] += "<br>";
+        var cite_str = bibliography_cite(data.bibliography[key], true);
+        DistillHoverBox.contentMap[key] += cite_str;
+      })
+    }
   });
 
   let bibEl = dom.querySelector("dt-bibliography");
@@ -56,7 +65,7 @@ export default function(dom, data) {
     return keys.map(cite_string).join(", ");
   }
 
-  function bibliography_cite(ent){
+  function bibliography_cite(ent, fancy){
     if (ent){
       var names = ent.author.split(" and ");
       var cite = "";
@@ -76,7 +85,11 @@ export default function(dom, data) {
         cite += name_strings[0]
       }
       cite += ", " + ent.year + ". "
-      cite += ent.title + ". "
+      if (fancy){
+        cite += "<b>" + ent.title + "</b>. "
+      } else {
+        cite += ent.title + ". "
+      }
       cite += (ent.journal || ent.booktitle || "")
       if ("volume" in ent){
         var issue = ent.issue || ent.number;
@@ -87,6 +100,9 @@ export default function(dom, data) {
         cite += ", pp. " + ent.pages
       }
       cite += ". "
+      if (fancy && ent.url && ent.url.slice(-4) == ".pdf") {
+        cite = `${cite} <a href="${ent.url}">[pdf]</a>`
+      }
       return cite
     } else {
       return "?";
@@ -106,3 +122,100 @@ export default function(dom, data) {
 
   }
 }
+
+// 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;
+                          opacity: 0.95;
+                          width: ${width}px;
+                          top: ${top}px;
+                          left: ${left}px;
+                          padding: ${padding}px;
+                          border-radius: ${pretty? 6 : 0}px;
+                          box-shadow: 0px 0px 18px 6px #777;" >
+              ${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 = {abc: "hello world!"};
+
+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");
+  div.innerHTML = str;
+  return div.firstChild;
+}

components/expand-data.js

@@ -10,6 +10,7 @@ export default function(dom, data) {
 
     // Homepage
     //data.homepage = !post.noHomepage;
+    data.journal = data.journal || {};
 
     // Dates
     // TODO: fix updated date

components/footer.js

@@ -39,5 +39,12 @@ dt-footer .logo {
 
 export default function(dom, data) {
   let el = dom.querySelector("dt-footer");
-  if(el) el.innerHTML = html;
+  if(el) {
+    el.innerHTML = html;
+  } else {
+    let footer = dom.createElement("dt-footer");
+    footer.innerHTML = html;
+    let b = dom.querySelector("body");
+    b.appendChild(footer);
+  }
 }

components/front-matter.js

@@ -1,33 +1,34 @@
 import ymlParse from "js-yaml";
 
 export default function(dom, data) {
+  let localData = {};
   let el = dom.querySelector('script[type="text/front-matter"]');
-
-  //TODO If we don't have a local element, make a request for the document.
   if (el) {
     let text = el.textContent;
-    let localData = ymlParse.safeLoad(text);
+    localData = ymlParse.safeLoad(text);
-
-    data.title = localData.title;
-    data.description = localData.description;
-    data.published = new Date(localData.published);
-    data.updated = new Date(localData.published || localData.updated);
-
-    data.authors = localData.authors.map((author, i) =>{
-      let a = {};
-      let name = Object.keys(author)[0];
-      let names = name.split(" ");
-      a.firstName = names.slice(0, names.length - 1).join(" ");
-      a.lastName = names[names.length -1];
-      a.personalURL = author[name];
-      if(localData.affiliations[i]) {
-        let affiliation = Object.keys(localData.affiliations[i])[0];
-        a.affiliation = affiliation;
-        a.affiliationURL = localData.affiliations[i][affiliation];
-      }
-      return a;
-    });
-    
   }
 
+  data.title = localData.title ? localData.title : "Untitled";
+  data.description = localData.description ? localData.description : "No description.";
+  data.published = localData.published ? new Date(localData.published) : new Date("Invalid");
+  data.updated = localData.updated ? new Date(localData.updated) : new Date("Invalid");
+
+  data.authors = localData.authors ? localData.authors : [];
+
+  data.authors = data.authors.map((author, i) =>{
+    let a = {};
+    let name = Object.keys(author)[0];
+    let names = name.split(" ");
+    a.name = name;
+    a.firstName = names.slice(0, names.length - 1).join(" ");
+    a.lastName = names[names.length -1];
+    a.personalURL = author[name];
+    if(localData.affiliations[i]) {
+      let affiliation = Object.keys(localData.affiliations[i])[0];
+      a.affiliation = affiliation;
+      a.affiliationURL = localData.affiliations[i][affiliation];
+    }
+    return a;
+  });
+
 }

components/generate-crossref.js

@@ -1,3 +1,170 @@
+//import xml from "xml";
+
 export default function(data) {
-  return "crossref";
+
+  if (data.published == undefined) {
+    //console.warn("Can't generate XML for post ", data.title, "with data", data);
+    //return "";
+    data.published = new Date("invalid");
+  }
+
+  var date = data.published;
+  var batch_timestamp = Math.floor(Date.now() / 1000);
+  var batch_id = data.authors.length ? data.authors[0].lastName.toLowerCase().slice(0,20) : "Anonymous";
+      batch_id += "_" + date.getFullYear();
+      batch_id += "_" + data.title.split(" ")[0].toLowerCase().slice(0,20) + "_" +  batch_timestamp;
+  // generate XML
+  var crf_data =
+    {doi_batch : [
+
+      { _attr: {
+        version: "4.3.7",
+        xmlns: "http://www.crossref.org/schema/4.3.7",
+        "xmlns:xsi": "http://www.w3.org/2001/XMLSchema-instance",
+        "xsi:schemaLocation": "http://www.crossref.org/schema/4.3.7 http://www.crossref.org/schemas/crossref4.3.7.xsd",
+      }},
+
+      { head: [
+        {doi_batch_id: batch_id},
+        {timestamp: batch_timestamp},
+        {depositor: [
+          {depositor_name: data.journal.depositorName},
+          {email_address: data.journal.email},
+        ]},
+        {registrant: "Distill"},
+      ]},
+
+      {body: [
+        {journal: [
+
+          {journal_metadata: [
+            {full_title: data.journal.full_title || data.journal.title},
+            {abbrev_title: data.journal.abbrev_title || data.journal.title || data.journal.full_title},
+            {doi_data: [
+              {doi: data.journal.doi},
+              {resource: data.journal.url},
+            ]},
+          ]},
+
+          {journal_issue: [
+            {publication_date: [
+              {month: date.getMonth()+1},
+              {year: date.getFullYear()},
+            ]},
+            {journal_volume: [
+              {volume: data.volume},
+            ]},
+            {issue: data.issue},
+          ]},
+
+          {journal_article: [
+            {titles: [
+              {title: data.title},
+            ]},
+            { contributors:
+              data.authors.map((author, ind) => (
+                {person_name: [
+                  { _attr: {
+                    contributor_role: "author",
+                    sequence: (ind == 0)? "first" : "additional"
+                  }},
+                  {given_name: author.firstName},
+                  {surname: author.lastName},
+                  {affiliation: author.affiliation}
+                  // TODO: ORCID?
+                ]}
+              ))
+            },
+            {publication_date: [
+                {month: date.getMonth()+1},
+                {day: date.getDate()},
+                {year: date.getFullYear()}
+            ]},
+            { publisher_item: [
+              {item_number: data.doi}
+            ]},
+            {doi_data: [
+              {doi: data.doi},
+              //{timestamp: ""},
+              {resource: data.url},
+            ]},
+            {citation_list:
+              data.citations.map(key =>
+                  citation_xml(key, data.bibliography[key]))
+            }
+
+          ]},
+
+        ]},
+      ]},
+    ]};
+
+  return xml(crf_data);
+}
+
+function citation_xml(key, ent){
+  if (ent == undefined) return {};
+  var info = [];
+  info.push({_attr: {key: key}});
+  if ("title" in ent)
+    info.push({article_title: ent.title});
+  if ("author" in ent)
+    info.push({author: ent.author.split(" and ")[0].split(",")[0].trim()});
+  if ("journal" in ent)
+    info.push({journal_title: ent.journal});
+  if ("booktitle" in ent)
+    info.push({volume_title: ent.booktitle});
+  if ("volume" in ent)
+    info.push({volume: ent.volume});
+  if ("issue" in ent)
+    info.push({issue: ent.issue});
+  if ("doi" in ent)
+    info.push({doi: ent.doi});
+  return {citation: info}
+}
+
+function xml(obj) {
+  //console.log(typeof(obj), obj)
+  if (typeof obj === 'string') return obj;
+  if (typeof obj === 'number') return ""+obj;
+  let keys = Object.keys(obj);
+  if (keys.length != 1) console.error("can't interpret ", obj, "as xml");
+  let name = keys[0];
+  var full_content = obj[name];
+  var attr = {};
+  if (Array.isArray(full_content)){
+    var content = [];
+    for (var i in  full_content) {
+      var obj = full_content[i];
+      var obj_name = Object.keys(obj)[0];
+      if ("_attr" == obj_name) {
+        attr = obj["_attr"];
+      } else {
+        //console.log(Object.keys(obj)[0])
+        content.push(obj);
+      }
+    }
+  } else {
+    content = full_content;
+  }
+  if (content == undefined){
+    content = "undefined"
+  }
+
+  let attr_string = "";
+  for (var k in attr) {
+    attr_string += ` ${k}=\"${attr[k]}\"`
+  }
+
+  //console.log(typeof content, Array.isArray(content), content instanceof String, content)
+  if (Array.isArray(content)){
+    content = content.map(xml);
+    content = content.join("\n").split("\n");
+    content = content.map(s => "  " + s).join("\n")
+    var result = `<${name}${attr_string}>\n${content}\n</${name}>`;
+  } else {
+    content = xml(content);
+    var result = `<${name}${attr_string}>${content}</${name}>`;
+  }
+  return result;
 }

components/header.js

@@ -58,5 +58,13 @@ dt-header .nav a {
 `
 
 export default function(dom, data) {
-  dom.querySelector('dt-header').innerHTML = html;
+  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);
+  }
 }

components/html.js

@@ -5,7 +5,6 @@ export default function(dom) {
 
   let head = dom.querySelector("head");
 
-
   if (!dom.querySelector("meta[charset]")) {
     let meta = dom.createElement("meta");
     meta.setAttribute("charset", "utf-8");

components/meta.js

@@ -80,13 +80,17 @@ export default function(dom, data) {
   });
 
   if (data.citations) {
-    data.citations.forEach(key =>
+    data.citations.forEach(key => {
+      let d = data.bibliography[key];
+      if(!d) {
+        console.warn("No bibliography data fround for " + key)
+      } else {
         meta("citation_reference", citation_meta_content(data.bibliography[key]) )
-      );
+      };
+    });
   }
 }
 
-
 function appendHtml(el, html) {
   el.innerHTML += html;
 }

dist/template.js

@@ -11,7 +11,6 @@ var html = function(dom) {
 
   var head = dom.querySelector("head");
 
-
   if (!dom.querySelector("meta[charset]")) {
     var meta = dom.createElement("meta");
     meta.setAttribute("charset", "utf-8");
@@ -3812,35 +3811,36 @@ var yaml = jsYaml;
 var index = yaml;
 
 var frontMatter = function(dom, data) {
+  var localData = {};
   var el = dom.querySelector('script[type="text/front-matter"]');
-
-  //TODO If we don't have a local element, make a request for the document.
   if (el) {
     var text = el.textContent;
-    var localData = index.safeLoad(text);
+    localData = index.safeLoad(text);
-
-    data.title = localData.title;
-    data.description = localData.description;
-    data.published = new Date(localData.published);
-    data.updated = new Date(localData.published || localData.updated);
-
-    data.authors = localData.authors.map(function (author, i) {
-      var a = {};
-      var name = Object.keys(author)[0];
-      var names = name.split(" ");
-      a.firstName = names.slice(0, names.length - 1).join(" ");
-      a.lastName = names[names.length -1];
-      a.personalURL = author[name];
-      if(localData.affiliations[i]) {
-        var affiliation = Object.keys(localData.affiliations[i])[0];
-        a.affiliation = affiliation;
-        a.affiliationURL = localData.affiliations[i][affiliation];
-      }
-      return a;
-    });
-    
   }
 
+  data.title = localData.title ? localData.title : "Untitled";
+  data.description = localData.description ? localData.description : "No description.";
+  data.published = localData.published ? new Date(localData.published) : new Date("Invalid");
+  data.updated = localData.updated ? new Date(localData.updated) : new Date("Invalid");
+
+  data.authors = localData.authors ? localData.authors : [];
+
+  data.authors = data.authors.map(function (author, i) {
+    var a = {};
+    var name = Object.keys(author)[0];
+    var names = name.split(" ");
+    a.name = name;
+    a.firstName = names.slice(0, names.length - 1).join(" ");
+    a.lastName = names[names.length -1];
+    a.personalURL = author[name];
+    if(localData.affiliations[i]) {
+      var affiliation = Object.keys(localData.affiliations[i])[0];
+      a.affiliation = affiliation;
+      a.affiliationURL = localData.affiliations[i][affiliation];
+    }
+    return a;
+  });
+
 };
 
 var bibtexParse = createCommonjsModule(function (module, exports) {
@@ -4188,32 +4188,38 @@ var bibtexParse = createCommonjsModule(function (module, exports) {
 
 var bibliography = function(dom, data) {
   var el = dom.querySelector('script[type="text/bibliography"]');
-
+  var citations = [];
+  var bibliography = {};
   //TODO If we don't have a local element, make a request for the document.
   if (el) {
     var rawBib = el.textContent;
-    var bibliography = {};
+    var parsed = bibtexParse.toJSON(rawBib);
-    bibtexParse.toJSON(rawBib).forEach(function (e) {
+    if(parsed) {
-      bibliography[e.citationKey] = e.entryTags;
+      parsed.forEach(function (e) {
-      bibliography[e.citationKey].type = e.entryType;
+        bibliography[e.citationKey] = e.entryTags;
-    });
+        bibliography[e.citationKey].type = e.entryType;
+      });
+    }
+
 
-    var citations = [];
     var citeTags = [].slice.apply(dom.querySelectorAll("dt-cite"));
     citeTags.forEach(function (el) {
-      var citationKeys = el.getAttribute("key").split(",");
+      var key = el.getAttribute("key");
-      citationKeys.forEach(function (key) {
+      if (key) {
-        if (citations.indexOf(key) == -1){
+        var citationKeys = key.split(",");
-          citations.push(key);
+        citationKeys.forEach(function (key) {
-          if (! (key in bibliography)){
+          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;
   }
+  data.bibliography = bibliography;
+  data.citations = citations;
 };
 
 var expandData = function(dom, data) {
@@ -4228,6 +4234,7 @@ var expandData = function(dom, data) {
 
     // Homepage
     //data.homepage = !post.noHomepage;
+    data.journal = data.journal || {};
 
     // Dates
     // TODO: fix updated date
@@ -4304,12 +4311,17 @@ var meta = function(dom, data) {
   });
 
   if (data.citations) {
-    data.citations.forEach(function (key) { return meta("citation_reference", citation_meta_content(data.bibliography[key]) ); }
+    data.citations.forEach(function (key) {
-      );
+      var d = data.bibliography[key];
+      if(!d) {
+        console.warn("No bibliography data fround for " + key);
+      } else {
+        meta("citation_reference", citation_meta_content(data.bibliography[key]) );
+      }
+    });
   }
 };
 
-
 function appendHtml(el, html) {
   el.innerHTML += html;
 }
@@ -4338,7 +4350,15 @@ var logo = "<svg viewBox=\"-607 419 64 64\">\n  <path style=\"fill: none; stroke
 var html$1 = "\n<style>\ndt-header {\n  display: block;\n  position: relative;\n  height: 60px;\n  background-color: none;\n  width: 100%;\n  box-sizing: border-box;\n  z-index: 2;\n  color: rgba(0, 0, 0, 0.8);\n}\ndt-header .content {\n  border-bottom: 1px solid rgba(0, 0, 0, 0.3);\n  height: 60px;\n}\ndt-header a {\n  font-size: 16px;\n  height: 60px;\n  line-height: 60px;\n  text-decoration: none;\n  color: rgba(0, 0, 0, 0.8);\n}\ndt-header svg {\n  width: 24px;\n  position: relative;\n  top: 4px;\n  margin-right: -2px;\n}\ndt-header svg path {\n  fill: none;\n  stroke: black;\n  stroke-width: 1;\n  stroke-linejoin: round;\n}\ndt-header .logo {\n  font-size: 16px;\n  font-weight: 300;\n}\ndt-header .nav {\n  float: right;\n}\ndt-header .nav a {\n  font-size: 14px;\n}\n</style>\n\n<div class=\"content l-page\">\n  <a href=\"/\" class=\"logo\">\n    " + logo + "\n    Distill\n  </a>\n  <div class=\"nav\">\n  </div>\n</div>\n";
 
 var header = function(dom, data) {
-  dom.querySelector('dt-header').innerHTML = html$1;
+  var el = dom.querySelector("dt-header");
+  if(el) {
+    el.innerHTML = html$1;
+  } else {
+    var header = dom.createElement("dt-header");
+    header.innerHTML = html$1;
+    var b = dom.querySelector("body");
+    b.insertBefore(header, b.firstChild);
+  }
 };
 
 var html$2 = "\n<style>\n  dt-appendix {\n    display: block;\n    font-family: \"Open Sans\";\n    font-size: 14px;\n    line-height: 24px;\n    margin-bottom: 0;\n    border-top: 1px solid rgba(0,0,0,0.1);\n    color: rgba(0,0,0,0.5);\n    background: rgba(0,0,0,0.025);\n    padding-top: 36px;\n    padding-right: 24px;\n    padding-bottom: 60px;\n    padding-left: 24px;\n  }\n  dt-appendix h3 {\n    font-size: 16px;\n    font-weight: 500;\n    margin-top: 18px;\n    margin-bottom: 18px;\n    color: rgba(0,0,0,0.65);\n  }\n  dt-appendix .citation {\n    font-size: 11px;\n    line-height: 15px;\n    border-left: 1px solid rgba(0, 0, 0, 0.1);\n    padding-left: 18px;\n    border: 1px solid rgba(0,0,0,0.1);\n    background: rgba(0, 0, 0, 0.02);\n    padding: 10px 18px;\n    border-radius: 3px;\n    color: rgba(150, 150, 150, 1);\n    overflow: hidden;\n    margin-top: -12px;\n  }\n  dt-appendix .references {\n    font-size: 12px;\n    line-height: 20px;\n  }\n  dt-appendix a {\n    color: rgba(0, 0, 0, 0.6);\n  }\n</style>\n\n<div class=\"l-body\">\n  <h3>References</h3>\n  <dt-bibliography></dt-bibliography>\n  <h3 id=\"citation\">Errors, Reuse, and Citation</h3>\n  <p>If you see mistakes or want to suggest changes, please submit a pull request on <a class=\"github\">github</a>.</p>\n  <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 source available on available on <a class=\"github\">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>\n  <p>For attribution in academic contexts, please cite this work as</p>\n  <pre class=\"citation short\"></pre>\n  <p>BibTeX citation</p>\n  <pre class=\"citation long\"></pre>\n</div>\n";
@@ -4368,7 +4388,14 @@ var html$3 = "\n<style>\ndt-footer {\n  display: block;\n  color: rgba(255, 255,
 
 var footer = function(dom, data) {
   var el = dom.querySelector("dt-footer");
-  if(el) { el.innerHTML = html$3; }
+  if(el) {
+    el.innerHTML = html$3;
+  } else {
+    var footer = dom.createElement("dt-footer");
+    footer.innerHTML = html$3;
+    var b = dom.querySelector("body");
+    b.appendChild(footer);
+  }
 };
 
 var citation = function(dom, data) {
@@ -4381,12 +4408,21 @@ var citation = function(dom, data) {
   }*/
 
   var citeTags = [].slice.apply(dom.querySelectorAll("dt-cite"));
-  console.log(citeTags);
+  citeTags.forEach(function (el,n) {
-  citeTags.forEach(function (el) {
+    var key = el.getAttribute("key");
-    var keys = el.getAttribute("key").split(",");
+    if (key) {
-    console.log(keys);
+      var keys = key.split(",");
-    var cite_string = inline_cite_short(keys);
+      var cite_string = inline_cite_short(keys);
-    el.innerHTML = cite_string;
+      el.innerHTML = "<span id=\"citation-" + n + "\" class=\"citation\">" + cite_string + "</span>";
+      DistillHoverBox.bind(("#citation-" + n), key);
+
+      DistillHoverBox.contentMap[key] = "";
+      keys.map(function (key,n) {
+        if (n>0) { DistillHoverBox.contentMap[key] += "<br>"; }
+        var cite_str = bibliography_cite(data.bibliography[key], true);
+        DistillHoverBox.contentMap[key] += cite_str;
+      });
+    }
   });
 
   var bibEl = dom.querySelector("dt-bibliography");
@@ -4429,7 +4465,7 @@ var citation = function(dom, data) {
     return keys.map(cite_string).join(", ");
   }
 
-  function bibliography_cite(ent){
+  function bibliography_cite(ent, fancy){
     if (ent){
       var names = ent.author.split(" and ");
       var cite = "";
@@ -4449,7 +4485,11 @@ var citation = function(dom, data) {
         cite += name_strings[0];
       }
       cite += ", " + ent.year + ". ";
-      cite += ent.title + ". ";
+      if (fancy){
+        cite += "<b>" + ent.title + "</b>. ";
+      } else {
+        cite += ent.title + ". ";
+      }
       cite += (ent.journal || ent.booktitle || "");
       if ("volume" in ent){
         var issue = ent.issue || ent.number;
@@ -4460,6 +4500,9 @@ var citation = function(dom, data) {
         cite += ", pp. " + ent.pages;
       }
       cite += ". ";
+      if (fancy && ent.url && ent.url.slice(-4) == ".pdf") {
+        cite = cite + " <a href=\"" + (ent.url) + "\">[pdf]</a>";
+      }
       return cite
     } else {
       return "?";
@@ -4480,6 +4523,93 @@ var citation = function(dom, data) {
   }
 };
 
+// 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;\n                          background-color: #FFF;\n                          opacity: 0.95;\n                          width: " + width + "px;\n                          top: " + top + "px;\n                          left: " + left + "px;\n                          padding: " + padding + "px;\n                          border-radius: " + (pretty? 6 : 0) + "px;\n                          box-shadow: 0px 0px 18px 6px #777;\" >\n              " + (DistillHoverBox.contentMap[key]) + "\n              </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(function () { return this_.remove(); }, T);
+};
+
+DistillHoverBox.liveBoxes = {};
+DistillHoverBox.contentMap = {abc: "hello world!"};
+
+DistillHoverBox.bind = function bind(node, key) {
+  if (typeof node == "string"){
+    node = document.querySelector(node);
+  }
+  node.addEventListener("mouseover", function () {
+    var bbox = node.getBoundingClientRect();
+    if (!(key in DistillHoverBox.liveBoxes)){
+      new DistillHoverBox(key, [bbox.right, bbox.bottom]);
+    }
+    DistillHoverBox.liveBoxes[key].stopTimeout();
+  });
+  node.addEventListener("mouseout", function () {
+    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");
+  div.innerHTML = str;
+  return div.firstChild;
+}
+
 var marked = createCommonjsModule(function (module, exports) {
 /**
  * marked - a markdown parser
@@ -6625,29 +6755,196 @@ var code$1 = function(dom, data) {
   });
 };
 
-function render(dom, data) {
+//import xml from "xml";
-  data = data || {};
+
+var generateCrossref = function(data) {
+
+  if (data.published == undefined) {
+    //console.warn("Can't generate XML for post ", data.title, "with data", data);
+    //return "";
+    data.published = new Date("invalid");
+  }
+
+  var date = data.published;
+  var batch_timestamp = Math.floor(Date.now() / 1000);
+  var batch_id = data.authors.length ? data.authors[0].lastName.toLowerCase().slice(0,20) : "Anonymous";
+      batch_id += "_" + date.getFullYear();
+      batch_id += "_" + data.title.split(" ")[0].toLowerCase().slice(0,20) + "_" +  batch_timestamp;
+  // generate XML
+  var crf_data =
+    {doi_batch : [
+
+      { _attr: {
+        version: "4.3.7",
+        xmlns: "http://www.crossref.org/schema/4.3.7",
+        "xmlns:xsi": "http://www.w3.org/2001/XMLSchema-instance",
+        "xsi:schemaLocation": "http://www.crossref.org/schema/4.3.7 http://www.crossref.org/schemas/crossref4.3.7.xsd",
+      }},
+
+      { head: [
+        {doi_batch_id: batch_id},
+        {timestamp: batch_timestamp},
+        {depositor: [
+          {depositor_name: data.journal.depositorName},
+          {email_address: data.journal.email} ]},
+        {registrant: "Distill"} ]},
+
+      {body: [
+        {journal: [
+
+          {journal_metadata: [
+            {full_title: data.journal.full_title || data.journal.title},
+            {abbrev_title: data.journal.abbrev_title || data.journal.title || data.journal.full_title},
+            {doi_data: [
+              {doi: data.journal.doi},
+              {resource: data.journal.url} ]} ]},
+
+          {journal_issue: [
+            {publication_date: [
+              {month: date.getMonth()+1},
+              {year: date.getFullYear()} ]},
+            {journal_volume: [
+              {volume: data.volume} ]},
+            {issue: data.issue} ]},
+
+          {journal_article: [
+            {titles: [
+              {title: data.title} ]},
+            { contributors:
+              data.authors.map(function (author, ind) { return (
+                {person_name: [
+                  { _attr: {
+                    contributor_role: "author",
+                    sequence: (ind == 0)? "first" : "additional"
+                  }},
+                  {given_name: author.firstName},
+                  {surname: author.lastName},
+                  {affiliation: author.affiliation}
+                  // TODO: ORCID?
+                ]}
+              ); })
+            },
+            {publication_date: [
+                {month: date.getMonth()+1},
+                {day: date.getDate()},
+                {year: date.getFullYear()}
+            ]},
+            { publisher_item: [
+              {item_number: data.doi}
+            ]},
+            {doi_data: [
+              {doi: data.doi},
+              //{timestamp: ""},
+              {resource: data.url} ]},
+            {citation_list:
+              data.citations.map(function (key) { return citation_xml(key, data.bibliography[key]); })
+            }
+
+          ]} ]} ]} ]};
+
+  return xml(crf_data);
+};
+
+function citation_xml(key, ent){
+  if (ent == undefined) { return {}; }
+  var info = [];
+  info.push({_attr: {key: key}});
+  if ("title" in ent)
+    { info.push({article_title: ent.title}); }
+  if ("author" in ent)
+    { info.push({author: ent.author.split(" and ")[0].split(",")[0].trim()}); }
+  if ("journal" in ent)
+    { info.push({journal_title: ent.journal}); }
+  if ("booktitle" in ent)
+    { info.push({volume_title: ent.booktitle}); }
+  if ("volume" in ent)
+    { info.push({volume: ent.volume}); }
+  if ("issue" in ent)
+    { info.push({issue: ent.issue}); }
+  if ("doi" in ent)
+    { info.push({doi: ent.doi}); }
+  return {citation: info}
+}
+
+function xml(obj) {
+  //console.log(typeof(obj), obj)
+  if (typeof obj === 'string') { return obj; }
+  if (typeof obj === 'number') { return ""+obj; }
+  var keys = Object.keys(obj);
+  if (keys.length != 1) { console.error("can't interpret ", obj, "as xml"); }
+  var name = keys[0];
+  var full_content = obj[name];
+  var attr = {};
+  if (Array.isArray(full_content)){
+    var content = [];
+    for (var i in  full_content) {
+      var obj = full_content[i];
+      var obj_name = Object.keys(obj)[0];
+      if ("_attr" == obj_name) {
+        attr = obj["_attr"];
+      } else {
+        //console.log(Object.keys(obj)[0])
+        content.push(obj);
+      }
+    }
+  } else {
+    content = full_content;
+  }
+  if (content == undefined){
+    content = "undefined";
+  }
+
+  var attr_string = "";
+  for (var k in attr) {
+    attr_string += " " + k + "=\"" + (attr[k]) + "\"";
+  }
+
+  //console.log(typeof content, Array.isArray(content), content instanceof String, content)
+  if (Array.isArray(content)){
+    content = content.map(xml);
+    content = content.join("\n").split("\n");
+    content = content.map(function (s) { return "  " + s; }).join("\n");
+    var result = "<" + name + attr_string + ">\n" + content + "\n</" + name + ">";
+  } else {
+    content = xml(content);
+    var result = "<" + name + attr_string + ">" + content + "</" + name + ">";
+  }
+  return result;
+}
+
+function renderImmediately(dom) {
   html(dom);
   styles(dom);
-  dom.addEventListener("DOMContentLoaded", function(event) {
+}
-    frontMatter(dom, data);
+
-    bibliography(dom, data);
+function renderOnLoad(dom, data) {
-    expandData(dom, data);
+  frontMatter(dom, data);
-    meta(dom, data);
+  bibliography(dom, data);
-    header(dom, data);
+  expandData(dom, data);
-    appendix(dom, data);
+  meta(dom, data);
-    footer(dom, data);
+  header(dom, data);
-    markdown(dom, data);
+  appendix(dom, data);
-    code$1(dom, data);
+  footer(dom, data);
-    citation(dom, data);
+  markdown(dom, data);
-    console.log("final data:");
+  code$1(dom, data);
-    for (var k in data) {console.log("   ", k, ": ", data[k]);}
+  citation(dom, data);
+  // TODO remove script tag
+}
+
+// If we are in a browser, render automatically.
+if(window && window.document) {
+  var data = {};
+  renderImmediately(window.document);
+  window.document.addEventListener("DOMContentLoaded", function (event) {
+    renderOnLoad(window.document, data);
+    generateCrossref(data);
   });
 }
 
-// If we are in a browser, run render automatically.
+// For node
-if(window && window.document) {
+function render(dom, data) {
-  render(window.document);
+  renderImmediately(dom);
+  renderOnLoad(dom, data);
 }
 
 exports.render = render;
@@ -6662,6 +6959,7 @@ exports.footer = footer;
 exports.citation = citation;
 exports.markdown = markdown;
 exports.code = code$1;
+exports.generateCrossref = generateCrossref;
 
 Object.defineProperty(exports, '__esModule', { value: true });
 

examples/article.html

@@ -1,10 +1,8 @@
 <!doctype html>
 <meta charset="utf8">
 <script src="../dist/template.js"></script>
-
 <script type="text/front-matter">
   title: Article Title
-  description: Description of the post
   published: Jan 10, 2017
   authors:
   - Chris Olah: http://colah.github.io
@@ -14,7 +12,6 @@
   - Google Brain: http://g.co/brain
 </script>
 
-<dt-header></dt-header>
 <dt-article>
   <script type="text/article"></script>
   <h1>Hello World</h1>
@@ -36,4 +33,3 @@
   <h3>Contributions</h3>
   <p>List of who did what</p>
 </dt-appendix>
-<dt-footer></dt-footer>

examples/tutorial.html

@@ -17,7 +17,6 @@
 }
 </style>
 
-<dt-header></dt-header>
 <dt-article>
   <h1>How to Create a Distill Article</h1>
   <h2>A collection of examples and best practices for creating interactive explanatory articles using the Distill web framework</h2>
@@ -175,4 +174,3 @@
   <h2>Including External Files</h2> -->
 
 </dt-article>
-<dt-footer></dt-footer>

index.js

@@ -10,32 +10,41 @@ import footer from "./components/footer";
 import citation from "./components/citation";
 import markdown from "./components/markdown";
 import code from "./components/code";
-
 import generateCrossref from "./components/generate-crossref";
 
-function render(dom, data) {
+function renderImmediately(dom) {
-  data = data || {};
   html(dom);
   styles(dom);
-  dom.addEventListener("DOMContentLoaded", function(event) {
+}
-    frontMatter(dom, data);
+
-    bibliography(dom, data);
+function renderOnLoad(dom, data) {
-    expandData(dom, data);
+  frontMatter(dom, data);
-    meta(dom, data);
+  bibliography(dom, data);
-    header(dom, data);
+  expandData(dom, data);
-    appendix(dom, data);
+  meta(dom, data);
-    footer(dom, data);
+  header(dom, data);
-    markdown(dom, data);
+  appendix(dom, data);
-    code(dom, data);
+  footer(dom, data);
-    citation(dom, data);
+  markdown(dom, data);
-    console.log("final data:")
+  code(dom, data);
-    for (var k in data) {console.log("   ", k, ": ", data[k])}
+  citation(dom, data);
+  // TODO remove script tag
+}
+
+// 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);
+    generateCrossref(data);
   });
 }
 
-// If we are in a browser, run render automatically.
+// For node
-if(window && window.document) {
+function render(dom, data) {
-  render(window.document);
+  renderImmediately(dom);
+  renderOnLoad(dom, data);
 }
 
 export {render as render};
@@ -50,5 +59,4 @@ export {footer as footer};
 export {citation as citation};
 export {markdown as markdown};
 export {code as code};
-
 export {generateCrossref as generateCrossref};

package.json

@@ -1,8 +1,8 @@
 {
   "name": "distill-template",
-  "version": "0.0.4",
+  "version": "0.0.17",
   "description": "Template for creating Distill articles.",
-  "main": "dist/distill.js",
+  "main": "dist/template.js",
   "scripts": {
     "start": "rollup -c -w",
     "build": "rollup -c",

yarn.lock

@@ -377,6 +377,10 @@ diff@1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-1.4.0.tgz#7f28d2eb9ee7b15a97efd89ce63dcfdaa3ccbabf"
 
+distill-template@^0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/distill-template/-/distill-template-0.0.4.tgz#d9d8350001f9f6fc64884e0ad903d733b6856d59"
+
 ecc-jsbn@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"