Byline

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/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 {