From a29c248b7e5f2b1de3b803fb104c824e8f137741 Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Fri, 11 Dec 2020 00:43:56 -0600
Subject: [PATCH] Add related videos to app pages

---
 pages/app/_slug.vue | 48 +++++++++++++++++++++++++++++++++++----------
 1 file changed, 38 insertions(+), 10 deletions(-)

diff --git a/pages/app/_slug.vue b/pages/app/_slug.vue
index 0c5b92a..dc2e7cd 100644
--- a/pages/app/_slug.vue
+++ b/pages/app/_slug.vue
@@ -1,14 +1,16 @@
 <template>
     <section class="container py-32">
-        <div class="flex flex-col items-center text-center">
-            <h1 class="title text-sm md:text-2xl font-semibold">
-                Does {{ app.name }} work on Apple Silicon?
-            </h1>
-            <h2 class="subtitle text-2xl md:text-5xl font-bold py-6">
-                {{ app.text }}
-            </h2>
+        <div class="flex flex-col items-center text-center space-y-8">
+            <div class="hero-heading space-y-6">
+                <h1 class="title text-sm md:text-2xl font-semibold">
+                    Does {{ app.name }} work on Apple Silicon?
+                </h1>
+                <h2 class="subtitle text-2xl md:text-5xl font-bold">
+                    {{ app.text }}
+                </h2>
+            </div>
 
-            <div class="subscribe space-y-6 sm:space-x-6 mb-4">
+            <div class="subscribe">
                 <AllUpdatesSubscribe
                     :app-name="app.name"
                 />
@@ -24,6 +26,15 @@
                 >{{ (i === 0) ? 'View' : link.label }}</LinkButton>
             </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 v-if="app.lastUpdated">
                     <time
@@ -48,19 +59,36 @@
 import parseGithubDate from '~/helpers/parse-github-date'
 import LinkButton from '~/components/link-button.vue'
 import AllUpdatesSubscribe from '~/components/all-updates-subscribe.vue'
+import VideoRow from '~/components/video/row.vue'
+
 import appList from '~/static/app-list.json'
 // import buildAppList from '~/helpers/build-app-list'
 
 export default {
     components: {
         LinkButton,
-        AllUpdatesSubscribe
+        AllUpdatesSubscribe,
+        VideoRow
     },
     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 {
             slug,
-            app: appList.find(app => (app.slug === slug))
+            app,
+            relatedVideos
         }
     },
     computed: {