mirror of
https://github.com/ThatGuySam/doesitarm.git
synced 2026-05-18 06:44:46 -07:00
128 lines
3.4 KiB
Text
128 lines
3.4 KiB
Text
---
|
||
// 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,
|
||
applyResponseDefaults
|
||
} from '~/helpers/astro/request.js'
|
||
import { deviceSupportsApp } from '~/helpers/devices.js'
|
||
|
||
|
||
import Layout from '../../layouts/default.astro'
|
||
import Search from '~/components/search-stork.vue'
|
||
import CarbonInline from '~/components/carbon-inline.vue'
|
||
import LinkButton from '~/components/link-button.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
|
||
}
|
||
|
||
applyResponseDefaults( Astro )
|
||
|
||
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>
|
||
|
||
{ !!device.amazonUrl &&
|
||
<div class="flex justify-center py-8">
|
||
<LinkButton
|
||
href={ device.amazonUrl }
|
||
target="_blank"
|
||
label="ℹ️ Check Pricing"
|
||
/>
|
||
</div>
|
||
}
|
||
|
||
<Search
|
||
kind-page={ appPage }
|
||
|
||
client:load
|
||
>
|
||
<CarbonInline
|
||
class="carbon-inline-wide"
|
||
/>
|
||
</Search>
|
||
|
||
<!-- <ListEndButtons query="query" /> -->
|
||
|
||
<!-- <AllUpdatesSubscribe
|
||
class="my-12"
|
||
/> -->
|
||
|
||
</div>
|
||
</section>
|
||
|
||
</Layout>
|