get gallery functionality working again

- redefine gallery types
- re-implement gallery list, tile, and view
- no carousel yet for variants, but WithoutVariants works when url specified

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

@@ -7,16 +7,54 @@ export type GalleryEntryFormat =
   | 'image'
 
   /**
- * This describes additional information about a gallery entry
- * to display when listing the entry on the gallery-list page.
+   * Defines properties shared among the different versions of a {@link GalleryEntry}
    */
-export type GalleryEntry = {
+export type GalleryEntrySharedProperties = {
   /**
    * The kind of media the entry is
    */
   format: GalleryEntryFormat
+} & MediaEntry
+
 /**
-   * URL to the markdown document of the gallery entry
+ * This describes additional information about a gallery entry which does not contain any variants.
+ * It contains a URL to the media that the entry represents.
+ */
+export type GalleryEntryWithoutVariants = {
+  /**
+   * URL to the entry
    */
   url: string
-} & MediaEntry
+} & GalleryEntrySharedProperties
+
+/**
+ * This describes additional information about a gallery entry which contains variants.
+ * It contains a collection of ids which map to a gallery entry without variants.
+ */
+export type GalleryEntryWithVariants = {
+  /**
+   * The id of the entry from the {@link GalleryEntry variants} collection to display when the page first loads.
+   * If this is not defined, the first entry will be chosen instead.
+   */
+  defaultVariant?: string
+  /**
+   * Variants are a collection of alternate media to display for the entry.
+   * This changes based on the {@link GalleryEntryFormat format} of the entry:
+   * - For music, this is treated like a tracklist for an album,
+   *   with the {@link GalleryEntry.defaultVariant default} or selected variant being treated as the current track in the player
+   * - For all other media, this is put into a carousel,
+   *   where the {@link GalleryEntry.defaultVariant default} or selected variant is displayed in the main viewer
+   */
+  variants: Record<string, GalleryEntryWithoutVariants>
+} & GalleryEntrySharedProperties
+
+/**
+ * This describes the overall structure of a gallery entry
+ * to display when listing the entry on the gallery-list page.
+ * Note that a {@link GalleryEntryWithVariants} will take priority
+ * over a {@link GalleryEntryWithoutVariants}
+ * if the parsed config results in one with fields from both types.
+ */
+export type GalleryEntry =
+  | GalleryEntryWithoutVariants
+  | GalleryEntryWithVariants

projects/frontend/src/templates/link.pug

@@ -0,0 +1,11 @@
+mixin link
+  router-link.router-link.link(
+    v-if='isInternal'
+    :to='{ path: viewPath, query: { id: id } }'
+  )
+    block
+  a.link(
+    v-else
+    :href='href'
+  )
+    block

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

@@ -27,7 +27,6 @@ type BlogDisplayedEntries = ResolvedListEntries<BlogEntry & {
   isHidden?: boolean
 }>
 
-const entryIds = ref([] as string[])
 const entries = ref({} as BlogDisplayedEntries)
 const ready = ref(false)
 const currentRoute = getCurrentRoute()
@@ -57,7 +56,6 @@ onMounted(async () => {
   let listConfig = await fetchAndParseYaml<BlogList>(routeConfig.config)
   const list = await fetchConfigsFromList<BlogEntry>(listConfig)
   config.value = listConfig
-  entryIds.value = list.ids
   entries.value = list.entries
   document.title = routeConfig.fullTitle
   ready.value = true
@@ -71,15 +69,15 @@ onMounted(async () => {
       v-if='ready'
     )
       Transition(
-        v-for='id in entryIds'
+        v-for='(entry, id) in entries'
       )
         BlogTile(
-          v-if='!entries[id].isHidden || !config.removeFromView'
-          :class='{ hidden: entries[id].isHidden && !config.removeFromView }'
+          v-if='!entry.isHidden || !config.removeFromView'
+          :class='{ hidden: entry.isHidden && !config.removeFromView }'
           :id='id'
           :viewPath='viewPath'
           :isInternal='true'
-          :entry='entries[id]'
+          :entry='entry'
         )
   Transition
     FilterPanel(

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

@@ -17,7 +17,7 @@ const resolved = ref({} as BlogEntry)
 const thumbnail = computed(() => resolved.value.thumbnail)
 const description = computed(() => marked.parse(resolved.value.description || ''))
 const date = computed(() => !!resolved.value.date ? getFormattedDate(resolved.value.date) : null)
-const title = computed(() => marked.parse(resolved.value.title || ''))
+const title = computed(() => marked.parse(resolved.value.title || props.id))
 const href = computed(() => `${props.viewPath}?id=${props.id}`)
 
 onMounted(async () => {

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import type { 
-  BlogList,
+  ListWithEntries,
   BlogEntry,
   BlogListDefinition,
   RoutedWindow,
@@ -20,7 +20,7 @@ const emits = defineEmits<{
 }>()
 
 const ready = ref(false)
-const info = ref(null! as BlogEntry)
+const resolved = ref({} as BlogEntry)
 const content = ref('')
 const currentRoute = getCurrentRoute()
 const routeStore = useRouteStore()
@@ -28,15 +28,15 @@ const routeConfig = routeStore._routes[currentRoute.path.substring(0, currentRou
 const routeSubConfig = routeStore._routes[currentRoute.path]
 
 onMounted(async () => {
-  const config = await fetchAndParseYaml<BlogList>(routeConfig.config)
-  info.value = await fetchConfigByIdFromList(config, currentRoute.query.id as string)
-  const md = await fetchAndParseMarkdown(info.value.url)
+  const config = await fetchAndParseYaml<ListWithEntries<BlogEntry>>(routeConfig.config)
+    resolved.value = await fetchConfigByIdFromList(config, currentRoute.query.id as string)
+  const md = await fetchAndParseMarkdown(resolved.value.url)
   content.value = md
-  document.title = routeSubConfig.fullTitle?.replace('$ENTRY', info.value.title)
-  routeStore.setBreadcrumbs(currentRoute, info.value.title)
+  document.title = routeSubConfig.fullTitle?.replace('$ENTRY', resolved.value.title)
+  routeStore.setBreadcrumbs(currentRoute, resolved.value.title)
   window.routeConfig = {...routeConfig}
   window.routeSubConfig = {...routeSubConfig}
-  window.routeContentConfig = {...info.value}
+  window.routeContentConfig = {...resolved.value}
 
   ready.value = true
   emits('loaded')

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

@@ -1,11 +1,76 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import type {
+  GalleryEntry,
+  GalleryListDefinition,
+  ListWithTags,
+  ResolvedListEntries,
+} from '@goldenwere/mackenzii-types'
+import { fetchAndParseYaml, 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'
+
+type GalleryList = ListWithTags<GalleryEntry>
+
+/**
+ * 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 = ResolvedListEntries<GalleryEntry & {
+  /**
+   * specifies whether the entry is hidden by the tags selected by a visitor
+   */
+  isHidden?: boolean
+}>
+
+const entries = ref({} as GalleryDisplayedEntries)
 const ready = ref(false)
+const currentRoute = getCurrentRoute()
+const routeStore = useRouteStore()
+const routeConfig = routeStore._routes[currentRoute.path] as GalleryListDefinition
+const config = ref(null as GalleryList | null)
+const globalConfig = routeStore._globals
+const storageId = `${globalConfig.id}`
+const viewPath = computed(() => `${currentRoute.path}/view`)
+const hasWarnings = computed(async () => !!Object.values(entries.value).find(async other => !!(await other).warning))
+const hideWarnings = defineModel('hideWarnings', { type: Boolean })
+
+/**
+ * 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 = async (tagsToggled: string[]) => {
+  if (tagsToggled.length < 1) {
+    Object.keys(entries.value).forEach(async entryId => {
+      (await entries.value[entryId]).isHidden = false
+    })
+  } else {
+    Object.keys(entries.value).forEach(async entryId => {
+      (await entries.value[entryId]).isHidden = !(await entries.value[entryId]).tags?.some(own => tagsToggled.includes(own))
+    })
+  }
+}
+
+/**
+ * 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)
+}
 
 onMounted(async () => {
-  ready.value = false
-
+  let listConfig = await fetchAndParseYaml<GalleryList>(routeConfig.config)
+  const list = await fetchConfigsFromList<GalleryEntry>(listConfig)
+  config.value = listConfig
+  entries.value = list.entries
+  document.title = routeConfig.fullTitle
   ready.value = true
 })
 </script>
@@ -32,13 +97,12 @@ onMounted(async () => {
   Transition
     FilterPanel(
       v-if='ready && !!config.tags'
-      :ref='filterPanelRef'
       :tags='config.tags'
       @toggledTagsChanged='onToggledTagsChanged($event)'
     )
   Transition
     .gallery(
-      v-if='galleryReady'
+      v-if='ready'
     )
       Transition(
         v-for='(entry, id) in entries'
@@ -46,9 +110,10 @@ onMounted(async () => {
         GalleryTile(
           v-if='!entry.isHidden || !config.removeFromView'
           :class='{ hidden: entry.isHidden && !config.removeFromView }'
-          :entry='entry'
-          :id='id'
           :hideWarnings='hideWarnings'
-          @click='onTileClicked($event)'
+          :id='id'
+          :viewPath='viewPath'
+          :isInternal='true'
+          :entry='entry'
         )
 </template>

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

@@ -1,54 +1,80 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onMounted, ref, toRaw } from 'vue'
+import { marked } from 'marked'
 import type { 
   GalleryEntry,
+  GalleryEntryWithVariants,
+  GalleryEntryWithoutVariants,
 } from '@goldenwere/mackenzii-types'
 
-import { getTitleFromEntryOrId } from './gallery-utilities'
-
 const props = defineProps<{
-  entry: GalleryEntry,
   id: string,
+  viewPath: string,
   hideWarnings: boolean,
+  isInternal: boolean,
+  entry: Promise<GalleryEntry>
 }>()
 
 defineEmits<{
   (e: 'click', value: { event: Event, id: string }): void
 }>()
 
-const title = computed(() => getTitleFromEntryOrId(props.entry, props.id))
-const styles = computed(() => {
-  const stylesReturn: Record<string, string> = {}
-  if (!!props.entry.thumbnailBackground) {
-    stylesReturn.background = props.entry.thumbnailBackground
+const resolved = ref({} as GalleryEntry)
+const hasVariants = computed(() => !!(resolved.value as GalleryEntryWithVariants).variants)
+const description = computed(() => marked.parse(resolved.value.description || '') as string)
+const title = computed(() => marked.parse(resolved.value.title || props.id) as string)
+const warning = computed(() => resolved.value.warning)
+
+const thumbnail = computed(() => {
+  if (!!resolved.value.thumbnail) {
+    return toRaw(resolved.value.thumbnail.style)
+  } else if (hasVariants) {
+    const resolvedCast = resolved.value as GalleryEntryWithVariants
+    if (resolvedCast.defaultVariant) {
+      return {
+        'background-image': `url("${resolvedCast.variants[resolvedCast.defaultVariant].url}")`,
+        'background-position': 'center center',
       }
-  stylesReturn['object-position'] = props.entry.thumbnailPosition || 'center center'
-  return stylesReturn
+    } else {
+
+    }
+  } else {
+    return {
+      'background-image': `url("${(resolved.value as GalleryEntryWithoutVariants).url}")`,
+      'background-position': 'center center',
+    }
+  }
+})
+
+onMounted(async () => {
+  resolved.value = await props.entry
 })
 </script>
 
 <template lang="pug">
-.gallery-embed(
-  @click='$emit("click", { event: $event, id })'
+include /src/templates/link.pug
+.gallery-embed
+  .thumbnail-wrapper(
+    :class='{ warning: !!warning && !hideWarnings }'
   )
-  .image-wrapper(
-    :class='{ warning: !!entry.warning && !hideWarnings }'
-  )
-    img(
-      :src='entry.thumbnailUrl || entry.url'
-      :alt='entry.description || id'
-      :style='styles'
+    +link
+      .thumbnail(
+        :style='thumbnail'
       )
   .caption-wrapper
-    p.variants(
-      v-if='!!entry.variants'
-    ) has variants
-    p {{ title }}
+    p.title(
+      v-html='title'
+    )
     p.warning(
-      v-if='!!entry.warning'
-    ) {{ entry.warning }}
+      v-if='!!warning'
+    ) {{ warning }}
 </template>
 
 <style scoped lang="sass">
-
+.thumbnail-wrapper
+  .thumbnail
+    height: 100%
+    width: 100%
+    display: block
+    background-size: cover
 </style>

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

@@ -1,54 +0,0 @@
-import type {
-  GalleryEntry,
-  GalleryEntryInheritedProperties,
-} from '@goldenwere/mackenzii-types'
-
-import { deepCopy } from 'src/utilities/dom'
-
-export const getTitleFromEntryOrId = (entry: GalleryEntry, id: string) => (
-  entry.title !== undefined
-    ? entry.title === '' || entry.title === null
-      ? 'untitled'
-      : entry.title
-    : id
-)
-
-export const amendVariantsWithDefaults = (parent: GalleryEntryInheritedProperties, children: GalleryEntryInheritedProperties) => {
-  const _children = deepCopy(children)
-  if (!!_children) {
-    Object.keys(children).forEach(id => {
-      _children[id] = _amendVariantWithDefaults(parent, children[id])
-    })
-  }
-
-  return _children
-}
-
-export const _amendVariantWithDefaults = (parent: GalleryEntryInheritedProperties, variant: GalleryEntryInheritedProperties) => {
-  if (variant.title === undefined && (!!parent.title || parent.title === null || parent.title === '')) {
-    variant.title = parent.title
-  }
-  if (!variant.description && !!parent.description) {
-    variant.description = parent.description
-  }
-  if (variant.warning === undefined && !!parent.warning) {
-    variant.warning = parent.warning
-  }
-  if (!variant.fields && !!parent.fields) {
-    variant.fields = parent.fields
-  }
-  if (!variant.tags && !!parent.tags) {
-    variant.tags = parent.tags
-  }
-  if (!variant.thumbnailPosition && !!parent.thumbnailPosition) {
-    variant.thumbnailPosition = parent.thumbnailPosition
-  }
-  if (!variant.thumbnailBackground && !!parent.thumbnailBackground) {
-    variant.thumbnailBackground = parent.thumbnailBackground
-  }
-  if (!variant.background && !!parent.background) {
-    variant.background = parent.background
-  }
-
-  return variant
-}

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

@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
+import { marked } from 'marked'
 import type { 
   GalleryEntry,
-  GalleryList,
+  GalleryEntryWithVariants,
+  GalleryEntryWithoutVariants,
   GalleryListDefinition,
+  ListWithEntries,
   RoutedWindow,
 } from '@goldenwere/mackenzii-types'
 
-import { _amendVariantWithDefaults, getTitleFromEntryOrId } from './gallery-utilities'
-import { fetchAndParseYaml, fetchConfigByIdFromList, fetchNestedConfigs } from 'src/utilities/fetch'
+import { fetchAndParseYaml, fetchConfigByIdFromList } from 'src/utilities/fetch'
 import { getCurrentRoute } from 'src/utilities/vuetils'
 import { useRouteStore } from 'src/routes'
 
@@ -16,46 +18,39 @@ import EmbedableContent from 'src/components/shared/embedable-content.vue'
 
 declare const window: RoutedWindow
 
-const props = defineProps<{
-  variants: string[]
-}>()
-
 const emits = defineEmits<{
   (e: 'loaded'): void
 }>()
 
 const ready = ref(false)
-const config = ref(null! as GalleryList)
-const entry = ref(null! as GalleryEntry)
-const id = ref('')
+const resolved = ref({} as GalleryEntry)
 const currentRoute = getCurrentRoute()
 const routeStore = useRouteStore()
 const routeConfig = routeStore._routes[currentRoute.path.substring(0, currentRoute.path.length - 5)] as GalleryListDefinition
 const routeSubConfig = routeStore._routes[currentRoute.path]
-const title = ref('')
-const styles = computed(() => {
-  const stylesReturn: Record<string, string> = {}
-  if (!!entry.value.background) {
-    stylesReturn.background = entry.value.background
+const description = computed(() => marked.parse(resolved.value.description || '') as string)
+const title = computed(() => marked.parse(resolved.value.title || currentRoute.query.id!.toString()) as string)
+const url = computed(() => (resolved.value as GalleryEntryWithoutVariants).url)
+const hasVariants = computed(() => !!(resolved.value as GalleryEntryWithVariants).variants)
+const fields = computed(() => {
+  const toReturn = {} as Record<string, any>
+  if (!!resolved.value.date) {
+    toReturn.date = resolved.value.date
   }
-  return stylesReturn
+  if (!!resolved.value.warning) {
+    toReturn.warning = resolved.value.warning
+  }
+  return toReturn
 })
 
 onMounted(async () => {
-  let listConfig = await fetchAndParseYaml<GalleryList>(routeConfig.config)
-  config.value = listConfig
-  let ids = props.variants
-  let viewId = ids.pop()!
-  let entries = await fetchNestedConfigs(listConfig, ids, _amendVariantWithDefaults)
-  let finalEntry = await fetchConfigByIdFromList<GalleryEntry>(entries, viewId)
-  entry.value = _amendVariantWithDefaults(entries, finalEntry)
-  id.value = props.variants[props.variants.length - 1]
-  title.value = getTitleFromEntryOrId(entry.value, id.value)
-  document.title = routeSubConfig.fullTitle?.replace('$ENTRY', title.value)
-  routeStore.setBreadcrumbs(currentRoute, title.value)
+  let config = await fetchAndParseYaml<ListWithEntries<GalleryEntry>>(routeConfig.config)
+  resolved.value = await fetchConfigByIdFromList(config, currentRoute.query.id as string)
+  document.title = routeSubConfig.fullTitle?.replace('$ENTRY', resolved.value.title)
+  routeStore.setBreadcrumbs(currentRoute, resolved.value.title)
   window.routeConfig = {...routeConfig}
   window.routeSubConfig = {...routeSubConfig}
-  window.routeContentConfig = {...entry.value}
+  window.routeContentConfig = {...resolved.value}
 
   ready.value = true
   emits('loaded')
@@ -70,20 +65,21 @@ onMounted(async () => {
     )
       .view-outlet
         img(
-          :src='entry.url || entry.thumbnailUrl'
-          :style='styles'
+          :src='url'
         )
       .view-content
-        p {{ title }}
+        p(
+          v-html='title'
+        )
         dl.info
           .info-entry(
-            v-for='(field, key) in entry.fields'
+            v-for='(field, key) in fields'
             :class='key'
           )
             dt {{ key }}
             dd {{ field }}
         EmbedableContent(
-          :content='entry.description'
+          :content='description'
         )
 </template>