convert gallery-list types to use embedded/fetched entry pattern

- currently amendVariants no longer works

libs/types/src/content/templates/gallery-list.d.ts

@@ -1,4 +1,5 @@
 import type { EntryTagCollection } from '../entryTag'
+import type { ListWithEntries } from './shared'
 
 /**
  * A partial definition of a {@link GalleryEntry}
@@ -54,7 +55,7 @@ export type GalleryEntryInheritedProperties = {
  * Defines an entry in a gallery that can be displayed in a tiled manner
  * and can be clicked by a visitor to display its variants or the entry itself if there are none
  */
-export type GalleryEntry = GalleryEntryInheritedProperties & {
+export type GalleryEntryProperties = GalleryEntryInheritedProperties & {
   /**
    * the url to the thumbnail to show for the entry in the gallery tile
    */
@@ -63,34 +64,16 @@ export type GalleryEntry = GalleryEntryInheritedProperties & {
    * the url to the entry itself
    */
   url?: string
-  /**
-   * optional variants for the entry;
-   * this is a recursive definition of {@link GalleryEntry entries}
-   * which can be navigated deeper into in a gallery
-   * in a manner like a folder in a file-based operating system
-   */
-  variants?: GalleryEntries
 }
 
-/**
- * Defines the list of entries in a gallery,
- * a key-value object where the value is the entry,
- * and the key represents the id of a piece;
- * it is important for this to be uniquely defined at minimum within
- * the scope of the entry in relation to surrounding variants
- * in order for the app to properly navigate through variants
- * and ultimately the view page displaying the entry
- */
-export type GalleryEntries = { [idOrTitle: string]: GalleryEntry }
+export type GalleryEntry = 
+  & GalleryEntryProperties
+  & ListWithEntries<GalleryEntryProperties>
 
 /**
  * Defines the model of the `GalleryList` template
  */
 export type GalleryList = {
-  /**
-   * the entries to display in a gallery-list template
-   */
-  entries: GalleryEntries
   /**
    * the tags to use for filtering entries
    */
@@ -101,4 +84,4 @@ export type GalleryList = {
    * in order to manually style (CSS filtering/opacity/etc.)
    */
   removeFromView?: boolean
-}
+} & ListWithEntries<GalleryEntry>

libs/types/src/content/templates/shared.d.ts

@@ -4,14 +4,14 @@
  * and the value is the entry config itself
  * (defined as `T` based on the type of the entries in the implemented list)
  */
-export type ListEntry<T> = { [key: string]: T }
+export type ListEntries<T> = { [key: string]: T }
 
 /**
  * Defines entries that are fetched from remote config files.
  * Stored in key-value format where the key is the id of the entry,
  * and the value is the url to the config file.
  */
-export type ListRemoteEntries<T> = { [key: string]: string }
+export type ListRemoteEntries = { [key: string]: string }
 
 /**
  * Defines a list-type template that has config entries defined by id.
@@ -29,5 +29,12 @@ export type ListWithEntries<T> = {
   /**
    * Entries that are embedded directly in the list config
    */
-  embeddedEntries?: ListEntry
+  embeddedEntries?: ListEntries<T>
+}
+
+export type ListEntriesWithNestedEntries<T> = { [key: string]: T & ListWithEntries<T> }
+
+export type ListWithNestedEntries<T> = {
+  entries?: ListRemoteEntries
+  embeddedEntries?: ListEntriesWithNestedEntries<T>
 }

projects/frontend/src/utilities/fetch.ts

@@ -2,8 +2,10 @@ import DOMPurify from 'dompurify'
 import { marked } from 'marked'
 import yaml from 'js-yaml'
 import type {
-  ListEntry,
+  ListEntries,
+  ListEntriesWithNestedEntries,
   ListWithEntries,
+  ListWithNestedEntries,
 } from '@goldenwere/mackenzii-types'
 
 /**
@@ -132,17 +134,17 @@ export const fetchAndParseMarkdown = async (path: string) => {
  * @param list the list to fetch configs from
  * @returns the resolved configs
  */
-export const fetchConfigsFromList = async <T>(list: ListWithEntries<T>): Promise<{
+export const fetchConfigsFromList = async <T>(list: ListWithEntries<T> | ListWithNestedEntries<T>): Promise<{
   ids: string[]
-  entries: ListEntry<T>
+  entries: ListEntries<T> | ListEntriesWithNestedEntries<T>
 }> => {
   return new Promise(async (resolve, reject) => {
     let ids: string[] = []
-    let entries: ListEntry<T> = {}
+    let entries: ListEntries<T> = {}
     if (!!list.entries) {
       ids = ids.concat(Object.keys(list.entries))
       const allEntries = await Promise.all(ids.map(async id => ({
-        entry: await fetchAndParseYaml<T>(list.entries[id]),
+        entry: await fetchAndParseYaml<T>((list.entries!)[id]),
         id,
       })))
       allEntries.forEach((entry) => {
@@ -170,7 +172,7 @@ export const fetchConfigsFromList = async <T>(list: ListWithEntries<T>): Promise
  * @param id the id to query for
  * @returns the resolved config
  */
-export const fetchConfigByIdFromList = async <T>(list: ListWithEntries<T>, id: string): Promise<T> => {
+export const fetchConfigByIdFromList = async <T>(list: ListWithEntries<T> | ListWithNestedEntries<T>, id: string): Promise<T> => {
   return new Promise(async (resolve, reject) => {
     if (!!list.embeddedEntries && list.embeddedEntries[id]) {
       resolve(list.embeddedEntries[id])
@@ -181,6 +183,43 @@ export const fetchConfigByIdFromList = async <T>(list: ListWithEntries<T>, id: s
   })
 }
 
+export const fetchNestedConfigs = async <T>(
+  list: ListWithNestedEntries<T>,
+  idsByDepth: string[],
+  proccessCallback?: (t: T) => T,
+): Promise<ListWithNestedEntries<T>> => {
+  /*  DOCUMENT STRUCTURE:
+      ...listConfig
+      entries:
+        'key1': 'url'
+          ...entryConfig (T)
+          entries:
+            'key1-1': 'url'
+              ...entryConfig (T)
+          embeddedEntries:
+            'key1-2':
+              ...entryConfig (T)
+      embeddedEntries:
+        'key2':
+          ...entryConfig (T)
+          embeddedEntries:
+            'key2-1':
+              ...entryConfig (T)
+      idsByDepth STRUCTURE:
+      [ 'key1', 'key2-1' ]
+  */
+
+  return new Promise(async (resolve, reject) => {
+    let idsToLoop = [ ...idsByDepth ]
+    let current = await fetchConfigByIdFromList(list, idsToLoop.shift()!) as ListEntriesWithNestedEntries<T>
+    if (idsToLoop.length > 0) {
+      resolve(await fetchNestedConfigs(current as any, idsToLoop))
+    } else {
+      resolve(current)
+    }
+  })
+}
+
 /**
  * Fetches content type from an image
  * @param path the path of the file to check

projects/frontend/src/views/gallery/gallery-list.vue

@@ -8,7 +8,7 @@ import type {
 import { type RouteRecordRaw, useRouter } from 'vue-router'
 
 import { amendVariantsWithDefaults } from './gallery-utilities'
-import { fetchAndParseYaml, storage } from 'src/utilities/fetch'
+import { fetchAndParseYaml, fetchNestedConfigs, fetchConfigsFromList, storage } from 'src/utilities/fetch'
 import { getCurrentRoute } from 'src/utilities/vuetils'
 import { useRouteStore } from 'src/routes'
 
@@ -50,7 +50,7 @@ const ready = ref(false)
 const galleryReady = ref(false)
 const filterPanelRef = ref(null as typeof FilterPanel | null)
 const entries = ref({} as GalleryDisplayedEntries)
-const variants = ref(validateVariantPath(props.variants))
+let variants = validateVariantPath(props.variants)
 const hasWarnings = ref(false)
 const hideWarnings = defineModel('showWarnings', { type: Boolean })
 const tagsByCategory = ref({} as { [category: string]: Record<string, string> })
@@ -58,16 +58,16 @@ const tagsByCategory = ref({} as { [category: string]: Record<string, string> })
 /**
  * Handles updating the displayed entries in the list
  */
-const onDisplayEntries = () => {
+const onDisplayEntries = async () => {
   resetTags()
   galleryReady.value = false
-  let currentEntries = config.entries
-  if (!!variants.value) {
-    variants.value.forEach((variant) => {
-      currentEntries = amendVariantsWithDefaults(currentEntries[variant])!
-    })
+  if (!!variants) {
+    const value = await fetchNestedConfigs<GalleryEntry>(config, variants)
+    entries.value = (await fetchConfigsFromList(value)).entries
+  } else {
+    const value = await fetchConfigsFromList<GalleryEntry>(config)
+    entries.value = value.entries
   }
-  entries.value = currentEntries
   hasWarnings.value = !!Object.values(entries.value).find(other => !!other.warning)
   setTimeout(() => galleryReady.value = true)
 }
@@ -83,15 +83,15 @@ const onTileClicked = (clickEvent: { event: Event, id: string }) => {
   const entry = entries.value[id]
 
   event.preventDefault()
-  if (!!entry.variants) {
-    const newPath = !!variants.value
-      ? `${(variants.value || []).join(';')};${id}`
+  if (!!entry.entries || !!entry.embeddedEntries) {
+    const newPath = !!variants
+      ? `${(variants || []).join(';')};${id}`
       : id
     router.push({ name: routeConfig.name, query: { v: newPath }})
-    variants.value = newPath.split(';')
+    variants = newPath.split(';')
     onDisplayEntries()
-  } else if (!!variants.value) {
-    router.push({ name: `${routeConfig.name?.toString()}: View Entry`, query: { v: `${(variants.value || []).join(';')};${id}` }})
+  } else if (!!variants) {
+    router.push({ name: `${routeConfig.name?.toString()}: View Entry`, query: { v: `${(variants || []).join(';')};${id}` }})
   } else {
     router.push({ name: `${routeConfig.name?.toString()}: View Entry`, query: { v: `${id}` }})
   }
@@ -103,13 +103,13 @@ const onTileClicked = (clickEvent: { event: Event, id: string }) => {
  */
 const onNavigateBack = (event: Event) => {
   event.preventDefault()
-  let newPath: string | null = variants.value!.slice(0, variants.value!.length - 1).join(';')
+  let newPath: string | null = variants!.slice(0, variants!.length - 1).join(';')
   if (newPath === '') {
     router.push({ name: routeConfig.name})
-    variants.value = null
+    variants = null
   } else {
     router.push({ name: routeConfig.name, query: { v: newPath }})
-    variants.value = validateVariantPath(newPath?.split(';'))
+    variants = validateVariantPath(newPath?.split(';'))
   }
   onDisplayEntries()
 }

projects/frontend/src/views/gallery/gallery-utilities.ts

@@ -14,12 +14,12 @@ export const getTitleFromEntryOrId = (entry: GalleryEntry, id: string) => (
 )
 
 export const amendVariantsWithDefaults = (entry: GalleryEntry) => {
-  const variants = deepCopy(entry.variants)
-  if (!!variants) {
-    Object.keys(variants).forEach(id => _amendVariantWithDefaults(entry, variants[id]))
-  }
+  // const variants = deepCopy(entry.variants)
+  // if (!!variants) {
+  //   Object.keys(variants).forEach(id => _amendVariantWithDefaults(entry, variants[id]))
+  // }
 
-  return variants
+  // return variants
 }
 
 export const _amendVariantWithDefaults = (parent: GalleryEntryInheritedProperties, variant: GalleryEntryInheritedProperties) => {

projects/frontend/src/views/gallery/gallery-view.vue

@@ -8,7 +8,7 @@ import type {
 } from '@goldenwere/mackenzii-types'
 
 import { amendVariantsWithDefaults, getTitleFromEntryOrId } from './gallery-utilities'
-import { fetchAndParseYaml } from 'src/utilities/fetch'
+import { fetchAndParseYaml, fetchConfigByIdFromList, fetchNestedConfigs } from 'src/utilities/fetch'
 import { getCurrentRoute } from 'src/utilities/vuetils'
 import { useRouteStore } from 'src/routes'
 
@@ -42,12 +42,12 @@ const styles = computed(() => {
 })
 
 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 = amendVariantsWithDefaults(currentEntries[props.variants[i]])!
-  }
-  entry.value = currentEntries[props.variants[props.variants.length - 1]]
+  let listConfig = await fetchAndParseYaml<GalleryList>(routeConfig.config)
+  config.value = listConfig
+  let ids = props.variants
+  let viewId = ids.pop()!
+  let entries = await fetchNestedConfigs(listConfig, ids)
+  entry.value = await fetchConfigByIdFromList(entries, viewId)
   id.value = props.variants[props.variants.length - 1]
   title.value = getTitleFromEntryOrId(entry.value, id.value)
   document.title = routeSubConfig.fullTitle?.replace('$ENTRY', title.value)