Merge pull request #83 from SpeciesFileGroup/schema

Schema

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

@@ -14,13 +14,15 @@ const props = defineProps({
 })
 
 const commonNames = ref([])
-const commonNameLabel = computed(() => commonNames.value.map(item => item.name).join('; '))
+const commonNameLabel = computed(() =>
+  commonNames.value.map((item) => item.name).join('; ')
+)
 
 watch(
   () => props.otuId,
-  id => {
+  (id) => {
     if (id) {
-      TaxonWorks.getOtuDescendants(id, { 
+      TaxonWorks.getTaxonomy(id, {
         max_descendants_depth: 0,
         extend: ['common_names']
       }).then(({ data }) => {
@@ -29,10 +31,9 @@ watch(
     } else {
       commonNames.value = []
     }
+  },
+  {
+    immediate: true
   }
 )
-
-
-
-
-</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/helpers/schema.js

@@ -0,0 +1,87 @@
+const { schema_host } = __APP_ENV__
+
+const TAXON_RANK = {
+  species: [
+    'http://rs.tdwg.org/ontology/voc/TaxonRank#Species',
+    'http://www.wikidata.org/entity/Q7432'
+  ],
+  genus: [
+    'genus',
+    'http://rs.tdwg.org/ontology/voc/TaxonRank#Genus',
+    'http://www.wikidata.org/entity/Q34740'
+  ]
+}
+
+function removeEmptyProperties(obj) {
+  const copyObj = { ...obj }
+
+  for (const key in obj) {
+    const value = obj[key]
+
+    if (!value || (Array.isArray(value) && !value.length)) {
+      delete copyObj[key]
+    }
+  }
+
+  return copyObj
+}
+
+function makeUrlPath(path) {
+  return schema_host ? `${schema_host}${path}` : ''
+}
+
+export function defineTaxon({
+  id,
+  childTaxon,
+  parentTaxon,
+  taxonRank,
+  name,
+  scientificName,
+  identifier,
+  commonNames,
+  alternateName
+}) {
+  return removeEmptyProperties({
+    '@type': 'Taxon',
+    '@id': makeUrlPath(id),
+    'http://purl.org/dc/terms/conformsTo': {
+      '@id': 'https://bioschemas.org/profiles/Taxon/1.0-RELEASE'
+    },
+    additionalType: [
+      'dwc:Taxon',
+      'http://rs.tdwg.org/ontology/voc/TaxonConcept#TaxonConcept'
+    ],
+    'dwc:vernacularName': defineCommonNames(commonNames),
+    name,
+    alternateName: alternateName.map((item) => item.replaceAll(/<\/?i>/g, '')),
+    childTaxon,
+    scientificName: defineTaxonName(scientificName),
+    identifier,
+    taxonRank,
+    parentTaxon: defineTaxonEntity(parentTaxon)
+  })
+}
+
+function defineTaxonName({ name, author, taxonRank }) {
+  return removeEmptyProperties({
+    '@type': 'TaxonName',
+    author,
+    name,
+    taxonRank
+  })
+}
+
+function defineTaxonEntity({ name, taxonRank }) {
+  return {
+    '@type': 'Taxon',
+    name,
+    taxonRank
+  }
+}
+
+function defineCommonNames(commonNames) {
+  return commonNames.map(({ name, language }) => ({
+    '@language': language,
+    '@value': name
+  }))
+}

src/modules/otus/services/TaxonWorks.js

@@ -37,7 +37,7 @@ export default class TaxonWorks {
     })
   }
 
-  static getOtuDescendants(otuId, params) {
+  static getTaxonomy(otuId, params) {
     return makeAPIRequest.get(`/otus/${otuId}/inventory/taxonomy.json`, {
       params
     })

src/modules/otus/store/actions/index.js

@@ -1,2 +1,3 @@
 export * from './loadCatalog'
 export * from './loadDistribution'
+export * from './loadTaxonomy'

src/modules/otus/store/actions/loadTaxonomy.js

@@ -0,0 +1,15 @@
+import TaxonWorks from '../../services/TaxonWorks'
+
+export const actionLoadTaxonomy = {
+  async loadTaxonomy(otuId) {
+    const { data } = await TaxonWorks.getTaxonomy(otuId, {
+      max_descendants_depth: 0,
+      extend: ['common_names']
+    })
+
+    this.taxonomy = {
+      commonNames: data.common_names,
+      synonyms: data.nomenclatural_synonyms
+    }
+  }
+}