define gallery template

src/content-env.d.ts

@@ -6,6 +6,7 @@ declare module 'content/routes.js' {
   type Template = 
     | 'markdown'
     | 'project-list'
+    | 'gallery-list'
 
   /**
    * Defines the shared options for a route
@@ -48,12 +49,23 @@ declare module 'content/routes.js' {
     }
   }
 
+  /**
+   * Defines the config for a route using the `gallery-list` {@link Template}
+   */
+  type GalleryListDefinition = ConfigfulRouteDefinition & {
+    template: 'gallery-list'
+    view: {
+      stylesheetUrls: string[]
+    }
+  }
+
   /**
    * Defines all available route definitions
    */
   type RouteDefinition =
     | MarkdownDefinition
     | ProjectListDefinition
+    | GalleryListDefinition
 
   /**
    * Defines the collection of routes the app uses

src/routes.ts

@@ -5,10 +5,12 @@ import { header, routes, type HeaderEntry, type ProjectListDefinition, type Rout
 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')
 
 export const templates: Record<Template, () => Promise<any>> = {
   'markdown': markdownBody,
   'project-list': projectListBody,
+  'gallery-list': galleryListBody,
 }
 
 export const createRoutes = (): RouteRecordRaw[] => {

src/types/galleries/galleryList.ts

@@ -0,0 +1,12 @@
+export type GalleryEntry = {
+  description?: string
+  thumbnailPosition?: `${'left' | 'center' | 'right'} ${'top' | 'center' | 'bottom'}`
+  thumbnailUrl: string
+  title: string
+  url?: string
+  variants?: GalleryEntry[]
+}
+
+export type GalleryList = {
+  entries: GalleryEntry[]
+}

src/views/gallery-list.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+import { type 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 ready = ref(false)
+const config = ref(null! as GalleryList)
+const currentRoute = getCurrentRoute()
+const routeStore = useRouteStore()
+const routeConfig = routeStore._routes[currentRoute.path] as GalleryListDefinition
+
+onMounted(async () => {
+  config.value = await fetchAndParseYaml<GalleryList>(routeConfig.config)
+  document.title = routeConfig.title
+  ready.value = true
+})
+</script>
+
+<template lang="pug">
+.template.gallery-list
+  .gallery(
+    v-if='ready'
+  )
+    .tile(
+      v-for='entry in config.entries'
+    )
+      p {{ entry.title }}
+</template>
+
+<style scoped lang="sass">
+
+</style>