Merge branch 'develop'

.nvmrc

@@ -1 +1 @@
-v14.11.0
+v15.11.0

build-lists.js

@@ -23,12 +23,12 @@ class BuildLists {
         // Where our lists are stored
         this.lists = {}
 
-        this.endpointSets = {
+        this.endpointMaps = {
             // Where Nuxt Routes and Payloads get stored
-            nuxt: new Set(),
+            nuxt: new Map(),
 
             // Where Eleventy Endpoints get stored
-            eleventy: new Set()
+            eleventy: new Map()
         }
 
         this.allVideoAppsList = new Set()
@@ -224,15 +224,12 @@ class BuildLists {
                 const appType = getAppType( app )
 
                 if ( isVideo ) {
-                    // this.endpointSets.eleventy.add({
+                    // this.endpointMaps.eleventy.add({
                     //     route: getVideoEndpoint(app),
                     //     payload: buildVideoPayload( app, this.allVideoAppsList, this.lists.video )
                     // })
 
-                    this.endpointSets.nuxt.add({
-                        route: getVideoEndpoint(app),
-                        payload: buildVideoPayload( app, this.allVideoAppsList, this.lists.video )
-                    })
+                    this.endpointMaps.nuxt.set( getVideoEndpoint(app), buildVideoPayload( app, this.allVideoAppsList, this.lists.video ) )
 
                     return
                 }
@@ -245,19 +242,32 @@ class BuildLists {
 
                     // Only add a benchmarks endpoint if it has any videos
                     if ( payload.allVideos.length > 0 ) {
-                        this.endpointSets.nuxt.add({
-                            route: `${getAppEndpoint(app)}/benchmarks`,
-                            payload: buildAppBenchmarkPayload( app, this.allVideoAppsList, this.lists.video )
-                        })
+                        // this.endpointMaps.nuxt.add({
+                        //     route: `${getAppEndpoint(app)}/benchmarks`,
+                        //     payload: buildAppBenchmarkPayload( app, this.allVideoAppsList, this.lists.video )
+                        // })
+
+                        this.endpointMaps.nuxt.set( `${getAppEndpoint(app)}/benchmarks`, buildAppBenchmarkPayload( app, this.allVideoAppsList, this.lists.video ) )
                     }
                 }
 
-                // Add app or game endpoint
-                this.endpointSets.nuxt.add({
-                    route: getAppEndpoint(app),
-                    payload: { app }
-                })
-                // console.log('Added to nuxt endpoints', getAppEndpoint(app))
+                // Add standard app endpoint
+                if ( appType === 'app' || appType === 'formula' ) {
+                    // this.endpointMaps.eleventy.add({
+                    //     route: getAppEndpoint(app),
+                    //     payload: { app }
+                    // })
+
+                    this.endpointMaps.eleventy.set( getAppEndpoint(app), { app } )
+                } else {
+                    // Add app or game endpoint
+                    // this.endpointMaps.nuxt.add({
+                    //     route: getAppEndpoint(app),
+                    //     payload: { app }
+                    // })
+                    // console.log('Added to nuxt endpoints', getAppEndpoint(app))
+                    this.endpointMaps.nuxt.set( getAppEndpoint(app), { app } )
+                }
 
                 return
             })
@@ -265,28 +275,30 @@ class BuildLists {
         }
 
 
+        // Create endpoints for categories
         Object.keys(categories).forEach( slug => {
-            this.endpointSets.nuxt.add({
-                route: '/kind/' + slug,
-                // payload: appList
-            })
+            // this.endpointMaps.nuxt.add({
+            //     route: '/kind/' + slug,
+            //     // payload: appList
+            // })
+            this.endpointMaps.nuxt.set( '/kind/' + slug, {} )
         })
 
 
         // Save Nuxt Endpoints
-        // await this.saveToJson(Array.from(this.endpointSets.nuxt), './static/nuxt-endpoints.json')
+        // await this.saveToJson(Array.from(this.endpointMaps.nuxt), './static/nuxt-endpoints.json')
 
         // // Save Eleventy Endpoints
-        // await this.saveToJson(Array.from(this.endpointSets.eleventy), './static/eleventy-endpoints.json')
+        // await this.saveToJson(Array.from(this.endpointMaps.eleventy), './static/eleventy-endpoints.json')
 
-        for ( const [ endpointSetName, endpointSet ] of Object.entries(this.endpointSets) ) {
+        for ( const [ endpointSetName, endpointSet ] of Object.entries(this.endpointMaps) ) {
             // Save Endpoints
-            await this.saveToJson(Array.from( endpointSet ), `./static/${endpointSetName}-endpoints.json`)
+            await this.saveToJson(Array.from( endpointSet , ([route, payload]) => ({ route, payload })), `./static/${endpointSetName}-endpoints.json`)
         }
 
         // Save sitemap endpoints
-        await this.saveToJson(Object.values(this.endpointSets).map( endpointSet => {
-            return Array.from( endpointSet )
+        await this.saveToJson(Object.values(this.endpointMaps).map( endpointSet => {
+            return Array.from( endpointSet , ([route, payload]) => ({ route, payload }) )
         } ).flat(1), './static/sitemap-endpoints.json')
 
         return

helpers/build-homebrew-list.js

@@ -75,6 +75,13 @@ class MakeHomebrewList {
         return null
     }
 
+    hasArm64Formula( formulaData ) {
+        // Check the official list first since it's data is newer and more frequently updated
+        const hasStableFormula = (formulaData.bottle.stable !== undefined)
+
+        return hasStableFormula && (formulaData.bottle.stable.files['arm64_big_sur'] !== undefined)
+    }
+
     formulaIsNative (formulae) {
         // Search Formulae from Homebrew API
         const formulaData = this.allFormulae[formulae.fullName] || this.searchFormulaeForName(formulae.name)
@@ -94,7 +101,7 @@ class MakeHomebrewList {
         const hasStableFormula = (formulaData.bottle.stable !== undefined)
         const hasArm64Formula = hasStableFormula && (formulaData.bottle.stable.files['arm64_big_sur'] !== undefined)
 
-        return hasArm64Formula
+        return this.hasArm64Formula( formulaData )
     }
 
     parseStatus (formulae) {
@@ -203,7 +210,45 @@ class MakeHomebrewList {
         // console.log('formulaeWithStatus', formulaeWithStatus)
 
 
-        const formulaeList = []
+        const formulaeList = new Map()
+
+        const category = {
+            slug: 'homebrew'
+        }
+
+        // for (const formula of Object.values( this.allFormulae )) {
+
+        //     const isNative = this.hasArm64Formula( formula )
+        //     const status = isNative ? 'native' : 'unreported'
+        //     const statusText = isNative ? '✅ Yes, Full Native Apple Silicon Support' : '🔶 Formula has not yet been reported to be native to Apple Silicon'
+        //     const slug = formula.full_name
+
+        //     formulaeList.set(formula.full_name, {
+        //         name: formula.full_name,
+        //         status: status,
+        //         // url: `https://formulae.brew.sh/formula/${formulae.name}`,
+        //         text: statusText,
+        //         slug,
+        //         endpoint: getAppEndpoint({
+        //             slug,
+        //             category
+        //         }),//`/formula/${slug}`,
+        //         category,
+        //         content: null,npm
+        //         relatedLinks: [
+        //             {
+        //                 href: `https://formulae.brew.sh/formula/${formula.name}`,
+        //                 label: formula.full_name,
+        //                 // a
+        //             },
+        //             // ...formula.links
+        //         ],
+        //         // reports: [
+        //         //     formulae
+        //         // ]
+        //     })
+
+        // }
 
 
         for (const formulae of this.issueTableRowData) {
@@ -224,11 +269,7 @@ class MakeHomebrewList {
             //     strict: true
             // })
 
-            const category = {
-                slug: 'homebrew'
-            }
-
-            formulaeList.push({
+            formulaeList.set(formulae.name, {
                 name: formulae.name,
                 status: this.parseStatus(formulae),
                 // url: `https://formulae.brew.sh/formula/${formulae.name}`,
@@ -256,7 +297,7 @@ class MakeHomebrewList {
 
         // console.log('formulaeList', formulaeList)
 
-        return formulaeList
+        return Array.from( formulaeList , ([_, data]) =>  data )
     }
 }
 

helpers/matching.js

@@ -5,7 +5,11 @@ export function matchesWholeWord (needle, haystack) {
 }
 
 
-export function eitherMatches (stringA, stringB) {
+export function eitherMatches (stringARaw, stringBRaw) {
+    // Make strings lowercase for more generous comparison
+    const stringA = stringARaw.toLowerCase()
+    const stringB = stringBRaw.toLowerCase()
+
     const stringALength = stringA.length
     const stringBLength = stringB.length
 

helpers/parse-date.js

@@ -20,6 +20,17 @@ const getRelativeTime = function (d1, d2 = new Date()) {
 
 }
 
+export function makeLastUpdatedFriendly ( lastUpdated ) {
+
+    if ( !lastUpdated ) return null
+
+    const options = { month: "long", day: "numeric", year: "numeric" }
+    const date = new Date( lastUpdated.raw )
+    const americanDate = new Intl.DateTimeFormat("en-US", options).format(date)
+
+    return americanDate
+}
+
 export default function (rawDate) {
 
     const date = new Date(rawDate)

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,91 @@ const mapLinkTag = ( tag ) => {
     ]
 }
 
+
+const getNuxtDefaultLayoutHtml = () => {
+    const fileContents = fs.readFileSync('./dist/layout-template/index.html', { encoding: "UTF-8" })
+
+    return fileContents
+}
+
+const templateVar = string => `--- template-var ${string} ---`
+
+const cleanNuxtLayout = ( layout ) => {
+
+    const document = layout.window.document
+
+    // 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()
+    })
+
+    // Convert subscribe to iframe embed
+    Array.from(document.querySelectorAll('form.all-updates-subscribe')).forEach( domNode => {
+        const subscribeEmbed = document.createElement('iframe')
+        subscribeEmbed.setAttribute('src', '/embed-subscribe')
+        // https://web.dev/iframe-lazy-loading/
+        subscribeEmbed.setAttribute('loading', 'lazy')
+        subscribeEmbed.style.width = '350px'
+        subscribeEmbed.style.height = '150px'
+
+        domNode.parentNode.replaceChild(subscribeEmbed, domNode)
+    })
+
+
+    // Set page title
+    document.title = templateVar('title')
+
+    // Set link tags
+    document.querySelector('title').insertAdjacentHTML('afterend', templateVar('link-tags') )
+
+    // Add meta tags after title node
+    document.querySelector('title').insertAdjacentHTML('afterend', templateVar('meta-tags') )
+
+    // Set page css
+    // document.querySelector('head').insertAdjacentHTML('beforeend', this.getCss() )
+
+    // Set page content
+    document.querySelector('.app-main').innerHTML = templateVar('main-content')//content
+
+    // Set js before end of body
+    // `<script>${ this.getJs() }</script>`
+    document.querySelector('body').insertAdjacentHTML('beforeend', templateVar('scripts') )
+
+    return layout
+}
+
+let nuxtLayoutHtml = null
+const parseDefaultLayoutDom = () => {
+    if ( nuxtLayoutHtml === null ) {
+        nuxtLayoutHtml = getNuxtDefaultLayoutHtml()
+    }
+    // const html = getNuxtDefaultLayoutHtml()
+
+    // Build initial dom from the Layout
+    const dom = new JSDOM( nuxtLayoutHtml )
+
+    const cleanedLayout = cleanNuxtLayout( dom )
+
+    return cleanedLayout
+}
+
+// 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().serialize()
+
 class DefaultLayout {
 
     generateMetaTags = function ( renderData ) {
@@ -95,105 +183,49 @@ class DefaultLayout {
     }
 
 
-    render( data ) {
+    async render( data ) {
+
+        // return nuxtLayoutHtml
+
+        // console.log('Running DefaultLayout render')
 
         const {
             content,
             title = null,
-            description = null
+            // description = null
         } = data
 
-        // Setup inline tailwind
-        this.usingComponent( 'static/tailwind.css' )
-        // Setup inline tailwind
-        this.usingComponent( 'node_modules/@fontsource/inter/variable.css' )
+        const pageTitle = title || this.getNuxt().head.title
 
-        return /* html */`
-            <!doctype html>
-            <html lang="${ this.getNuxt().head.htmlAttrs.lang }">
-                <head>
-                    <title>${ title || this.getNuxt().head.title }</title>
+        let workingLayoutString = masterLayoutDomString
 
-                    ${ this.generateMetaTags( data ) }
+        // Set page title
+        // pageTitle
+        workingLayoutString = workingLayoutString.replace( templateVar('title'), pageTitle )
 
-                    ${ this.generateLinkTags() }
+        // Set link tags
+        // this.generateLinkTags()
+        workingLayoutString = workingLayoutString.replace( templateVar('link-tags'), this.generateLinkTags() )
 
-                    <!-- {{ Script Preloads }} -->
+        // Add meta tags after title node
+        // this.generateMetaTags( data )
+        workingLayoutString = workingLayoutString.replace( templateVar('meta-tags'), this.generateMetaTags( data ) )
 
-                    <style>
-                        ${ this.getCss() }
-                    </style>
+        // Set page css
+        // document.querySelector('head').insertAdjacentHTML('beforeend', this.getCss() )
 
-                    <!-- {{ External Styles }} -->
+        // Set page content
+        // content
+        workingLayoutString = workingLayoutString.replace( templateVar('main-content'), content )
 
-                </head>
-                <body>
-                    <div id="__nuxt">
-                        <!---->
-                        <div id="__layout">
-                            <div class="app-wrapper text-gray-300 bg-gradient-to-bl from-dark to-darker bg-fixed">
-                                <nav class="fixed top-0 left-0 right-0 z-navbar">
-                                    <div class="max-w-7xl mx-auto px-4 lg:px-8">
-                                        <div class="flex justify-between h-16">
-                                            <div class="flex">
-                                                <div class="-ml-2 mr-2 flex items-center lg:hidden">
-                                                    <button aria-expanded="false" aria-label="Main menu" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white transition duration-150 ease-in-out">
-                                                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6">
-                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
-                                                        </svg>
-                                                        <!---->
-                                                    </button>
-                                                </div>
-                                                <div class="flex-shrink-0 flex items-center text-4xl lg:text-5xl py-3">
-                                                    <div>🦾</div>
-                                                </div>
-                                                <div class="hidden lg:ml-6 lg:flex lg:items-center space-x-4"><a href="/" class="px-3 py-2 rounded-md text-sm font-medium leading-5 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out text-gray-300 hover:bg-darker hover:neumorphic-shadow">Home </a><a href="/categories" class="px-3 py-2 rounded-md text-sm font-medium leading-5 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out text-gray-300 hover:bg-darker hover:neumorphic-shadow">Categories </a><a href="/benchmarks" class="px-3 py-2 rounded-md text-sm font-medium leading-5 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out text-gray-300 hover:bg-darker hover:neumorphic-shadow">Benchmarks </a><a href="/kind/homebrew" class="px-3 py-2 rounded-md text-sm font-medium leading-5 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out text-gray-300 hover:bg-darker hover:neumorphic-shadow">Homebrew </a><a href="/games" class="px-3 py-2 rounded-md text-sm font-medium leading-5 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out text-gray-300 hover:bg-darker hover:neumorphic-shadow">Games</a></div>
-                                            </div>
-                                            <div class="flex items-center">
-                                                <div class="flex-shrink-0"><a href="https://www.producthunt.com/posts/does-it-arm-benchmarks?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-does-it-arm-benchmarks" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=279410&theme=light" alt="Does It ARM Benchmarks - Curated App Benchmark Videos for Apple Silicon and Apple M1 | Product Hunt" width="200" height="43" style="width: 200px; height: 43px;"></a></div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="lg:hidden hidden">
-                                        <div class="px-2 pt-2 pb-3 lg:px-3"><a href="/" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out text-gray-300 hover:bg-gray-700">Home </a><a href="/categories" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out text-gray-300 hover:bg-gray-700">Categories </a><a href="/benchmarks" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out text-gray-300 hover:bg-gray-700">Benchmarks </a><a href="/kind/homebrew" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out text-gray-300 hover:bg-gray-700">Homebrew </a><a href="/games" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out text-gray-300 hover:bg-gray-700">Games</a></div>
-                                        <hr>
-                                    </div>
-                                </nav>
-                                <div class="app-main min-h-screen flex items-center">
+        // Set js before end of body
+        // `<script>${ this.getJs() }</script>`
+        workingLayoutString = workingLayoutString.replace( templateVar('scripts'), `<script>${ this.getJs() }</script>` )
 
-                                    ${ content }
 
-                                </div>
-                                <footer>
-                                    <div class="max-w-screen-xl mx-auto py-12 px-4 overflow-hidden space-y-8 sm:px-6 lg:px-8">
-                                        <div class="mt-8 flex justify-center space-x-6">
-                                            <div class="flex flex-col items-center space-y-4">
-                                                <div>
-                                                    <div>
-                                                        <form class="all-updates-subscribe text-xs relative">
-                                                            <!---->
-                                                            <div class="mt-1 relative rounded-md shadow-sm">
-                                                                <!----> <input id="all-updates-subscribe-17332" placeholder="Send me regular app updates" aria-label="Send me regular app updates" name="all-updates-subscribe" type="email" required class="form-input block w-full rounded-md py-1 neumorphic-shadow bg-darker placeholder-white text-center border border-transparent px-3" style="width: 240px;">
-                                                            </div>
-                                                        </form>
-                                                    </div>
-                                                    <!---->
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <p class="mt-8 text-center text-base leading-6 text-gray-400">© ${ year } ${ this.getNuxt().head.title } All rights reserved.</p>
-                                    </div>
-                                </footer>
-                            </div>
-                        </div>
-                    </div>
+        // Return stringified html for page
+        return workingLayoutString
 
-                    <script>
-                        ${ this.getJs() }
-                    </script>
-                </body>
-            </html>
-        `;
     }
 }
 

layouts/embed.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="embed-main text-gray-300">
+        <nuxt />
+    </div>
+</template>
+
+<script>
+
+// import '@fontsource/inter/latin-100.css'
+// import '@fontsource/inter/latin-400.css'
+// import '@fontsource/inter/latin-700.css'
+
+import '@fontsource/inter/variable.css'
+
+export default {}
+
+</script>
+
+<style>
+    /* Clear out background color */
+    html {
+        background: transparent;
+    }
+</style>

package.json

@@ -11,9 +11,9 @@
     "generate": "npm run clone-readme && npm run build-lists && npm run generate-nuxt && npm run generate-eleventy",
     "build-lists": "node -r esm build-lists.js",
     "generate-nuxt": "nuxt generate",
-    "generate-eleventy": "npm run generate-postcss && node -r esm node_modules/.bin/eleventy --quiet",
+    "generate-eleventy": "npm run generate-postcss && node --max-old-space-size=60000  -r esm node_modules/.bin/eleventy --quiet",
     "generate-postcss": "ENV=production postcss assets/css/tailwind.css --o static/tailwind.css",
-    "dev-eleventy": "node -r esm node_modules/.bin/eleventy --quiet --watch --serve",
+    "dev-eleventy": "node --max-old-space-size=60000 -r esm node_modules/.bin/eleventy --quiet --watch --serve",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
     "lint:fix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
     "precommit": "npm run lint",
@@ -27,6 +27,7 @@
     "@zip.js/zip.js": "^2.2.6",
     "axios": "^0.21.0",
     "cross-env": "^5.2.0",
+    "jsdom": "^16.4.0",
     "lazysizes": "^5.3.0-beta1",
     "markdown-it": "^11.0.1",
     "marked": "^1.2.7",

pages-eleventy/app.11ty.js

@@ -0,0 +1,143 @@
+import dotenv from 'dotenv'
+
+import config from '../nuxt.config.js'
+
+import { getAppType } from '../helpers/app-derived.js'
+import { makeLastUpdatedFriendly } from '../helpers/parse-date'
+
+
+import VideoRow from '../components-eleventy/video/row.js'
+
+// import VideoRow from '../components-eleventy/video/row.js'
+// import { isVideo } from '../helpers/app-derived'
+
+// Setup dotenv
+dotenv.config()
+
+export const makeTitle = function ( app ) {
+    return `Does ${app.name} work on Apple Silicon? - ${ config.head.title }`
+}
+
+export const makeDescription = function ( app ) {
+    return `Latest reported support status of ${ app.name } on Apple Silicon and Apple M1 Processors when installed via Homebrew. `
+}
+
+export class AppTemplate {
+    // or `async data() {`
+    // or `get data() {`
+    data () {
+        return {
+            layout: 'default.11ty.js',
+
+            pagination: {
+                data: 'eleventy-endpoints',
+                size: 1,
+                alias: 'app',
+
+                before: function( data ) {
+                    return data.filter( entry => {
+                        const appType = getAppType( entry.payload.app )
+
+                        return appType === 'app'
+                    })
+                }
+            },
+
+            eleventyComputed: {
+                title: ({ app: { payload: { app } }  }) => {
+                    // console.log('data', data)
+                    return makeTitle( app )
+                },
+                description: ({ app: { payload: { app } }  }) => {
+                    return makeDescription( app )
+                },
+                mainHeading: ({ app: { payload: { app } }  }) => {
+                    return `Does ${ app.name } work on Apple Silicon?`
+                },
+            },
+
+            permalink: ({ app }) => {
+                // console.log('payload', app.payload)
+                return app.route.substring(1) + '/'
+            }
+        }
+    }
+
+    render( data ) {
+
+        const { app: { payload: { app, relatedVideos = [] } } } = data
+
+        // console.log('video.payload', Object.keys(video.payload))
+
+        const lastUpdatedFriendly = makeLastUpdatedFriendly( app.lastUpdated )
+
+        const relatedLinksHtml = app.relatedLinks.map( (link, i) => {
+            return /* html */`
+                <a
+                    class="relative inline-flex items-center rounded-md px-4 py-2 leading-5 font-bold text-white border border-transparent focus:outline-none focus:border-indigo-600 neumorphic-shadow focus:shadow-outline-indigo bg-darker hover:bg-indigo-400 active:bg-indigo-600 transition duration-150 ease-in-out"
+                    href="${link.href}"
+                    target="_blank"
+                    rel="noopener"
+                    role="button"
+                >${ (i === 0) ? 'View' : link.label }</a>
+            `
+        } ).join('')
+
+        return /* html */`
+            <section class="container py-32">
+                <div class="flex flex-col items-center text-center">
+                    <h1 class="title text-sm md:text-2xl font-bold">
+                        ${ data.mainHeading }
+                    </h1>
+                    <h2 class="subtitle text-2xl md:text-5xl font-bold py-6">
+                        ${ app.text }
+                    </h2>
+
+                    <div class="subscribe">
+                        <iframe src="/embed-subscribe" loading="lazy" style="width: 350px; height: 150px;" class="-my-8"></iframe>
+                    </div>
+
+                    <div class="links space-y-6 sm:space-x-6 mb-8">
+                        ${ relatedLinksHtml }
+                    </div>
+                </div>
+
+                ${ relatedVideos.length > 0 ? /* html */`
+                    <div
+                        v-if="relatedVideos.length !== 0"
+                        class="related-videos w-full"
+                    >
+                        <h2 class="subtitle text-xl md:text-2xl font-bold mb-3">
+                            Related Videos
+                        </h2>
+
+                        ${ this.boundComponent(VideoRow)( relatedVideos ) }
+
+                    </div>
+                ` : '' }
+
+                <div class="report-update text-xs text-center w-full shadow-none py-24">
+                    ${ lastUpdatedFriendly !== null ? /* html */`
+                        <div>
+                            <time
+                                datetime="${ app.lastUpdated.raw }"
+                            >
+                                Last Updated ${ lastUpdatedFriendly }
+                            </time>
+                        </div>
+                    ` : '' }
+                    <!-- https://eric.blog/2016/01/08/prefilling-github-issues/ -->
+                    <a
+                        href="https://github.com/ThatGuySam/doesitarm/issues?q=is%3Aissue+${ app.name }"
+                        target="_blank"
+                        class="underline"
+                        rel="noopener"
+                    >Report Update</a>
+                </div>
+
+            </section>
+        `
+    }
+}
+
+module.exports = AppTemplate

pages-eleventy/formula.11ty.js

@@ -0,0 +1,65 @@
+import dotenv from 'dotenv'
+
+import config from '../nuxt.config.js'
+
+import { getAppType } from '../helpers/app-derived.js'
+
+import { AppTemplate } from './app.11ty.js'
+
+// import VideoRow from '../components-eleventy/video/row.js'
+// import { isVideo } from '../helpers/app-derived'
+
+// Setup dotenv
+dotenv.config()
+
+export const makeTitle = function ( app ) {
+    return `Does ${app.name} work on Apple Silicon? - ${ config.head.title }`
+}
+
+export const makeDescription = function ( app ) {
+    return `Latest reported support status of ${ app.name } on Apple Silicon and Apple M1 Processors when installed via Homebrew. `
+}
+
+class FormulaTemplate extends AppTemplate {
+    // or `async data() {`
+    // or `get data() {`
+    data () {
+        return {
+            layout: 'default.11ty.js',
+
+            pagination: {
+                data: 'eleventy-endpoints',
+                size: 1,
+                alias: 'app',
+                before: function( data ) {
+                    return data.filter( entry => {
+                        const appType = getAppType( entry.payload.app )
+
+                        return appType === 'formula'
+                    })
+                }
+            },
+
+            eleventyComputed: {
+                title: ({ app: { payload: { app } }  }) => {
+                    // console.log('data', data)
+                    return makeTitle( app )
+                },
+                description: ({ app: { payload: { app } }  }) => {
+                    return makeDescription( app )
+                },
+                mainHeading: ({ app: { payload: { app } }  }) => {
+                    return `Does <code>${ app.name }</code> work on Apple Silicon when installed via Homebrew?`
+                }
+            },
+
+            permalink: ({ app }) => {
+                // console.log('payload', app.payload)
+                return app.route.substring(1) + '/'
+            }
+        }
+    }
+
+}
+
+module.exports = FormulaTemplate

pages/app/_slug/index.vue

@@ -59,7 +59,7 @@
 </template>
 
 <script>
-import parseDate from '~/helpers/parse-date'
+import { lastUpdatedFriendly } from '~/helpers/parse-date'
 import { getAppEndpoint } from '~/helpers/app-derived.js'
 
 import LinkButton from '~/components/link-button.vue'
@@ -105,14 +105,7 @@ export default {
     },
     computed: {
         lastUpdatedFriendly () {
-
-            if (this.app.lastUpdated === null) return
-
-            const options = { month: "long", day: "numeric", year: "numeric" }
-            const date = new Date(this.app.lastUpdated.raw)
-            const americanDate = new Intl.DateTimeFormat("en-US", options).format(date)
-
-            return americanDate
+            return lastUpdatedFriendly( this.app.lastUpdated )
         }
     },
     head() {

pages/embed-subscribe.vue

@@ -0,0 +1,36 @@
+<template>
+    <AllUpdatesSubscribe
+        class="w-100 h-100 absolute inset-0 flex justify-center items-center"
+    />
+</template>
+
+<script>
+
+import AllUpdatesSubscribe from '~/components/all-updates-subscribe.vue'
+
+export default {
+    layout: 'embed',
+
+    components: {
+        AllUpdatesSubscribe
+    },
+
+    data: function () {
+        return {}
+    },
+
+    head() {
+        return {
+            title: 'Subscribe',
+            // meta: [
+            //     // hid is used as unique identifier. Do not use `vmid` for it as it will not work
+            //     {
+            //         hid: 'description',
+            //         name: 'description',
+            //         content: 'My custom description'
+            //     }
+            // ]
+        }
+    }
+}
+</script>

pages/layout-template.vue

@@ -0,0 +1,32 @@
+<template>
+    <section class="container py-24">
+        <!-- __template -->
+    </section>
+</template>
+
+<script>
+
+export default {
+    data: function () {
+        return {}
+    },
+    // computed: {
+    //     categoryList () {
+    //         return categoryList
+    //     }
+    // },
+    head() {
+        return {
+            title: '__template',
+            // meta: [
+            //     // hid is used as unique identifier. Do not use `vmid` for it as it will not work
+            //     {
+            //         hid: 'description',
+            //         name: 'description',
+            //         content: 'My custom description'
+            //     }
+            // ]
+        }
+    }
+}
+</script>

tailwind.config.js

@@ -3,8 +3,10 @@ module.exports = {
         enabled: true,//process.env.NODE_ENV === 'production',
         content: [
             'components/**/*.vue',
+            'layouts-eleventy/**/*.js',
             'layouts/**/*.vue',
             'pages/**/*.vue',
+            'pages-eleventy/**/*.js',
             'plugins/**/*.js',
             'nuxt.config.js'
         ]