From c3c64693ad7382e0121ae38dc40ffda80e0ebf34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Luis=20Pereira?= <pepelui@outlook.com>
Date: Thu, 16 Jun 2022 16:56:12 -0300
Subject: [PATCH] Add config files/folder, update components

---
 .../Autocomplete/AutocompleteOtu.vue          | 25 +++++++++++
 src/components/Button/ButtonExpand.vue        |  2 +-
 src/components/Layout/LayoutFooter.vue        | 39 +++++++++-------
 src/components/Layout/LayoutHeader.vue        | 45 ++++++++-----------
 src/components/Map/VMap.vue                   |  7 ++-
 src/config/api.yml                            |  3 ++
 src/config/copyright.yml                      |  4 ++
 src/config/header.yml                         |  8 ++++
 src/config/mapping.yml                        |  2 +
 src/config/project.yml                        |  5 +++
 src/config/router.yml                         |  3 ++
 src/content/about.md                          | 41 +++++++++++++++++
 src/content/home.md                           | 30 +++++++++++++
 .../otus/components/Citation/CitationRow.vue  |  3 --
 src/modules/otus/views/Overview.vue           |  4 +-
 src/utils/request.js                          | 11 ++---
 tailwind.config.js                            |  2 +-
 17 files changed, 175 insertions(+), 59 deletions(-)
 create mode 100644 src/components/Autocomplete/AutocompleteOtu.vue
 create mode 100644 src/config/api.yml
 create mode 100644 src/config/copyright.yml
 create mode 100644 src/config/header.yml
 create mode 100644 src/config/mapping.yml
 create mode 100644 src/config/project.yml
 create mode 100644 src/config/router.yml
 create mode 100644 src/content/about.md
 create mode 100644 src/content/home.md

diff --git a/src/components/Autocomplete/AutocompleteOtu.vue b/src/components/Autocomplete/AutocompleteOtu.vue
new file mode 100644
index 0000000..f18d3cc
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Button/ButtonExpand.vue b/src/components/Button/ButtonExpand.vue
index 6a83c70..9f384a3 100644
--- a/src/components/Button/ButtonExpand.vue
+++ b/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 () {
diff --git a/src/components/Layout/LayoutFooter.vue b/src/components/Layout/LayoutFooter.vue
index 20c35ce..037869b 100644
--- a/src/components/Layout/LayoutFooter.vue
+++ b/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>
diff --git a/src/components/Layout/LayoutHeader.vue b/src/components/Layout/LayoutHeader.vue
index 54e8bcd..5445efb 100644
--- a/src/components/Layout/LayoutHeader.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Map/VMap.vue b/src/components/Map/VMap.vue
index 3b56cff..3fc8f04 100644
--- a/src/components/Map/VMap.vue
+++ b/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
   })
 }
diff --git a/src/config/api.yml b/src/config/api.yml
new file mode 100644
index 0000000..676846d
--- /dev/null
+++ b/src/config/api.yml
@@ -0,0 +1,3 @@
+---
+  url: https://sandcastle.taxonworks.org/api/v1
+  project_token: NOw8ZKe7O0axmMkNPZn35Q
diff --git a/src/config/copyright.yml b/src/config/copyright.yml
new file mode 100644
index 0000000..192dea4
--- /dev/null
+++ b/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."
diff --git a/src/config/header.yml b/src/config/header.yml
new file mode 100644
index 0000000..22018dc
--- /dev/null
+++ b/src/config/header.yml
@@ -0,0 +1,8 @@
+---
+  logo_url:
+  links:
+    - label: Home
+      link: /
+
+    - label: About
+      link: /about
diff --git a/src/config/mapping.yml b/src/config/mapping.yml
new file mode 100644
index 0000000..7396029
--- /dev/null
+++ b/src/config/mapping.yml
@@ -0,0 +1,2 @@
+---
+  map_server_tils: https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
diff --git a/src/config/project.yml b/src/config/project.yml
new file mode 100644
index 0000000..dc19ef4
--- /dev/null
+++ b/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."
diff --git a/src/config/router.yml b/src/config/router.yml
new file mode 100644
index 0000000..6f374a7
--- /dev/null
+++ b/src/config/router.yml
@@ -0,0 +1,3 @@
+---
+  base_url: /
+  hash_mode: false
\ No newline at end of file
diff --git a/src/content/about.md b/src/content/about.md
new file mode 100644
index 0000000..f8f3837
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/content/home.md b/src/content/home.md
new file mode 100644
index 0000000..fc72567
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/modules/otus/components/Citation/CitationRow.vue b/src/modules/otus/components/Citation/CitationRow.vue
index e7d2647..1e7f1ff 100644
--- a/src/modules/otus/components/Citation/CitationRow.vue
+++ b/src/modules/otus/components/Citation/CitationRow.vue
@@ -34,7 +34,4 @@ defineProps({
 
 const isExpanded = ref(false)
 
-const toggleCitation = () => {
-  isExpanded.value = !isExpanded.value
-}
 </script>
\ No newline at end of file
diff --git a/src/modules/otus/views/Overview.vue b/src/modules/otus/views/Overview.vue
index 88f95ea..5d8e408 100644
--- a/src/modules/otus/views/Overview.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/utils/request.js b/src/utils/request.js
index f563903..816646f 100644
--- a/src/utils/request.js
+++ b/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
   }
 })
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 89ccb5f..3aa7c86 100644
--- a/tailwind.config.js
+++ b/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: {