Add device listing page

pages/device/_slug.vue

@@ -0,0 +1,201 @@
+<template>
+    <section class="container py-24">
+        <div class="flex flex-col items-center">
+            <h1 class="title text-3xl md:text-5xl font-hairline leading-tight text-center pb-4">
+                App support for {{ device.name }}
+            </h1>
+
+            <h2
+                v-if="supportedAppList.length !== 0"
+                class="subtitle md:text-xl text-center"
+            >
+                Supported apps include {{ supportedAppList.join(', ') }}.
+            </h2>
+
+            <Search
+                :app-list="deviceAppList"
+                :quick-buttons="quickButtons"
+                @update:query="query = $event"
+            >
+                <template v-slot:before-search>
+                    <div class="empty-div" />
+                </template>
+            </Search>
+
+
+            <div class="flex flex-col md:flex-row space-x-0 space-y-4 md:space-y-0 md:space-x-4">
+
+                <LinkButton
+                    :href="`https://github.com/ThatGuySam/doesitarm/issues?q=is%3Aissue+${query}`"
+                    class="text-xs"
+                >
+                    Request an App with Github
+                </LinkButton>
+
+                <LinkButton
+                    :href="`https://twitter.com/DoesItARM/status/1330027384041508865`"
+                    class="text-xs"
+                >
+                    Request an App with Twitter
+                </LinkButton>
+
+                <LinkButton
+                    :href="`/apple-silicon-app-test/`"
+                    class="text-xs"
+                >
+                    Scan Your Own App
+                </LinkButton>
+
+            </div>
+
+        </div>
+    </section>
+</template>
+
+<script>
+import Search from '~/components/search.vue'
+import LinkButton from '~/components/link-button.vue'
+
+// import { categories } from '~/helpers/categories.js'
+import { getStatusName } from '~/helpers/statuses.js'
+
+const macAppleSiliconStatuses = new Set([
+    'native',
+    'rosetta'
+])
+
+function deviceSupportsApp ( device, app ) {
+
+    // const statuses = {
+    //     '✅': 'native',
+    //     '✳️': 'rosetta',
+    //     '⏹': 'no-in-progress',
+    //     '🚫': 'no',
+    //     '🔶': 'unreported',
+    // }
+    const appStatus = getStatusName( app.text )
+
+    if ( device.type === 'intel') {
+
+        return true
+    }
+
+    if ( device.type === 'mac-apple-silicon') {
+
+        return macAppleSiliconStatuses.has( appStatus )
+    }
+
+    // if ( device.type === 'ios') {
+
+    //     return
+    // }
+
+    return false
+}
+
+export default {
+    async asyncData ({ params: { slug } }) {
+        const { allList } = await import('~/helpers/get-list.js')
+        const { default: deviceList } = await import('~/static/device-list.json')
+        // const { default: gameList } = await import('~/static/game-list.json')
+        // const { default: videoList } = await import('~/static/video-list.json')
+
+        const device = deviceList.find( device => {
+            return device.slug === slug
+        })
+
+        return {
+            slug,
+            device,
+            deviceAppList: allList.map( app => {
+                const appIsSupported = deviceSupportsApp( device, app )
+
+                return {
+                    name: app.name,
+                    status: app.status,
+                    slug: app.slug,
+                    // endpoint: app.endpoint,
+                    text: appIsSupported ? `✅ Supported on ${device.name}` : `🚫 Not yet reported working on ${device.name}`,
+                    lastUpdated: app.lastUpdated,
+                    category: app.category,
+                    // searchLinks: makeAppSearchLinks( app, (new Set(videoList)) )
+                }
+            })
+        }
+    },
+    components: {
+        Search,
+        LinkButton
+    },
+    data: function () {
+        return {
+            query: '',
+            quickButtons: []
+        }
+    },
+    computed: {
+        supportedAppList () {
+            return this.deviceAppList.filter(app => {
+                return app.text.startsWith('✅')
+            }).slice(0, 12).map(app => app.name)
+        },
+        title () {
+            return `App support list for ${this.device.name}`
+        },
+        description () {
+            return `Check the the latest reported support status of apps and software on ${this.device.name}.`
+        },
+        structuredData () {
+            return {
+                "@context": "https://schema.org",
+                // https://developers.google.com/search/docs/data-types/faqpage
+                // https://schema.org/FAQPage
+                "@type": "FAQPage",
+                "mainEntity": this.deviceAppList.map( app => {
+                    return {
+                        // https://schema.org/Question
+                        "@type": "Question",
+                        "name": `Does ${app.name} work on ${ this.device.name }?`,
+                        "acceptedAnswer": {
+                            // https://schema.org/Answer
+                            "@type": "Answer",
+                            "text": app.text
+                        }
+                    }
+                })
+            }
+        }
+    },
+    head() {
+        return {
+            title: this.title,
+            meta: [
+                // hid is used as unique identifier. Do not use `vmid` for it as it will not work
+                {
+                    'hid': 'description',
+                    'name': 'description',
+                    'content': this.description
+                },
+
+                // Twitter Card
+                {
+                    'hid': 'twitter:title',
+                    'property':  'twitter:title',
+                    'content': this.title
+                },
+                {
+                    'hid': 'twitter:description',
+                    'property':  'twitter:description',
+                    'content': this.description
+                },
+                {
+                    'property':  'twitter:url',
+                    'content': `${process.env.URL}${this.$nuxt.$route.path}`
+                },
+            ],
+            __dangerouslyDisableSanitizers: ['script'],
+            script: [{ innerHTML: JSON.stringify(this.structuredData), type: 'application/ld+json' }]
+        }
+    }
+}
+</script>