content warnings on individual gallery tiles

src/components/galleries/gallery-tile.vue

@@ -7,6 +7,7 @@ import { getTitleFromEntryOrId } from 'src/utilities/galleries'
 const props = defineProps<{
   entry: GalleryEntry,
   id: string,
+  hideWarnings: boolean,
 }>()
 
 defineEmits<{
@@ -20,13 +21,18 @@ const title = computed(() => getTitleFromEntryOrId(props.entry, props.id))
 .gallery-embed(
   @click='$emit("click", { event: $event, id })'
 )
-  .image-wrapper
+  .image-wrapper(
+    :class='{ warning: !!entry.warning && !hideWarnings }'
+  )
     img(
       :src='entry.thumbnailUrl || entry.url'
       :alt='entry.description || id'
     )
   .caption-wrapper
     p {{ title }}
+    p.warning(
+      v-if='!!entry.warning'
+    ) {{ entry.warning }}
 </template>
 
 <style scoped lang="sass">

src/types/galleries/galleryList.ts

@@ -6,6 +6,7 @@ export type GalleryEntry = {
   title: string | null | undefined
   url?: string
   variants?: GalleryEntries
+  warning?: string
 }
 
 export type GalleryEntries = { [idOrTitle: string]: GalleryEntry }

src/utilities/galleries.ts

@@ -25,6 +25,9 @@ export const _amendVariantWithDefaults = (parent: GalleryEntry, variant: Gallery
   if (!variant.description && !!parent.description) {
     variant.description = parent.description
   }
+  if (variant.warning === undefined && !!parent.warning) {
+    variant.warning = parent.warning
+  }
 
   return variant
 }

src/views/gallery-list.vue

@@ -27,6 +27,8 @@ const routeConfig = routeStore._routes[currentRoute.path] as GalleryListDefiniti
 const router = useRouter()
 const entries = ref({} as GalleryEntries)
 const variants = ref(validateVariants(props.variants))
+const hasWarnings = ref(false)
+const hideWarnings = defineModel('showWarnings', { type: Boolean })
 
 const onDisplayEntries = () => {
   let currentEntries = config.value.entries
@@ -36,6 +38,7 @@ const onDisplayEntries = () => {
     })
   }
   entries.value = currentEntries
+  hasWarnings.value = !!Object.values(entries.value).find(other => !!other.warning)
 }
 
 const onTileClicked = (clickEvent: { event: Event, id: string }) => {
@@ -78,6 +81,7 @@ onMounted(async () => {
 
 <template lang="pug">
 .template.gallery-list
+  
   .navigation(
     v-if='ready'
   )
@@ -85,6 +89,18 @@ onMounted(async () => {
       v-if='variants?.length > 0'
       @click='onNavigateBack($event)'
     ) Back
+    .input.labeled-checkbox(
+      v-if='hasWarnings'
+    )
+      label(
+        for='warning-toggle-checkbox'
+      ) Hide Warnings
+      input(
+        type='checkbox'
+        name='warning-toggle-checkbox'
+        id='warning-toggle-checkbox'
+        v-model='hideWarnings'
+      )
   .gallery(
     v-if='ready'
   )
@@ -92,6 +108,7 @@ onMounted(async () => {
       v-for='(entry, id) in entries'
       :entry='entry'
       :id='id'
+      :hideWarnings='hideWarnings'
       @click='onTileClicked($event)'
     )
 </template>