From d78ace1704b0a557fd555664ddd382db6236fba7 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Fri, 1 Sep 2023 13:16:24 -0300
Subject: [PATCH 1/5] Update layout settings

---
 .gitignore                                   |  2 +-
 src/modules/otus/constants/overviewLayout.js | 11 ++++-------
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/.gitignore b/.gitignore
index 4a4becae..52fcb2ce 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,7 +5,7 @@ dist-ssr
 config
 pages
 components
-taxa
+panels
 public
 README.md
 *.local
diff --git a/src/modules/otus/constants/overviewLayout.js b/src/modules/otus/constants/overviewLayout.js
index 36e0abce..95a03997 100644
--- a/src/modules/otus/constants/overviewLayout.js
+++ b/src/modules/otus/constants/overviewLayout.js
@@ -1,11 +1,8 @@
 const panelEntries = Object.values(
-  import.meta.glob(
-    ['../components/Panel/*/main.js', '#/taxa/overview/panels/*/main.js'],
-    {
-      eager: true,
-      import: 'default'
-    }
-  )
+  import.meta.glob(['../components/Panel/*/main.js', '#/panels/*/main.js'], {
+    eager: true,
+    import: 'default'
+  })
 )
 
 const { taxa_page_overview } = __APP_ENV__

From 22587b75e4f5a0b275ed1cce226b2f5d611dc1a9 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Mon, 4 Sep 2023 16:18:08 -0300
Subject: [PATCH 2/5] Add markdown layout component

---
 .gitignore                                    |  8 ++---
 .../Markdown/MarkdownLayout.global.vue        | 35 +++++++++++++++++++
 vite.config.js                                |  3 +-
 3 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Markdown/MarkdownLayout.global.vue

diff --git a/.gitignore b/.gitignore
index 52fcb2ce..30e63a61 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,10 +2,10 @@ node_modules
 .DS_Store
 dist
 dist-ssr
-config
-pages
-components
-panels
+/config
+/pages
+/components
+/panels
 public
 README.md
 *.local
diff --git a/src/components/Markdown/MarkdownLayout.global.vue b/src/components/Markdown/MarkdownLayout.global.vue
new file mode 100644
index 00000000..72014a48
--- /dev/null
+++ b/src/components/Markdown/MarkdownLayout.global.vue
@@ -0,0 +1,35 @@
+<template>
+  <component
+    :is="tag"
+    :class="layoutClasses"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  tag: {
+    type: String,
+    default: 'div'
+  },
+
+  frontmatter: {
+    type: Object,
+    required: true
+  }
+})
+
+const LAYOUT_CLASSES = {
+  fullwidth: 'p-4 sm:px-0 prose dark:prose-invert max-w-none'
+}
+
+const DEFAULT_LAYOUT =
+  '!container mx-auto p-4 sm:px-0 prose dark:prose-invert box-border'
+
+const layoutClasses = computed(
+  () => LAYOUT_CLASSES[props.frontmatter.layout] || DEFAULT_LAYOUT
+)
+</script>
diff --git a/vite.config.js b/vite.config.js
index 789f04f7..e7348197 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -32,8 +32,7 @@ export default () => {
       }),
 
       Markdown({
-        wrapperClasses:
-          '!container mx-auto p-4 sm:pl-0 sm:pr-0 prose dark:prose-invert box-border',
+        wrapperComponent: 'markdown-layout',
         markdownItSetup(md) {
           md.use(markdownAnchor)
           md.use(variableReplacementPlugin, {

From 7a7d917a55259dd9a3bef8ed7bb01e700a3abf62 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Mon, 4 Sep 2023 18:13:31 -0300
Subject: [PATCH 3/5] Add gallery slider component

---
 .../Gallery/GallerySlider/GallerySlider.vue   | 77 +++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 src/components/Gallery/GallerySlider/GallerySlider.vue

diff --git a/src/components/Gallery/GallerySlider/GallerySlider.vue b/src/components/Gallery/GallerySlider/GallerySlider.vue
new file mode 100644
index 00000000..7132ba8f
--- /dev/null
+++ b/src/components/Gallery/GallerySlider/GallerySlider.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="overflow-hidden h-[550px] w-full">
+    <img
+      class="object-cover overflow-hidden h-[550px] w-full absolute"
+      :key="currentDepiction.src"
+      :src="currentDepiction.src"
+      alt="Dichroplus maculipennis"
+    />
+    <div class="bg-black bg-opacity-25 absolute h-full w-full top-0"></div>
+    <div class="absolute bottom-2 right-4">
+      <span class="z-10 text-white text-sm drop-shadow">
+        <RouterLink
+          v-if="currentDepiction.otuId"
+          class="text-white"
+          :to="{ name: 'otus-id', params: { id: currentDepiction.otuId } }"
+        >
+          {{ currentDepiction.label }} © {{ currentDepiction.copyright }}
+        </RouterLink>
+      </span>
+    </div>
+  </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: 5000
+  }
+})
+
+const depictions = ref([])
+const currentIndex = ref(0)
+const currentDepiction = computed(() => depictions[currentIndex.value] || {})
+let timeout = null
+
+function updateIndex() {
+  currentIndex.value = Math.round(Math.random() * depictions.length)
+}
+
+onMounted(() => {
+  makeAPIRequest.get(`/url`).then(({ data }) => {
+    depictions.value = data
+
+    timeout = setInterval(updateIndex, props.interval)
+  })
+})
+
+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>

From 85030a19d8dd29514fdd1240af8dbf5dc3100157 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Mon, 4 Sep 2023 20:01:53 -0300
Subject: [PATCH 4/5] Fix render function for fake components

---
 src/ssr/utils/registerFakeClientComponents.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ssr/utils/registerFakeClientComponents.js b/src/ssr/utils/registerFakeClientComponents.js
index 815f8b01..c7c73bfa 100644
--- a/src/ssr/utils/registerFakeClientComponents.js
+++ b/src/ssr/utils/registerFakeClientComponents.js
@@ -5,7 +5,7 @@ export function registerFakeClientComponents(app) {
   const filePaths = glob.sync('src/components/**/*.client.vue')
   const vueComponent = defineComponent({
     setup() {
-      return h('div')
+      return () => h('div')
     }
   })
 

From 19a7f39855c367489c147425f7f6971b232da6b9 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Thu, 7 Sep 2023 17:24:11 -0300
Subject: [PATCH 5/5] Add error message when loading images

---
 src/components/Gallery/GalleryMainImage.vue   | 23 ++++++++++++++++--
 .../ImageViewer/ImageViewer.global.vue        | 24 +++++++++++++++++--
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/components/Gallery/GalleryMainImage.vue b/src/components/Gallery/GalleryMainImage.vue
index fb91b68e..385a5588 100644
--- a/src/components/Gallery/GalleryMainImage.vue
+++ b/src/components/Gallery/GalleryMainImage.vue
@@ -3,7 +3,12 @@
     <ClientOnly>
       <VSpinner v-if="isLoading" />
     </ClientOnly>
+    <span
+      v-if="errorMessage"
+      v-text="errorMessage"
+    />
     <img
+      v-show="!errorMessage"
       ref="imageElement"
       class="max-h-80 h-max w-100 cursor-zoom-in m-auto object-contain"
       :src="image.original"
@@ -26,17 +31,31 @@ const emit = defineEmits(['open:viewer'])
 
 const isLoading = ref(false)
 const imageElement = ref(null)
+const errorMessage = ref(null)
 
 watch(
   () => props.image,
   (newVal) => {
-    if (newVal.id) {
+    if (newVal.original) {
+      errorMessage.value = null
       isLoading.value = true
     }
   }
 )
 
+function handleError(e) {
+  e.preventDefault()
+
+  isLoading.value = false
+  errorMessage.value = 'Image was not found or format is not supported'
+}
+
+function handleLoad() {
+  isLoading.value = false
+}
+
 onMounted(() => {
-  imageElement.value.addEventListener('load', () => (isLoading.value = false))
+  imageElement.value.addEventListener('load', handleLoad)
+  imageElement.value.addEventListener('error', handleError)
 })
 </script>
diff --git a/src/components/ImageViewer/ImageViewer.global.vue b/src/components/ImageViewer/ImageViewer.global.vue
index 36a6528f..b0f8eab7 100644
--- a/src/components/ImageViewer/ImageViewer.global.vue
+++ b/src/components/ImageViewer/ImageViewer.global.vue
@@ -10,7 +10,13 @@
         class="absolute rounded-t-lg w-auto max-h-full h-auto top-12 bottom-44 left-0 right-0 flex justify-center align-middle"
       >
         <VSpinner v-if="isLoading" />
+        <div
+          class="flex flex-col justify-center"
+          v-if="errorMessage"
+          v-text="errorMessage"
+        />
         <img
+          v-show="!errorMessage"
           ref="imageElement"
           class="mx-auto cursor-zoom-out w-auto max-w-full max-h-full h-auto my-auto"
           :alt="image.depictions.map((d) => d.label).join(';')"
@@ -125,12 +131,23 @@ const handleKeyboard = ({ key }) => {
 
 const imageElement = ref(null)
 const isLoading = ref(false)
+const errorMessage = ref(null)
 const image = computed(() => props.images[props.index])
 
 document.addEventListener('keyup', handleKeyboard)
 
+function handleError() {
+  isLoading.value = false
+  errorMessage.value = 'Image was not found or format is not supported'
+}
+
+function handleLoad() {
+  isLoading.value = false
+}
+
 onMounted(() => {
-  imageElement.value.addEventListener('load', () => (isLoading.value = false))
+  imageElement.value.addEventListener('load', handleLoad)
+  imageElement.value.addEventListener('error', handleError)
   document.body.classList.add('overflow-hidden')
 })
 
@@ -141,6 +158,9 @@ onUnmounted(() => {
 
 watch(
   () => props.index,
-  () => (isLoading.value = true)
+  () => {
+    errorMessage.value = null
+    isLoading.value = true
+  }
 )
 </script>