From 4d79ab6cf093fb227a1e768d1484d82c2993e7b9 Mon Sep 17 00:00:00 2001
From: jezzahehn <jezza.hehn@wikitribune.com>
Date: Sat, 31 May 2025 17:00:39 -0400
Subject: [PATCH] feat: switching from auto-route to manual route definitions

---
 .../pages/HomePage.vue}                       |  4 +--
 .../pages/ResourcesPage.vue}                  |  4 +--
 src/main.ts                                   |  5 +---
 src/routes/index.ts                           | 30 +++++++++++++++++++
 src/typed-router.d.ts                         |  2 --
 5 files changed, 35 insertions(+), 10 deletions(-)
 rename src/{routes/index.vue => components/pages/HomePage.vue} (89%)
 rename src/{routes/resources.vue => components/pages/ResourcesPage.vue} (89%)
 create mode 100644 src/routes/index.ts

diff --git a/src/routes/index.vue b/src/components/pages/HomePage.vue
similarity index 89%
rename from src/routes/index.vue
rename to src/components/pages/HomePage.vue
index 8d7c2c8..d8f4f0e 100644
--- a/src/routes/index.vue
+++ b/src/components/pages/HomePage.vue
@@ -24,7 +24,7 @@ import HomeSectionWrapper from '@/components/molecules/HomeSectionWrapper.vue'
 import '@/assets/style.scss'
 import 'bulma/css/bulma.css'
 import { useI18n } from 'vue-i18n'
-import type { MessageSchema } from '../i18n/types'
+import type { MessageSchema } from '@/i18n/types'
 import { computed } from 'vue'
 
 const { tm } = useI18n()
@@ -35,7 +35,7 @@ const sectionsWithImages = computed(() =>
 
     return {
       ...section,
-      image: new URL(`../assets/${section.image}`, import.meta.url).href
+      image: new URL(`../../assets/${section.image}`, import.meta.url).href
     }
   })
 )
diff --git a/src/routes/resources.vue b/src/components/pages/ResourcesPage.vue
similarity index 89%
rename from src/routes/resources.vue
rename to src/components/pages/ResourcesPage.vue
index d71181b..976346f 100644
--- a/src/routes/resources.vue
+++ b/src/components/pages/ResourcesPage.vue
@@ -24,7 +24,7 @@ import LearningResourceWrapper from '@/components/molecules/LearningResourceWrap
 import '@/assets/style.scss'
 import 'bulma/css/bulma.css'
 import { useI18n } from 'vue-i18n'
-import type { MessageSchema } from '../i18n/types'
+import type { MessageSchema } from '@/i18n/types'
 import { computed } from 'vue'
 
 const { tm } = useI18n()
@@ -35,7 +35,7 @@ const resourcesWithImages = computed(() =>
 
     return {
       ...resource,
-      image: new URL(`../assets/${resource.image}`, import.meta.url).href
+      image: new URL(`../../assets/${resource.image}`, import.meta.url).href
     }
   })
 )
diff --git a/src/main.ts b/src/main.ts
index 55544ba..88becfd 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,10 +1,7 @@
 import { createApp } from "vue";
 import "./style.css";
 import App from "./App.vue";
-import { createRouter, createWebHistory } from "vue-router";
-import { routes } from "vue-router/auto-routes";
-
-const router = createRouter({ history: createWebHistory(), routes: routes });
+import router from "./routes"
 import i18n from './i18n'
 
 createApp(App).use(i18n).use(router).mount("#app");
diff --git a/src/routes/index.ts b/src/routes/index.ts
new file mode 100644
index 0000000..663cfc2
--- /dev/null
+++ b/src/routes/index.ts
@@ -0,0 +1,30 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+
+import HomePage from '@/components/pages/HomePage.vue'
+import ResourcesPage from '@/components/pages/ResourcesPage.vue'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    name: 'Home',
+    component: HomePage,
+  },
+  {
+    path: '/resources',
+    name: 'Resources',
+    component: ResourcesPage,
+  },
+  // {
+  //   path: '/:pathMatch(.*)*',  // Vue Router 4 catch-all for 404s
+  //   name: 'NotFound',
+  //   component: NotFoundPage,
+  // },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+export default router
\ No newline at end of file
diff --git a/src/typed-router.d.ts b/src/typed-router.d.ts
index b6cb30a..507aa91 100644
--- a/src/typed-router.d.ts
+++ b/src/typed-router.d.ts
@@ -18,7 +18,5 @@ declare module 'vue-router/auto-routes' {
    * Route name map generated by unplugin-vue-router
    */
   export interface RouteNamedMap {
-    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
-    '/resources': RouteRecordInfo<'/resources', '/resources', Record<never, never>, Record<never, never>>,
   }
 }