From 352f289b348a124919d82d8a2357ecceb886420a Mon Sep 17 00:00:00 2001
From: Lightling <contact@lightling.xyz>
Date: Fri, 15 Mar 2024 02:20:38 -0400
Subject: [PATCH] use router for header linking

load stylesheets on route change
---
 src/components/shared/header-link.vue | 11 ++++++++---
 src/main.vue                          | 18 ++++++++++++++----
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/shared/header-link.vue b/src/components/shared/header-link.vue
index b19ea5d..1ef8302 100644
--- a/src/components/shared/header-link.vue
+++ b/src/components/shared/header-link.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { type HeaderEntry } from 'content/routes.js'
+import { useRouteStore } from 'src/routes'
 
-defineProps<{
+const props = defineProps<{
   entry: HeaderEntry,
 }>()
+
+const routeStore = useRouteStore()
+const name = computed(() => !!(props.entry as any).path ? routeStore._routes[(props.entry as any).path].name : null)
 </script>
 
 <template lang="pug">
@@ -16,8 +21,8 @@ li.header-entry
         v-for='entry in entry.children'
         :entry='entry'
       )
-  a(
+  router-link(
     v-else
-    :href='entry.path'
+    :to='{ name }'
   ) {{ entry.displayName }}
 </template>
diff --git a/src/main.vue b/src/main.vue
index 888f92c..8cac5e6 100644
--- a/src/main.vue
+++ b/src/main.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
 
 import { getCurrentRoute } from 'src/utilities/vuetils'
 import { useRouteStore } from 'src/routes'
@@ -8,15 +9,17 @@ import HeaderLink from 'src/components/shared/header-link.vue'
 
 const ready = ref(false)
 
-const currentRoute = getCurrentRoute()
+const router = useRouter()
 const routeStore = useRouteStore()
-const routeConfig = routeStore._routes[currentRoute.path]
 const headerConfig = routeStore._header
 
-onMounted(async () => {
+const refresh = async () => {
+  const currentRoute = getCurrentRoute()
+  const routeConfig = routeStore._routes[currentRoute.path]
+
   const staleStylesheets = document.head.querySelectorAll('link[rel="stylesheet"]')
   staleStylesheets.forEach(stylesheet => {
-    document.removeChild(stylesheet)
+    document.head.removeChild(stylesheet)
   })
 
   routeConfig.stylesheetUrls?.forEach(stylesheet => {
@@ -25,6 +28,13 @@ onMounted(async () => {
     newElement.setAttribute('href', stylesheet)
     document.head.appendChild(newElement)
   })
+}
+
+onMounted(async () => {
+  await refresh()
+  router.afterEach(async (to, from) => {
+    await refresh()
+  })
   ready.value = true
 })
 </script>