support loading per-route extra scripting

src/content-env.d.ts

@@ -26,6 +26,7 @@ declare module 'content/routes.js' {
    */
   type SharedRouteDefinition = {
     id: string
+    scriptUrl?: string
     stylesheetUrls: string[]
     template: Template
     title: string

src/main.vue

@@ -59,6 +59,15 @@ const determineGlobalStylesheets = () => {
   })
 }
 
+const determineScript = async () => {
+  if (!!routeConfig.scriptUrl) {
+    const { init } = await import(/* @vite-ignore */ routeConfig.scriptUrl)
+    init()
+  }
+
+  return null
+}
+
 const refresh = async () => {
   ready.value = false
   acknowledged.value = false
@@ -80,6 +89,10 @@ const onAcknowledgedWarning = () => {
   routeStore.rememberRouteWarning(currentRoute.path)
 }
 
+const onRouteLoaded = async () => {
+  await determineScript()
+}
+
 onMounted(async () => {
   await refresh()
   determineGlobalStylesheets()
@@ -108,6 +121,7 @@ onMounted(async () => {
     )
       router-view(
         v-slot='{ Component }'
+        @loaded='onRouteLoaded'
       )
         Transition
           component(

src/views/gallery/gallery-view.vue

@@ -14,6 +14,10 @@ const props = defineProps<{
   variants: string[]
 }>()
 
+const emits = defineEmits<{
+  (e: 'loaded'): void
+}>()
+
 const ready = ref(false)
 const config = ref(null! as GalleryList)
 const entry = ref(null! as GalleryEntry)
@@ -35,6 +39,7 @@ onMounted(async () => {
   title.value = getTitleFromEntryOrId(entry.value, id.value)
   document.title = routeSubConfig.title.replace('$ENTRY', title.value)
   ready.value = true
+  emits('loaded')
 })
 </script>
 

src/views/markdown/markdown.vue

@@ -8,6 +8,10 @@ import { fetchAndParseMarkdown } from 'src/utilities/fetch'
 import { getCurrentRoute } from 'src/utilities/vuetils'
 import { useRouteStore } from 'src/routes'
 
+const emits = defineEmits<{
+  (e: 'loaded'): void
+}>()
+
 const content = ref('')
 const currentRoute = getCurrentRoute()
 const routeStore = useRouteStore()
@@ -16,6 +20,7 @@ const routeConfig = routeStore._routes[currentRoute.path] as MarkdownDefinition
 onMounted(async () => {
   content.value = await fetchAndParseMarkdown(routeConfig.content)
   document.title = routeConfig.title
+  emits('loaded')
 })
 </script>
 

src/views/project/project-view.vue

@@ -14,6 +14,10 @@ const props = defineProps<{
   id: string,
 }>()
 
+const emits = defineEmits<{
+  (e: 'loaded'): void
+}>()
+
 const ready = ref(false)
 const info = ref(null! as ProjectListingInfo)
 const content = ref('')
@@ -30,6 +34,7 @@ onMounted(async () => {
   document.title = routeSubConfig.title.replace('$PROJECT', info.value.title)
 
   ready.value = true
+  emits('loaded')
 })
 </script>