From 4cd62f7735f2b797f3486d30afe393a7a1ed3322 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Tue, 25 Apr 2023 17:37:09 -0300
Subject: [PATCH 1/6] Fix meta tags and SEO

---
 public/robots.txt                             |  2 ++
 .../Animation/AnimationOpacity.global.vue     |  3 ---
 src/components/Dropdown/Dropdown.global.vue   | 24 +++++------------
 src/components/Gallery/GalleryMainImage.vue   |  2 +-
 src/components/Layout/LayoutFooter.vue        | 27 +++++++++----------
 src/components/Layout/LayoutHeader.vue        |  2 ++
 src/components/Navbar/NavbarMobile.vue        |  3 ++-
 src/components/SwitchTheme.vue                |  1 +
 .../PanelNomenclatureCitations.vue            | 24 ++++++++++-------
 .../PanelNomenclatureShowMore.vue             |  6 ++---
 src/utils/getMeta.js                          |  3 ++-
 11 files changed, 46 insertions(+), 51 deletions(-)
 create mode 100644 public/robots.txt

diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 0000000..c2a49f4
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /
diff --git a/src/components/Animation/AnimationOpacity.global.vue b/src/components/Animation/AnimationOpacity.global.vue
index 9619d6d..2f4212c 100644
--- a/src/components/Animation/AnimationOpacity.global.vue
+++ b/src/components/Animation/AnimationOpacity.global.vue
@@ -10,6 +10,3 @@
     <slot />
   </transition>
 </template>
-
-<script setup>
-</script>
\ No newline at end of file
diff --git a/src/components/Dropdown/Dropdown.global.vue b/src/components/Dropdown/Dropdown.global.vue
index 7d57235..d42b56f 100644
--- a/src/components/Dropdown/Dropdown.global.vue
+++ b/src/components/Dropdown/Dropdown.global.vue
@@ -1,26 +1,14 @@
 <template>
   <div class="relative inline">
-    <button @click="toggleMenu">
+    <button
+      title="Menu"
+      @click="toggleMenu"
+    >
       <slot name="button" />
     </button>
     <ul
       v-if="isVisible"
-      class="
-        bg-base-foreground
-        absolute font-normal
-        text-sm
-        text-base-lighter
-        right-0
-        z-10
-        mt-2
-        w-56
-        origin-top-right
-        rounded-md
-        shadow-lg
-        ring-1
-        ring-black
-        ring-opacity-5
-        focus:outline-none"
+      class="bg-base-foreground absolute font-normal text-sm text-base-lighter right-0 z-10 mt-2 w-56 origin-top-right rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
     >
       <li
         v-for="item in items"
@@ -50,7 +38,7 @@ const toggleMenu = () => {
   isVisible.value = !isVisible.value
 }
 
-const itemClicked = item => {
+const itemClicked = (item) => {
   isVisible.value = false
 
   item.action()
diff --git a/src/components/Gallery/GalleryMainImage.vue b/src/components/Gallery/GalleryMainImage.vue
index d53a8a1..13363e2 100644
--- a/src/components/Gallery/GalleryMainImage.vue
+++ b/src/components/Gallery/GalleryMainImage.vue
@@ -7,6 +7,7 @@
       ref="imageElement"
       class="max-h-80 h-max w-100 cursor-zoom-in m-auto"
       :src="image.original"
+      :alt="image.depictions.map((d) => d.label).join(';')"
       @click="emit('open:viewer')"
     />
   </div>
@@ -38,5 +39,4 @@ watch(
 onMounted(() => {
   imageElement.value.addEventListener('load', () => (isLoading.value = false))
 })
-
 </script>
diff --git a/src/components/Layout/LayoutFooter.vue b/src/components/Layout/LayoutFooter.vue
index 5c7034b..afe0435 100644
--- a/src/components/Layout/LayoutFooter.vue
+++ b/src/components/Layout/LayoutFooter.vue
@@ -1,5 +1,7 @@
 <template>
-  <footer class="footer text-white bottom-0 border-gray-200 bg-zinc-800 pl-4 pr-4">
+  <footer
+    class="footer text-white bottom-0 border-gray-200 bg-zinc-800 pl-4 pr-4"
+  >
     <div class="container mx-auto text-sm pt-2 pb-4">
       <div class="pt-4 pb-2">
         {{ project_authors }}
@@ -10,32 +12,31 @@
             class="text-secondary-color"
             :href="project_url"
           >
-            {{ project_url }} 
+            {{ project_url }}
           </a>
           &gt;
         </span>
       </div>
       <div class="flex items-center text-xs">
-        <component 
-          :is="copyright_image_link
-            ? 'a'
-            : 'span'"
+        <component
+          :is="copyright_image_link ? 'a' : 'span'"
           :href="copyright_image_link"
         >
           <img
             v-if="copyright_image"
-            class="mr-2"
             :src="copyright_image"
-          >
+            alt="copyright"
+            class="mr-2"
+          />
         </component>
         <p>{{ copyright_text }}</p>
       </div>
 
-      <hr class="mt-3 mb-3 border-gray-500">
+      <hr class="mt-3 mb-3 border-gray-500" />
 
       <div class="flex items-center">
         <span>
-          Data provided by 
+          Data provided by
           <a
             class="text-slate-400 hover:text-slate-500 dark:hover:text-slate-300 font-medium"
             target="_blank"
@@ -49,7 +50,7 @@
 
         <span>
           Pages by
-          <a 
+          <a
             class="text-slate-400 hover:text-slate-500 dark:hover:text-slate-300 font-medium"
             target="_blank"
             href="https://github.com/SpeciesFileGroup/taxonpages"
@@ -59,7 +60,7 @@
         </span>
         <span class="ml-2 mr-2">|</span>
         <span>
-          Support (Services) by 
+          Support (Services) by
           <a
             class="text-slate-400 hover:text-slate-500 dark:hover:text-slate-300 font-medium"
             target="_blank"
@@ -73,7 +74,6 @@
   </footer>
 </template>
 <script setup>
-
 const {
   project_authors,
   project_citation,
@@ -82,5 +82,4 @@ const {
   copyright_image,
   copyright_image_link
 } = __APP_ENV__
-
 </script>
diff --git a/src/components/Layout/LayoutHeader.vue b/src/components/Layout/LayoutHeader.vue
index 9167257..da0aef2 100644
--- a/src/components/Layout/LayoutHeader.vue
+++ b/src/components/Layout/LayoutHeader.vue
@@ -11,6 +11,8 @@
       >
         <img
           v-if="header_logo_url"
+          width="auto"
+          height="auto"
           class="mr-3 h-10"
           :src="header_logo_url"
           :alt="header_logo_text"
diff --git a/src/components/Navbar/NavbarMobile.vue b/src/components/Navbar/NavbarMobile.vue
index 6eb00d8..7ace3c1 100644
--- a/src/components/Navbar/NavbarMobile.vue
+++ b/src/components/Navbar/NavbarMobile.vue
@@ -2,8 +2,9 @@
   <button
     type="button"
     class="inline-flex items-center p-2 z-50 ml-3 text-sm text-primary-content rounded-lg md:hidden print:hidden"
+    title="Menu"
     aria-controls="mobile-menu"
-    aria-expanded="false"
+    :aria-expanded="isMenuVisible"
     @click="toggleMenu"
   >
     <span class="sr-only">Open main menu</span>
diff --git a/src/components/SwitchTheme.vue b/src/components/SwitchTheme.vue
index 3041234..58cf7c3 100644
--- a/src/components/SwitchTheme.vue
+++ b/src/components/SwitchTheme.vue
@@ -2,6 +2,7 @@
   <button
     type="button"
     @click="toggleTheme"
+    title="Toggle mode"
   >
     <svg
       v-if="themeMode === themeModes.dark"
diff --git a/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureCitations.vue b/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureCitations.vue
index 01dd40c..d0dac41 100644
--- a/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureCitations.vue
+++ b/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureCitations.vue
@@ -21,16 +21,20 @@
         :count="citationList.middle.length"
         @click="showAll = true"
       />
-      <AnimationOpacity>
-        <div v-show="showAll">
-          <CitationRow
-            v-for="citation in citationList.middle"
-            :key="citation.label"
-            :citation="citation"
-          />
-        </div>
-      </AnimationOpacity>
-
+    </ul>
+    <AnimationOpacity>
+      <ul
+        class="text-sm"
+        v-show="showAll"
+      >
+        <CitationRow
+          v-for="citation in citationList.middle"
+          :key="citation.label"
+          :citation="citation"
+        />
+      </ul>
+    </AnimationOpacity>
+    <ul class="text-sm">
       <CitationRow
         v-for="citation in citationList.last"
         :key="citation.label"
diff --git a/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureShowMore.vue b/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureShowMore.vue
index 67d9f13..0ef988a 100644
--- a/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureShowMore.vue
+++ b/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureShowMore.vue
@@ -1,6 +1,6 @@
 <template>
-  <div
-    class="flex justify-start border-b p-3 px-4 last:border-b-0 cursor-pointer border-base-muted"
+  <li
+    class="flex justify-start border-b p-3 px-4 cursor-pointer border-base-muted"
   >
     <div
       class="h-5 w-5 text-secondary-color opacity-60 mr-2 cursor-pointer"
@@ -9,7 +9,7 @@
       <IconPlusCircle class="h-5 w-5" />
     </div>
     <span>... Show all ... ({{ count }})</span>
-  </div>
+  </li>
 </template>
 
 <script setup>
diff --git a/src/utils/getMeta.js b/src/utils/getMeta.js
index 28fedf0..c306fe3 100644
--- a/src/utils/getMeta.js
+++ b/src/utils/getMeta.js
@@ -7,7 +7,8 @@ export function getMetaFromConfig(configObj) {
     const metaKey = key.slice(5)
 
     return {
-      [metaKey]: value
+      name: metaKey,
+      content: value
     }
   })
 }

From b0bd639da77a16a9e5e6c57969f5d3636653c044 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Wed, 26 Apr 2023 12:57:31 -0300
Subject: [PATCH 2/6] Remove img attr

---
 src/components/Layout/LayoutHeader.vue | 2 --
 src/utils/getMeta.js                   | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Layout/LayoutHeader.vue b/src/components/Layout/LayoutHeader.vue
index da0aef2..9167257 100644
--- a/src/components/Layout/LayoutHeader.vue
+++ b/src/components/Layout/LayoutHeader.vue
@@ -11,8 +11,6 @@
       >
         <img
           v-if="header_logo_url"
-          width="auto"
-          height="auto"
           class="mr-3 h-10"
           :src="header_logo_url"
           :alt="header_logo_text"
diff --git a/src/utils/getMeta.js b/src/utils/getMeta.js
index c306fe3..b927d21 100644
--- a/src/utils/getMeta.js
+++ b/src/utils/getMeta.js
@@ -1,5 +1,5 @@
 export function getMetaFromConfig(configObj) {
-  const metaObj = Object.entries(configObj).filter(([key, value]) =>
+  const metaObj = Object.entries(configObj).filter(([key]) =>
     key.startsWith('meta_')
   )
 

From 84d4f460b4ee680f005cc231f5eec55a180002cd Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Thu, 4 May 2023 14:23:38 -0300
Subject: [PATCH 3/6] Update per

---
 src/modules/otus/components/Search/OtuSearch.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/modules/otus/components/Search/OtuSearch.vue b/src/modules/otus/components/Search/OtuSearch.vue
index ff6486a..43c55fd 100644
--- a/src/modules/otus/components/Search/OtuSearch.vue
+++ b/src/modules/otus/components/Search/OtuSearch.vue
@@ -97,7 +97,8 @@ function loadOTUs(geojson) {
   const payload = {
     geo_json: geojson,
     taxon_name_id: [props.otu.taxon_name_id],
-    descendants: true
+    descendants: true,
+    per: 5000
   }
 
   isLoading.value = true

From 4d92563f6d7ad4d6be8ad1bbbe3a2f830c3724e8 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Fri, 5 May 2023 09:27:57 -0300
Subject: [PATCH 4/6] Add otu count

---
 src/modules/otus/components/Search/ListResults.vue | 2 +-
 src/modules/otus/components/Search/OtuSearch.vue   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/otus/components/Search/ListResults.vue b/src/modules/otus/components/Search/ListResults.vue
index bf9e240..404e2aa 100644
--- a/src/modules/otus/components/Search/ListResults.vue
+++ b/src/modules/otus/components/Search/ListResults.vue
@@ -8,7 +8,7 @@
         <VTableHeaderCell
           class="w-full flex justify-between box-border items-center"
         >
-          <span>OTU</span>
+          <span>OTU ({{ list.length }})</span>
           <IconArrowRight
             class="opacity-50 cursor-pointer w-4 h-4"
             @click="emit('close:table')"
diff --git a/src/modules/otus/components/Search/OtuSearch.vue b/src/modules/otus/components/Search/OtuSearch.vue
index 43c55fd..ae46ade 100644
--- a/src/modules/otus/components/Search/OtuSearch.vue
+++ b/src/modules/otus/components/Search/OtuSearch.vue
@@ -28,7 +28,7 @@
       />
 
       <div
-        class="h-screen md:w-96 absolute top-0 bg-base-background z-[2000] overflow-auto ease-in-out duration-300 w-full"
+        class="h-full md:w-96 absolute top-0 bg-base-background z-[2000] overflow-auto ease-in-out duration-300 w-full"
         :class="{
           'md:-right-96 -right-full': !isTableVisible,
           'right-0': isTableVisible

From 8acbaf03756ebc04cd1536bc111cbbe3ce821c4a Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Fri, 5 May 2023 11:01:25 -0300
Subject: [PATCH 5/6] Fix misspelling

---
 .../otus/components/Panel/PanelMap/PanelMap.vue  | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/modules/otus/components/Panel/PanelMap/PanelMap.vue b/src/modules/otus/components/Panel/PanelMap/PanelMap.vue
index e2239ad..f7e9817 100644
--- a/src/modules/otus/components/Panel/PanelMap/PanelMap.vue
+++ b/src/modules/otus/components/Panel/PanelMap/PanelMap.vue
@@ -3,13 +3,13 @@
     <div class="relative">
       <ClientOnly>
         <VSpinner v-if="isLoading" />
-          <VMap
-            class="h-96 max-h-96"
-            dragging
-            :zoom="zoom"
-            :geojson="geojson"
-            @geojson:ready="() => (isLoading = false)"
-          />
+        <VMap
+          class="h-96 max-h-96"
+          dragging
+          :zoom="zoom"
+          :geojson="geojson"
+          @geojson:ready="() => (isLoading = false)"
+        />
       </ClientOnly>
       <VButton
         class="h-6 text-sm absolute right-3 top-3 z-[400]"
@@ -78,7 +78,7 @@ const errorMessage = ref(null)
 
 const LEGEND = {
   AssertedDistribution: {
-    label: 'Asserted disitrubtion',
+    label: 'Asserted distribution',
     background: 'bg-map-asserted'
   },
   Georeference: {

From 577624856c4731b9e218bbc41fe6912eac90e337 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Mon, 8 May 2023 15:14:20 -0300
Subject: [PATCH 6/6] Add skeleton component

---
 src/components/VSkeleton.global.vue      | 49 ++++++++++++++++++++++++
 src/modules/otus/components/TaxaInfo.vue | 19 +++------
 src/modules/otus/views/Index.vue         | 30 +++++++++------
 3 files changed, 74 insertions(+), 24 deletions(-)
 create mode 100644 src/components/VSkeleton.global.vue

diff --git a/src/components/VSkeleton.global.vue b/src/components/VSkeleton.global.vue
new file mode 100644
index 0000000..3bf6622
--- /dev/null
+++ b/src/components/VSkeleton.global.vue
@@ -0,0 +1,49 @@
+<template>
+  <slot />
+  <span
+    v-if="isEmpty"
+    :class="class"
+  >
+    <span
+      v-for="line in lines"
+      :key="line"
+      class="inline-block w-full rounded-sm bg-gray-100 leading-5"
+    >
+      &zwnj;
+    </span>
+  </span>
+</template>
+
+<script setup>
+import { useAttrs, useSlots, computed } from 'vue'
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: 'w-full'
+  },
+
+  lines: {
+    type: Number,
+    default: 1
+  }
+})
+
+const slots = useSlots()
+const attrs = useAttrs()
+
+const isEmpty = computed(() => {
+  const children = slots.default?.()
+
+  return isEmptyVNode(children)
+})
+
+function isEmptyVNode(children) {
+  if (!children) return true
+
+  const [firstNode] = children
+  let str = firstNode.children
+
+  return firstNode.el || str
+}
+</script>
diff --git a/src/modules/otus/components/TaxaInfo.vue b/src/modules/otus/components/TaxaInfo.vue
index a41b3bb..472e77c 100644
--- a/src/modules/otus/components/TaxaInfo.vue
+++ b/src/modules/otus/components/TaxaInfo.vue
@@ -5,11 +5,11 @@
     </h2>
     <h1 class="text-xl dark:text-gray-100">
       <span>
-        <span 
+        <span
           :title="taxon.short_status"
-          v-html="taxon.full_name_tag" 
+          v-html="taxon.full_name_tag"
         />
-        <span 
+        <span
           v-if="!taxon.is_valid"
           class="ml-1"
           :class="statusStyle"
@@ -40,15 +40,8 @@ const props = defineProps({
   }
 })
 
-const status = computed(() => 
-  props.taxon.cached_is_valid
-    ? ''
-    : '&#10005;'
+const status = computed(() => (props.taxon.cached_is_valid ? '' : '&#10005;'))
+const statusStyle = computed(() =>
+  props.taxon.cached_is_valid ? '' : 'text-red-600'
 )
-const statusStyle = computed(() => 
-  props.taxon.cached_is_valid
-    ? ''
-    : 'text-red-600'
-)
-
 </script>
diff --git a/src/modules/otus/views/Index.vue b/src/modules/otus/views/Index.vue
index c41ab6b..adec8dc 100644
--- a/src/modules/otus/views/Index.vue
+++ b/src/modules/otus/views/Index.vue
@@ -5,12 +5,14 @@
         <div
           class="flex flex-col-reverse md:flex-row justify-between items-start"
         >
-          <Breadcrumb
-            v-if="isReady"
-            class="w-4/4 md:w-3/4"
-            :list="otu?.parents || {}"
-            :current="taxon"
-          />
+          <VSkeleton class="w-4/4 md:w-3/4">
+            <Breadcrumb
+              v-if="isReady"
+              class="w-4/4 md:w-3/4"
+              :list="otu?.parents || {}"
+              :current="taxon"
+            />
+          </VSkeleton>
           <Autocomplete
             class="print:hidden min-w-full mb-2 md:min-w-fit md:ml-2 md:mb-0 md:w-96"
             url="/otus/autocomplete"
@@ -23,11 +25,16 @@
         </div>
 
         <div class="mt-8 flex justify-between middle">
-          <TaxaInfo
-            v-if="isReady"
-            :taxon="taxon"
-            :otu-id="otu.id"
-          />
+          <VSkeleton
+            :lines="2"
+            class="w-96"
+          >
+            <TaxaInfo
+              v-if="isReady"
+              :taxon="taxon"
+              :otu-id="otu.id"
+            />
+          </VSkeleton>
         </div>
 
         <TabMenu
@@ -67,6 +74,7 @@ import { useOtuStore } from '../store/store'
 import Breadcrumb from '../components/Breadcrumb/Breadcrumb.vue'
 import TaxaInfo from '../components/TaxaInfo.vue'
 import { useHead, createHead } from 'unhead'
+import VSkeletonGlobal from '@/components/VSkeleton.global.vue'
 
 //import useChildrenRoutes from '../composables/useChildrenRoutes'