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