From c5c55b3dc3cd0a2d7412404d44ce53ff156ac0fd Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Sun, 27 Sep 2026 15:02:33 -0700
Subject: [PATCH] Add localized page titles from route metadata

---
 src/App.vue                | 13 +++++++++++--
 src/router/routes.mjs      |  8 ++++++++
 src/views/NotFoundView.vue | 15 ---------------
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 652b17b..71e3a37 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,11 +3,20 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted } from 'vue';
-import { RouterView } from 'vue-router';
+import { onMounted, onUnmounted, watchEffect } from 'vue';
+import { RouterView, useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 import { useDataStore } from './stores/data';
 import { useTimeStore } from './stores/time.mjs';
 
+const route = useRoute();
+const { t } = useI18n();
+
+watchEffect(() => {
+  const title = route.meta.titleKey ? t(route.meta.titleKey) : route.meta.title;
+  document.title = title ? `${title} — Splatoon3.ink` : 'Splatoon3.ink';
+});
+
 const time = useTimeStore();
 onMounted(() => time.startUpdatingNow());
 onUnmounted(() => time.stopUpdatingNow());
diff --git a/src/router/routes.mjs b/src/router/routes.mjs
index 53390df..85167c1 100644
--- a/src/router/routes.mjs
+++ b/src/router/routes.mjs
@@ -5,36 +5,43 @@ export function createRoutes(views = {}) {
       path: '/',
       name: 'home',
       component: views.HomeView,
+      meta: { titleKey: 'schedule.title' },
     },
     {
       path: '/salmonrun',
       name: 'salmonrun',
       component: views.SalmonRunView,
+      meta: { titleKey: 'salmonrun.title' },
     },
     {
       path: '/gear',
       name: 'gear',
       component: views.GearView,
+      meta: { titleKey: 'gear.title' },
     },
     {
       path: '/splatfests',
       name: 'splatfests',
       component: views.SplatfestsView,
+      meta: { titleKey: 'festival.title' },
     },
     {
       path: '/challenges',
       name: 'challenges',
       component: views.ChallengesView,
+      meta: { titleKey: 'events.title' },
     },
     {
       path: '/socials',
       name: 'socials',
       component: views.SocialsView,
+      meta: { titleKey: 'footer.socials' },
     },
     {
       path: '/about',
       name: 'about',
       component: views.AboutView,
+      meta: { titleKey: 'footer.about' },
     },
     {
       path: '/faq',
@@ -44,6 +51,7 @@ export function createRoutes(views = {}) {
       path: '/:pathMatch(.*)*',
       name: 'not-found',
       component: views.NotFoundView,
+      meta: { title: '404' },
     },
   ];
 }
diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
index b3ea708..e9c2a2a 100644
--- a/src/views/NotFoundView.vue
+++ b/src/views/NotFoundView.vue
@@ -35,21 +35,6 @@
   </main>
 </template>
 
-<script setup>
-import { onMounted, onUnmounted } from 'vue';
-
-let previousTitle;
-
-onMounted(() => {
-  previousTitle = document.title;
-  document.title = '404 — Splatoon3.ink';
-});
-
-onUnmounted(() => {
-  document.title = previousTitle;
-});
-</script>
-
 <style scoped>
 .not-found {
   display: grid;