mirror of
https://github.com/ThatGuySam/doesitarm.git
synced 2026-05-18 06:44:46 -07:00
Move nuxt pages to pages-nuxt/
This commit is contained in:
Sam Carlton
parent
1cd19177f3
commit
321c2ee468
19 changed files with 5 additions and 0 deletions
202
pages-nuxt/kind/_slug.vue
Normal file
202
pages-nuxt/kind/_slug.vue
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
<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">
|
||||
{{ pluralLabel }} that are reported to support Apple Silicon
|
||||
</h1>
|
||||
|
||||
<h2
|
||||
v-if="supportedAppList.length !== 0"
|
||||
class="subtitle md:text-xl text-center"
|
||||
>
|
||||
Supported apps include {{ supportedAppList.join(', ') }}.
|
||||
</h2>
|
||||
|
||||
<Search
|
||||
:app-list="categoryAppList"
|
||||
:quick-buttons="quickButtons"
|
||||
@update:query="query = $event"
|
||||
/>
|
||||
|
||||
|
||||
<div class="flex flex-col md:flex-row space-x-0 space-y-4 md:space-y-0 md:space-x-4">
|
||||
<template v-if="category.requestLinks">
|
||||
<LinkButton
|
||||
v-for="link in category.requestLinks"
|
||||
:key="link.label"
|
||||
:href="link.href"
|
||||
class="text-xs"
|
||||
>
|
||||
{{ link.label }}
|
||||
</LinkButton>
|
||||
</template>
|
||||
<template v-else>
|
||||
<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>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Search from '~/components/search.vue'
|
||||
import LinkButton from '~/components/link-button.vue'
|
||||
|
||||
import { categories, getAppCategory } from '~/helpers/categories.js'
|
||||
|
||||
export default {
|
||||
async asyncData ({ params: { slug } }) {
|
||||
const { sortedAppList, allList, allVideoAppsList, makeAppSearchLinks } = await import('~/helpers/get-list.js')
|
||||
const { default: gameList } = await import('~/static/game-list.json')
|
||||
const { default: videoList } = await import('~/static/video-list.json')
|
||||
|
||||
const filteredList = allList.filter(app => {
|
||||
return app.category.slug === slug
|
||||
})
|
||||
|
||||
return {
|
||||
slug,
|
||||
categoryAppList: filteredList.map( app => {
|
||||
return {
|
||||
name: app.name,
|
||||
status: app.status,
|
||||
slug: app.slug,
|
||||
// endpoint: app.endpoint,
|
||||
text: app.text,
|
||||
lastUpdated: app.lastUpdated,
|
||||
category: app.category,
|
||||
searchLinks: makeAppSearchLinks( app, (new Set(videoList)) )
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
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: {
|
||||
category () {
|
||||
if ( categories.hasOwnProperty( this.slug ) ) {
|
||||
return categories[this.slug]
|
||||
}
|
||||
|
||||
// Try to find the category info within the passed apps
|
||||
const appWithCategory = this.categoryAppList.find( app => {
|
||||
return app.category.slug === this.slug
|
||||
})
|
||||
|
||||
// console.log('appWithCategory', appWithCategory)
|
||||
|
||||
return appWithCategory.category
|
||||
},
|
||||
pluralLabel () {
|
||||
if ( this.category.hasOwnProperty('pluralLabel') ) {
|
||||
return this.category.pluralLabel
|
||||
}
|
||||
|
||||
return this.category.label
|
||||
},
|
||||
supportedAppList () {
|
||||
return this.categoryAppList.filter(app => {
|
||||
return app.status.includes('yes')
|
||||
}).map(app => app.name)
|
||||
},
|
||||
title () {
|
||||
return `List of ${this.pluralLabel || this.category.label} that work on Apple Silicon?`
|
||||
},
|
||||
description () {
|
||||
return `Check the the latest reported support status of ${this.pluralLabel || this.category.label} on Apple Silicon and Apple M1 Processors. `
|
||||
},
|
||||
structuredData () {
|
||||
return {
|
||||
"@context": "https://schema.org",
|
||||
// https://developers.google.com/search/docs/data-types/faqpage
|
||||
// https://schema.org/FAQPage
|
||||
"@type": "FAQPage",
|
||||
"mainEntity": this.categoryAppList.map( app => {
|
||||
return {
|
||||
// https://schema.org/Question
|
||||
"@type": "Question",
|
||||
"name": `Does ${app.name} work on Apple Silicon and Apple M1 Macs?`,
|
||||
"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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue