Added GardenHerbsView.vue

app/src/router/index.ts

@@ -8,6 +8,7 @@ import LogBookView from '@/views/LogBookView.vue'
 import MainSite from '@/views/MainSite.vue'
 import GardenDetails from '@/views/GardenDetails.vue'
 import HikingView from '@/views/HikingView.vue'
+import GardenHerbsView from '@/views/GardenHerbsView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -51,6 +52,10 @@ const router = createRouter({
     {
       path: '/garden-details',
       component: GardenDetails
+    },
+    {
+      path: '/gardening/herbs',
+      component: GardenHerbsView
     }
   ]
 })

app/src/views/GardenDetails.vue

@@ -30,7 +30,7 @@ const sortedSpecies = [...SPECIES].sort((a, b) =>
         </div>
     </main>
 </template>
-<style>
+<style scoped>
 h1 {
     text-align: center;
 }

app/src/views/GardenHerbsView.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+</script>
+<template>
+    <header>
+        <h1>My Herb Garden</h1>
+        <nav>
+            <RouterLink to="/gardening" class="link-local">Back to my gardening page</RouterLink>
+        </nav>
+    </header>
+    <main>
+        <p>
+            Towards the end of the western portion of the garden, I've set up a
+            small patch of common kitchen herbs so that we don't have to buy
+            overpriced stuff from grocery stores.
+        </p>
+        <p>
+            As you can see, there's more here than we can use ourselves, so if
+            you're in the area and would like some, feel free to get your
+            scissors and take a bit for whatever you're cooking. All I ask is
+            that you please <strong>only take what you need, and refrain from
+            pruning anything that looks like it's not very abundant</strong>.
+            With your respectful cooperation, I can easily maintain these herbs
+            for many people to use.
+        </p>
+        <div class="status-note">
+            <p>
+                Note: At this time, I'm still trying to get the following herbs
+                established, so please don't take any of these:
+            </p>
+            <ul>
+                <li>Mojito Mint</li>
+                <li>Peppermint</li>
+                <li>Chocolate Mint</li>
+                <li>Chamomile</li>
+                <li>Basil</li>
+            </ul>
+            <p>
+                I also just pruned the Oregano, so please don't take too much
+                of that.
+            </p>
+        </div>
+        <p>
+            The image below provides a quick reference guide on which herbs are
+            which, but if you have any other questions,
+            <RouterLink to="/contact" class="link-local">feel free to ask.</RouterLink>
+        </p>
+        <img src="@/assets/images/herb-guide.jpg"/>
+    </main>
+</template>
+<style scoped>
+h1 {
+    text-align: center;
+}
+
+nav {
+    max-width: 50ch;
+    margin: 1rem auto;
+    padding: 0 0.5rem;
+}
+
+p {
+    max-width: 50ch;
+    margin: 1rem auto;
+    padding: 0 0.5rem;
+}
+
+img {
+    margin: 1rem auto;
+    max-width: calc(min(95%, 80ch));
+    display: block;
+}
+
+.status-note {
+    margin: 1rem auto;
+    font-weight: bold;
+    background-color: var(--background-color-2);
+    border-radius: 0.5rem;
+    border: 0.25rem solid var(--code-color);
+    max-width: 50ch;
+}
+</style>

app/src/views/GardeningView.vue

@@ -12,7 +12,7 @@
       I'd be happy to help!
     </p>
     <p>
-      <a href="/garden-details" class="link-local">Click here to view my home's garden.</a>
+      <a href="/gardening/herbs" class="link-local">Click here to view a guide to my garden's herb patch.</a>
     </p>
   </main>
 </template>