Add device listing template

src/pages/device/[...devicePath].astro

@@ -0,0 +1,107 @@
+---
+// Full Astro Component Syntax:
+// https://docs.astro.build/core-concepts/astro-components/
+
+
+import { DoesItAPI } from '~/helpers/api/client.js'
+import { getPathPartsFromAstroRequest } from '~/helpers/url.js'
+import { catchRedirectResponse } from '~/helpers/astro/request.js'
+import { deviceSupportsApp } from '~/helpers/devices.js'
+
+
+import Layout from '../../layouts/default.astro'
+import Search from '~/components/search-stork.vue'
+
+
+// Get type and slug from the request path
+// so that we don't have extra parts for
+// urls like /:type/:slug/benchmarks
+const {
+    pathname,
+    pathSlug,
+    subSlug = 1
+ } = getPathPartsFromAstroRequest( Astro.request )
+
+
+const redirectResponse = await catchRedirectResponse( Astro )
+
+if ( redirectResponse !== null ) {
+  return redirectResponse
+}
+
+const device = await DoesItAPI.device( pathSlug ).get()
+const rawAppPage = await DoesItAPI.kind( 'app' )( subSlug ).get()
+
+
+const appPage = {
+    ...rawAppPage,
+
+    // Map out paginnation links
+    // so we stay in the context of this device
+    previousPage: rawAppPage.previousPage.replace( '/kind/app', '/device/' + pathSlug ),
+    nextPage: rawAppPage.nextPage.replace( '/kind/app', '/device/' + pathSlug ),
+
+    // Map device support over text/status
+    items: rawAppPage.items.map( listing => {
+        const listingIsSupported = deviceSupportsApp( device, listing )
+
+        return {
+            ...listing,
+            text: listingIsSupported ? `✅ Supported on ${ device.name }` : `🚫 Not yet reported working on ${ device.name }`,
+        }
+    })
+}
+
+---
+<Layout
+    headOptions={{
+        title: `Apple Silicon Support for ${ device.name }`,
+        description: `Check reported Apple Silicon Support status of apps on ${ device.name }. `,
+        // meta,
+        // link,
+        // structuredData: this.structuredData,
+
+        // domain,
+        pathname
+    }}
+>
+
+     <section class="container py-24">
+        <div class="flex flex-col items-center space-y-4">
+
+            <div class="hero">
+                <h1 class="title text-3xl md:text-5xl font-hairline leading-tight text-center pb-4">
+                    Apple Silicon Support for { device.name }
+                </h1>
+
+                <div
+                    class="subtitle md:text-xl text-center"
+                >
+                    { device.description }
+                </div>
+
+                <br>
+
+                <div
+                    class="subtitle md:text-xl text-center"
+                >
+                    Supported apps include { appPage.summary.sampleNamesShort }.
+                </div>
+            </div>
+
+            <Search
+                kind-page={ appPage }
+
+                client:load
+            />
+
+            <!-- <ListEndButtons query="query" /> -->
+
+            <!-- <AllUpdatesSubscribe
+                class="my-12"
+            /> -->
+
+        </div>
+    </section>
+
+</Layout>