Add Kind template

src/pages/kind/[...kindPath].astro

@@ -3,17 +3,13 @@
 // https://docs.astro.build/core-concepts/astro-components/
 
 
-// import { ListingDetails } from '~/helpers/listing-page.js'
+import { DoesItAPI } from '~/helpers/api/client.js'
 import { getPathPartsFromAstroRequest } from '~/helpers/url.js'
 import { catchRedirectResponse } from '~/helpers/astro/request.js'
+import { categories, getKindToCategorySlug } from '~/helpers/categories.js'
 
 import Layout from '../../layouts/default.astro'
-import Listing from '../../components/default-listing.astro'
-
-// const {
-//   appPath
-// } = Astro.params
-
+import Search from '~/components/search-stork.vue'
 
 
 // Get type and slug from the request path
@@ -21,44 +17,31 @@ import Listing from '../../components/default-listing.astro'
 // urls like /:type/:slug/benchmarks
 const {
     pathname,
-    // pathSlug,
-    // subSlug = null
+    pathSlug,
+    subSlug = 1
  } = getPathPartsFromAstroRequest( Astro.request )
 
 
-
-// Use request path parts to set api url path
-// apiUrl.pathname = `/api/${ pathType }/${ pathSlug }.json`
-
-
-// Astro Request reference
-// https://docs.astro.build/en/reference/api-reference/#astrorequests
-
-// console.log('Astro.params', Astro.params )
-// console.log('Astro.request.url', Astro.request.url )
-// console.log('Astro.site.pathname', Astro.site.pathname )
-// console.log('Astro.request', Astro.request )
-
-// const appListing = await axios.get( apiUrl.toString() )
-//     .then( response => {
-//         // console.log( 'response', response )
-//         return response.data
-//     })
-
-// const listingDetails = new ListingDetails( appListing )
-
-
 const redirectResponse = await catchRedirectResponse( Astro )
 
 if ( redirectResponse !== null ) {
   return redirectResponse
 }
 
+
+const kindPage = await DoesItAPI.kind( pathSlug )( subSlug ).get()
+
+const categorySlug = getKindToCategorySlug( pathSlug )
+
+const category = categories[ categorySlug ]
+
+const pageLabel = category?.pluralLabel || category.label
+
 ---
 <Layout
     headOptions={{
-        title: 'Test',
-        description: 'Test',
+        title: `List of ${ pageLabel } that work on Apple Silicon?`,
+        description: `Check the the latest reported support status of ${ pageLabel } on Apple Silicon and Apple M1 Pro and M1 Max Processors. `,
         // meta,
         // link,
         // structuredData: this.structuredData,
@@ -68,5 +51,35 @@ if ( redirectResponse !== null ) {
     }}
 >
 
-    Kind: { JSON.stringify( 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">
+                    { pageLabel } that are reported to support Apple Silicon
+                </h1>
+
+                <h2
+                    v-if="supportedAppList.length !== 0"
+                    class="subtitle md:text-xl text-center"
+                >
+                    Supported apps include { kindPage.summary.sampleNamesShort }.
+                </h2>
+            </div>
+
+            <Search
+                kind-page={ kindPage }
+
+                client:load
+            />
+
+            <!-- <ListEndButtons query="query" /> -->
+
+            <!-- <AllUpdatesSubscribe
+                class="my-12"
+            /> -->
+
+        </div>
+    </section>
+
 </Layout>