update frontend to match new variant fields

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

@@ -21,6 +21,12 @@ export type GalleryEntrySharedProperties = {
  * It contains a URL to the media that the entry represents.
  */
 export type GalleryEntryWithoutVariants = {
+  alternativeText?: string
+  caption?: string
+  /**
+   * URL to the entry's thumbnail
+   */
+  thumbnailUrl?: string
   /**
    * URL to the entry
    */

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

@@ -86,20 +86,11 @@ export type MediaEntry = {
    * 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
+  warnings?: string
 }

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

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, toRaw } from 'vue'
+import {
+  computed,
+  onMounted,
+  ref,
+} from 'vue'
 import { marked } from 'marked'
 import type {
-  GalleryEntry,
   GalleryEntryWithVariants,
   GalleryEntryWithoutVariants,
 } from '@goldenwere/mackenzii-types'
@@ -12,42 +15,24 @@ const props = defineProps<{
   viewPath: string,
   hideWarnings: boolean,
   isInternal: boolean,
-  entry: Promise<GalleryEntry>
+  entry: Promise<GalleryEntryWithVariants>
 }>()
 
 defineEmits<{
   (e: 'click', value: { event: Event, id: string }): void
 }>()
 
-const resolved = ref({} as GalleryEntry)
-const hasVariants = computed(() => !!(resolved.value as GalleryEntryWithVariants).variants)
+const resolved = ref({} as GalleryEntryWithVariants)
+const defaultVariant = ref({} as GalleryEntryWithoutVariants)
 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',
-      }
-    } else {
-
-    }
-  } else {
-    return {
-      'background-image': `url("${(resolved.value as GalleryEntryWithoutVariants).url}")`,
-      'background-position': 'center center',
-    }
-  }
-})
+const warning = computed(() => resolved.value.warnings)
+const altText = computed(() => defaultVariant.value.alternativeText)
+const thumbnail = computed(() => defaultVariant.value.thumbnailUrl)
 
 onMounted(async () => {
   resolved.value = await props.entry
+  defaultVariant.value = resolved.value.variants[resolved.value.defaultVariant || 0]
 })
 </script>
 
@@ -58,8 +43,9 @@ include /src/templates/link.pug
     :class='{ warning: !!warning && !hideWarnings }'
   )
     +link
-      .thumbnail(
-        :style='thumbnail'
+      img.thumbnail(
+        :src='thumbnail'
+        :alt='altText'
       )
   .caption-wrapper
     p.title(

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

@@ -37,8 +37,8 @@ const fields = computed(() => {
   if (!!resolved.value.date) {
     toReturn.date = resolved.value.date
   }
-  if (!!resolved.value.warning) {
-    toReturn.warning = resolved.value.warning
+  if (!!resolved.value.warnings) {
+    toReturn.warning = resolved.value.warnings
   }
   return toReturn
 })
@@ -112,7 +112,7 @@ onMounted(async () => {
             img(
               v-for='(variant, id) in variants'
               :class='{ active: id === currentSelection }'
-              :src='variant.url'
+              :src='variant.thumbnailUrl || variant.url'
               :title='variant.title || id'
               @click='onVariantSelected($event, id)'
             )

projects/frontend/src/views/shared/media-list.vue

@@ -90,7 +90,7 @@ onMounted(async () => {
   entries.value = list.entries
   document.title = routeConfig.fullTitle
   ready.value = true
-  hasWarnings.value = !!(await Promise.all(Object.values(list.entries))).find(other => !!other.warning)
+  hasWarnings.value = !!(await Promise.all(Object.values(list.entries))).find(other => !!other.warnings)
 })
 </script>