From 2342c01b7e5cae0fc9209a9413227ea72c6e60e2 Mon Sep 17 00:00:00 2001 From: Sam Carlton Date: Mon, 25 Jan 2021 13:16:21 -0600 Subject: [PATCH] Add meta for tv pages --- .eleventy.js | 4 +++ layouts-eleventy/default.11ty.js | 45 +++++++++++++++++++++++++++----- nuxt.config.js | 1 + pages-eleventy/tv.11ty.js | 29 ++++++++++++++++---- 4 files changed, 67 insertions(+), 12 deletions(-) diff --git a/.eleventy.js b/.eleventy.js index c280550..8999d32 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,9 +1,13 @@ import fs from 'fs' import replace_css_url from 'replace-css-url' +import dotenv from 'dotenv' import { InlineCodeManager } from '@11ty/eleventy-assets' import nuxtConfig from './nuxt.config' +// Setup dotenv +dotenv.config() + function getAssetFilePath(componentName) { return `./${componentName}` diff --git a/layouts-eleventy/default.11ty.js b/layouts-eleventy/default.11ty.js index c7c1a9b..405030a 100644 --- a/layouts-eleventy/default.11ty.js +++ b/layouts-eleventy/default.11ty.js @@ -46,13 +46,41 @@ const defaultLinkTags = Object.fromEntries(config.head.link.map( mapLinkTag )) class DefaultLayout { - generateMetaTags = ( pageMeta = [] ) => { + generateMetaTags = function ( renderData ) { + + const { + title = null, + description = null, + meta: pageMeta = [] + } = renderData + + // console.log('renderData', Object.keys(renderData)) const meta = { ...defaultMeta, - ...Object.fromEntries(pageMeta.map(mapMetaTag)) + 'property-twitter:url': ``, + ...Object.fromEntries( pageMeta.map(mapMetaTag) ) } + // console.log('renderData.description', renderData.description) + + // 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('') } @@ -67,10 +95,13 @@ class DefaultLayout { } - render({ - content, - title = null, - }) { + render( data ) { + + const { + content, + title = null, + description = null + } = data // Setup inline tailwind this.usingComponent( 'static/tailwind.css' ) @@ -83,7 +114,7 @@ class DefaultLayout { ${ title || this.getNuxt().head.title } - ${ this.generateMetaTags() } + ${ this.generateMetaTags( data ) } ${ this.generateLinkTags() } diff --git a/nuxt.config.js b/nuxt.config.js index f7f0553..c51ed4e 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -48,6 +48,7 @@ export default { lang: 'en', }, title: 'Does it ARM', + description: pkg.description, meta: [ { charset: 'utf-8' }, { diff --git a/pages-eleventy/tv.11ty.js b/pages-eleventy/tv.11ty.js index 3622f1f..74ff865 100644 --- a/pages-eleventy/tv.11ty.js +++ b/pages-eleventy/tv.11ty.js @@ -1,11 +1,30 @@ +import dotenv from 'dotenv' + import config from '../nuxt.config' import VideoCard from '../components-eleventy/video/card.js' +// Setup dotenv +dotenv.config() + +export const makeTitle = function ( video ) { + return `${ video.name } - ${ config.head.title }` +} + +export const makeDescription = function ( video ) { + if ( video.payload.featuredApps.length === 0 ) return 'Apple Silicon performance and support videos' + + const featuredAppsString = video.payload.featuredApps.slice(0, 5).map(app => app.name).join(', ') + + // console.log('video.payload.featuredApps', video.payload.featuredApps) + + return `Apple Silicon performance and support videos for ${ featuredAppsString }` +} + class TV { // or `async data() {` // or `get data() {` - data() { + data () { return { layout: 'default.11ty.js', @@ -18,11 +37,11 @@ class TV { eleventyComputed: { title: ({ video }) => { // console.log('data', data) - return `${ video.name } - ${ config.head.title }` + return makeTitle( video ) + }, + description: ({ video }) => { + return makeDescription( video ) }, - // footerInlineScripts: () => [ - // 'node_modules/lazysizes/lazysizes.min.js' - // ] }, permalink: ({ video }) => {