create breadcrumbs

libs/types/src/config/routing.d.ts

@@ -11,6 +11,7 @@ export type SharedRouteDefinition = {
   stylesheetUrls: string[]
   template: TemplateType
   title: string
+  fullTitle: string
   warning: boolean | WarningModal
 }
 

projects/frontend/src/main.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { getCurrentRoute } from 'src/utilities/vuetils'
@@ -7,7 +7,7 @@ import { injectStylesheet } from 'src/utilities/dom'
 import { storage } from './utilities/fetch'
 import { useRouteStore } from 'src/routes'
 
-import type { RoutedWindow, WarningModal } from '@goldenwere/static-web-templates-types'
+import type { Link, RoutedWindow, WarningModal } from '@goldenwere/static-web-templates-types'
 
 import HeaderLink from 'src/components/shared/header-link.vue'
 import ThemePicker from 'src/components/shared/theme-picker.vue'
@@ -29,6 +29,7 @@ const acknowledged = ref(false)
 const storageId = ref('')
 const routeId = ref('')
 const warning = ref({} as WarningModal)
+const breadcrumbs = ref([] as Link[])
 
 const determineWarning = () => {
   if (!routeConfig.warning || routeStore.doesRouteRememberWarning(currentRoute.path)) {
@@ -74,6 +75,29 @@ 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
@@ -84,6 +108,7 @@ const refresh = async () => {
 
   window.routeConfig = {...routeConfig}
 
+  determineBreadcrumbs()
   determineWarning()
   determineStylesheets(routeConfig.stylesheetUrls)
   scrollTo({
@@ -128,12 +153,30 @@ onMounted(async () => {
   header(
     v-if='firstInit && !!globalConfig.header'
   )
-    ul
-      HeaderLink(
-        v-for='entry in globalConfig.header'
-        :entry='entry'
+    nav#header-nav
+      ul
+        HeaderLink(
+          v-for='entry in globalConfig.header'
+          :entry='entry'
+        )
+    nav#header-breadcrumb(
+      v-if='breadcrumbs.length > 0'
+    )
+      span.breadcrumb(
+        v-for='(breadcrumb, i) in breadcrumbs'
       )
-    ThemePicker
+        span(
+          v-if='breadcrumbs.length === 1 || i === breadcrumbs.length - 1'
+        ) {{ breadcrumb.caption }}
+        span(
+          v-else
+        )
+          a(
+            :href='breadcrumb.href'
+          ) {{ breadcrumb.caption }}
+          span /
+    #header-controls
+      ThemePicker
   main(
     v-if='ready'
   )

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

@@ -157,7 +157,7 @@ const resetTags = () => {
 onMounted(async () => {
   ready.value = false
   config = await fetchAndParseYaml<GalleryList>(routeConfig.config)
-  document.title = routeConfig.title
+  document.title = routeConfig.fullTitle
   hideWarnings.value = storage.read(`${storageId}::hideWarnings`) || false
   onDisplayEntries()
   ready.value = true

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

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

projects/frontend/src/views/markdown/markdown.vue

@@ -19,7 +19,7 @@ const routeConfig = routeStore._routes[currentRoute.path] as MarkdownDefinition
 
 onMounted(async () => {
   content.value = await fetchAndParseMarkdown(routeConfig.content)
-  document.title = routeConfig.title
+  document.title = routeConfig.fullTitle
   emits('loaded')
 })
 </script>

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

@@ -57,7 +57,7 @@ onMounted(async () => {
     const id = projectIds.value[i]
     projects.value[id] = await fetchAndParseYaml(config.value.projects[id].config)
   }
-  document.title = routeConfig.title
+  document.title = routeConfig.fullTitle
   ready.value = true
 })
 </script>

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

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