breadcrumbs now support project/gallery titles

projects/frontend/src/main.vue

@@ -29,7 +29,10 @@ const acknowledged = ref(false)
 const storageId = ref('')
 const routeId = ref('')
 const warning = ref({} as WarningModal)
-const breadcrumbs = ref([] as Link[])
+const breadcrumbs = computed({
+  get() { return routeStore._breadcrumbs },
+  set() {}
+})
 
 const determineWarning = () => {
   if (!routeConfig.warning || routeStore.doesRouteRememberWarning(currentRoute.path)) {
@@ -75,29 +78,6 @@ const determineScript = async () => {
   return null
 }
 
-const determineBreadcrumbs = () => {
-  breadcrumbs.value = []
-  if (currentRoute.path === '/') {
-    return
-  }
-
-  const split = currentRoute.path.split('/')
-  split[0] = '/'
-  const paths = [] as string[]
-  split.forEach((val, i) => {
-    const sliced = split.slice(0, i + 1)
-    if (sliced.length > 0) {
-      paths.push(sliced.reduce((prev, curr) => prev === '/' ? `/${curr}` : `${prev}/${curr}`))
-    }
-  })
-  breadcrumbs.value = paths.map(path => {
-    return {
-      href: path,
-      caption: routeStore._routes[path]?.title
-    }
-  })
-}
-
 const refresh = async () => {
   ready.value = false
   acknowledged.value = false
@@ -107,8 +87,8 @@ const refresh = async () => {
   routeId.value = routeStore._routes[currentRoute.path].id
 
   window.routeConfig = {...routeConfig}
+  routeStore.setBreadcrumbs(currentRoute)
 
-  determineBreadcrumbs()
   determineWarning()
   determineStylesheets(routeConfig.stylesheetUrls)
   scrollTo({

projects/frontend/src/routes.ts

@@ -1,13 +1,14 @@
 import { defineStore } from 'pinia'
-import { type RouteRecordRaw } from 'vue-router'
+import { type RouteLocationNormalizedLoaded, type RouteRecordRaw } from 'vue-router'
 import { routes, siteGlobals } from 'content/routes.js'
-import {
-  type GalleryListDefinition,
-  type HeaderEntry,
-  type ProjectListDefinition,
-  type RouteDefinition,
-  type SiteGlobals,
-  type TemplateType,
+import type {
+  GalleryListDefinition,
+  HeaderEntry,
+  Link,
+  ProjectListDefinition,
+  RouteDefinition,
+  SiteGlobals,
+  TemplateType,
 } from '@goldenwere/static-web-templates-types'
 
 const markdownBody = () => import ('./views/markdown/markdown.vue')
@@ -62,7 +63,8 @@ export const useRouteStore = defineStore('routeStore', {
     _routes: {} as Record<string, RouteRecordRaw & RouteDefinition>,
     _globals: {} as SiteGlobals,
     
-    _routesAlreadyWarned: {} as Record<string, boolean>
+    _routesAlreadyWarned: {} as Record<string, boolean>,
+    _breadcrumbs: [] as Link[]
   }),
   actions: {
     doesRouteRememberWarning(route: string) {
@@ -71,6 +73,28 @@ export const useRouteStore = defineStore('routeStore', {
     rememberRouteWarning(route: string) {
       this._routesAlreadyWarned[route] = true
     },
+    setBreadcrumbs(currentRoute: RouteLocationNormalizedLoaded, resolvedTitle?: string) {
+      if (currentRoute.path === '/') {
+        this._breadcrumbs = []
+        return
+      }
+    
+      const split = currentRoute.path.split('/')
+      split[0] = '/'
+      const paths = [] as string[]
+      split.forEach((val, i) => {
+        const sliced = split.slice(0, i + 1)
+        if (sliced.length > 0) {
+          paths.push(sliced.reduce((prev, curr) => prev === '/' ? `/${curr}` : `${prev}/${curr}`))
+        }
+      })
+      this._breadcrumbs = paths.map((path, index) => {
+        return {
+          href: path,
+          caption: index === paths.length - 1 && !!resolvedTitle ? resolvedTitle : this._routes[path]?.title,
+        }
+      })
+    }
   },
 })
 

projects/frontend/src/views/gallery/gallery-view.vue

@@ -51,6 +51,7 @@ onMounted(async () => {
   id.value = props.variants[props.variants.length - 1]
   title.value = getTitleFromEntryOrId(entry.value, id.value)
   document.title = routeSubConfig.fullTitle?.replace('$ENTRY', title.value)
+  routeStore.setBreadcrumbs(currentRoute, title.value)
   window.routeSubConfig = {...routeSubConfig}
   window.routeContentConfig = {...entry.value}
 

projects/frontend/src/views/project/project-view.vue

@@ -33,6 +33,7 @@ onMounted(async () => {
   const md = await fetchAndParseMarkdown(config.projects[currentRoute.query.id as string].content)
   content.value = md
   document.title = routeSubConfig.fullTitle?.replace('$PROJECT', info.value.title)
+  routeStore.setBreadcrumbs(currentRoute, info.value.title)
   window.routeSubConfig = {...routeSubConfig}
   window.routeContentConfig = {...info.value}