Merge pull request #84 from SpeciesFileGroup/development

Development

package.json

@@ -28,6 +28,8 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.9",
+    "@unhead/schema-org": "^0.5.0",
+    "@unhead/ssr": "^1.1.26",
     "@vitejs/plugin-vue": "^4.2.3",
     "autoprefixer": "^10.4.14",
     "compression": "^1.7.4",

src/App.vue

@@ -5,11 +5,10 @@
 </template>
 
 <script setup>
-import ApplicationLayout from '@/layout/Application.vue'
-import { useHead, createHead } from 'unhead'
+import { useHead } from 'unhead'
 import { getMetaFromConfig } from '@/utils'
+import ApplicationLayout from '@/layout/Application.vue'
 
-const head = createHead()
 const meta = getMetaFromConfig(__APP_ENV__)
 
 useHead({

src/entry-server.js

@@ -4,12 +4,16 @@ import { createApp } from './main'
 import { registerGlobalComponents } from '@/components/globalComponents'
 import { getActiveHead } from 'unhead'
 import { renderSSRHead } from '@unhead/ssr'
+import { registerFakeClientComponents } from '@/ssr/utils/registerFakeClientComponents'
 import devalue from '@nuxt/devalue'
 
 export async function render(url, manifest) {
   const { app, router, store } = createApp()
 
+  // Register global components, create a fake server components for components that should only render on client side
   registerGlobalComponents(app)
+  registerFakeClientComponents(app)
+
   // set the router to the desired URL before rendering
   await router.push(url)
   await router.isReady()

src/main.js

@@ -3,15 +3,30 @@ import.meta.glob('../config/style/*.{scss,css}', { eager: true })
 
 import App from './App.vue'
 import SetupApp from './modules/setup/views/Index.vue'
+import { SchemaOrgUnheadPlugin } from '@unhead/schema-org'
+import { createHead } from 'unhead'
 import { createPinia } from 'pinia'
 import { createSSRApp } from 'vue'
 import { createRouter } from './router'
 
 export function createApp() {
-  const isAPIConfigurationSet = __APP_ENV__.url && __APP_ENV__.project_token
+  const { url, project_token, schema_host } = __APP_ENV__
+  const isAPIConfigurationSet = url && project_token
   const app = createSSRApp(isAPIConfigurationSet ? App : SetupApp)
   const router = createRouter()
   const store = createPinia()
+  const head = createHead({
+    plugins: [
+      SchemaOrgUnheadPlugin({ host: schema_host }, () => {
+        const { meta, path } = router.currentRoute.value
+
+        return {
+          ...meta,
+          path
+        }
+      })
+    ]
+  })
 
   app.use(router)
   app.use(store)

src/modules/otus/components/CommonNames.vue

@@ -3,36 +3,12 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue'
-import TaxonWorks from '../services/TaxonWorks'
+import { computed } from 'vue'
+import { useOtuStore } from '../store/store'
 
-const props = defineProps({
-  otuId: {
-    type: Number,
-    default: undefined
-  }
-})
+const store = useOtuStore()
 
-const commonNames = ref([])
-const commonNameLabel = computed(() => commonNames.value.map(item => item.name).join('; '))
-
-watch(
-  () => props.otuId,
-  id => {
-    if (id) {
-      TaxonWorks.getOtuDescendants(id, { 
-        max_descendants_depth: 0,
-        extend: ['common_names']
-      }).then(({ data }) => {
-        commonNames.value = data.common_names
-      })
-    } else {
-      commonNames.value = []
-    }
-  }
+const commonNameLabel = computed(() =>
+  store.taxonomy.commonNames.map((item) => item.name).join('; ')
 )
-
-
-
-
-</script>
+</script>

src/modules/otus/components/Panel/PanelDescendants/Descendants.vue

@@ -1,16 +1,18 @@
 <template>
   <VCard>
     <VCardHeader>
-      <h1 class="text-md">
-        Descendants and synonyms
-      </h1>
+      <h1 class="text-md">Descendants and synonyms</h1>
     </VCardHeader>
     <VCardContent class="text-sm">
       <ul class="tree ml-2">
         <AnimationOpacity>
           <DescendantsTree
-            v-if="taxonomy && (taxonomy.nomenclatural_synonyms.length || taxonomy.descendants.length)"
-            :taxonomy="taxonomy" 
+            v-if="
+              taxonomy &&
+              (taxonomy.nomenclatural_synonyms.length ||
+                taxonomy.descendants.length)
+            "
+            :taxonomy="taxonomy"
           />
         </AnimationOpacity>
       </ul>
@@ -32,21 +34,28 @@ const props = defineProps({
 
 const taxonomy = ref(null)
 
-watch(() => props.otuId, async () => {
-  if (!props.otuId) { return }
-
-  TaxonWorks.getOtuDescendants(props.otuId, { max_descendants_depth: 1 }).then(({ data }) => {
-    taxonomy.value = data
-  })
-}, { immediate: true })
+watch(
+  () => props.otuId,
+  async () => {
+    if (!props.otuId) {
+      return
+    }
 
+    TaxonWorks.getTaxonomy(props.otuId, { max_descendants_depth: 1 }).then(
+      ({ data }) => {
+        taxonomy.value = data
+      }
+    )
+  },
+  { immediate: true }
+)
 </script>
 
 <style scoped>
-  .otu-synonyms {
-    list-style: none;
-    border-left:1px solid rgb(100,100,100);
-    padding-left:8px;
-    padding-bottom: 8px;
-  }
-</style>
+.otu-synonyms {
+  list-style: none;
+  border-left: 1px solid rgb(100, 100, 100);
+  padding-left: 8px;
+  padding-bottom: 8px;
+}
+</style>

src/modules/otus/components/Panel/PanelDescendants/DescendantsTree.vue

@@ -8,12 +8,12 @@
       v-model="isTreeVisible"
       class="absolute -left-2.5"
     />
-    <router-link 
+    <router-link
       class="text-primary-500"
       :to="{ name: 'otus-id', params: { id: taxonomy.otu_id } }"
       v-html="taxonomy.name"
     />
-    <DescendantsSynonymList 
+    <DescendantsSynonymList
       v-if="taxonomy.nomenclatural_synonyms.length"
       class="pb-4"
       :list="taxonomy.nomenclatural_synonyms"
@@ -23,7 +23,7 @@
         v-if="descendants.length"
         class="tree"
       >
-        <template 
+        <template
           v-for="item in descendants"
           :key="item.otu_id"
         >
@@ -60,26 +60,25 @@ const props = defineProps({
 const isTreeVisible = ref(!!props.taxonomy.descendants.length)
 const descendants = ref([...props.taxonomy.descendants])
 
-watch(
-  isTreeVisible,
-  (newVal) => {
-    if (newVal) {
-      loadDescendants()
-    }
+watch(isTreeVisible, (newVal) => {
+  if (newVal) {
+    loadDescendants()
   }
-)
+})
 
 const loadDescendants = () => {
-  if (descendants.value.length) { return }
-  TaxonWorks.getOtuDescendants(props.taxonomy.otu_id, { max_descendants_depth: 1 }).then(({ data }) => {
+  if (descendants.value.length) {
+    return
+  }
+  TaxonWorks.getTaxonomy(props.taxonomy.otu_id, {
+    max_descendants_depth: 1
+  }).then(({ data }) => {
     descendants.value = data.descendants
   })
 }
-
 </script>
 
 <style lang="scss" scoped>
-
 .tree {
   list-style: none;
   margin: 0;
@@ -93,28 +92,27 @@ const loadDescendants = () => {
     position: relative;
     margin: 0;
     padding: 0px 6px;
-    border-left:1px solid rgb(100,100,100);
+    border-left: 1px solid rgb(100, 100, 100);
   }
 
   li:last-child {
-    border-left:none;
+    border-left: none;
   }
 
   li:before {
-    position:relative;
-    top:-0.3em;
-    height:1em;
-    width:12px;
-    color:white;
-    border-bottom:1px solid rgb(100,100,100);
-    content:"";
-    display:inline-block;
-    left:-6px;
+    position: relative;
+    top: -0.3em;
+    height: 1em;
+    width: 12px;
+    color: white;
+    border-bottom: 1px solid rgb(100, 100, 100);
+    content: '';
+    display: inline-block;
+    left: -6px;
   }
 
   li:last-child:before {
-    border-left:1px solid rgb(100,100,100);   
+    border-left: 1px solid rgb(100, 100, 100);
   }
 }
-
-</style>
+</style>

src/modules/otus/components/TaxaInfo.vue

@@ -1,47 +1,32 @@
 <template>
-  <div :class="{ invisible: !taxon.id }">
+  <div>
     <h2 class="text-1xl capitalize">
-      {{ taxon.rank || 'Combination' }}
+      {{ store.taxon.rank || 'Combination' }}
     </h2>
     <h1 class="text-xl dark:text-gray-100">
       <span>
         <span
-          :title="taxon.short_status"
-          v-html="taxon.full_name_tag"
+          :title="store.taxon.short_status"
+          v-html="store.taxon.full_name_tag"
         />
         <span
-          v-if="!taxon.is_valid"
-          class="ml-1"
-          :class="statusStyle"
+          v-if="!store.taxon.is_valid"
+          class="ml-1 text-red-600"
           title="Invalid"
-          v-html="status"
-        />
+        >
+          &#10005;
+        </span>
       </span>
     </h1>
     <h2 class="text-1xl">
-      <CommonNames :otu-id="props.otuId" />
+      <CommonNames />
     </h2>
   </div>
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { useOtuStore } from '../store/store'
 import CommonNames from './CommonNames.vue'
 
-const props = defineProps({
-  taxon: {
-    type: Object,
-    default: () => ({})
-  },
-
-  otuId: {
-    type: Number,
-    default: undefined
-  }
-})
-
-const status = computed(() => (props.taxon.cached_is_valid ? '' : '&#10005;'))
-const statusStyle = computed(() =>
-  props.taxon.cached_is_valid ? '' : 'text-red-600'
-)
+const store = useOtuStore()
 </script>