From d1c0a996ad71186b99b16f61f510231260b012b1 Mon Sep 17 00:00:00 2001
From: andrewlalis <andrewlalisofficial@gmail.com>
Date: Fri, 4 Oct 2024 15:57:49 -0400
Subject: [PATCH] Refactored to allow one-off pages, and cleaned up the
 gardening page.

---
 app/src/App.vue                 | 82 ++------------------------------
 app/src/garden_data.ts          | 46 +++++++++++++-----
 app/src/router/index.ts         | 52 ++++++++++++--------
 app/src/stores/counter.ts       | 12 -----
 app/src/views/AboutView.vue     |  2 +-
 app/src/views/GardenDetails.vue | 54 +++++++++++++++++++++
 app/src/views/GardeningView.vue | 24 +++-------
 app/src/views/MainSite.vue      | 84 +++++++++++++++++++++++++++++++++
 8 files changed, 219 insertions(+), 137 deletions(-)
 delete mode 100644 app/src/stores/counter.ts
 create mode 100644 app/src/views/GardenDetails.vue
 create mode 100644 app/src/views/MainSite.vue

diff --git a/app/src/App.vue b/app/src/App.vue
index c5bb4a3..ae76ecc 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -1,83 +1,11 @@
+<!--
+The main app just contains a RouterView that's populated entirely by the
+router and the user's currently selected route.
+-->
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
-import NavLink from './components/NavLink.vue'
 </script>
 
 <template>
-  <div class="bisection-container">
-    <header class="page-bisection">
-      <h1 class="site-header-text">Andrew Lalis</h1>
-      <nav>
-        <NavLink path="/">Home</NavLink>
-        <NavLink path="/about">About</NavLink>
-        <NavLink path="/software">Software</NavLink>
-        <NavLink path="/gardening">Gardening</NavLink>
-        <NavLink path="/logbook">Logbook</NavLink>
-        <NavLink path="/contact">Contact</NavLink>
-      </nav>
-    </header>
-
-    <RouterView v-slot="{ Component }">
-      <Transition name="page">
-        <Component :is="Component" class="page-bisection content-page" />
-      </Transition>
-    </RouterView>
-  </div>
+  <RouterView />
 </template>
-
-<style>
-.bisection-container {
-  text-align: center;
-}
-.page-bisection {
-  width: 50ch;
-  display: inline-block;
-  vertical-align: top;
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-.content-page {
-  text-align: left;
-  margin-top: 1rem;
-}
-
-.site-header-text {
-  font-family: Sacramento;
-  container-type: inline-size;
-  font-size: calc(min(60px, max(5cqw, 42px)));
-  text-align: right;
-  margin-top: 1rem;
-  margin-bottom: 0;
-}
-
-.page-enter-active {
-  transition: all 0.5s ease;
-}
-
-.page-enter-from {
-  opacity: 0;
-  transform: translateX(30px);
-}
-
-/*
-Activates once the left and right half of the page stack due to width constraints.
-We remove a lot of the vertical spacing to make things fit better.
-*/
-@media (width < calc(100ch - 2.5rem)) {
-  .site-header-text {
-    margin-top: 0;
-  }
-  .content-page {
-    margin-top: 0;
-  }
-}
-
-/*
-Once the device width is smaller than one of the halves, sync the page half to the device width.
-*/
-@media (width < 50ch) {
-  .page-bisection {
-    width: calc(100% - 2rem);
-  }
-}
-</style>
diff --git a/app/src/garden_data.ts b/app/src/garden_data.ts
index 586261f..f02b2b4 100644
--- a/app/src/garden_data.ts
+++ b/app/src/garden_data.ts
@@ -13,7 +13,7 @@ export const SPECIES = [
     'Florida Native': 'Yes',
     Current: 'Yes',
     Statistics: 'Total Species',
-    '': 56
+    '': 58
   },
   {
     'Scientific Name': 'Viburnum obovatum var. Densa',
@@ -26,7 +26,7 @@ export const SPECIES = [
     'Florida Native': 'Yes',
     Current: 'Yes',
     Statistics: 'Total Natives',
-    '': 38
+    '': 40
   },
   {
     'Scientific Name': 'Allium tuberosum',
@@ -37,7 +37,7 @@ export const SPECIES = [
     'Florida Native': 'No',
     Current: 'Yes',
     Statistics: '% Native',
-    '': '67.86%'
+    '': '68.97%'
   },
   {
     'Scientific Name': 'Asclepias incarnata',
@@ -59,8 +59,8 @@ export const SPECIES = [
     'Image Link': 'https://www.fnps.org/assets/images/plants/Asclepias_perennis-Stibolt2.jpg',
     'Florida Native': 'Yes',
     Current: 'Yes',
-    Statistics: '',
-    '': ''
+    Statistics: 'Current Species',
+    '': 52
   },
   {
     'Scientific Name': 'Asclepias tuberosa',
@@ -129,7 +129,7 @@ export const SPECIES = [
     'Image Link':
       'https://www.flawildflowers.org/wp-content/uploads/2017/06/coreopsis_leavenworthii-e1591118903862.jpg',
     'Florida Native': 'Yes',
-    Current: 'Yes',
+    Current: 'No',
     Statistics: '',
     '': ''
   },
@@ -153,7 +153,7 @@ export const SPECIES = [
     'Image Link':
       'https://s3.amazonaws.com/eit-planttoolbox-prod/media/images/Liatris_spicata_Hedwig_Storch_ccbysa30.JPG',
     'Florida Native': 'Yes',
-    Current: 'Yes',
+    Current: 'No',
     Statistics: '',
     '': ''
   },
@@ -199,7 +199,7 @@ export const SPECIES = [
     'Image Link':
       'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tithonia_rotundifolia_kz2.jpg',
     'Florida Native': 'No',
-    Current: 'Yes',
+    Current: 'No',
     Statistics: '',
     '': ''
   },
@@ -215,6 +215,18 @@ export const SPECIES = [
     Statistics: '',
     '': ''
   },
+  {
+    'Scientific Name': 'Sambucus nigra ssp. Canadensis',
+    'Common Name': 'Common Elderberry',
+    Family: 'Caprifoliaceae',
+    Reference: 'https://www.wildflower.org/plants/result.php?id_plant=sanic4',
+    'Image Link':
+      'https://bluethumb.org/wp-content/uploads/sites/2/2024/03/sambucus_nigra_ssp_canadensis-800x800.jpg',
+    'Florida Native': 'Yes',
+    Current: 'Yes',
+    Statistics: '',
+    '': ''
+  },
   {
     'Scientific Name': 'Tradescantia ohiensis',
     'Common Name': 'Spiderwort',
@@ -260,6 +272,18 @@ export const SPECIES = [
     Statistics: '',
     '': ''
   },
+  {
+    'Scientific Name': 'Dryopteris ludoviciana',
+    'Common Name': 'Southern Wood Fern',
+    Family: 'Dryopteridaceae',
+    Reference: 'https://en.wikipedia.org/wiki/Dryopteris_ludoviciana',
+    'Image Link':
+      'https://upload.wikimedia.org/wikipedia/commons/d/d2/Southern_Wood_Fern_Dryopteris_ludoviciana_Leaves_3008px.JPG',
+    'Florida Native': 'Yes',
+    Current: 'Yes',
+    Statistics: '',
+    '': ''
+  },
   {
     'Scientific Name': 'Erythrina herbacea',
     'Common Name': 'Coral Bean',
@@ -362,7 +386,7 @@ export const SPECIES = [
     Reference: 'https://en.wikipedia.org/wiki/Salvia_azurea',
     'Image Link': 'https://upload.wikimedia.org/wikipedia/commons/6/63/Salvia_azurea1.jpg',
     'Florida Native': 'Yes',
-    Current: 'Yes',
+    Current: 'No',
     Statistics: '',
     '': ''
   },
@@ -551,7 +575,7 @@ export const SPECIES = [
     'Image Link':
       'https://s3.amazonaws.com/eit-planttoolbox-prod/media/images/Capsicum_annuum_Chil_AyfsPt9WpZrr.jpeg',
     'Florida Native': 'No',
-    Current: 'Yes',
+    Current: 'No',
     Statistics: '',
     '': ''
   },
@@ -574,7 +598,7 @@ export const SPECIES = [
     'Image Link':
       'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Immature_jalapeno_capsicum_annuum_var_annuum.jpeg/1024px-Immature_jalapeno_capsicum_annuum_var_annuum.jpeg',
     'Florida Native': 'No',
-    Current: 'Yes',
+    Current: 'No',
     Statistics: '',
     '': ''
   },
diff --git a/app/src/router/index.ts b/app/src/router/index.ts
index 9e1ae48..5921b95 100644
--- a/app/src/router/index.ts
+++ b/app/src/router/index.ts
@@ -5,33 +5,47 @@ import ContactView from '@/views/ContactView.vue'
 import SoftwareView from '@/views/SoftwareView.vue'
 import GardeningView from '@/views/GardeningView.vue'
 import LogBookView from '@/views/LogBookView.vue'
+import MainSite from '@/views/MainSite.vue'
+import GardenDetails from '@/views/GardenDetails.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
+    // Most paths are nested under the MainSite component, which provides the
+    // common header links and formatting.
     {
       path: '/',
-      component: HomeView
+      component: MainSite,
+      children: [
+        {
+          path: '',
+          component: HomeView
+        },
+        {
+          path: 'about',
+          component: AboutView
+        },
+        {
+          path: 'contact',
+          component: ContactView
+        },
+        {
+          path: 'software',
+          component: SoftwareView
+        },
+        {
+          path: 'gardening',
+          component: GardeningView
+        },
+        {
+          path: 'logbook',
+          component: LogBookView
+        }
+      ]
     },
     {
-      path: '/about',
-      component: AboutView
-    },
-    {
-      path: '/contact',
-      component: ContactView
-    },
-    {
-      path: '/software',
-      component: SoftwareView
-    },
-    {
-      path: '/gardening',
-      component: GardeningView
-    },
-    {
-      path: '/logbook',
-      component: LogBookView
+      path: '/garden-details',
+      component: () => GardenDetails
     }
   ]
 })
diff --git a/app/src/stores/counter.ts b/app/src/stores/counter.ts
deleted file mode 100644
index b6757ba..0000000
--- a/app/src/stores/counter.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})
diff --git a/app/src/views/AboutView.vue b/app/src/views/AboutView.vue
index 38545e2..1b6396f 100644
--- a/app/src/views/AboutView.vue
+++ b/app/src/views/AboutView.vue
@@ -25,7 +25,7 @@
       Server), and is served through Nginx and various firewalls.
     </p>
     <p>
-      If you actually go and view the source code, you'll see a <code>deploy.sh</code> file.
+      If you actually go and view the source code, you'll see an <code>upload.sh</code> file.
       Essentially, all I do is build the site locally, then upload the files. Pretty simple, right?
     </p>
   </main>
diff --git a/app/src/views/GardenDetails.vue b/app/src/views/GardenDetails.vue
new file mode 100644
index 0000000..7f609c6
--- /dev/null
+++ b/app/src/views/GardenDetails.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import GardenSpeciesCard from '@/components/GardenSpeciesCard.vue';
+import { SPECIES } from '@/garden_data';
+
+const sortedSpecies = [...SPECIES].sort((a, b) =>
+    a['Scientific Name'] > b['Scientific Name'] ? 1 : -1
+)
+</script>
+<template>
+    <header>
+        <h1>My Home's Garden</h1>
+    </header>
+    <main>
+        <p>
+            On this page, you'll find a list of all plants currently (or formerly)
+            in my garden.
+        </p>
+        <p>
+            I keep a spreadsheet of all the species in my garden (or that have been present in the past).
+            In total, my garden currently has <strong>52 unique species</strong>, with
+            <strong>37 native species</strong>.
+        </p>
+        <p>
+            <a href="/gardening" class="link-local">Back to gardening</a>
+        </p>
+
+        <div class="garden-cards-container">
+            <GardenSpeciesCard v-for="species in sortedSpecies" :key="species['Scientific Name']" :species="species"
+                style="width: 300px;" />
+        </div>
+    </main>
+</template>
+<style>
+h1 {
+    text-align: center;
+}
+
+p {
+    max-width: 50ch;
+    margin: 1rem auto;
+}
+
+.garden-cards-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    justify-content: center;
+}
+
+/* No margins for the cards when in flex mode. */
+.garden-species-card {
+    margin: 0;
+}
+</style>
diff --git a/app/src/views/GardeningView.vue b/app/src/views/GardeningView.vue
index b7bf134..720356f 100644
--- a/app/src/views/GardeningView.vue
+++ b/app/src/views/GardeningView.vue
@@ -1,28 +1,18 @@
 <script setup lang="ts">
-import GardenSpeciesCard from '@/components/GardenSpeciesCard.vue'
-import { SPECIES } from '@/garden_data'
-
-const sortedSpecies = [...SPECIES].sort((a, b) =>
-  a['Scientific Name'] > b['Scientific Name'] ? 1 : -1
-)
 </script>
 
 <template>
   <main>
     <p>
-      I do my best to maintain a small garden filled with a mix of native and non-invasive plants,
-      both for flowering and produce.
+      I'd like to call myself an avid gardener, with a particular interest in creating native-friendly garden habitats.
     </p>
-    <h3>Species in My Garden</h3>
     <p>
-      I keep a spreadsheet of all the species in my garden (or that have been present in the past).
-      In total, my garden currently has <strong>56 unique species</strong>, with
-      <strong>38 native species</strong>.
+      I work on my own garden that I share with my partner, and I like to help out with others' too. So if you're
+      thinking about (finally) killing your lawn and providing a space for non-invasive and native species to thrive,
+      I'd be happy to help!
+    </p>
+    <p>
+      <a href="/garden-details" class="link-local">Click here to view my home's garden.</a>
     </p>
-    <GardenSpeciesCard
-      v-for="species in sortedSpecies"
-      :key="species['Scientific Name']"
-      :species="species"
-    />
   </main>
 </template>
diff --git a/app/src/views/MainSite.vue b/app/src/views/MainSite.vue
new file mode 100644
index 0000000..f893f62
--- /dev/null
+++ b/app/src/views/MainSite.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+import NavLink from '@/components/NavLink.vue';
+</script>
+<template>
+    <div class="bisection-container">
+        <header class="page-bisection">
+            <h1 class="site-header-text">Andrew Lalis</h1>
+            <nav>
+                <NavLink path="/">Home</NavLink>
+                <NavLink path="/about">About</NavLink>
+                <NavLink path="/software">Software</NavLink>
+                <NavLink path="/gardening">Gardening</NavLink>
+                <NavLink path="/logbook">Logbook</NavLink>
+                <NavLink path="/contact">Contact</NavLink>
+            </nav>
+        </header>
+
+        <RouterView v-slot="{ Component }">
+            <Transition name="page">
+                <Component :is="Component" class="page-bisection content-page" />
+            </Transition>
+        </RouterView>
+    </div>
+</template>
+<style>
+.bisection-container {
+    text-align: center;
+}
+
+.page-bisection {
+    width: 50ch;
+    display: inline-block;
+    vertical-align: top;
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+.content-page {
+    text-align: left;
+    margin-top: 1rem;
+}
+
+.site-header-text {
+    font-family: Sacramento;
+    container-type: inline-size;
+    font-size: calc(min(60px, max(5cqw, 42px)));
+    text-align: right;
+    margin-top: 1rem;
+    margin-bottom: 0;
+}
+
+.page-enter-active {
+    transition: all 0.5s ease;
+}
+
+.page-enter-from {
+    opacity: 0;
+    transform: translateX(30px);
+}
+
+/*
+Activates once the left and right half of the page stack due to width constraints.
+We remove a lot of the vertical spacing to make things fit better.
+*/
+@media (width < calc(100ch - 2.5rem)) {
+    .site-header-text {
+        margin-top: 0;
+    }
+
+    .content-page {
+        margin-top: 0;
+    }
+}
+
+/*
+Once the device width is smaller than one of the halves, sync the page half to the device width.
+*/
+@media (width < 50ch) {
+    .page-bisection {
+        width: calc(100% - 2rem);
+    }
+}
+</style>