feat: implement 404 Not Found page and integrate session not found handling

Author: hsinyu2527

app/assets/codepecker-confused.webp

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="px-4 py-12 flex flex-col min-h-[60vh] select-none items-center justify-center">
+    <div class="flex flex-col max-w-4xl w-full items-center justify-center lg:flex-row">
+      <div class="max-w-[200px] w-full -mb-10 lg:mb-0 lg:max-w-[300px] sm:max-w-[260px]">
+        <img
+          alt="codepecker-confused"
+          class="rounded-2xl h-auto w-full object-cover"
+          src="~/assets/codepecker-confused.webp"
+        >
+      </div>
+
+      <div class="text-center flex flex-col items-center lg:text-left lg:items-start">
+        <h1 class="text-5xl text-gray-700 leading-none tracking-tight font-bold sm:text-9xl">
+          404
+        </h1>
+
+        <p class="text-base text-gray-400 tracking-widest font-semibold mt-4 uppercase">
+          PAGE NOT FOUND
+        </p>
+
+        <div class="my-5 bg-primary-300 h-[2px] w-12" />
+
+        <p class="text-sm text-gray-500 leading-relaxed max-w-md">
+          But if you don't change your direction, and if you keep looking, you may end up where you are heading.
+        </p>
+
+        <div class="mt-6">
+          <NuxtLink
+            class="text-sm text-primary-300 tracking-wide font-semibold px-8 py-2.5 border-2 border-primary-300 rounded-full inline-flex duration-200 items-center justify-center hover:text-white focus:outline-none hover:border-primary-400 hover:bg-primary-400"
+            to="/"
+          >
+            {{ t('takeMeHome') }}
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<i18n lang="yaml">
+  en:
+    takeMeHome: 'Take me home'
+  zh:
+    takeMeHome: '返回首頁'
+</i18n>

app/components/shared/CpNotFound.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { prerenderRoutes } from 'nuxt/app'
-import { useI18n } from 'vue-i18n'
 import CpSessionDaySelector from '~/components/feature/CpSessionDaySelector.vue'
 import CpSessionList from '~/components/feature/CpSessionList.vue'
 import CpSessionTable from '~/components/feature/CpSessionTable.vue'
 
-const { t } = useI18n()
-
 const { data } = await useFetch('/api/session')
+const route = useRoute()
+const isSessionNotFound = ref(false)
 
 const manualSelectedDay = ref<string | null>(null)
 const days = computed(() => Object.keys(data?.value ?? {}).sort())
@@ -17,6 +16,16 @@ const selectedDay = computed({
   set: (value) => void (manualSelectedDay.value = value),
 })
 
+provide('setSessionNotFound', (value: boolean) => {
+  isSessionNotFound.value = value
+})
+
+watch(() => route.params.id, (newId) => {
+  if (!newId) {
+    isSessionNotFound.value = false
+  }
+})
+
 prerenderRoutes(
   Object.values(data.value ?? {})
     .flat()
@@ -34,7 +43,10 @@ definePageMeta({
 
     <ClientOnly>
       <template #fallback>
-        <div class="flex flex-col-reverse sm:flex-col">
+        <div
+          v-if="!isSessionNotFound"
+          class="flex flex-col-reverse sm:flex-col"
+        >
           <!-- DaySelector -->
           <div class="px-6 pb-4 pt-3 flex w-screen justify-center">
             <div class="rounded-full bg-gray-200 h-12 w-1/2 animate-pulse" />
@@ -45,7 +57,7 @@ definePageMeta({
         </div>
       </template>
 
-      <template v-if="selectedDay">
+      <template v-if="selectedDay && !isSessionNotFound">
         <div class="flex flex-col-reverse sm:flex-col">
           <CpSessionDaySelector
             v-model="selectedDay"
@@ -67,22 +79,7 @@ definePageMeta({
             :time-range="['09:00', '17:30']"
           />
         </div>
-
-        <p v-if="!data?.[selectedDay]?.length">
-          {{ t('noSession') }}
-        </p>
       </template>
-
-      <p v-else>
-        {{ t('noSession') }}
-      </p>
     </ClientOnly>
   </main>
 </template>
-
-<i18n lang="yaml">
-  en:
-    noSession: 'Not announced yet, stay tuned.'
-  zh:
-    noSession: '尚未公布，敬請期待。'
-</i18n>

app/pages/session.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { SessionDetail } from '#shared/types/session'
 import CpSessionInfoCard from '~/components/feature/CpSessionInfoCard.vue'
+import CpNotFound from '~/components/shared/CpNotFound.vue'
 
 const { locale } = useI18n()
 const route = useRoute()
@@ -9,7 +10,10 @@ const localePath = useLocalePath()
 
 const { data } = await useFetch<SessionDetail>(`/api/session/${route.params.id}`)
 
+const setSessionNotFound = inject<(value: boolean) => void>('setSessionNotFound')
+
 const localeKey = computed(() => locale.value === 'zh' ? 'zh' : 'en')
+const hasData = computed(() => !!data.value)
 
 const sessionInfo = computed(() => {
   if (!data.value) {
@@ -47,6 +51,12 @@ function onKeydown(e: KeyboardEvent) {
   }
 }
 
+watchEffect(() => {
+  if (setSessionNotFound) {
+    setSessionNotFound(!hasData.value)
+  }
+})
+
 onMounted(() => {
   document.body.style.overflow = 'hidden'
   window.addEventListener('keydown', onKeydown)
@@ -60,6 +70,14 @@ onUnmounted(() => {
 
 <template>
   <div
+    v-if="!hasData"
+    class="bg-white flex min-h-[70vh] w-[var(--viewport-width,100vw)] items-center justify-center"
+  >
+    <CpNotFound />
+  </div>
+
+  <div
+    v-else
     :aria-label="sessionInfo?.title"
     aria-modal="true"
     class="bg-black/50 inset-0 fixed z-50"