From 64c435dd7cb44a61480ceb339433eb3dad09b6d6 Mon Sep 17 00:00:00 2001
From: Lightling <contact@lightling.xyz>
Date: Thu, 16 May 2024 01:14:47 -0400
Subject: [PATCH] create breadcrumbs

---
 libs/types/src/config/routing.d.ts            |  1 +
 projects/frontend/src/main.vue                | 57 ++++++++++++++++---
 .../src/views/gallery/gallery-list.vue        |  2 +-
 .../src/views/gallery/gallery-view.vue        |  2 +-
 .../frontend/src/views/markdown/markdown.vue  |  2 +-
 .../src/views/project/project-list.vue        |  2 +-
 .../src/views/project/project-view.vue        |  2 +-
 7 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/libs/types/src/config/routing.d.ts b/libs/types/src/config/routing.d.ts
index 30f3af6..52bfd2b 100644
--- a/libs/types/src/config/routing.d.ts
+++ b/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
 }
 
diff --git a/projects/frontend/src/main.vue b/projects/frontend/src/main.vue
index 5bb9a1d..aa2052f 100644
--- a/projects/frontend/src/main.vue
+++ b/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'
   )
diff --git a/projects/frontend/src/views/gallery/gallery-list.vue b/projects/frontend/src/views/gallery/gallery-list.vue
index b1932e0..165b0a3 100644
--- a/projects/frontend/src/views/gallery/gallery-list.vue
+++ b/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
diff --git a/projects/frontend/src/views/gallery/gallery-view.vue b/projects/frontend/src/views/gallery/gallery-view.vue
index 8612038..0ca6011 100644
--- a/projects/frontend/src/views/gallery/gallery-view.vue
+++ b/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}
 
diff --git a/projects/frontend/src/views/markdown/markdown.vue b/projects/frontend/src/views/markdown/markdown.vue
index 883d3fe..0464384 100644
--- a/projects/frontend/src/views/markdown/markdown.vue
+++ b/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>
diff --git a/projects/frontend/src/views/project/project-list.vue b/projects/frontend/src/views/project/project-list.vue
index 4df80ab..b6e4de8 100644
--- a/projects/frontend/src/views/project/project-list.vue
+++ b/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>
diff --git a/projects/frontend/src/views/project/project-view.vue b/projects/frontend/src/views/project/project-view.vue
index adcd2a2..d1237c8 100644
--- a/projects/frontend/src/views/project/project-view.vue
+++ b/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}