begin refactoring lists

- async fetching of list entries is now done when the tile is mounted for blog-lists
- started removing recursion from galleries

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

@@ -1,45 +1,12 @@
-import type { DateRange } from '../dateRange'
+import type { MediaEntry } from './shared'
-import type { EntryTagCollection } from '../entryTag'
-import type { ListWithEntries } from './shared'
 
 /**
- * This describes aditional information about a blog entry
+ * This describes additional information about a blog entry
  * to display when listing the entry on the blog-list page.
- * At minimum, the title should be specified.
  */
 export type BlogEntry = {
-  /**
-   * Specifies the date of the blog entry
-   */
-  date?: DateRange | string | number
-  /**[Supports Markdown]
-   * Information to summarize an entry
-   */
-  description?: string
-  /**
-   * Tags that correspond to filters on the blog-list page if defined
-   */
-  tags?: string[]
-  /**[Supports Markdown]
-   * The title of the blog entry
-   */
-  title: string
-  /**
-   * Information regarding the thumbnail
-   */
-  thumbnail?: {
-    /**
-     * Sets the inline-styles for the thumbnail
-     */
-    style: CSSStyleDeclaration
-  }
   /**
    * URL to the markdown document of the blog entry
    */
   url: string
-}
+} & MediaEntry
-
-export type BlogList = {
-  tags?: EntryTagCollection
-  removeFromView?: boolean
-} & ListWithEntries<BlogEntry>

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

@@ -1,83 +1,22 @@
-import type { EntryTagCollection } from '../entryTag'
+import type { MediaEntry } from './shared'
-import type { ListWithEntries } from './shared'
 
 /**
- * A partial definition of a {@link GalleryEntry}
+ * Defines the supported formats for a gallery entry
- * which defines the properties of an entry
- * that can be passed down from a top-level entry down to its variants
  */
-export type GalleryEntryInheritedProperties = {
+export type GalleryEntryFormat = 
-  /**
+  | 'image'
-   * css background applied to the image (useful for transparent images)
-   */
-  background?: string
-  /**
-   * [SUPPORTS MARKDOWN] a place for the siteowner to describe the entry
-   */
-  description?: string
-  /**
-   * a key-value pair set of general-purpose fields to additionally describe the entry
-   * @example entry.fields = {
-   *   'date': '1960/01/01',
-   *   'rating': 'general',
-   * }
-   */
-  fields?: Record<string, string>
-  /**
-   * array of tag-ids that apply to the art;
-   * this is used to allow a visitor to filter out entries of a specific tag
-   * @see {@link GalleryList.tags}
-   */
-  tags: string[]
-  /**
-   * css background applied to the thumbnail (useful for transparent images)
-   */
-  thumbnailBackground?: string
-  /**
-   * the position of the thumbnail;
-   * this will be applied as css `object-position`
-   */
-  thumbnailPosition?: string
-  /**
-   * the title of the entry
-   */
-  title: string | null | undefined
-  /**
-   * any content warnings that apply to the entry,
-   * which will be used to apply the `.warning` classname
-   * to the DOM of a gallery tile
-   * and will be displayed with the tile
-   */
-  warning?: string
-} & ListWithEntries<GalleryEntryInheritedProperties>
 
 /**
- * Defines an entry in a gallery that can be displayed in a tiled manner
+ * This describes additional information about a gallery entry
- * and can be clicked by a visitor to display its variants or the entry itself if there are none
+ * to display when listing the entry on the gallery-list page.
  */
-export type GalleryEntry = GalleryEntryInheritedProperties & {
+export type GalleryEntry = {
   /**
-   * the url to the thumbnail to show for the entry in the gallery tile
+   * The kind of media the entry is
    */
-  thumbnailUrl?: string
+  format: GalleryEntryFormat
   /**
-   * the url to the entry itself
+   * URL to the markdown document of the gallery entry
    */
-  url?: string
+  url: string
-}
+} & MediaEntry
-
-/**
- * Defines the model of the `GalleryList` template
- */
-export type GalleryList = {
-  /**
-   * the tags to use for filtering entries
-   */
-  tags?: EntryTagCollection
-  /**
-   * whether or not tag filtering removes entries completely from view;
-   * if false, they will apply a class selector instead
-   * in order to manually style (CSS filtering/opacity/etc.)
-   */
-  removeFromView?: boolean
-} & ListWithEntries<GalleryEntry>

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

@@ -1,3 +1,6 @@
+import type { DateRange } from '../dateRange'
+import type { EntryTagCollection } from '../entryTag'
+
 /**
  * Defines entries that are already fetched or are embedded directly in the list.
  * Stored in key-value format where the key is the id of the entry,
@@ -32,9 +35,61 @@ export type ListWithEntries<T> = {
   embeddedEntries?: ListEntries<T>
 }
 
-export type ListEntriesWithNestedEntries<T> = { [key: string]: T & ListWithEntries<T> }
+/**
+ * The resolved instance of a list, which will flatten
+ */
+export type ResolvedListEntries<T> = ListEntries<Promise<T>>
 
-export type ListWithNestedEntries<T> = {
+/**
-  entries?: ListRemoteEntries
+ * Defines a list that supports tagging the entries
-  embeddedEntries?: ListEntriesWithNestedEntries<T>
+ */
+export type ListWithTags<T> = {
+  /**
+   * the tags to use for filtering entries
+   */
+  tags?: EntryTagCollection
+  /**
+   * whether or not tag filtering removes entries completely from view;
+   * if false, they will apply a class selector instead
+   * in order to manually style (CSS filtering/opacity/etc.)
+   */
+  removeFromView?: boolean
+} & ListWithEntries<T>
+
+/**
+ * Defines an entry with common media-related fields
+ */
+export type MediaEntry = {
+  /**
+   * Specifies the date of the entry
+   */
+  date?: DateRange | string | number
+  /**[Supports Markdown]
+   * Information to summarize an entry
+   */
+  description?: string
+  /**
+   * Tags that correspond to filters on the list page if defined
+   */
+  tags?: string[]
+  /**[Supports Markdown]
+   * The title of the entry
+   */
+  title: string
+  /**
+   * Information regarding the thumbnail
+   */
+  thumbnail?: {
+    /**
+     * Sets the inline-styles for the thumbnail
+     */
+    style: CSSStyleDeclaration
+  }
+  /**
+   * any content warnings that apply to the entry,
+   * which will be used to apply the `.warning` classname
+   * to the DOM of a tile
+   * and will be displayed with the tile
+   */
+  warning?: string
 }

projects/frontend/src/utilities/fetch.ts

@@ -3,9 +3,8 @@ import { marked } from 'marked'
 import yaml from 'js-yaml'
 import type {
   ListEntries,
-  ListEntriesWithNestedEntries,
   ListWithEntries,
-  ListWithNestedEntries,
+  ResolvedListEntries,
 } from '@goldenwere/mackenzii-types'
 import { useRouteStore } from 'src/routes'
 
@@ -151,29 +150,24 @@ 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> | ListWithNestedEntries<T>): Promise<{
+export const fetchConfigsFromList = async <T>(list: ListWithEntries<T>): Promise<{
   ids: string[]
-  entries: ListEntries<T> | ListEntriesWithNestedEntries<T>
+  entries: ResolvedListEntries<T>
 }> => {
   return new Promise(async (resolve, reject) => {
     let ids: string[] = []
-    let entries: ListEntries<T> = {}
+    let entries: ResolvedListEntries<T> = {}
     if (!!list.entries) {
       ids = ids.concat(Object.keys(list.entries))
-      const allEntries = await Promise.all(ids.map(async id => ({
+      ids.forEach(id => {
-        entry: await fetchAndParseYaml<T>((list.entries!)[id]),
+        entries[id] = fetchAndParseYaml<T>((list.entries!)[id])
-        id,
-      })))
-      allEntries.forEach((entry) => {
-        entries[entry.id] = entry.entry
       })
     }
     if (!!list.embeddedEntries) {
       ids = ids.concat(Object.keys(list.embeddedEntries))
-      entries = {
+      ids.forEach(id => {
-        ...entries,
+        entries[id] = new Promise((resolve) => resolve(list.embeddedEntries![id]))
-        ...list.embeddedEntries,
+      })
-      }
     }
 
     resolve({
@@ -189,7 +183,7 @@ export const fetchConfigsFromList = async <T>(list: ListWithEntries<T> | ListWit
  * @param id the id to query for
  * @returns the resolved config
  */
-export const fetchConfigByIdFromList = async <T>(list: ListWithEntries<T> | ListWithNestedEntries<T>, id: string): Promise<T> => {
+export const fetchConfigByIdFromList = async <T>(list: ListWithEntries<T>, id: string): Promise<T> => {
   return new Promise(async (resolve, reject) => {
     if (!!list.embeddedEntries && list.embeddedEntries[id]) {
       resolve(list.embeddedEntries[id])
@@ -200,47 +194,6 @@ export const fetchConfigByIdFromList = async <T>(list: ListWithEntries<T> | List
   })
 }
 
-export const fetchNestedConfigs = async <T>(
-  list: ListWithNestedEntries<T>,
-  idsByDepth: string[],
-  proccessCallback?: (parent: ListEntriesWithNestedEntries<T>, child: ListEntriesWithNestedEntries<T>) => ListEntriesWithNestedEntries<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) {
-      let next = await fetchNestedConfigs(current as any, idsToLoop) as ListEntriesWithNestedEntries<T>
-      if (!!proccessCallback) {
-        next = proccessCallback(current, next)
-      }
-      resolve(next)
-    } else {
-      resolve(current)
-    }
-  })
-}
-
 /**
  * Fetches content type from an image
  * @param path the path of the file to check

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

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import type {
-  BlogList,
   BlogEntry,
   BlogListDefinition,
+  ListWithTags,
+  ResolvedListEntries,
 } from '@goldenwere/mackenzii-types'
 
 import { fetchAndParseYaml, fetchConfigsFromList } from 'src/utilities/fetch'
@@ -13,16 +14,18 @@ import { useRouteStore } from 'src/routes'
 import FilterPanel from 'src/components/shared/filter-panel.vue'
 import BlogTile from './blog-tile.vue'
 
+type BlogList = ListWithTags<BlogEntry>
+
 /**
  * A wrapper around {@link GalleryEntries} for the app's use only which adds additional fields
  * in order for the app to effectively display the entries.
  */
- type BlogDisplayedEntries = { [idOrTitle: string]: BlogEntry & {
+type BlogDisplayedEntries = ResolvedListEntries<BlogEntry & {
   /**
    * specifies whether the entry is hidden by the tags selected by a visitor
    */
   isHidden?: boolean
-}}
+}>
 
 const entryIds = ref([] as string[])
 const entries = ref({} as BlogDisplayedEntries)
@@ -38,14 +41,14 @@ const viewPath = computed(() => `${currentRoute.path}/view`)
  * updates the visibility state of the current entries
  * @param tagsToggled: the tags currently toggled in the filter panel
  */
- const onToggledTagsChanged = (tagsToggled: string[]) => {
+const onToggledTagsChanged = async (tagsToggled: string[]) => {
   if (tagsToggled.length < 1) {
-    Object.keys(entries.value).forEach(entryId => {
+    Object.keys(entries.value).forEach(async entryId => {
-      entries.value[entryId].isHidden = false
+      (await entries.value[entryId]).isHidden = false
     })
   } else {
-    Object.keys(entries.value).forEach(entryId => {
+    Object.keys(entries.value).forEach(async entryId => {
-      entries.value[entryId].isHidden = !entries.value[entryId].tags?.some(own => tagsToggled.includes(own))
+      (await entries.value[entryId]).isHidden = !(await entries.value[entryId]).tags?.some(own => tagsToggled.includes(own))
     })
   }
 }
@@ -72,11 +75,11 @@ onMounted(async () => {
       )
         BlogTile(
           v-if='!entries[id].isHidden || !config.removeFromView'
-          v-bind='entries[id]'
           :class='{ hidden: entries[id].isHidden && !config.removeFromView }'
           :id='id'
           :viewPath='viewPath'
           :isInternal='true'
+          :entry='entries[id]'
         )
   Transition
     FilterPanel(

projects/frontend/src/views/blog/blog-tile.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { marked } from 'marked'
 import { getFormattedDate } from 'src/utilities/parse'
 import type { 
@@ -10,13 +10,19 @@ const props = defineProps<{
   id: string,
   viewPath: string,
   isInternal: boolean,
-} & BlogEntry>()
+  entry: Promise<BlogEntry>
+}>()
 
-const { thumbnail } = props
+const resolved = ref({} as BlogEntry)
-const description = computed(() => marked.parse(props.description || ''))
+const thumbnail = computed(() => resolved.value.thumbnail)
-const date = computed(() => !!props.date ? getFormattedDate(props.date) : null)
+const description = computed(() => marked.parse(resolved.value.description || ''))
-const title = computed(() => marked.parse(props.title || ''))
+const date = computed(() => !!resolved.value.date ? getFormattedDate(resolved.value.date) : null)
+const title = computed(() => marked.parse(resolved.value.title || ''))
 const href = computed(() => `${props.viewPath}?id=${props.id}`)
+
+onMounted(async () => {
+  resolved.value = await props.entry
+})
 </script>
 
 <template lang="pug">

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

@@ -1,166 +1,11 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import type {
-  GalleryEntry,
-  GalleryList,
-  GalleryListDefinition,
-} from '@goldenwere/mackenzii-types'
-import { type RouteRecordRaw, useRouter } from 'vue-router'
-
-import { amendVariantsWithDefaults, _amendVariantWithDefaults } from './gallery-utilities'
-import { fetchAndParseYaml, fetchNestedConfigs, fetchConfigsFromList, storage } from 'src/utilities/fetch'
-import { getCurrentRoute } from 'src/utilities/vuetils'
-import { useRouteStore } from 'src/routes'
-
-import FilterPanel from 'src/components/shared/filter-panel.vue'
-import GalleryTile from './gallery-tile.vue'
-
-/**
- * A wrapper around {@link GalleryEntries} for the app's use only which adds additional fields
- * in order for the app to effectively display the entries.
- */
-type GalleryDisplayedEntries = { [idOrTitle: string]: GalleryEntry & {
-  /**
-   * specifies whether the entry is hidden by the tags selected by a visitor
-   */
-  isHidden?: boolean
-}}
-
-const props = defineProps<{
-  variants: string[]
-}>()
-
-/**
- * Wraps around the path of variant ids to ensure there are not any issues
- * @param variants the array of variant ids
- */
-const validateVariantPath = (variants?: string[]) => {
-  return !!variants && variants[0] !== '' ? variants : null
-}
-
-const currentRoute = getCurrentRoute()
-const routeStore = useRouteStore()
-const routeConfig = routeStore._routes[currentRoute.path] as GalleryListDefinition & RouteRecordRaw
-const globalConfig = routeStore._globals
-const storageId = `${globalConfig.id}`
-const router = useRouter()
-let config: GalleryList = null!
 
 const ready = ref(false)
-const galleryReady = ref(false)
-const filterPanelRef = ref(null as typeof FilterPanel | null)
-const entries = ref({} as GalleryDisplayedEntries)
-let variants = validateVariantPath(props.variants)
-const hasWarnings = ref(false)
-const hideWarnings = defineModel('showWarnings', { type: Boolean })
-const tagsByCategory = ref({} as { [category: string]: Record<string, string> })
-
-/**
- * Handles updating the displayed entries in the list
- */
-const onDisplayEntries = async () => {
-  resetTags()
-  galleryReady.value = false
-  if (!!variants) {
-    const value = await fetchNestedConfigs<GalleryEntry>(config, variants, _amendVariantWithDefaults)
-    const children = (await fetchConfigsFromList(value)).entries
-    entries.value = amendVariantsWithDefaults(value, children)
-  } else {
-    const value = await fetchConfigsFromList<GalleryEntry>(config)
-    entries.value = value.entries
-  }
-  hasWarnings.value = !!Object.values(entries.value).find(other => !!other.warning)
-  setTimeout(() => galleryReady.value = true)
-}
-
-/**
- * Handler for the tile clicked event;
- * handles navigating to the gallery-view route to display the entry selected
- * @param clickEvent.event the event context which invoked this handler
- * @param clickEvent.id the id of the tile that was clicked
- */
-const onTileClicked = (clickEvent: { event: Event, id: string }) => {
-  const { event, id } = clickEvent
-  const entry = entries.value[id]
-
-  event.preventDefault()
-  if (!!entry.entries || !!entry.embeddedEntries) {
-    const newPath = !!variants
-      ? `${(variants || []).join(';')};${id}`
-      : id
-    router.push({ name: routeConfig.name, query: { v: newPath }})
-    variants = newPath.split(';')
-    onDisplayEntries()
-  } 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}` }})
-  }
-}
-
-/**
- * Handler for the back button which appears when navigated into entry variants;
- * navigates upward one level from the currently displayed variants
- */
-const onNavigateBack = (event: Event) => {
-  event.preventDefault()
-  let newPath: string | null = variants!.slice(0, variants!.length - 1).join(';')
-  if (newPath === '') {
-    router.push({ name: routeConfig.name})
-    variants = null
-  } else {
-    router.push({ name: routeConfig.name, query: { v: newPath }})
-    variants = validateVariantPath(newPath?.split(';'))
-  }
-  onDisplayEntries()
-}
-
-/**
- * Handler for the toggle for hiding/showing warnings;
- * updates localstorage with the state of the checkbox
- * so that it is saved between page loads
- * @param event the event context which invoked this handler
- */
-const onHideWarningsToggled = (event: Event) => {
-  storage.write(`${storageId}::hideWarnings`, (event.target as HTMLInputElement).checked)
-}
-
-/**
- * Handler for a tag being selected;
- * updates the visibility state of the current entries
- * @param tagsToggled: the tags currently toggled in the filter panel
- */
- const onToggledTagsChanged = (tagsToggled: string[]) => {
-  if (tagsToggled.length < 1) {
-    Object.keys(entries.value).forEach(entryId => {
-      entries.value[entryId].isHidden = false
-    })
-  } else {
-    Object.keys(entries.value).forEach(entryId => {
-      entries.value[entryId].isHidden = !entries.value[entryId].tags?.some((own: string) => tagsToggled.includes(own))
-    })
-  }
-}
-
-/**
- * Resets the `hidden` state of entries
- * and the `tagsToggled` array
- */
-const resetTags = () => {
-  if (!!filterPanelRef.value) {
-    filterPanelRef.value.resetTags()
-  }
-  Object.keys(entries.value).forEach(entryId => {
-    entries.value[entryId].isHidden = false
-  })
-}
 
 onMounted(async () => {
   ready.value = false
-  config = await fetchAndParseYaml<GalleryList>(routeConfig.config)
+
-  document.title = routeConfig.fullTitle
-  hideWarnings.value = storage.read(`${storageId}::hideWarnings`) || false
-  onDisplayEntries()
   ready.value = true
 })
 </script>
@@ -171,11 +16,6 @@ onMounted(async () => {
     .navigation(
       v-if='ready'
     )
-      button.input(
-        v-if='variants?.length > 0'
-        @click='onNavigateBack($event)'
-      )
-        span Back
       .input.labeled-checkbox(
         v-if='hasWarnings'
       )
@@ -191,7 +31,7 @@ onMounted(async () => {
         )
   Transition
     FilterPanel(
-      v-if='galleryReady && !!config.tags'
+      v-if='ready && !!config.tags'
       :ref='filterPanelRef'
       :tags='config.tags'
       @toggledTagsChanged='onToggledTagsChanged($event)'