Added hiking page.

app/src/components/NavLink.vue

@@ -1,15 +1,20 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { useRoute } from 'vue-router'
 
 const route = useRoute()
-defineProps<{
+const props = defineProps<{
   path: string
 }>()
+
+const active = computed(() => {
+  return props.path !== '/' && route.path.startsWith(props.path) || props.path === route.path
+})
 </script>
 
 <template>
   <div class="nav-link">
-    <RouterLink :to="path" v-bind:class="route.path === path ? 'nav-link-active' : ''">
+    <RouterLink :to="path" v-bind:class="active ? 'nav-link-active' : ''">
       <slot></slot>
     </RouterLink>
   </div>

app/src/router/index.ts

@@ -7,6 +7,7 @@ import GardeningView from '@/views/GardeningView.vue'
 import LogBookView from '@/views/LogBookView.vue'
 import MainSite from '@/views/MainSite.vue'
 import GardenDetails from '@/views/GardenDetails.vue'
+import HikingView from '@/views/HikingView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -37,6 +38,10 @@ const router = createRouter({
           path: 'gardening',
           component: GardeningView
         },
+        {
+          path: 'hiking',
+          component: HikingView
+        },
         {
           path: 'logbook',
           component: LogBookView

app/src/views/HikingView.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <main>
+        <p>
+            Once in a while, I'll go out hiking, so here's a record of all the
+            mountains I've sumitted.
+        </p>
+        <div class="hiking-entry">
+            <header>
+                <h3>Larch Mountain</h3>
+                <time datetime="2025-05-25">May 25th, 2025</time>
+            </header>
+            <p>
+                Starting at Wakeena Falls, we first hiked over to Multnomah
+                Falls, then up into the Mt. Hood Wilderness on the Larch
+                Mountain Trail. It was a very long hike, taking just about 8
+                hours to complete the entire 16-mile distance.
+            </p>
+            <div class="hiking-entry-attributes">
+                <span class="elevation">4,056 ft.</span>
+                <a href="https://www.strava.com/activities/14595451892" class="strava-link" target="_blank">Strava</a>
+                <a href="https://youtu.be/9A5dGchdbeM" class="youtube-link" target="_blank">YouTube</a>
+            </div>
+        </div>
+        <div class="hiking-entry">
+            <header>
+                <h3>Elk Mountain</h3>
+                <time datetime="2025-04-12">April 12th, 2025</time>
+            </header>
+            <p>
+                After sumitting King's Mountain, we headed back down for a much
+                more technical climb to Elk Mountain, involving sketchy trails
+                with steep drop-offs, and a lot of scrambling over rocks.
+            </p>
+            <div class="hiking-entry-attributes">
+                <span class="elevation">2,788 ft.</span>
+                <a href="https://www.strava.com/activities/14160565820" class="strava-link" target="_blank">Strava</a>
+            </div>
+        </div>
+        <div class="hiking-entry">
+            <header>
+                <h3>King's Mountain</h3>
+                <time datetime="2025-04-12">April 12th, 2025</time>
+            </header>
+            <p>
+                Summitted as the first part of the King's Mountain / Elk
+                Mountain 10-mile loop. This one wasn't technical, but just
+                a very long, brutal uphill climb.
+            </p>
+            <div class="hiking-entry-attributes">
+                <span class="elevation">3,226 ft.</span>
+                <a href="https://www.strava.com/activities/14160565820" class="strava-link" target="_blank">Strava</a>
+            </div>
+        </div>
+        <div class="hiking-entry">
+            <header>
+                <h3>Angel's Rest</h3>
+                <time datetime="2024-09-21">September 21st, 2024</time>
+            </header>
+            <p>
+                My first actual "mountain" summit, when I visted Oregon in the
+                fall of 2024. It was a great hike, but since I had never
+                climbed any mountains before, it was exhausting.
+            </p>
+            <div class="hiking-entry-attributes">
+                <span class="elevation">1,475 ft.</span>
+                <a href="https://www.strava.com/activities/12471616389" class="strava-link" target="_blank">Strava</a>
+            </div>
+        </div>
+    </main>
+</template>
+<style scoped>
+.hiking-entry {
+    margin-bottom: 1rem;
+    background-color: var(--background-color-2);
+    border-radius: 1rem;
+    padding: 1rem;
+}
+.hiking-entry header {
+    display: flex;
+    justify-content: space-between;
+    align-items: top;
+}
+.hiking-entry h3 {
+    margin: 0;
+}
+.hiking-entry time {
+    display: block;
+    font-size: small;
+    margin-bottom: 0.25rem;
+}
+.hiking-entry p {
+    font-size: smaller;
+    text-align: left;
+    margin: 0.5rem 0 0.5rem 0;
+}
+.hiking-entry-attributes {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+.hiking-entry-attributes>* {
+    background-color: var(--background-color);
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.5rem;
+    font-size: small;
+    text-align: center;
+    vertical-align: middle;
+}
+.strava-link {
+    color: #fc5200;
+    text-decoration: none;
+}
+.strava-link:hover {
+    text-decoration: underline;
+}
+.youtube-link {
+    color: #ff0033;
+    text-decoration: none;
+}
+.youtube-link:hover {
+    text-decoration: underline;
+}
+.elevation {
+    font-weight: bold;
+    color: var(--success-color);
+}
+</style>

app/src/views/MainSite.vue

@@ -18,6 +18,7 @@ import NavLink from '@/components/NavLink.vue';
                 <NavLink path="/about">About</NavLink>
                 <NavLink path="/software">Software</NavLink>
                 <NavLink path="/gardening">Gardening</NavLink>
+                <NavLink path="/hiking">Hiking</NavLink>
                 <NavLink path="/logbook">Logbook</NavLink>
                 <NavLink path="/contact">Contact</NavLink>
             </nav>