Header prerendering now adds markup directly and adds distill-prerendered tag which TEMPLATE webcomponents now respect

bin/render.js

@@ -37,6 +37,7 @@ const options = { runScripts: 'outside-only', QuerySelector: true, virtualConsol
 JSDOM.fromFile(program.inputPath, options).then(dom => {
   const window = dom.window;
   const document = window.document;
+  const HTMLElement = window.HTMLElement;
 
   const data = new transforms.FrontMatter;
   data.inputHTMLPath = program.inputPath; // may be needed to resolve relative links!

src/distill-components/distill-footer-template.js

@@ -0,0 +1,74 @@
+import logo from '../assets/distill-logo.svg';
+
+export const footerTemplate = `
+<style>
+
+:host {
+  color: rgba(255, 255, 255, 0.5);
+  font-weight: 300;
+  padding: 2rem 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: hsl(180, 5%, 15%); /*hsl(200, 60%, 15%);*/
+  text-align: left;
+  contain: content;
+}
+
+.logo svg {
+  width: 24px;
+  position: relative;
+  top: 4px;
+  margin-right: 2px;
+}
+
+.logo svg path {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.8);
+  stroke-width: 3px;
+}
+
+.logo {
+  font-size: 17px;
+  font-weight: 200;
+  color: rgba(255, 255, 255, 0.8);
+  text-decoration: none;
+  margin-right: 6px;
+}
+
+.container {
+  grid-column: text;
+}
+
+.nav {
+  font-size: 0.9em;
+  margin-top: 1.5em;
+}
+
+.nav a {
+  color: rgba(255, 255, 255, 0.8);
+  margin-right: 6px;
+  text-decoration: none;
+}
+
+</style>
+
+<div class='container'>
+
+  <a href="/" class="logo">
+    ${logo}
+    Distill
+  </a> is dedicated to clear explanations of machine learning
+
+  <div class="nav">
+    <a href="https://distill.pub/about/">About</a>
+    <a href="https://distill.pub/journal/">Submit</a>
+    <a href="https://distill.pub/prize/">Prize</a>
+    <a href="https://distill.pub/archive/">Archive</a>
+    <a href="https://distill.pub/rss.xml">RSS</a>
+    <a href="https://github.com/distillpub">GitHub</a>
+    <a href="https://twitter.com/distillpub">Twitter</a>
+    &nbsp;&nbsp;&nbsp;&nbsp; ISSN 2476-0757
+  </div>
+
+</div>
+
+`;

src/distill-components/distill-footer.js

@@ -13,80 +13,10 @@
 // limitations under the License.
 
 import { Template } from '../mixins/template';
-import logo from '../assets/distill-logo.svg';
 
-const T = Template('distill-footer', `
+import {footerTemplate} from './distill-footer-template';
-<style>
 
-:host {
+const T = Template('distill-footer', footerTemplate);
-  color: rgba(255, 255, 255, 0.5);
-  font-weight: 300;
-  padding: 2rem 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  background-color: hsl(180, 5%, 15%); /*hsl(200, 60%, 15%);*/
-  text-align: left;
-  contain: content;
-}
-
-.logo svg {
-  width: 24px;
-  position: relative;
-  top: 4px;
-  margin-right: 2px;
-}
-
-.logo svg path {
-  fill: none;
-  stroke: rgba(255, 255, 255, 0.8);
-  stroke-width: 3px;
-}
-
-.logo {
-  font-size: 17px;
-  font-weight: 200;
-  color: rgba(255, 255, 255, 0.8);
-  text-decoration: none;
-  margin-right: 6px;
-}
-
-.container {
-  grid-column: text;
-}
-
-.nav {
-  font-size: 0.9em;
-  margin-top: 1.5em;
-}
-
-.nav a {
-  color: rgba(255, 255, 255, 0.8);
-  margin-right: 6px;
-  text-decoration: none;
-}
-
-</style>
-
-<div class='container'>
-
-  <a href="/" class="logo">
-    ${logo}
-    Distill
-  </a> is dedicated to clear explanations of machine learning
-
-  <div class="nav">
-    <a href="https://distill.pub/about/">About</a>
-    <a href="https://distill.pub/journal/">Submit</a>
-    <a href="https://distill.pub/prize/">Prize</a>
-    <a href="https://distill.pub/archive/">Archive</a>
-    <a href="https://distill.pub/rss.xml">RSS</a>
-    <a href="https://github.com/distillpub">GitHub</a>
-    <a href="https://twitter.com/distillpub">Twitter</a>
-    &nbsp;&nbsp;&nbsp;&nbsp; ISSN 2476-0757
-  </div>
-
-</div>
-
-`);
 
 export class DistillFooter extends T(HTMLElement) {
 

src/distill-components/distill-header-template.js

@@ -0,0 +1,79 @@
+import logo from '../assets/distill-logo.svg';
+
+export const headerTemplate = `
+<style>
+distill-header {
+  position: relative;
+  height: 60px;
+  background-color: hsl(200, 60%, 15%);
+  width: 100%;
+  box-sizing: border-box;
+  z-index: 2;
+  color: rgba(0, 0, 0, 0.8);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
+}
+distill-header .content {
+  height: 70px;
+  grid-column: page;
+}
+distill-header a {
+  font-size: 16px;
+  height: 60px;
+  line-height: 60px;
+  text-decoration: none;
+  color: rgba(255, 255, 255, 0.8);
+  padding: 22px 0;
+}
+distill-header a:hover {
+  color: rgba(255, 255, 255, 1);
+}
+distill-header svg {
+  width: 24px;
+  position: relative;
+  top: 4px;
+  margin-right: 2px;
+}
+@media(min-width: 1080px) {
+  distill-header {
+    height: 70px;
+  }
+  distill-header a {
+    height: 70px;
+    line-height: 70px;
+    padding: 28px 0;
+  }
+  distill-header .logo {
+  }
+}
+distill-header svg path {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.8);
+  stroke-width: 3px;
+}
+distill-header .logo {
+  font-size: 17px;
+  font-weight: 200;
+}
+distill-header .nav {
+  float: right;
+  font-weight: 300;
+}
+distill-header .nav a {
+  font-size: 12px;
+  margin-left: 24px;
+  text-transform: uppercase;
+}
+</style>
+<div class="content">
+  <a href="/" class="logo">
+    ${logo}
+    Distill
+  </a>
+  <nav class="nav">
+    <a href="/about/">About</a>
+    <a href="/prize/">Prize</a>
+    <a href="/journal/">Submit</a>
+  </nav>
+</div>
+`;

src/distill-components/distill-header.js

@@ -14,86 +14,9 @@
 
 import { Template } from '../mixins/template';
 
-import logo from '../assets/distill-logo.svg';
+import {headerTemplate} from './distill-header-template';
-
-const T = Template('distill-header', `
-<style>
-distill-header {
-  position: relative;
-  height: 60px;
-  background-color: hsl(200, 60%, 15%);
-  width: 100%;
-  box-sizing: border-box;
-  z-index: 2;
-  color: rgba(0, 0, 0, 0.8);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
-}
-distill-header .content {
-  height: 70px;
-  grid-column: page;
-}
-distill-header a {
-  font-size: 16px;
-  height: 60px;
-  line-height: 60px;
-  text-decoration: none;
-  color: rgba(255, 255, 255, 0.8);
-  padding: 22px 0;
-}
-distill-header a:hover {
-  color: rgba(255, 255, 255, 1);
-}
-distill-header svg {
-  width: 24px;
-  position: relative;
-  top: 4px;
-  margin-right: 2px;
-}
-@media(min-width: 1080px) {
-  distill-header {
-    height: 70px;
-  }
-  distill-header a {
-    height: 70px;
-    line-height: 70px;
-    padding: 28px 0;
-  }
-  distill-header .logo {
-  }
-}
-distill-header svg path {
-  fill: none;
-  stroke: rgba(255, 255, 255, 0.8);
-  stroke-width: 3px;
-}
-distill-header .logo {
-  font-size: 17px;
-  font-weight: 200;
-}
-distill-header .nav {
-  float: right;
-  font-weight: 300;
-}
-distill-header .nav a {
-  font-size: 12px;
-  margin-left: 24px;
-  text-transform: uppercase;
-}
-</style>
-<div class="content">
-  <a href="/" class="logo">
-    ${logo}
-    Distill
-  </a>
-  <nav class="nav">
-    <a href="/about/">About</a>
-    <a href="/prize/">Prize</a>
-    <a href="/journal/">Submit</a>
-  </nav>
-</div>
-`, false);
 
+const T = Template('distill-header', headerTemplate, false);
 
 export class DistillHeader extends T(HTMLElement) {
 

src/distill-transforms/distill-footer.js

@@ -12,10 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { footerTemplate } from '../distill-components/distill-footer-template';
+
 export default function(dom) {
   const footerTag = dom.querySelector('distill-footer');
   if(!footerTag) {
     const footer = dom.createElement('distill-footer');
+    footer.innerHTML = footerTemplate;
     const body = dom.querySelector('body');
     body.appendChild(footer);
   }

src/distill-transforms/distill-header.js

@@ -12,10 +12,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-export default function(dom) {
+
+import { headerTemplate } from '../distill-components/distill-header-template';
+
+export default function(dom, data) {
   const headerTag = dom.querySelector('distill-header');
   if (!headerTag) {
     const header = dom.createElement('distill-header');
+    header.innerHTML = headerTemplate;
+    header.setAttribute('distill-prerendered', "");
     const body = dom.querySelector('body');
     body.insertBefore(header, body.firstChild);
   }

src/mixins/template.js

@@ -40,6 +40,9 @@ export const Template = (name, templateString, useShadow = true) => {
       }
 
       connectedCallback() {
+        if (this.hasAttribute('distill-prerendered')) {
+          return;
+        }
         if (useShadow) {
           if ('ShadyCSS' in window) {
             ShadyCSS.styleElement(this);