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
226
pages-nuxt/game/_slug/benchmarks.vue
Normal file
226
pages-nuxt/game/_slug/benchmarks.vue
Normal file
|
|
@ -0,0 +1,226 @@
|
|||
<template>
|
||||
<section class="container pb-16">
|
||||
<div class="flex flex-col items-center text-center space-y-8">
|
||||
<template
|
||||
v-if="video"
|
||||
>
|
||||
<VideoPlayer
|
||||
:video="video"
|
||||
class="pt-16"
|
||||
/>
|
||||
<ChannelCredit
|
||||
:video="video"
|
||||
class="flex w-full justify-start md:px-10"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div
|
||||
:style="{
|
||||
'left': '50%',
|
||||
'right': '50%',
|
||||
'margin-left': '-50vw',
|
||||
'margin-right': '-50vw'
|
||||
}"
|
||||
class="video-canvas w-screen flex justify-center bg-black pt-16"
|
||||
>
|
||||
<div class="ratio-wrapper w-full max-w-4xl">
|
||||
<div class="relative overflow-hidden w-full pb-16/9">
|
||||
<div class="absolute h-full w-full flex justify-center items-center">
|
||||
<div class="message text-4xl md:text-6xl font-hairline leading-tight text-center">No videos yet</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div
|
||||
v-for="(row, key) in videoRows"
|
||||
:key="key"
|
||||
class="w-full max-w-4xl"
|
||||
>
|
||||
<div
|
||||
v-if="row.videos.length !== 0"
|
||||
:class="`${key}-videos w-full`"
|
||||
>
|
||||
<h2 class="subtitle text-xl md:text-2xl font-bold mb-3">
|
||||
{{ row.heading }}
|
||||
</h2>
|
||||
<!-- <pre class="text-left">{{ benchmarkVideos }}</pre> -->
|
||||
<VideoRow
|
||||
:videos="row.videos"
|
||||
:active-video-id="activeVideoId"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LinkButton from '~/components/link-button.vue'
|
||||
import EmailSubscribe from '~/components/email-subscribe.vue'
|
||||
import VideoRow from '~/components/video/row.vue'
|
||||
import VideoPlayer from '~/components/video/player.vue'
|
||||
import ChannelCredit from '~/components/video/channel-credit.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LinkButton,
|
||||
EmailSubscribe,
|
||||
VideoRow,
|
||||
VideoPlayer,
|
||||
ChannelCredit
|
||||
},
|
||||
asyncData ({ params: { slug }, payload: { app, allVideos } }) {
|
||||
|
||||
// const { allVideoAppsList } = await import('~/helpers/get-list.js')
|
||||
// const { default: videoList } = await import('~/static/video-list.json')
|
||||
|
||||
// const { videosRelatedToApp } = await import('~/helpers/related.js')
|
||||
|
||||
// const app = allVideoAppsList.find(app => (app.slug === slug))
|
||||
|
||||
// // const submitVideoCard = {
|
||||
// // endpoint: `https://docs.google.com/forms/d/e/1FAIpQLSeEVGM9vE7VcfLMy6fJkfU70X2VZ60rHDyhDQLtnAN4nso0WA/viewform?usp=pp_url&entry.1018125313=${app.name}`
|
||||
// // }
|
||||
|
||||
// // const featuredApps = []
|
||||
|
||||
// const relatedVideos = videosRelatedToApp( app, videoList ).map(video => {
|
||||
// // console.log('video', video)
|
||||
// return {
|
||||
// ...video,
|
||||
// // endpoint: `#${video.id}`
|
||||
// }
|
||||
// })
|
||||
|
||||
// console.log({
|
||||
// app,
|
||||
// allVideos,
|
||||
// // submitVideoCard
|
||||
// })
|
||||
|
||||
return {
|
||||
app,
|
||||
allVideos,
|
||||
// submitVideoCard
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
activeVideoIndex: 0,
|
||||
videoRows: {
|
||||
'benchmarks': {
|
||||
heading: 'Benchmark Videos',
|
||||
matchesCondition: video => video.tags.includes('benchmark'),
|
||||
videos: []
|
||||
},
|
||||
'performance': {
|
||||
heading: 'Performance Videos',
|
||||
matchesCondition: video => video.tags.includes('performance'),
|
||||
videos: []
|
||||
},
|
||||
|
||||
'other': {
|
||||
heading: 'More Videos',
|
||||
// Always true
|
||||
matchesCondition: () => true,
|
||||
videos: []
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
video () {
|
||||
return this.allVideos[this.activeVideoIndex]
|
||||
},
|
||||
title () {
|
||||
return `${this.app.name} Benchmarks for Apple Silicon - Does It ARM`
|
||||
},
|
||||
description () {
|
||||
return `Apple Silicon gaming benchmark, performance, and support videos for ${this.app.name}`
|
||||
},
|
||||
activeVideoId () {
|
||||
return (this.video === Object(this.video)) ? this.video.id : null
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
||||
// Move videos to relevant categories
|
||||
this.allVideos.forEach((video, index) => {
|
||||
// console.log('video.name', video.name)
|
||||
// console.log('video.tags', video.tags)
|
||||
|
||||
// Look through row conditions to see if video matches
|
||||
for (const row in this.videoRows) {
|
||||
if( this.videoRows[row].matchesCondition(video) ) {
|
||||
|
||||
// Add the matching video
|
||||
this.videoRows[row].videos.push(video)
|
||||
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
// console.log('lengths', Object.values(this.videoRows).map(row => [row.heading, row.videos.length]))
|
||||
|
||||
},
|
||||
mounted () {
|
||||
window.onhashchange = this.loadVideoFromHash
|
||||
|
||||
if (location.hash.length !== 0) this.loadVideoFromHash()
|
||||
},
|
||||
methods: {
|
||||
loadVideoFromHash () {
|
||||
// console.log('location.hash', location.hash)
|
||||
|
||||
// Separate the video id from our window hash
|
||||
const hashId = location.hash.split('#')[1]
|
||||
|
||||
// Find the index of the video with the matching hash
|
||||
const newVideoIndex = this.allVideos.findIndex(video => {
|
||||
return video.id === hashId
|
||||
})
|
||||
|
||||
console.log('newVideoIndex', newVideoIndex)
|
||||
|
||||
// Load in the index to load out video
|
||||
this.activeVideoIndex = newVideoIndex
|
||||
|
||||
window.scroll({ top: 0, behavior: 'smooth' })
|
||||
}
|
||||
},
|
||||
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}`
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
178
pages-nuxt/game/_slug/index.vue
Normal file
178
pages-nuxt/game/_slug/index.vue
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
<template>
|
||||
<section class="container py-32">
|
||||
<div class="flex flex-col items-center text-center">
|
||||
|
||||
<div class="intro-content flex flex-col items-center text-center min-h-3/4-screen md:min-h-0">
|
||||
|
||||
<h1 class="title text-sm md:text-2xl font-bold">
|
||||
Does {{ app.name }} work on Apple Silicon?
|
||||
</h1>
|
||||
<h2 class="subtitle text-2xl md:text-5xl font-bold py-6">
|
||||
{{ app.text }}
|
||||
</h2>
|
||||
|
||||
<ThomasCredit />
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
v-if="relatedVideos.length !== 0"
|
||||
class="related-videos w-full"
|
||||
>
|
||||
<h2 class="subtitle text-xl md:text-2xl font-bold mb-3">
|
||||
Related Videos
|
||||
</h2>
|
||||
<VideoRow
|
||||
:videos="relatedVideos"
|
||||
/>
|
||||
</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 mb-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-bold">{{ report['Specs'] }}</h3>
|
||||
<span class="flex-shrink-0 inline-block px-2 py-0.5 text-teal-800 text-xs leading-4 font-bold 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'].includes('https://')"
|
||||
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-bold 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://forms.gle/29GWt85i1G1L7Ttj8`"
|
||||
target="_blank"
|
||||
class="text-xs"
|
||||
rel="noopener"
|
||||
>Report Update</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAppEndpoint } from '~/helpers/app-derived.js'
|
||||
|
||||
import VideoRow from '~/components/video/row.vue'
|
||||
import LinkButton from '~/components/link-button.vue'
|
||||
import ThomasCredit from '~/components/thomas-credit.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VideoRow,
|
||||
LinkButton,
|
||||
ThomasCredit
|
||||
},
|
||||
async asyncData ({ params: { slug } }) {
|
||||
|
||||
const { default: gameList } = await import('~/static/game-list.json')
|
||||
const { default: videoList } = await import('~/static/video-list.json')
|
||||
const { videosRelatedToApp } = await import('~/helpers/related.js')
|
||||
|
||||
const app = gameList.find(app => (app.slug === slug))
|
||||
|
||||
const relatedVideos = videosRelatedToApp( app, (new Set(videoList)) )
|
||||
|
||||
// Find other videos that also feature this video's app
|
||||
// for (const video of videoList) {
|
||||
// if (!video.apps.includes(app.slug)) continue
|
||||
|
||||
// relatedVideos.push(video)
|
||||
// }
|
||||
|
||||
return {
|
||||
slug,
|
||||
app,
|
||||
relatedVideos: relatedVideos.map(video => {
|
||||
// console.log('video', video)
|
||||
return {
|
||||
...video,
|
||||
endpoint: `${getAppEndpoint(app)}/benchmarks#${video.id}`
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
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': `Check the the latest reported support status of ${this.app.name} on Apple Silicon and Apple M1 Processors for gaming. `
|
||||
},
|
||||
|
||||
// Twitter Card
|
||||
{
|
||||
'hid': 'twitter:title',
|
||||
'property': 'twitter:title',
|
||||
'content': `Does ${this.app.name} work on Apple Silicon?`
|
||||
},
|
||||
{
|
||||
'hid': 'twitter:description',
|
||||
'property': 'twitter:description',
|
||||
'content': `Check the the latest reported support status of ${this.app.name} on Apple Silicon and Apple M1 Processors for gaming. `
|
||||
},
|
||||
{
|
||||
'property': 'twitter:url',
|
||||
'content': `${process.env.URL}${this.$nuxt.$route.path}`
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue