titles and defaults for gallery list/view

if explicitly null (title set to blank or the phrase null in YAML), it will set untitled; variants will be amended with title and description from parent if they are undefined on the variant

src/components/galleries/gallery-tile.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { defineEmits, defineProps } from 'vue'
+import { computed, defineEmits, defineProps } from 'vue'
 
 import type { GalleryEntry } from 'src/types/galleries/galleryList'
+import { getTitleFromEntryOrId } from 'src/utilities/galleries'
 
-defineProps<{
+const props = defineProps<{
   entry: GalleryEntry,
   id: string,
 }>()
@@ -11,6 +12,8 @@ defineProps<{
 defineEmits<{
   (e: 'click', value: { event: Event, id: string }): void
 }>()
+
+const title = computed(() => getTitleFromEntryOrId(props.entry, props.id))
 </script>
 
 <template lang="pug">
@@ -22,7 +25,7 @@ defineEmits<{
       :src='entry.thumbnailUrl || entry.url'
       :alt='entry.description || id'
     )
-  p {{ id }}
+  p {{ title }}
 </template>
 
 <style scoped lang="sass">

src/routes.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { type RouteRecordRaw, type Router } from 'vue-router'
-import { header, routes, type HeaderEntry, type ProjectListDefinition, type RouteDefinition, type Template } from 'content/routes.js'
+import { header, routes, type HeaderEntry, type ProjectListDefinition, type RouteDefinition, type Template, GalleryListDefinition } from 'content/routes.js'
 
 const markdownBody = () => import ('./views/markdown.vue')
 const projectListBody = () => import ('./views/project-list.vue')
@@ -65,10 +65,10 @@ export const initializeRouteStore = (routerRoutes: readonly RouteRecordRaw[]) =>
       ...routerRoutes.find(other => other.path === route) as RouteRecordRaw,
       ...routes[route] as RouteDefinition,
     }
-    if (routes[route].template === 'project-list') {
+    if (routes[route].template === 'project-list' || routes[route].template === 'gallery-list') {
       routeStore._routes[`${route}/view`] = {
         ...routerRoutes.find(other => other.path === `${route}/view`) as RouteRecordRaw,
-        ...(routes[route] as ProjectListDefinition).view,
+        ...(routes[route] as ProjectListDefinition | GalleryListDefinition).view,
       } as any
     }
   })

src/types/galleries/galleryList.ts

@@ -3,7 +3,7 @@ export type GalleryEntry = {
   description?: string
   thumbnailPosition?: `${'left' | 'center' | 'right'} ${'top' | 'center' | 'bottom'}`
   thumbnailUrl: string
-  title: string
+  title: string | null | undefined
   url?: string
   variants?: GalleryEntries
 }

src/utilities/galleries.ts

@@ -0,0 +1,30 @@
+import type { GalleryEntry } from 'src/types/galleries/galleryList'
+import { deepCopy } from './dom'
+
+export const getTitleFromEntryOrId = (entry: GalleryEntry, id: string) => (
+  entry.title !== undefined
+    ? entry.title === '' || entry.title === null
+      ? 'untitled'
+      : entry.title
+    : id
+)
+
+export const amendVariantsWithDefaults = (entry: GalleryEntry) => {
+  const variants = deepCopy(entry.variants)
+  if (!!variants) {
+    Object.keys(variants).forEach(id => _amendVariantWithDefaults(entry, variants[id]))
+  }
+
+  return variants
+}
+
+export const _amendVariantWithDefaults = (parent: GalleryEntry, variant: GalleryEntry) => {
+  if (variant.title === undefined && (!!parent.title || parent.title === null || parent.title === '')) {
+    variant.title = parent.title
+  }
+  if (!variant.description && !!parent.description) {
+    variant.description = parent.description
+  }
+
+  return variant
+}

src/views/gallery-list.vue

@@ -2,8 +2,9 @@
 import { onMounted, ref } from 'vue'
 import { type RouteRecordRaw, useRouter } from 'vue-router'
 
-import type { GalleryEntries, GalleryEntry, GalleryList } from 'src/types/galleries/galleryList'
+import type { GalleryEntries, GalleryList } from 'src/types/galleries/galleryList'
 import { type GalleryListDefinition } from 'content/routes.js'
+import { amendVariantsWithDefaults } from 'src/utilities/galleries'
 import { fetchAndParseYaml } from 'src/utilities/fetch'
 import { getCurrentRoute } from 'src/utilities/vuetils'
 import { useRouteStore } from 'src/routes'
@@ -31,7 +32,7 @@ const onDisplayEntries = () => {
   let currentEntries = config.value.entries
   if (!!variants.value) {
     variants.value.forEach((variant) => {
-      currentEntries = currentEntries[variant]!.variants!
+      currentEntries = amendVariantsWithDefaults(currentEntries[variant])!
     })
   }
   entries.value = currentEntries

src/views/gallery-view.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { type RouteRecordRaw, useRouter } from 'vue-router'
 
 import type { GalleryEntry, GalleryList } from 'src/types/galleries/galleryList'
 import { type GalleryListDefinition } from 'content/routes.js'
+import { amendVariantsWithDefaults, getTitleFromEntryOrId } from 'src/utilities/galleries'
 import { fetchAndParseYaml } from 'src/utilities/fetch'
 import { getCurrentRoute } from 'src/utilities/vuetils'
 import { useRouteStore } from 'src/routes'
@@ -19,15 +19,19 @@ const id = ref('')
 const currentRoute = getCurrentRoute()
 const routeStore = useRouteStore()
 const routeConfig = routeStore._routes[currentRoute.path.substring(0, currentRoute.path.length - 5)] as GalleryListDefinition
+const routeSubConfig = routeStore._routes[currentRoute.path]
+const title = ref('')
 
 onMounted(async () => {
   config.value = await fetchAndParseYaml<GalleryList>(routeConfig.config)
   let currentEntries = config.value.entries
   for (let i = 0; i < props.variants.length - 1; ++i) {
-    currentEntries = currentEntries[props.variants[i]]!.variants!
+    currentEntries = amendVariantsWithDefaults(currentEntries[props.variants[i]])!
   }
   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)
   ready.value = true
 })
 </script>
@@ -41,7 +45,7 @@ onMounted(async () => {
       img(
         :src='entry.url || entry.thumbnailUrl'
       )
-    p {{ id }}
+    p {{ title }}
 </template>
 
 <style scoped lang="sass">