refactor: use sfc route wrappers

Author: ubugeeei

app/app.ts

@@ -4,9 +4,9 @@ import { getAllSpeakersWithYear, getSpeakersByYear } from "~~/server/data";
 import { YEARS } from "~~/types";
 import { getSpeakerNames, getSpeakerTalks } from "~/composables/speaker";
 import { isValidYear } from "~/utils/years";
-import HomeRoute from "./routes/HomeRoute";
-import SpeakerRoute from "./routes/SpeakerRoute";
-import YearRoute from "./routes/YearRoute";
+import HomeRoute from "./routes/HomeRoute.vue";
+import SpeakerRoute from "./routes/SpeakerRoute.vue";
+import YearRoute from "./routes/YearRoute.vue";
 
 const siteTitle = "Vue Fes Japan Speakers";
 

app/routes/HomeRoute.ts

@@ -0,0 +1,16 @@
+<template>
+  <HomePageIsland :all-speakers="allSpeakers" />
+</template>
+
+<script setup lang="ts">
+import type { SpeakerWithYear } from "~~/types";
+import { HomePageIsland } from "../island-definitions";
+
+defineOptions({
+  name: "HomeRoute",
+});
+
+defineProps<{
+  allSpeakers: SpeakerWithYear[];
+}>();
+</script>

app/routes/HomeRoute.vue

@@ -0,0 +1,18 @@
+<template>
+  <SpeakerPageIsland :found="found" :speaker-name="speakerName" :speakers="speakers" />
+</template>
+
+<script setup lang="ts">
+import type { SpeakerWithYear } from "~~/types";
+import { SpeakerPageIsland } from "../island-definitions";
+
+defineOptions({
+  name: "SpeakerRoute",
+});
+
+defineProps<{
+  found: boolean;
+  speakerName: string;
+  speakers: SpeakerWithYear[];
+}>();
+</script>

app/routes/SpeakerRoute.ts

@@ -0,0 +1,18 @@
+<template>
+  <YearPageIsland :found="found" :speakers="speakers" :year="year" />
+</template>
+
+<script setup lang="ts">
+import type { SpeakerInfo } from "~~/types";
+import { YearPageIsland } from "../island-definitions";
+
+defineOptions({
+  name: "YearRoute",
+});
+
+defineProps<{
+  found: boolean;
+  speakers: SpeakerInfo[];
+  year: string;
+}>();
+</script>