feat(ESG-3): Match route format for RoR site.

Author: miccheng

website/components/YouTubeListItem.vue

@@ -10,7 +10,7 @@ const videoUrl = (youtubeId) => {
   <div v-if="video">
     <p><img :src="video.image2" alt="thumbnail" /></p>
     <p>
-      <NuxtLink :to="{ name: 'video-id', params: { id: video.id } }">{{
+      <NuxtLink :to="{ name: 'v-id', params: { id: video.id } }">{{
         video.title
       }}</NuxtLink>
       [<a :href="videoUrl(video.video_id)" target="_blank">Video</a>]

website/pages/video/[id].vue website/pages/v/[id].vuewebsite/pages/video/[id].vue renamed to website/pages/v/[id].vue

@@ -0,0 +1,28 @@
+<script setup>
+import YouTubeVideo from "~/components/YouTubeVideo.vue";
+import { useSupabase } from "~/composable/supabase";
+
+const video = ref();
+
+const { params } = useRoute();
+const videoId = params.id;
+
+async function getVideo() {
+  const { data } = await useSupabase()
+    .from("episodes")
+    .select()
+    .eq("id", videoId)
+    .limit(1)
+    .maybeSingle();
+
+  video.value = data;
+}
+
+onMounted(() => {
+  getVideo();
+});
+</script>
+
+<template>
+  <YouTubeVideo :video="video" />
+</template>