From 5980c1b22eed4d256e5c10cc5dfb5be951cfa384 Mon Sep 17 00:00:00 2001
From: Lightling <contact@lightling.xyz>
Date: Sat, 16 Mar 2024 01:07:36 -0400
Subject: [PATCH] define gallery template

---
 src/content-env.d.ts               | 12 ++++++++++
 src/routes.ts                      |  2 ++
 src/types/galleries/galleryList.ts | 12 ++++++++++
 src/views/gallery-list.vue         | 36 ++++++++++++++++++++++++++++++
 4 files changed, 62 insertions(+)
 create mode 100644 src/types/galleries/galleryList.ts
 create mode 100644 src/views/gallery-list.vue

diff --git a/src/content-env.d.ts b/src/content-env.d.ts
index 33baccf..8ee46de 100644
--- a/src/content-env.d.ts
+++ b/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
diff --git a/src/routes.ts b/src/routes.ts
index 7c8dd20..56c4600 100644
--- a/src/routes.ts
+++ b/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[] => {
diff --git a/src/types/galleries/galleryList.ts b/src/types/galleries/galleryList.ts
new file mode 100644
index 0000000..285cf70
--- /dev/null
+++ b/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[]
+}
diff --git a/src/views/gallery-list.vue b/src/views/gallery-list.vue
new file mode 100644
index 0000000..8b7f6a6
--- /dev/null
+++ b/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>