From cdfa045a367df66080b183ba3edc523dbdf90433 Mon Sep 17 00:00:00 2001 From: Ludwig Schubert Date: Fri, 15 Feb 2019 17:35:48 -0800 Subject: [PATCH] Header prerendering now adds markup directly and adds distill-prerendered tag which TEMPLATE webcomponents now respect --- bin/render.js | 1 + .../distill-footer-template.js | 74 +++++++++++++++++ src/distill-components/distill-footer.js | 74 +---------------- .../distill-header-template.js | 79 ++++++++++++++++++ src/distill-components/distill-header.js | 81 +------------------ src/distill-transforms/distill-footer.js | 3 + src/distill-transforms/distill-header.js | 7 +- src/mixins/template.js | 3 + 8 files changed, 170 insertions(+), 152 deletions(-) create mode 100644 src/distill-components/distill-footer-template.js create mode 100644 src/distill-components/distill-header-template.js diff --git a/bin/render.js b/bin/render.js index c99261c..f8c7e2f 100755 --- a/bin/render.js +++ b/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! diff --git a/src/distill-components/distill-footer-template.js b/src/distill-components/distill-footer-template.js new file mode 100644 index 0000000..c024c97 --- /dev/null +++ b/src/distill-components/distill-footer-template.js @@ -0,0 +1,74 @@ +import logo from '../assets/distill-logo.svg'; + +export const footerTemplate = ` + + +
+ + is dedicated to clear explanations of machine learning + +
+ About + Submit + Prize + Archive + RSS + GitHub + Twitter +      ISSN 2476-0757 +
+ +
+ +`; diff --git a/src/distill-components/distill-footer.js b/src/distill-components/distill-footer.js index f45db9a..e2e5ce5 100644 --- a/src/distill-components/distill-footer.js +++ b/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', ` - - -
- - is dedicated to clear explanations of machine learning - -
- About - Submit - Prize - Archive - RSS - GitHub - Twitter -      ISSN 2476-0757 -
- -
- -`); +const T = Template('distill-footer', footerTemplate); export class DistillFooter extends T(HTMLElement) { diff --git a/src/distill-components/distill-header-template.js b/src/distill-components/distill-header-template.js new file mode 100644 index 0000000..cba3b94 --- /dev/null +++ b/src/distill-components/distill-header-template.js @@ -0,0 +1,79 @@ +import logo from '../assets/distill-logo.svg'; + +export const headerTemplate = ` + +
+ + +
+`; diff --git a/src/distill-components/distill-header.js b/src/distill-components/distill-header.js index d33811f..50aecc2 100644 --- a/src/distill-components/distill-header.js +++ b/src/distill-components/distill-header.js @@ -14,86 +14,9 @@ import { Template } from '../mixins/template'; -import logo from '../assets/distill-logo.svg'; - -const T = Template('distill-header', ` - -
- - -
-`, false); +import {headerTemplate} from './distill-header-template'; +const T = Template('distill-header', headerTemplate, false); export class DistillHeader extends T(HTMLElement) { diff --git a/src/distill-transforms/distill-footer.js b/src/distill-transforms/distill-footer.js index be673a5..3be9ce0 100644 --- a/src/distill-transforms/distill-footer.js +++ b/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); } diff --git a/src/distill-transforms/distill-header.js b/src/distill-transforms/distill-header.js index fc80929..aa6ea3a 100644 --- a/src/distill-transforms/distill-header.js +++ b/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); } diff --git a/src/mixins/template.js b/src/mixins/template.js index bd7764b..ec0257c 100644 --- a/src/mixins/template.js +++ b/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);