Adding an alert banner to top when not on localhost

components/appendix.js

@@ -70,7 +70,6 @@ export default function(dom, data) {
 
     div.innerHTML = oldHtml + div.innerHTML;
 
-
     el.querySelector("a.github").setAttribute("href", data.githubUrl);
     el.querySelector("a.github-issue").setAttribute("href", data.githubUrl + "/issues/new");
     el.querySelector(".citation.short").textContent = data.concatenatedAuthors + ", " + '"' + data.title + '", Distill, ' + data.publishedYear + ".";

components/banner.js

@@ -0,0 +1,23 @@
+const html = `
+<style>
+  dt-banner {
+    background: #FFF59D;
+    display: block;
+    text-align: center;
+    color: black;
+    height: 70px;
+    line-height: 70px;
+  }
+</style>
+<div>This article is a draft, awaiting review for publication in Distill</div>
+`;
+
+export default function(dom, data) {
+  let banner = dom.createElement("dt-banner");
+  banner.innerHTML = html;
+  let b = dom.querySelector("body");
+  b.insertBefore(banner, b.firstChild);
+  banner.addEventListener("click", function() {
+    banner.style.display = "none";
+  });
+}

components/styles-article.css

@@ -62,8 +62,7 @@ dt-article h1 {
 dt-article h2 {
   font-family: HoeflerText-Regular, Cochin, Georgia, serif;
   font-weight: 400;
-  font-style: italic;
-  font-size: 24px;
+  font-size: 26px;
   line-height: 1.25em;
   margin-top: 36px;
   margin-bottom: 24px;
@@ -71,7 +70,7 @@ dt-article h2 {
 
 @media(min-width: 1024px) {
   dt-article h2 {
-  margin-top: 48px;
+    margin-top: 48px;
     font-size: 30px;
   }
 }
@@ -100,11 +99,11 @@ dt-article h1 + h2 {
 dt-article h3 {
   font-family: HoeflerText-Regular, Georgia, serif;
   font-weight: 400;
-  font-size: 13px;
+  font-size: 20px;
   line-height: 1.4em;
   margin-top: 36px;
   margin-bottom: 18px;
-  text-transform: uppercase;
+  font-style: italic;
 }
 
 dt-article h1 + h3 {
@@ -113,7 +112,7 @@ dt-article h1 + h3 {
 
 @media(min-width: 1024px) {
   dt-article h3 {
-    font-size: 22px;
+    font-size: 26px;
   }
 }
 

index.js

@@ -4,6 +4,7 @@ import frontMatter from "./components/front-matter";
 import bibliography from "./components/bibliography";
 import expandData from "./components/expand-data";
 import meta from "./components/meta";
+import banner from "./components/banner";
 import header from "./components/header";
 import byline from "./components/byline";
 import appendix from "./components/appendix";
@@ -42,6 +43,10 @@ if(window && window.document) {
   renderImmediately(window.document);
   window.document.addEventListener("DOMContentLoaded", (event) => {
     renderOnLoad(window.document, data);
+    // Add a banner if we're not on localhost.
+    if (window.location.hostname !== "localhost") {
+      banner(window.document, data);
+    }
     generateCrossref(data);
   });
 }

rollup.config.js

@@ -6,7 +6,7 @@ import serve from 'rollup-plugin-serve';
 import uglify from 'rollup-plugin-uglify';
 import string from 'rollup-plugin-string';
 
-// const PORT = 8080;
+const PORT = 8080;
 // console.log(`open http://localhost:${PORT}/`);
 
 export default {