use key-value pairs for titles/ids

src/components/galleries/gallery-tile.vue

@@ -5,23 +5,24 @@ import type { GalleryEntry } from 'src/types/galleries/galleryList'
 
 defineProps<{
   entry: GalleryEntry,
+  id: string,
 }>()
 
 defineEmits<{
-  (e: 'click', value: { event: Event, entry: GalleryEntry }): void
+  (e: 'click', value: { event: Event, id: string }): void
 }>()
 </script>
 
 <template lang="pug">
 .gallery-embed(
-  @click='$emit("click", { event: $event, entry })'
+  @click='$emit("click", { event: $event, id })'
 )
   .image-wrapper
     img(
       :src='entry.thumbnailUrl || entry.url'
-      :alt='entry.description || entry.title'
+      :alt='entry.description || id'
     )
-  p {{ entry.title }}
+  p {{ id }}
 </template>
 
 <style scoped lang="sass">

src/routes.ts

@@ -31,7 +31,7 @@ export const createRoutes = (): RouteRecordRaw[] => {
         props: route => ({ id: route.query.id }),
       })
     } else if (routes[route].template === 'gallery-list') {
-      toPush.props = route => ({ variants: (route.query.v as string || '').split(',') })
+      toPush.props = route => ({ variants: (route.query.v as string || '').split(';') })
     }
 
     routeRecord.push(toPush)

src/types/galleries/galleryList.ts

@@ -5,9 +5,11 @@ export type GalleryEntry = {
   thumbnailUrl: string
   title: string
   url?: string
-  variants?: GalleryEntry[]
+  variants?: GalleryEntries
 }
 
+export type GalleryEntries = { [idOrTitle: string]: GalleryEntry }
+
 export type GalleryList = {
-  entries: GalleryEntry[]
+  entries: GalleryEntries
 }

src/views/gallery-list.vue

@@ -2,7 +2,7 @@
 import { onMounted, ref } from 'vue'
 import { type RouteRecordRaw, useRouter } from 'vue-router'
 
-import type { GalleryEntry, GalleryList } from 'src/types/galleries/galleryList'
+import type { GalleryEntries, GalleryEntry, GalleryList } from 'src/types/galleries/galleryList'
 import { type GalleryListDefinition } from 'content/routes.js'
 import { fetchAndParseYaml } from 'src/utilities/fetch'
 import { getCurrentRoute } from 'src/utilities/vuetils'
@@ -24,42 +24,43 @@ const currentRoute = getCurrentRoute()
 const routeStore = useRouteStore()
 const routeConfig = routeStore._routes[currentRoute.path] as GalleryListDefinition & RouteRecordRaw
 const router = useRouter()
-const entries = ref([] as GalleryEntry[])
+const entries = ref({} as GalleryEntries)
 const variants = ref(validateVariants(props.variants))
 
 const onDisplayEntries = () => {
   let currentEntries = config.value.entries
   if (!!variants.value) {
     variants.value.forEach((variant) => {
-      currentEntries = currentEntries.find(other => other.id === variant)!.variants!
+      currentEntries = currentEntries[variant]!.variants!
     })
   }
   entries.value = currentEntries
 }
 
-const onTileClicked = (clickEvent: { event: Event, entry: GalleryEntry }) => {
-  const { event, entry } = clickEvent
+const onTileClicked = (clickEvent: { event: Event, id: string }) => {
+  const { event, id } = clickEvent
+  const entry = entries.value[id]
 
   event.preventDefault()
   if (!!entry.variants) {
     const newPath = !!variants.value
-      ? `${(variants.value || []).join(',')},${entry.id}`
-      : entry.id
+      ? `${(variants.value || []).join(';')};${id}`
+      : id
     router.push({ name: routeConfig.name, query: { v: newPath }})
-    variants.value = newPath.split(',')
+    variants.value = newPath.split(';')
     onDisplayEntries()
   }
 }
 
 const onNavigateBack = (e: Event) => {
   e.preventDefault()
-  let newPath: string | null = variants.value!.slice(0, variants.value!.length - 1).join(',')
+  let newPath: string | null = variants.value!.slice(0, variants.value!.length - 1).join(';')
   if (newPath === '') {
     router.push({ name: routeConfig.name})
     variants.value = null
   } else {
     router.push({ name: routeConfig.name, query: { v: newPath }})
-    variants.value = validateVariants(newPath?.split(','))
+    variants.value = validateVariants(newPath?.split(';'))
   }
   onDisplayEntries()
 }
@@ -82,8 +83,9 @@ onMounted(async () => {
       @click='onNavigateBack($event)'
     ) Back
     GalleryTile(
-      v-for='(entry) in entries'
+      v-for='(entry, id) in entries'
       :entry='entry'
+      :id='id'
       @click='onTileClicked($event)'
     )
 </template>