Merge branch 'feat/games'

.gitignore

@@ -84,3 +84,4 @@ dist
 # Other
 /app-list.json
 /README-temp.md
+/game-list.json

components/navbar.vue

@@ -162,6 +162,10 @@ export default {
                     label: 'Entertainment',
                     url: '/kind/entertainment-and-media-apps',
                 },
+                {
+                    label: 'Games',
+                    url: '/games',
+                },
             ])
         }
     },

components/search.vue

@@ -56,14 +56,19 @@
                                 class="relative"
                             >
                                 <a
-                                    :href="`/app/${ app.slug }`"
+                                    :href="app.endpoint"
                                     class="flex items-center hover:neumorphic-shadow hover:bg-gradient-to-br from-darkest to-dark focus:outline-none focus:bg-gray-50 transition duration-300 ease-in-out rounded-lg -mx-5 px-4 py-4 sm:px-6"
                                 >
                                     <div class="flex-shrink-0 h-12 w-12 rounded-full flex items-center justify-center bg-darker">
                                         {{ app.name.charAt(0) }}
                                     </div>
                                     <div class="min-w-0 flex-1 px-4 md:mr-48">
-                                        <div class="text-sm leading-5 font-light truncate">{{ app.name }}</div>
+                                        <div class="text-sm leading-5 font-light truncate">
+                                            <span v-if="app.endpoint.includes('/game/')">
+                                                🕹
+                                            </span>
+                                            {{ app.name }}
+                                        </div>
                                         <div class="mt-2 flex items-center text-sm leading-5 text-gray-500 overflow-hidden">
                                             {{ app.text }}
                                         </div>
@@ -82,7 +87,10 @@
 
                                     <div class="search-item-options-container h-full flex justify-center md:justify-end items-center py-4 md:px-12">
 
-                                        <div class="subscribe space-y-6 sm:space-x-6">
+                                        <div
+                                            v-if="noEmailSubscribe !== false"
+                                            class="subscribe space-y-6 sm:space-x-6"
+                                        >
                                             <EmailSubscribe
                                                 :app-name="app.name"
                                                 :input-class-groups="{
@@ -111,7 +119,7 @@
 <script>
 import scrollIntoView from 'scroll-into-view-if-needed'
 
-import appList from '~/app-list.json'
+// import appList from '~/app-list.json'
 
 import EmailSubscribe from '~/components/email-subscribe.vue'
 
@@ -130,7 +138,11 @@ export default {
     props: {
         appList: {
             type: Array,
-            default: () => appList
+            required: true
+        },
+        noEmailSubscribe: {
+            type: Boolean,
+            default: false
         },
         quickButtons: {
             type: Array,
@@ -236,11 +248,18 @@ export default {
             return matches
         },
         statusIs (query, app) {
+
+            // if (typeof app.status !== 'string') {
+            //     console.log('app', app)
+            //     console.log('status', status)
+            //     console.log('app.status.includes(status)', app.status.includes(status))
+            // }
+
             if (!query.includes('status:')) return
 
             const [_, status] = query.split(':')
 
-            const matches = app.status.includes(status)
+            const matches = app.status.includes(status) || app.status === status
 
             if (matches) {
                 this.statusResults.push(app)

helpers/build-app-list.js

@@ -135,6 +135,7 @@ export default async function () {
                 url,
                 text,
                 slug: appSlug,
+                endpoint: `/app/${appSlug}`,
                 section: {
                     label: sectionTitle,
                     slug: sectionSlug

helpers/build-game-list.js

@@ -0,0 +1,140 @@
+
+import { promises as fs } from 'fs'
+import slugify from 'slugify'
+import axios from 'axios'
+
+// import { statuses } from './build-app-list'
+
+
+// console.log('process.env.GAMES_SOURCE', process.env.GAMES_SOURCE)
+
+// export const statuses = {
+//     '✅': 'native',
+//     '✳️': 'rosetta',
+//     '⏹': 'no-in-progress',
+//     '🚫': 'no'
+// }
+
+const statusesTranslations = {
+    'Native': 'native',
+    'Rosetta': 'rosetta',
+    // '': 'no'
+}
+
+const statusesMessages = {
+    'native': '✅ Yes, Full Native Apple Silicon Support',
+    'rosetta': '✳️ Yes, works via Rosetta 2',
+    'no': '🚫 No, not yet supported only works on Intel-based Macs'
+}
+
+
+function parseStatus(game) {
+    if (game.Playable === 'no') return 'no'
+
+    // Match status to Sheet Status
+    return statusesTranslations[game['Native/Rosetta']]
+    // for (const statusKey in statusesTranslations) {
+    //     console.log("game['Native/Rosetta']", game['Native/Rosetta'])
+    //     console.log('statuses[statusKey]', statusesTranslations[game['Native/Rosetta']])
+    //     if (game['Native/Rosetta'].includes(statusKey)) {
+    //         return statusesTranslations[statusKey]
+    //     }
+    // }
+}
+
+export default async function () {
+
+    // Fetch Sheet data
+    const gamesSheet = await axios
+        .get(process.env.GAMES_SOURCE)
+        .then(function (response) {
+            // handle success
+            return response.data.records
+        })
+        .catch(function (error) {
+            // handle error
+            console.log(error);
+        })
+
+    const gameList = []
+
+    // console.log('gamesSheet', gamesSheet)
+
+    for (const game of gamesSheet) {
+
+        // If there's no title
+        // then stop
+        if (game.Games.length === 0) continue
+
+        // If there's no 'Native/Rosetta' status
+        // then stop
+        if (game['Native/Rosetta'].length === 0) continue
+
+        // Generate slug
+        const slug = slugify(game.Games, {
+            lower: true,
+            strict: true
+        })
+
+        // Find index of game is list so far
+        const gameIndex = gameList.findIndex(game => {
+            return game.slug === slug
+        })
+
+        // Game already has entry
+        if (gameIndex !== -1) {
+
+            // console.log('Existing Game', game)
+
+            gameList[gameIndex].reports.push(game)
+
+            continue
+        }
+
+
+        const status = parseStatus(game)
+
+        if (typeof status !== 'string') {
+            console.warn('Non-string status', game)
+
+            continue
+        }
+
+        gameList.push({
+            name: game.Games,
+            status,
+            url: `https://rawg.io/search?query=${encodeURIComponent(game.Games)}`,
+            text: statusesMessages[status],
+            slug,
+            endpoint: `/game/${slug}`,
+            section: {
+                label: 'Games',
+                slug: 'games'
+            },
+            content: '',
+            relatedLinks: [
+                {
+                    "href": `https://rawg.io/search?query=${encodeURIComponent(game.Games)}`,
+                    "label": "View"
+                }
+            ],
+            reports: [
+                game
+            ]
+        })
+
+    }
+
+    // console.log('gameList', gameList)
+
+
+    return gameList
+
+    // fs.readFile('../README.md', 'utf8')
+    //     .then((err, data) => {
+    //         const result = md.parse(data)
+    //         console.log('result', result)
+
+    //         return result
+    //     })
+}

nuxt.config.js

@@ -3,22 +3,35 @@ import path from 'path'
 
 import pkg from './package'
 import buildAppList from './helpers/build-app-list.js'
+import buildGamesList from './helpers/build-game-list.js'
 
 
 const storeAppList = async function (builder) {
+    // TODO: Make DRY
+
     const appListPath = path.join(
         // builder.nuxt.options.buildDir,
         builder.nuxt.options.srcDir,
         '/app-list.json'
     )
 
+    const gamesListPath = path.join(
+        // builder.nuxt.options.buildDir,
+        builder.nuxt.options.srcDir,
+        '/game-list.json'
+    )
+
     const appList = await buildAppList()
+    const gamesList = await buildGamesList()
 
     // console.log('builder.nuxt.options', builder.nuxt.options)
     await fs.writeFile(appListPath, JSON.stringify(appList))
+    await fs.writeFile(gamesListPath, JSON.stringify(gamesList))
 }
 
 
+// console.log('process.env.GAMES_SOURCE', process.env.GAMES_SOURCE)
+
 export default {
     target: 'static',
 
@@ -43,9 +56,16 @@ export default {
             ]
         },
         routes() {
-            return import('./app-list.json')//buildAppList()
+            return Promise.all([
-                .then((importedAppList) => {
+                import('./app-list.json'),
+                import('./game-list.json')
+            ])
+                .then(([
+                    importedAppList,
+                    importedGameList
+                ]) => {
                     const appList = importedAppList.default
+                    const gameList = importedGameList.default
                     // console.log('appList', appList)
 
                     const appRoutes = appList.map(app => ({
@@ -53,6 +73,11 @@ export default {
                         // payload: appList
                     }))
 
+                    const gameRoutes = gameList.map(game => ({
+                        route: '/game/' + game.slug,
+                        // payload: appList
+                    }))
+
                     const sectionList = []
 
                     appList.forEach(app => {
@@ -68,6 +93,7 @@ export default {
 
                     return [
                         ...appRoutes,
+                        ...gameRoutes,
                         ...sectionRoutes
                     ]
                 })

pages/game/_slug.vue

@@ -0,0 +1,150 @@
+<template>
+    <section class="container py-32">
+        <div class="flex flex-col items-center text-center">
+            <h1 class="title text-sm md:text-2xl font-semibold">
+                Does {{ app.name }} work on Apple Silicon?
+            </h1>
+            <h2 class="subtitle text-2xl md:text-5xl font-bold py-6">
+                {{ app.text }}
+            </h2>
+
+            <!-- <div class="subscribe space-y-6 sm:space-x-6 mb-4">
+                <EmailSubscribe
+                    :app-name="app.name"
+                />
+            </div> -->
+
+            <small class="test-sm opacity-75 mb-4">
+                <span>Data generously provided by </span>
+                <span>
+                    <a
+                        href="https://twitter.com/__tosh"
+                        class="font-bold"
+                    >Thomas Schranz</a>
+                </span>
+                <span>via</span>
+                <span>
+                    <a
+                        href="https://docs.google.com/spreadsheets/d/1er-NivvuIheDmIKBVRu3S_BzA_lZT5z3Z-CxQZ-uPVs/edit#gid=0"
+                        class="font-bold"
+                    >Games and Apps on Apple Silicon</a>
+                </span>
+            </small>
+
+            <div class="links space-y-6 sm:space-x-6 mb-8">
+                <LinkButton
+                    v-for="(link, i) in app.relatedLinks"
+                    :key="i"
+                    :href="link.href"
+                    target="_blank"
+                    class=""
+                >{{ (i === 0) ? 'View' : link.label }}</LinkButton>
+            </div>
+
+            <h2 class="subtitle text-xl md:text-2xl font-bold py-6">
+                Reports
+            </h2>
+
+            <ul class="flex flex-col md:flex-row space-x-0 space-y-4 md:space-y-0 md:space-x-4">
+
+                <li
+                    v-for="(report, i) in app.reports"
+                    :key="`${app.slug}-${i}`"
+                    class="col-span-1 rounded-lg border w-full md:w-64"
+                >
+                    <div class="w-full flex items-center justify-between p-6">
+                        <div class="flex-1">
+                            <div class="space-x-3">
+                                <h3 class="text-sm leading-5 font-medium">{{ report['Specs'] }}</h3>
+                                <span class="flex-shrink-0 inline-block px-2 py-0.5 text-teal-800 text-xs leading-4 font-medium bg-teal-100 rounded-full">{{ report['FPS'] }}</span>
+                            </div>
+                            <p class="mt-1 text-sm leading-5">{{ report['Notes'] }}</p>
+                            <p
+                                v-if="report['Resolution'].length !== 0"
+                                class="mt-1 text-sm leading-5"
+                            >
+                                🖥 {{ report['Resolution'] }}
+                            </p>
+                            <p
+                                v-if="report['Settings'].length !== 0"
+                                class="mt-1 text-sm leading-5"
+                            >
+                                ⚙️ {{ report['Settings'] }}
+                            </p>
+                        </div>
+                    </div>
+                    <div
+                        v-if="report['Source'].length !== 0"
+                        class="border-t border-gray-200"
+                    >
+                        <div class="-mt-px flex">
+                            <div class="w-0 flex-1 flex border-r border-gray-200">
+                                <a
+                                    :href="report['Source']"
+                                    class="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm leading-5 font-medium border border-transparent rounded-bl-lg hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 transition ease-in-out duration-150"
+                                >
+                                    <!-- Heroicon name: mail -->
+                                    <svg
+                                        class="w-5 h-5"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        viewBox="0 0 20 20"
+                                        fill="currentColor"
+                                    >
+                                        <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
+                                        <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
+                                    </svg>
+                                    <span class="ml-3 opacity-75">Source</span>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </li>
+
+            </ul>
+
+            <div class="report-links py-24 shadow-none">
+                <!-- https://eric.blog/2016/01/08/prefilling-github-issues/ -->
+                <a
+                    :href="`https://docs.google.com/spreadsheets/d/1er-NivvuIheDmIKBVRu3S_BzA_lZT5z3Z-CxQZ-uPVs/edit#gid=0`"
+                    target="_blank"
+                    class="text-xs"
+                    rel="noopener"
+                >Report Update</a>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script>
+import LinkButton from '~/components/link-button.vue'
+import EmailSubscribe from '~/components/email-subscribe.vue'
+import gameList from '~/game-list.json'
+// import buildAppList from '~/helpers/build-app-list'
+
+export default {
+    components: {
+        LinkButton,
+        EmailSubscribe
+    },
+    async asyncData ({ params: { slug } }) {
+
+        return {
+            slug,
+            app: gameList.find(app => (app.slug === slug))
+        }
+    },
+    head() {
+        return {
+            title: `Does ${this.app.name} work on Apple Silicon?`,
+            // 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/games.vue

@@ -0,0 +1,93 @@
+<template>
+    <section class="container py-24">
+        <div class="flex flex-col items-center">
+            <h1 class="title text-4xl md:text-6xl font-hairline leading-tight text-center">
+                Does it ARM?
+            </h1>
+            <h2 class="subtitle md:text-xl font-light text-center">
+                Games that are reported to support Apple Silicon
+            </h2>
+
+            <small class="opacity-75">
+                <span>Data generously provided by </span>
+                <span>
+                    <a
+                        href="https://twitter.com/__tosh"
+                        class="font-bold"
+                    >Thomas Schranz</a>
+                </span>
+                <span>via</span>
+                <span>
+                    <a
+                        href="https://docs.google.com/spreadsheets/d/1er-NivvuIheDmIKBVRu3S_BzA_lZT5z3Z-CxQZ-uPVs/edit#gid=0"
+                        class="font-bold"
+                    >Games and Apps on Apple Silicon</a>
+                </span>
+            </small>
+
+            <Search
+                :app-list="gameList"
+                :quick-buttons="quickButtons"
+                no-email-subscribe
+                @update:query="query = $event"
+            />
+
+            <LinkButton
+                :href="`https://docs.google.com/spreadsheets/d/1er-NivvuIheDmIKBVRu3S_BzA_lZT5z3Z-CxQZ-uPVs/edit#gid=0`"
+            >
+                Report a Game
+            </LinkButton>
+        </div>
+    </section>
+</template>
+
+<script>
+import Search from '~/components/search.vue'
+import LinkButton from '~/components/link-button.vue'
+
+import gameList from '~/game-list.json'
+
+export default {
+    components: {
+        Search,
+        LinkButton
+    },
+    data: function () {
+        return {
+            query: '',
+            quickButtons: [
+                {
+                    label: '✅ Full Native Support',
+                    query: 'status:native'
+                },
+                {
+                    label: '✳️ Rosetta',
+                    query: 'status:rosetta'
+                },
+                {
+                    label: '🚫 Unsupported',
+                    query: 'status:no'
+                }
+            ]
+        }
+    },
+    computed: {
+        gameList() {
+            return gameList
+        }
+    },
+    head() {
+        return {
+            title: `Games supported on Apple Silicon - Does it ARM`,
+            // 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/index.vue

@@ -9,6 +9,7 @@
             </h2>
 
             <Search
+                :app-list="appList"
                 @update:query="query = $event"
             />
 
@@ -26,6 +27,7 @@ import Search from '~/components/search.vue'
 import LinkButton from '~/components/link-button.vue'
 
 import appList from '~/app-list.json'
+import gameList from '~/game-list.json'
 
 export default {
     components: {
@@ -34,12 +36,15 @@ export default {
     },
     data: function () {
         return {
-            query: ''
+            query: '',
         }
     },
     computed: {
         appList() {
-            return appList
+            return [
+                ...appList,
+                ...gameList
+            ]
         }
     }
 }