import config from '../nuxt.config'
import {
makeFullUrlFromPath,
mapMetaTag,
mapLinkTag,
parseDefaultLayoutDom,
templateVar
} from './default.11ty.js'
console.log('Running Story Layout file')
// 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 ))
const masterLayoutDomString = parseDefaultLayoutDom({
replaceElements: {
// Replace root nuxt element
// and get rid of normal layout
'#__nuxt': templateVar('main-content')
}
}).serialize()
class StoryLayout {
generateMetaTags = function ( renderData ) {
const {
title = null,
description = null,
pageMeta = []
} = renderData
// https://amp.dev/documentation/components/amp-story/#metadata-guidelines
const meta = {
...defaultMeta,
'property-twitter:url': /* html */``,
'amp-story-generator-name': /* html */``,
'amp-story-generator-version': /* html */``,
'og:url': /* html */``,
'twitter:creator': /* html */``,
'title': /* html */``,
'og:title': /* html */``,
// 'twitter:title': /* html */``, // Already included
// Example:
'og:modified_time': /* html */``,
'og:type': /* html */``,
...Object.fromEntries( pageMeta.map(mapMetaTag) )
}
// if set
// get description from data
if ( description ) {
// Set meta description
meta['name-description'] = ``
// Set twitter description
meta['property-twitter:description'] = ``
}
// if set
// get title from data
if ( title ) {
// Set twitter title
meta['property-twitter:title'] = ``
}
return Object.values(meta).join('')
}
generateLinkTags = ( pageLinkTags = [] ) => {
const layoutLinkTags = {
ampCorePreload: /* html */``,
icon: /* html */``,
canonical: /* html */``,
ampYoutubeStylesheet: /* html */``,
}
const linkTags = {
...defaultLinkTags,
...layoutLinkTags,
...Object.fromEntries(pageLinkTags.map( mapLinkTag ))
}
return Object.values( linkTags ).join('')
}
defaultHeaderScripts = () => {
return {
ampCore: /* html */``,
ampStoryElement: /* html */``,
ampYoutubeElement: /* html */``,
}
}
defaultHeaderStyleTags = () => {
return {
ampBoilerplate: /* html */``,
// ampCore: /* html */``,
}
}
async render( data ) {
// return nuxtLayoutHtml
// console.log('Running StoryLayout render')
const {
content,
title = null,
headerScripts = {},
jsonLd
// description = null
} = data
const pageTitle = title || this.getNuxt().head.title
const headerScriptsHtml = Object.values( {
...this.defaultHeaderScripts(),
jsonLd: /* html */``
} ).join('')
const headerStylesHtml = Object.values( {
...this.defaultHeaderStyleTags()
} ).join('')
let workingLayoutString = masterLayoutDomString
// Set as an amp html document
workingLayoutString = workingLayoutString.replace( '${ this.getJs() }`
workingLayoutString = workingLayoutString.replace( templateVar('scripts'), `` )
// Return stringified html for page
return workingLayoutString
}
}
module.exports = StoryLayout