Merge branch 'master' of https://github.com/distillpub/distill-template

components/byline.js

@@ -0,0 +1,135 @@
+import mustache from "mustache";
+
+const html = `
+<style>
+  dt-byline {
+    font-size: 12px;
+    line-height: 18px;
+    display: block;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    color: rgba(0, 0, 0, 0.5);
+    padding-top: 12px;
+    padding-bottom: 12px;
+  }
+  dt-byline a {
+    text-decoration: none;
+  }
+  dt-byline .name {
+    text-transform: uppercase;
+  }
+  dt-byline .date {
+    display: block;
+  }
+  dt-byline .year, dt-byline .month {
+    display: inline;
+  }
+  dt-byline .citation {
+    display: block;
+  }
+  dt-byline .citation div {
+    display: inline;
+  }
+
+  @media(min-width: 768px) {
+    dt-byline {
+    }
+  }
+
+  @media(min-width: 1024px) {
+    dt-byline {
+      border-bottom: none;
+      margin-bottom: 48px;
+    }
+
+    dt-byline a:hover {
+      color: rgba(0, 0, 0, 0.9);
+    }
+
+    dt-byline .authors {
+      display: inline-block;
+    }
+
+    dt-byline .author {
+      display: inline-block;
+      margin-right: 12px;
+      /*padding-left: 20px;*/
+      /*border-left: 1px solid #ddd;*/
+    }
+
+    dt-byline .affiliation {
+      display: block;
+    }
+
+    dt-byline .author:last-child {
+      margin-right: 0;
+    }
+
+    dt-byline .name {
+      display: block;
+    }
+
+    dt-byline .date {
+      border-left: 1px solid rgba(0, 0, 0, 0.1);
+      padding-left: 15px;
+      margin-left: 15px;
+      display: inline-block;
+    }
+    dt-byline .year, dt-byline .month {
+      display: block;
+    }
+
+    dt-byline .citation {
+      border-left: 1px solid rgba(0, 0, 0, 0.15);
+      padding-left: 15px;
+      margin-left: 15px;
+      display: inline-block;
+    }
+    dt-byline .citation div {
+      display: block;
+    }
+  }
+</style>
+
+`;
+
+const template = `
+<div class="byline">
+  <div class="authors">
+  {{#authors}}
+    <div class="author">
+      {{#personalURL}}
+        <a class="name" href="{{personalURL}}">{{name}}</a>
+      {{/personalURL}}
+      {{^personalURL}}
+        <div class="name">{{name}}</div>
+      {{/personalURL}}
+      {{#affiliation}}
+        {{#affiliationURL}}
+          <a class="affiliation" href="{{affiliationURL}}">{{affiliation}}</a>
+        {{/affiliationURL}}
+        {{^affiliationURL}}
+          <div class="affiliation">{{affiliation}}</div>
+        {{/affiliationURL}}
+      {{/affiliation}}
+    </div>
+    {{/authors}}
+  </div>
+  <div class="date">
+    <div class="month">{{publishedMonth}}. {{publishedDay}}</div>
+    <div class="year">{{publishedYear}}</div>
+  </div>
+  <a class="citation" href="#citation">
+    <div>Citation:</div>
+    <div>{{concatenatedAuthors}}, {{publishedYear}}</div>
+  </a>
+</div>
+`
+
+export default function(dom, data) {
+  let el = dom.querySelector('dt-byline');
+  console.log(data);
+  if (el) {
+    el.innerHTML = html + mustache.render(template, data);
+  }
+}

components/expand-data.js

@@ -1,3 +1,5 @@
+import {timeFormat} from "d3-time-format";
+
 export default function(dom, data) {
 
     data.authors = data.authors || [];
@@ -18,20 +20,23 @@ export default function(dom, data) {
       data.volume = data.published.getFullYear() - 2015;
       data.issue = data.published.getMonth() + 1;
     }
-    /*
+    data.publishedDateRFC
-      //let RFC = d3.timeFormat("%a, %d %b %Y %H:%M:%S %Z");
+    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 months = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
-      let zeroPad = (n) => { return n < 10 ? "0" + n : n; };
+    let zeroPad = (n) => { return n < 10 ? "0" + n : n; };
-      //data.publishedDateRFC = RFC(data.publishedDate);
+    data.publishedDateRFC = RFC(data.published);
-      data.publishedYear = data.publishedDate.getFullYear();
+    data.publishedYear = data.published.getFullYear();
-      data.publishedMonth = months[data.publishedDate.getMonth()];
+    data.publishedMonth = months[data.published.getMonth()];
-      data.publishedDay = data.publishedDate.getDate();
+    data.publishedDay = data.published.getDate();
-      data.publishedMonthPadded = zeroPad(data.publishedDate.getMonth() + 1);
+    data.publishedMonthPadded = zeroPad(data.published.getMonth() + 1);
-      data.publishedDayPadded = zeroPad(data.publishedDate.getDate());
+    data.publishedDayPadded = zeroPad(data.published.getDate());
-      data.volume = data.publishedDate.getFullYear() - 2015;
-      data.issue = data.publishedDate.getMonth() + 1;
-    }*/
-
 
+    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
+    }
 
 }

components/front-matter.js

@@ -7,6 +7,7 @@ export default function(dom, data) {
     let text = el.textContent;
     localData = ymlParse.safeLoad(text);
   }
+  console.log(localData)
 
   data.title = localData.title ? localData.title : "Untitled";
   data.description = localData.description ? localData.description : "No description.";
@@ -18,15 +19,23 @@ export default function(dom, data) {
   data.authors = data.authors.map((author, i) =>{
     let a = {};
     let name = Object.keys(author)[0];
+    if ((typeof author) === "string") {
+      name = author;
+    } else {
+      a.personalURL = author[name];
+    }
     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];
+      if ((typeof localData.affiliations[i]) === "string") {
+        affiliation = localData.affiliations[i]
+      } else {
+        a.affiliationURL = localData.affiliations[i][affiliation];
+      }
       a.affiliation = affiliation;
-      a.affiliationURL = localData.affiliations[i][affiliation];
     }
     return a;
   });

components/styles-article.css

@@ -39,9 +39,6 @@ dt-article h2 {
 }
 
 dt-article h1 + h2 {
-  padding-bottom: 48px;
-  margin-bottom: 48px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 dt-article h3 {

examples/article.html

@@ -5,10 +5,10 @@
   title: Article Title
   published: Jan 10, 2017
   authors:
-  - Chris Olah: http://colah.github.io
+  - Chris Olah: 
   - Shan Carter: http://shancarter.com
   affiliations:
-  - Google Brain: http://g.co/brain
+  - Google Brain:
   - Google Brain: http://g.co/brain
 </script>
 

index.js

@@ -5,6 +5,7 @@ import bibliography from "./components/bibliography";
 import expandData from "./components/expand-data";
 import meta from "./components/meta";
 import header from "./components/header";
+import byline from "./components/byline";
 import appendix from "./components/appendix";
 import footer from "./components/footer";
 import citation from "./components/citation";
@@ -24,6 +25,7 @@ function renderOnLoad(dom, data) {
   expandData(dom, data);
   meta(dom, data);
   header(dom, data);
+  byline(dom, data);
   appendix(dom, data);
   footer(dom, data);
   markdown(dom, data);

package.json

@@ -34,5 +34,8 @@
     "rollup-plugin-string": "^2.0.2",
     "rollup-plugin-uglify": "^1.0.1",
     "rollup-watch": "^2.5.0"
+  },
+  "dependencies": {
+    "mustache": "^2.3.0"
   }
 }

yarn.lock

@@ -377,10 +377,6 @@ 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"
@@ -980,6 +976,10 @@ ms@0.7.1:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
 
+mustache@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/mustache/-/mustache-2.3.0.tgz#4028f7778b17708a489930a6e52ac3bca0da41d0"
+
 nan@^2.3.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.5.0.tgz#aa8f1e34531d807e9e27755b234b4a6ec0c152a8"