diff --git a/layouts-eleventy/default.11ty.js b/layouts-eleventy/default.11ty.js index 405030a..75cf520 100644 --- a/layouts-eleventy/default.11ty.js +++ b/layouts-eleventy/default.11ty.js @@ -1,5 +1,12 @@ +import fs from 'fs' +import { JSDOM } from 'jsdom' + import config from '../nuxt.config' + +console.log('Running Default Layout file') + + const year = new Date().getFullYear() const makeTag = ( tag, tagName = 'meta') => { @@ -40,10 +47,30 @@ const mapLinkTag = ( tag ) => { ] } + +const getNuxtDefaultLayoutHtml = () => { + const fileContents = fs.readFileSync('./dist/layout-template/index.html', { encoding: "UTF-8" }) + + return fileContents +} + +const parseDefaultLayoutDom = () => { + const html = getNuxtDefaultLayoutHtml() + + // Build initial dom from the Layout + const dom = new JSDOM( html ) + + return dom +} + +// Buld data that only needs to run once const defaultMeta = Object.fromEntries(config.head.meta.map( mapMetaTag )) const defaultLinkTags = Object.fromEntries(config.head.link.map( mapLinkTag )) +// Generate manipulatable dom for page render +const layout = parseDefaultLayoutDom() + class DefaultLayout { generateMetaTags = function ( renderData ) { @@ -95,7 +122,11 @@ class DefaultLayout { } - render( data ) { + async render( data ) { + + // return nuxtLayoutHtml + + // console.log('Running DefaultLayout render') const { content, @@ -103,97 +134,55 @@ class DefaultLayout { description = null } = data + // Get our jsdom document instance + const document = layout.window.document + // Setup inline tailwind - this.usingComponent( 'static/tailwind.css' ) + // this.usingComponent( 'static/tailwind.css' ) // Setup inline tailwind - this.usingComponent( 'node_modules/@fontsource/inter/variable.css' ) + // this.usingComponent( 'node_modules/@fontsource/inter/variable.css' ) - return /* html */` - - - - ${ title || this.getNuxt().head.title } - ${ this.generateMetaTags( data ) } - ${ this.generateLinkTags() } + // Strip out existing meta + Array.from(document.querySelectorAll('head > meta')).forEach( domNode => { + domNode.remove() + }) - + // Strip out existing preloads + Array.from(document.querySelectorAll('link[rel="preload"]')).forEach( domNode => { + domNode.remove() + }) - + // Strip out existing scripts + Array.from(document.querySelectorAll('script[src*=".js"]')).forEach( domNode => { + domNode.remove() + }) - - - -
- -
-
- -
- ${ content } + // Set page title + document.title = title || this.getNuxt().head.title -
- -
-
-
+ // Set link tags + document.querySelector('title').insertAdjacentHTML('afterend', this.generateLinkTags() ) + + // Add meta tags after title node + document.querySelector('title').insertAdjacentHTML('afterend', this.generateMetaTags( data ) ) + + // Set page css + // document.querySelector('head').insertAdjacentHTML('beforeend', this.getCss() ) + + // Set page content + document.querySelector('.app-main').innerHTML = content + + // Set js before end of body + document.querySelector('body').insertAdjacentHTML('beforeend', `` ) + + + // Return stringified html for page + return layout.serialize() - - - - `; } } diff --git a/pages/layout-template.vue b/pages/layout-template.vue new file mode 100644 index 0000000..9a44683 --- /dev/null +++ b/pages/layout-template.vue @@ -0,0 +1,32 @@ + + +