Merge pull request #136 from SpeciesFileGroup/development

Development

.gitignore

@@ -2,10 +2,10 @@ node_modules
 .DS_Store
 dist
 dist-ssr
-config
-pages
-components
-taxa
+/config
+/pages
+/components
+/panels
 public
 README.md
 *.local

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>

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>

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>

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>

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__

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')
     }
   })
 

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, {