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 {
+.footnote-container {
-  margin: 0 auto;
+  padding: 10px;
-  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;
 }
 
 </style>
 
 <d-hover-box>
-  <slot id="slot"></slot>
+  <div class="footnote-container">
+    <slot id="slot"></slot>
+  </div>
 </d-hover-box>
 
 <sup>

src/components/d-hover-box.js

@@ -30,7 +30,6 @@ const T = Template('d-hover-box', `
   box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   box-sizing: border-box;
-  padding: 10px;
 }
 
 </style>

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');
+    if (this.shouldRemoveSelf()) {
-    passwordInput.oninput = (event) => this.passwordChanged(event);
+      this.parentElement.removeChild(this);
-    if (typeof(Storage) !== 'undefined') {
+    } else {
-      if (localStorage.getItem('distill-interstitial-password-correct') === 'true') {
+      const passwordInput = this.root.querySelector('#interstitial-password-input');
-        console.log('Loaded that correct password was entered before; skipping interstitial.');
+      passwordInput.oninput = (event) => this.passwordChanged(event);
-        this.parentElement.removeChild(this);
-      }
     }
   }
 
@@ -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/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');