implement gallery viewer

src/main.vue

@@ -22,7 +22,7 @@ const refresh = async () => {
     document.head.removeChild(stylesheet)
   })
 
-  routeConfig.stylesheetUrls?.forEach(stylesheet => {
+  routeConfig?.stylesheetUrls?.forEach(stylesheet => {
     const newElement = document.createElement('link')
     newElement.setAttribute('rel', 'stylesheet')
     newElement.setAttribute('href', stylesheet)

src/routes.ts

@@ -6,6 +6,7 @@ const markdownBody = () => import ('./views/markdown.vue')
 const projectListBody = () => import ('./views/project-list.vue')
 const projectViewBody = () => import ('./views/project-view.vue')
 const galleryListBody = () => import ('./views/gallery-list.vue')
+const galleryViewBody = () => import ('./views/gallery-view.vue')
 
 export const templates: Record<Template, () => Promise<any>> = {
   'markdown': markdownBody,
@@ -32,6 +33,13 @@ export const createRoutes = (): RouteRecordRaw[] => {
       })
     } else if (routes[route].template === 'gallery-list') {
       toPush.props = route => ({ variants: (route.query.v as string || '').split(';') })
+
+      routeRecord.push({
+        name: `${routes[route].id}: View Entry`,
+        path: `${route}/view`,
+        component: galleryViewBody,
+        props: route => ({ variants: (route.query.v as string || '').split(';') }),
+      })
     }
 
     routeRecord.push(toPush)

src/views/gallery-list.vue

@@ -49,6 +49,8 @@ const onTileClicked = (clickEvent: { event: Event, id: string }) => {
     router.push({ name: routeConfig.name, query: { v: newPath }})
     variants.value = newPath.split(';')
     onDisplayEntries()
+  } else {
+    router.push({ name: `${routeConfig.name?.toString()}: View Entry`, query: { v: `${(variants.value || []).join(';')};${id}` }})
   }
 }
 

src/views/gallery-view.vue

@@ -0,0 +1,49 @@
+<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 { fetchAndParseYaml } from 'src/utilities/fetch'
+import { getCurrentRoute } from 'src/utilities/vuetils'
+import { useRouteStore } from 'src/routes'
+
+const props = defineProps<{
+  variants: string[]
+}>()
+
+const ready = ref(false)
+const config = ref(null! as GalleryList)
+const entry = ref(null! as GalleryEntry)
+const id = ref('')
+const currentRoute = getCurrentRoute()
+const routeStore = useRouteStore()
+const routeConfig = routeStore._routes[currentRoute.path.substring(0, currentRoute.path.length - 5)] as GalleryListDefinition
+
+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!
+  }
+  entry.value = currentEntries[props.variants[props.variants.length - 1]]
+  id.value = props.variants[props.variants.length - 1]
+  ready.value = true
+})
+</script>
+
+<template lang="pug">
+.template.gallery-view
+  .view-wrapper(
+    v-if='ready'
+  )
+    .view-outlet
+      img(
+        :src='entry.url || entry.thumbnailUrl'
+      )
+    p {{ id }}
+</template>
+
+<style scoped lang="sass">
+
+</style>