Improve interstitial behavior

Remove if no password during pre-render
Remove if no password during onFrontMatterChanged
Remove self if on production host

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "distill-template",
-  "version": "2.2.11",
+  "version": "2.2.19",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "distill-template",
-  "version": "2.2.11",
+  "version": "2.2.19",
   "description": "Template for creating Distill articles.",
   "main": "dist/template.v2.js",
   "bin": {

src/components/d-footnote.js

@@ -30,23 +30,16 @@ span {
   z-index: 10000;
 }
 
-.dt-hover-box {
-  margin: 0 auto;
-  width: 704px;
-  max-width: 100vw;
-  background-color: #FFF;
-  opacity: 0.95;
-  border: 1px solid rgba(0, 0, 0, 0.25);
-  padding: 8px 16px;
-  border-radius: 3px;
-  box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.2);
-  box-sizing: border-box;
+.footnote-container {
+  padding: 10px;
 }
 
 </style>
 
 <d-hover-box>
-  <slot id="slot"></slot>
+  <div class="footnote-container">
+    <slot id="slot"></slot>
+  </div>
 </d-hover-box>
 
 <sup>

src/components/d-interstitial.js

@@ -3,6 +3,7 @@ import { Template } from '../mixins/template';
 // This overlay is not secure.
 // It is only meant as a social deterrent.
 
+const productionHostname = 'distill.pub';
 const T = Template('d-interstitial', `
 <style>
 
@@ -109,13 +110,11 @@ p small {
 export class Interstitial extends T(HTMLElement) {
 
   connectedCallback() {
-    const passwordInput = this.root.querySelector('#interstitial-password-input');
-    passwordInput.oninput = (event) => this.passwordChanged(event);
-    if (typeof(Storage) !== 'undefined') {
-      if (localStorage.getItem('distill-interstitial-password-correct') === 'true') {
-        console.log('Loaded that correct password was entered before; skipping interstitial.');
-        this.parentElement.removeChild(this);
-      }
+    if (this.shouldRemoveSelf()) {
+      this.parentElement.removeChild(this);
+    } else {
+      const passwordInput = this.root.querySelector('#interstitial-password-input');
+      passwordInput.oninput = (event) => this.passwordChanged(event);
     }
   }
 
@@ -126,9 +125,32 @@ export class Interstitial extends T(HTMLElement) {
       this.parentElement.removeChild(this);
       if (typeof(Storage) !== 'undefined') {
         console.log('Saved that correct password was entered.');
-        localStorage.setItem('distill-interstitial-password-correct', 'true');
+        localStorage.setItem(this.localStorageIdentifier(), 'true');
       }
     }
   }
 
+  shouldRemoveSelf() {
+    // should never be visible in production
+    if (window && window.location.hostname === productionHostname) {
+      console.warn('Interstitial found on production, hiding it.');
+      return true
+    }
+    // should only have to enter password once
+    if (typeof(Storage) !== 'undefined') {
+      if (localStorage.getItem(this.localStorageIdentifier()) === 'true') {
+        console.log('Loaded that correct password was entered before; skipping interstitial.');
+        return true;
+      }
+    }
+    // otherwise, leave visible
+    return false;
+  }
+
+  localStorageIdentifier() {
+    const prefix = 'distill-drafts'
+    const suffix = 'interstitial-password-correct';
+    return prefix + (window ? window.location.pathname : '-') + suffix
+  }
+
 }

src/controller.js

@@ -120,7 +120,11 @@ export const Controller = {
 
       const interstitial = document.querySelector('d-interstitial');
       if (interstitial) {
-        interstitial.password = frontMatter.password;
+        if (typeof frontMatter.password !== 'undefined') {
+          interstitial.password = frontMatter.password;
+        } else {
+          interstitial.parentElement.removeChild(interstitial);
+        }
       }
 
       const prerendered = document.body.hasAttribute('distill-prerendered');

src/front-matter.js

@@ -73,6 +73,8 @@ export function mergeFromYMLFrontmatter(target, source) {
       target.publishedDate = source.publishedDate;
     } else if (source.publishedDate.constructor === String) {
       target.publishedDate = new Date(source.publishedDate);
+    } else {
+      console.error('Don\'t know what to do with published date: ' + source.publishedDate);
     }
   }
   target.description = source.description;
@@ -303,15 +305,19 @@ export class FrontMatter {
     target.url = this.url;
     target.githubUrl = this.githubUrl;
     target.previewURL = this.previewURL;
-    target.volume = this.volume;
-    target.issue = this.issue;
-    target.publishedDateRFC = this.publishedDateRFC;
-    target.publishedYear = this.publishedYear;
-    target.publishedMonth = this.publishedMonth;
-    target.publishedDay = this.publishedDay;
-    target.publishedMonthPadded = this.publishedMonthPadded;
-    target.publishedDayPadded = this.publishedDayPadded;
-    target.updatedDateRFC = this.updatedDateRFC;
+    if (this.publishedDate) {
+      target.volume = this.volume;
+      target.issue = this.issue;
+      target.publishedDateRFC = this.publishedDateRFC;
+      target.publishedYear = this.publishedYear;
+      target.publishedMonth = this.publishedMonth;
+      target.publishedDay = this.publishedDay;
+      target.publishedMonthPadded = this.publishedMonthPadded;
+      target.publishedDayPadded = this.publishedDayPadded;
+    }
+    if (this.updatedDate) {
+      target.updatedDateRFC = this.updatedDateRFC;
+    }
     target.concatenatedAuthors = this.concatenatedAuthors;
     target.bibtexAuthors = this.bibtexAuthors;
     target.slug = this.slug;

src/helpers/citation.js

@@ -40,6 +40,7 @@ export function inline_cite_long(keys){
 }
 
 function author_string(ent, template, sep, finalSep){
+  if (ent.author == null) { return ''; }
   var names = ent.author.split(' and ');
   let name_strings = names.map(name => {
     name = name.trim();
@@ -114,13 +115,22 @@ function doi_string(ent, new_line){
   }
 }
 
+function title_string(ent) {
+  return '<span class="title">' + ent.title + '</span> ';
+}
+
 export function bibliography_cite(ent, fancy){
   if (ent){
-    var cite =  '<span class="title">' + ent.title + '</span> ';
+    var cite = title_string(ent);
     cite += link_string(ent) + '<br>';
-    cite += author_string(ent, '${L}, ${I}', ', ', ' and ');
-    if (ent.year || ent.date){
-      cite += ', ' + (ent.year || ent.date) + '. ';
+    if (ent.author) {
+      cite += author_string(ent, '${L}, ${I}', ', ', ' and ');
+      if (ent.year || ent.date) {
+        cite += ', ';
+      }
+    }
+    if (ent.year || ent.date) {
+      cite += (ent.year || ent.date) + '. ';
     } else {
       cite += '. ';
     }

src/styles/d-article.css

@@ -1,6 +1,6 @@
 d-article {
   contain: layout style;
-  overflow-x: hidden; // allow overflow y for e.g. hover boxes
+  overflow-x: hidden;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   padding-top: 2rem;
   color: rgba(0, 0, 0, 0.8);

src/styles/d-title.css

@@ -14,29 +14,23 @@ d-title h1 {
   grid-column: text;
   font-size: 40px;
   font-weight: 700;
-  line-height: 1.05em;
-  margin: 0 0 1rem;
+  line-height: 1.1em;
+  margin: 0 0 0.5rem;
 }
 
 @media(min-width: 768px) {
   d-title h1 {
-    font-size: 60px;
+    font-size: 50px;
   }
 }
 
 d-title p {
   font-weight: 300;
   font-size: 1.2rem;
-  line-height: 1.7em;
+  line-height: 1.55em;
   grid-column: text;
 }
 
-@media(min-width: 768px) {
-  d-title p {
-    font-size: 1.5rem;
-  }
-}
-
 d-title .status {
   margin-top: 0px;
   font-size: 12px;

src/styles/styles-base.css

@@ -90,7 +90,7 @@ sub {
 figure {
   position: relative;
   margin-bottom: 2.5em;
-  margin-top: 2.5em;
+  margin-top: 1.5em;
 }
 
 figcaption+figure {

src/styles/styles-layout.css

@@ -79,7 +79,7 @@ distill-footer {
   }
 }
 
-@media(min-width: 1280px) {
+@media(min-width: 1180px) {
   .base-grid,
   distill-header,
   d-title,

src/transforms/citation.js

@@ -95,6 +95,7 @@ export default function(dom, data) {
   }
 
   function author_string(ent, template, sep, finalSep){
+    if (ent.author == null) { return ''; }
     var names = ent.author.split(' and ');
     let name_strings = names.map(name => {
       name = name.trim();

src/transforms/meta.js

@@ -124,26 +124,28 @@ function appendHtml(el, html) {
 }
 
 function citation_meta_content(ref){
-  // Special test for arxiv
   var content = `citation_title=${ref.title};`;
 
-  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 (ref.author && ref.author !== '') {
+    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};`;
   }
 
+  // Special test for arxiv
   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);

src/transforms/optional-components.js

@@ -50,6 +50,8 @@ export default function(dom, data) {
       interstitial.password = data.password;
       body.insertBefore(interstitial, body.firstChild);
     }
+  } else if (!hasPassword && interstitial) {
+    interstitial.parentElement.removeChild(this);
   }
 
   let appendix = dom.querySelector('d-appendix');

src/ui/d-slider.js

@@ -181,6 +181,7 @@ export class Slider extends T(HTMLElement) {
   static get observedAttributes() {return ['min', 'max', 'value', 'step', 'ticks', 'origin', 'tickValues', 'tickLabels']; }
 
   attributeChangedCallback(attr, oldValue, newValue) {
+    if (isNaN(newValue) || newValue === undefined || newValue === null) return;
     if (attr == 'min') {
       this.min = +newValue;
       this.setAttribute('aria-valuemin', this.min);
@@ -194,7 +195,7 @@ export class Slider extends T(HTMLElement) {
     }
     if (attr == 'origin') {
       this.origin = +newValue;
-      this.update(this.value);
+      // this.update(this.value);
     }
     if (attr == 'step') {
       if (newValue > 0) {