Add config files/folder, update components

src/components/Autocomplete/AutocompleteOtu.vue

@@ -0,0 +1,25 @@
+<template>
+  <Autocomplete
+    url="/otus/autocomplete"
+    query-param="term"
+    label="label_html"
+    :params="{ having_taxon_name_only: true }"
+    @select="loadOtu"
+  />
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+import Autocomplete from '@/components/Autocomplete/Autocomplete.vue'
+
+const router = useRouter()
+
+const loadOtu = ({ id }) => {
+  router.push({
+    name: 'otus-id-overview',
+    params: {
+      id
+    }
+  })
+}
+</script>

src/components/Button/ButtonExpand.vue

@@ -20,7 +20,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits('update:modelValue')
+const emit = defineEmits(['update:modelValue'])
 
 const isExpanded = computed({
   get () {

src/components/Layout/LayoutFooter.vue

@@ -2,33 +2,33 @@
   <footer class="footer text-white bottom-0 border-t 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-4">
-        {{ VITE_PAGE_PROJECT_AUTHORS }}
-        {{ VITE_PAGE_PROJECT_CITATION }}
-        <span v-if="VITE_PAGE_PROJECT_URL">
+        {{ project_authors }}
+        {{ project_citation }}
+        <span v-if="project_url">
           &lt;
           <a
             class="text-blue-500"
-            :href="VITE_PAGE_PROJECT_URL"
+            :href="project_url"
           >
-            {{ VITE_PAGE_PROJECT_URL }} 
+            {{ project_url }} 
           </a>
           &gt;
         </span>
       </div>
       <div class="flex items-center text-xs">
         <component 
-          :is="VITE_PAGE_FOOTER_COPYRIGHT_IMAGE_LINK
+          :is="copyright_image_link
             ? 'a'
             : 'span'"
-          :href="VITE_PAGE_FOOTER_COPYRIGHT_IMAGE_LINK"
+          :href="copyright_image_link"
         >
           <img
-            v-if="VITE_PAGE_FOOTER_COPYRIGHT_IMAGE"
+            v-if="copyright_image"
             class="mr-2"
-            :src="VITE_PAGE_FOOTER_COPYRIGHT_IMAGE"
+            :src="copyright_image"
           >
         </component>
-        <p>{{ VITE_PAGE_FOOTER_COPYRIGHT_TEXT }}</p>
+        <p>{{ copyright_text }}</p>
       </div>
 
       <hr class="mt-3 mb-3 border-gray-500">
@@ -58,14 +58,19 @@
 <script setup>
 
 import TWLogo from '@/assets/images/taxonworks_full_logo.svg?url'
+import projectConfiguration from '@/config/project.yml'
+import copyrightConfiguration from '@/config/copyright.yml'
 
 const {
-  VITE_PAGE_PROJECT_AUTHORS,
-  VITE_PAGE_PROJECT_CITATION,
-  VITE_PAGE_PROJECT_URL,
-  VITE_PAGE_FOOTER_COPYRIGHT_TEXT,
-  VITE_PAGE_FOOTER_COPYRIGHT_IMAGE,
-  VITE_PAGE_FOOTER_COPYRIGHT_IMAGE_LINK,
-} = import.meta.env
+  project_authors,
+  project_citation,
+  project_url
+} = projectConfiguration
+
+const {
+  copyright_text,
+  copyright_image,
+  copyright_image_link
+} = copyrightConfiguration
 
 </script>

src/components/Layout/LayoutHeader.vue

@@ -2,16 +2,16 @@
   <nav class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded border-b pl-4 pr-4">
     <div class="container flex flex-wrap justify-between items-center mx-auto">
       <a
-        href="#"
+        href="/"
         class="flex"
       >
         <img
-          v-if="VITE_PAGE_HEADER_LOGO"
+          v-if="logo"
           class="mr-3 h-10"
-          :src="logoUrl"
+          :src="logo_url"
         >
         <span v-else>
-          {{ VITE_PROJECT_NAME }}
+          {{ project_name }}
         </span>
       </a>
 
@@ -49,7 +49,10 @@
       </button>
       <div class="hidden w-full md:block md:w-auto">
         <ul class="flex flex-col md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
-          <li v-for="item in navItems">
+          <li 
+            v-for="(item, index) in links"
+            :key="index"
+          >
             <router-link
               :to="item.link"
               class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0"
@@ -87,26 +90,16 @@
 
 <script setup>
 
-import { computed } from 'vue'
-const { VITE_PAGE_HEADER_LOGO, VITE_BASE_URL, VITE_PROJECT_NAME } = import.meta.env
-const logoUrl = computed(() => VITE_BASE_URL + VITE_PAGE_HEADER_LOGO)
+import headerConfiguration from '@/config/header.yml'
+import projectConfiguration from '@/config/project.yml'
+
+const {
+  logo,
+  links
+} = headerConfiguration
+
+const {
+  project_name
+} = projectConfiguration
 
-const navItems = [
-  {
-    label: 'Home',
-    link: '/'
-  },
-  {
-    label: 'About',
-    link: '/about'
-  }
-/*   {
-    label: 'Search',
-    link: '#'
-  },
-  {
-    label: 'Language',
-    link: '#'
-  } */
-]
 </script>

src/components/Map/VMap.vue

@@ -21,6 +21,7 @@ import iconRetina from 'leaflet/dist/images/marker-icon-2x.png'
 import iconUrl from 'leaflet/dist/images/marker-icon.png'
 import shadowUrl from 'leaflet/dist/images/marker-shadow.png'
 import geojsonDefaultOptions from './utils/geojsonOptions'
+import mappingConfiguration from '@/config/mapping.yml'
 
 delete L.Icon.Default.prototype._getIconUrl
 
@@ -30,9 +31,7 @@ L.Icon.Default.mergeOptions({
   shadowUrl: shadowUrl
 })
 
-const {
-  VITE_MAP_SERVER_TILES
-} = import.meta.env
+const { map_server_tils } = mappingConfiguration
 
 const props = defineProps({
   zoomAnimate: {
@@ -83,7 +82,7 @@ let observeMap
 let geoJSONGroup = new L.FeatureGroup()
 const leafletMap = ref(null)
 const tiles = {
-  osm: L.tileLayer(VITE_MAP_SERVER_TILES, {
+  osm: L.tileLayer(map_server_tils, {
     maxZoom: 18
   })
 }

src/config/api.yml

@@ -0,0 +1,3 @@
+---
+  url: https://sandcastle.taxonworks.org/api/v1
+  project_token: NOw8ZKe7O0axmMkNPZn35Q

src/config/copyright.yml

@@ -0,0 +1,4 @@
+---
+  copyright_image: "https://i.creativecommons.org/l/by-sa/4.0/80x15.png"
+  copyright_image_link: "http://creativecommons.org/licenses/by-sa/4.0/"
+  copyright_text: "Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License."

src/config/header.yml

@@ -0,0 +1,8 @@
+---
+  logo_url:
+  links:
+    - label: Home
+      link: /
+
+    - label: About
+      link: /about

src/config/mapping.yml

@@ -0,0 +1,2 @@
+---
+  map_server_tils: https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png

src/config/project.yml

@@ -0,0 +1,5 @@
+---
+  project_name: "Orthoptera Species File"
+  project_citation: "Orthoptera Species File"
+  project_url: "https://jlpereira.github.io/vite_taxonworks_public_view/"
+  project_authors: "Cigliano, M.M., H. Braun, D.C. Eades & D. Otte."

src/config/router.yml

@@ -0,0 +1,3 @@
+---
+  base_url: /
+  hash_mode: false

src/content/about.md

@@ -0,0 +1,41 @@
+---
+title: About
+contact_email: user@example.com
+copyright: All content is CC 0 so that it maybe be shared throughout the world in places like Wikipedia.
+citation: Project collaborative. 2022. Website title. Available at https://example.com. 
+---
+<div class="container mx-auto mt-4 pl-4 pr-4">
+  <div class="prose lg:prose-base max-w-none">
+
+# {{frontmatter.title}}
+
+## Dig deeper
+Please contact us if you need extended access to the data underlying here. The TaxonWorks interfaces used to curate these data include wide range of additional filtering, reporting, and curatorial functionality. With a little training from us we'd be happy to provide you access to this additional functionality. Over time we expect this site to gradually mirror that extended functionality.
+
+## Contact
+If you have a question, want to report new data relevant to the project, or have error our preferred means of contact is to file an issue on our [project tracker](https://github.com/our/project/tracker). You can also [chat live with us](https://slackservername). We can also be reached via [email](mailto:{{frontmatter.contact_email}}).   
+
+## Team
+ _Please contact us if you would like to join this effort._
+
+Made possible by the wonderful:
+* Gandalf - Technical lead
+* Aragorn - Outside advisor 
+* Frodo - Lead curator
+* Samwise - Emotional support
+
+## Citing
+* This website - {{frontmatter.citation}}
+* Individual taxon pages - See citation at the bottom of each page.  
+
+## Data
+Data for these pages is collaboratively curated online in a [TaxonWorks](https://taxonworks) project. All data behind this site served as JSON through calls to a [TaxonWorks API](https://api.taxonworks.org). You can follow along by using the Console of your browser to explore the Network tab. 
+
+## Technical
+Want to create your own site? This website is built completely on open-source software. There is a [site template](https://github.com/SpeciesFileGroup/<something>) with more information. Data are curated in a [TaxonWorks](https://taxonworks.org) project then shared via a [TaxonWorks API](https://api.taxonworks.org). Come [chat](https://gitter.im/SpeciesFileGroup/taxonworks) with the TaxonWorks community at any time.
+
+## Copyright
+_{{frontmatter.copyright}}_
+
+  </div>
+</div>

src/content/home.md

@@ -0,0 +1,30 @@
+---
+title: The title
+lead: Taxa from your imagination to the web
+project: Your project
+---
+<div class="container mx-auto mt-4 pl-4 pr-4">
+  <div class="prose lg:prose-base max-w-none">
+
+  # {{frontmatter.title}}
+  _{{frontmatter.lead}}_
+
+  ## Overview
+  Welcome to *{{ frontmatter.project }}*, a website of taxon pages generated from the {{ frontmatter.project }} Project, a comprehensive collaborative effort managed in [TaxonWorks](https://taxonworks.org). 
+
+  ## Get started!
+  <autocomplete-otu/>
+
+  ## Announcements
+  * 5/1/2022 - We've grown!  
+  * 1/1/2022 - Our website is live!
+
+  ## Find out more
+  Learn how to collaborate with the {{ frontmatter.title }} project. Contact information, technical details, and more are available at [About](/about).
+
+  </div>
+</div>
+
+<script setup>
+import AutocompleteOtu from '@/components/Autocomplete/AutocompleteOtu.vue'
+</script>

src/modules/otus/components/Citation/CitationRow.vue

@@ -34,7 +34,4 @@ defineProps({
 
 const isExpanded = ref(false)
 
-const toggleCitation = () => {
-  isExpanded.value = !isExpanded.value
-}
 </script>

src/modules/otus/views/Overview.vue

@@ -66,7 +66,7 @@ defineProps({
   },
 
   taxonRank: {
-    type: String,
+    type: [String, null],
     required: true
   },
 
@@ -76,6 +76,6 @@ defineProps({
   }
 })
 
-const isComponentForRank = (available, rankString) => available.some(rankGroup => rankString.includes(rankGroup))
+const isComponentForRank = (available, rankString) => available.some(rankGroup => rankString?.includes(rankGroup))
 
 </script>

src/utils/request.js

@@ -1,14 +1,15 @@
 import axios from 'axios'
+import requiredConfiguration from '@/config/api.yml'
 
 const {
-  VITE_API_HOST,
-  VITE_PROJECT_TOKEN
-} = import.meta.env
+  url,
+  project_token
+} = requiredConfiguration
 
 const makeAPIRequest = axios.create({
-  baseURL: VITE_API_HOST,
+  baseURL: url,
   params: {
-    project_token: VITE_PROJECT_TOKEN
+    project_token
   }
 })
 

tailwind.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   content: [
     "./index.html",
-    "./src/**/*.{vue,js,ts,jsx,tsx}",
+    "./src/**/*.{vue,js,ts,jsx,tsx,md}",
   ],
   theme: {
     extend: {