Refactored to allow one-off pages, and cleaned up the gardening page.

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">
+  <RouterView />
-    <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>

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: '',
     '': ''
   },

app/src/router/index.ts

@@ -5,35 +5,49 @@ 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: MainSite,
+      children: [
+        {
+          path: '',
           component: HomeView
         },
         {
-      path: '/about',
+          path: 'about',
           component: AboutView
         },
         {
-      path: '/contact',
+          path: 'contact',
           component: ContactView
         },
         {
-      path: '/software',
+          path: 'software',
           component: SoftwareView
         },
         {
-      path: '/gardening',
+          path: 'gardening',
           component: GardeningView
         },
         {
-      path: '/logbook',
+          path: 'logbook',
           component: LogBookView
         }
       ]
+    },
+    {
+      path: '/garden-details',
+      component: () => GardenDetails
+    }
+  ]
 })
 
 export default router

app/src/stores/counter.ts

@@ -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 }
-})

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>

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>

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,
+      I'd like to call myself an avid gardener, with a particular interest in creating native-friendly garden habitats.
-      both for flowering and produce.
     </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).
+      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
-      In total, my garden currently has <strong>56 unique species</strong>, with
+      thinking about (finally) killing your lawn and providing a space for non-invasive and native species to thrive,
-      <strong>38 native species</strong>.
+      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>

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>