Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-18 06:44:46 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Add related videos to app pages

Browse source
This commit is contained in:
Sam Carlton 2020-12-11 00:43:56 -06:00
parent 67fe06ff1b
commit a29c248b7e
1 changed files with 38 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

48
pages/app/_slug.vue
View file

@ -1,14 +1,16 @@
<template> <template>
<section class="container py-32"> <section class="container py-32">
<div class="flex flex-col items-center text-center"> <div class="flex flex-col items-center text-center space-y-8">
<h1 class="title text-sm md:text-2xl font-semibold"> <div class="hero-heading space-y-6">
Does {{ app.name }} work on Apple Silicon? <h1 class="title text-sm md:text-2xl font-semibold">
</h1> Does {{ app.name }} work on Apple Silicon?
<h2 class="subtitle text-2xl md:text-5xl font-bold py-6"> </h1>
{{ app.text }} <h2 class="subtitle text-2xl md:text-5xl font-bold">
</h2> {{ app.text }}
</h2>
</div>
<div class="subscribe space-y-6 sm:space-x-6 mb-4"> <div class="subscribe">
<AllUpdatesSubscribe <AllUpdatesSubscribe
:app-name="app.name" :app-name="app.name"
/> />
@ -24,6 +26,15 @@
>{{ (i === 0) ? 'View' : link.label }}</LinkButton> >{{ (i === 0) ? 'View' : link.label }}</LinkButton>
</div> </div>
<div class="related-videos w-full">
<h2 class="subtitle text-xl md:text-2xl font-bold mb-3">
Related Videos
</h2>
<VideoRow
:videos="relatedVideos"
/>
</div>
<div class="report-links py-24 text-xs shadow-none"> <div class="report-links py-24 text-xs shadow-none">
<div v-if="app.lastUpdated"> <div v-if="app.lastUpdated">
<time <time
@ -48,19 +59,36 @@
import parseGithubDate from '~/helpers/parse-github-date' import parseGithubDate from '~/helpers/parse-github-date'
import LinkButton from '~/components/link-button.vue' import LinkButton from '~/components/link-button.vue'
import AllUpdatesSubscribe from '~/components/all-updates-subscribe.vue' import AllUpdatesSubscribe from '~/components/all-updates-subscribe.vue'
import VideoRow from '~/components/video/row.vue'
import appList from '~/static/app-list.json' import appList from '~/static/app-list.json'
// import buildAppList from '~/helpers/build-app-list' // import buildAppList from '~/helpers/build-app-list'
export default { export default {
components: { components: {
LinkButton, LinkButton,
AllUpdatesSubscribe AllUpdatesSubscribe,
VideoRow
}, },
async asyncData ({ params: { slug } }) { async asyncData ({ params: { slug } }) {
const { default: videoList } = await import('~/static/video-list.json')
const app = appList.find(app => (app.slug === slug))
const relatedVideos = []
// 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 { return {
slug, slug,
app: appList.find(app => (app.slug === slug)) app,
relatedVideos
} }
}, },
computed: { computed: {