Update GalleryCarousel

src/components/Gallery/GalleryCarousel/GalleryCarousel.global.vue

@@ -0,0 +1,128 @@
+<template>
+  <div
+    class="overflow-hidden w-full relative"
+    :style="containerStyle"
+  >
+    <Transition name="fade">
+      <img
+        v-if="currentDepiction.image"
+        class="object-cover overflow-hidden h-full w-full absolute top-0 my-0"
+        :key="currentDepiction.image"
+        :src="currentDepiction.image"
+        :alt="currentDepiction.label"
+      />
+    </Transition>
+    <div class="bg-black bg-opacity-25 absolute h-full w-full">
+      <slot />
+    </div>
+    <span
+      v-if="currentDepiction.objectId"
+      class="z-10 text-white text-sm drop-shadow absolute bottom-2 right-4"
+    >
+      <RouterLink
+        v-if="isOtu"
+        class="text-white decoration-transparent"
+        :to="{
+          name: 'otus-id',
+          params: { id: currentDepiction.objectId }
+        }"
+        v-html="label"
+      />
+      <span
+        v-else
+        v-html="label"
+      />
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, computed, onBeforeUnmount } from 'vue'
+import { makeAPIRequest } from '@/utils'
+
+const props = defineProps({
+  depictionId: {
+    type: Array,
+    default: () => []
+  },
+
+  interval: {
+    type: Number,
+    default: 10000
+  },
+
+  height: {
+    type: String,
+    default: '550px'
+  }
+})
+
+const depictions = ref([])
+const currentIndex = ref(0)
+
+const containerStyle = computed(() => ({ height: props.height }))
+const currentDepiction = computed(() => depictions.value[currentIndex.value] || {})
+const isOtu = computed(() => currentDepiction.value.objectType === 'Otu')
+
+const label = computed(() =>
+  [
+    currentDepiction.value.objectLabel,
+    currentDepiction.value.attribution
+  ].join(' ')
+)
+let timeout = null
+
+function updateIndex() {
+  currentIndex.value = (currentIndex.value + 1) % depictions.value.length
+}
+
+function makeGalleryImage(depiction) {
+  return {
+    objectId: depiction.depiction_object_id,
+    objectType: depiction.depiction_object_type,
+    objectLabel: depiction.depiction_object.label,
+    label: depiction.label,
+    image: depiction.image.original,
+    attribution: depiction.attribution?.label || ''
+  }
+}
+
+onMounted(() => {
+  if (props.depictionId.length) {
+    makeAPIRequest
+      .get('/depictions/gallery', {
+        params: { depiction_id: props.depictionId }
+      })
+      .then(({ data }) => {
+        depictions.value = data.map(makeGalleryImage)
+
+        if (props.interval) {
+          timeout = setInterval(updateIndex, props.interval)
+        } else {
+          currentIndex.value = Math.floor(Math.random() * data.length)
+        }
+      })
+  }
+})
+
+onBeforeUnmount(() => {
+  clearInterval(timeout)
+})
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 1s ease-in-out;
+}
+.fade-enter-from {
+  opacity: 0;
+}
+.fade-enter-to {
+  opacity: 1;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

src/components/Markdown/MarkdownLayout.global.vue

@@ -23,7 +23,8 @@ const props = defineProps({
 })
 
 const LAYOUT_CLASSES = {
-  fullwidth: 'p-4 sm:px-0 prose dark:prose-invert max-w-none'
+  fullwidth: 'p-4 sm:px-0 prose dark:prose-invert max-w-none',
+  blank: 'sm:px-0 prose dark:prose-invert max-w-none'
 }
 
 const DEFAULT_LAYOUT =