Improve interstitial behavior

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

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/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/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');