From 6dddcd4d7a8329f7a90c4a632ab51cd7008a60d2 Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Wed, 25 Mar 2026 02:43:32 +0000
Subject: [PATCH] Replace raw anchor tags with Link component across views

Use Link component in Chat, CommitHistory, Stamps, Demoman, and fix Navbar to use span instead of nested anchors. Also updates Navbar inHome check for /stp route.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 nginx/vue/src/components/Navbar.vue           |  6 +++---
 nginx/vue/src/components/util/Chat.vue        | 21 +++++++++++++------
 .../vue/src/components/util/CommitHistory.vue |  5 +++--
 nginx/vue/src/views/home/Stamps.vue           |  9 ++++----
 nginx/vue/src/views/shrines/Demoman.vue       |  5 +++--
 5 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/nginx/vue/src/components/Navbar.vue b/nginx/vue/src/components/Navbar.vue
index 5582d25..eaf2562 100644
--- a/nginx/vue/src/components/Navbar.vue
+++ b/nginx/vue/src/components/Navbar.vue
@@ -16,7 +16,7 @@ const parentPath = computed(() => {
 });
 
 const inHome = computed(() => {
-    return route.path == "/";
+    return route.path == "/" || route.path == "/stp";
 });
 
 const faces = [
@@ -47,10 +47,10 @@ const faces_string = faces.join("      ");
 <template>
     <nav class="flex flex-row w-full h-fit border border-primary bg-bg_primary">
         <RouterLink class="bdr-2 bg-bg_primary" to="/" v-if="!inHome">
-            <a>HOME</a>
+            <span>HOME</span>
         </RouterLink>
         <RouterLink class="bdr-2 bg-bg_primary" v-if="parentPath" :to="parentPath">
-            <a>UP</a>
+            <span>UP</span>
         </RouterLink>
         <Headline class="border flex-1 max-w-full">
             <code class="whitespace-pre">{{ faces_string }}</code>
diff --git a/nginx/vue/src/components/util/Chat.vue b/nginx/vue/src/components/util/Chat.vue
index 717ba93..f859684 100644
--- a/nginx/vue/src/components/util/Chat.vue
+++ b/nginx/vue/src/components/util/Chat.vue
@@ -4,6 +4,7 @@ import Button from "@/components/input/Button.vue";
 import { useMessagesStore } from "@/stores/messages";
 import { useAuthStore } from "@/stores/auth";
 import Header from "@/components/text/Header.vue";
+import Link from "@/components/text/Link.vue";
 
 const messagesStore = useMessagesStore();
 const authStore = useAuthStore();
@@ -79,7 +80,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="flex-col flex min-h-0">
+  <div class="chat-root flex-col flex min-h-0">
     <Header>Chat</Header>
     <div ref="messagesContainer" class="flex flex-col flex-1 min-h-0 overflow-y-auto overflow-x-hidden p-2 min-w-0">
       <p v-for="message in messages" :key="message.id" class="break-words min-w-0 w-full">
@@ -88,13 +89,13 @@ onUnmounted(() => {
           v-for="(part, i) in parseMessageParts(message.text || '')"
           :key="i"
         >
-          <a
+          <Link
             v-if="part.type === 'link'"
+            bare
             :href="part.value"
             target="_blank"
-            rel="noopener noreferrer"
             class="text-primary underline break-all"
-            >{{ part.value }}</a
+            >{{ part.value }}</Link
           >
           <span v-else>{{ part.value }}</span>
         </template>
@@ -112,9 +113,9 @@ onUnmounted(() => {
             class="w-full max-w-full max-h-48 rounded block"
             @loadedmetadata="scrollToBottom"
           />
-          <a v-else :href="message.fileUrl" target="_blank" class="underline break-all">{{
+          <Link v-else bare :href="message.fileUrl" target="_blank" class="underline break-all">{{
             message.fileUrl.split("/").pop()
-          }}</a>
+          }}</Link>
         </template>
       </p>
     </div>
@@ -139,3 +140,11 @@ onUnmounted(() => {
     </div>
   </div>
 </template>
+
+<style scoped>
+@media (max-width: 850px) {
+    .chat-root {
+        max-height: 400px;
+    }
+}
+</style>
diff --git a/nginx/vue/src/components/util/CommitHistory.vue b/nginx/vue/src/components/util/CommitHistory.vue
index 8d14661..0c3a827 100644
--- a/nginx/vue/src/components/util/CommitHistory.vue
+++ b/nginx/vue/src/components/util/CommitHistory.vue
@@ -2,6 +2,7 @@
 import { useHomeDataStore } from "@/stores/homeData";
 import { storeToRefs } from "pinia";
 import Header from "@/components/text/Header.vue";
+import Link from "@/components/text/Link.vue";
 
 const homeData = useHomeDataStore();
 const { gitFeed: feed, loaded } = storeToRefs(homeData);
@@ -18,9 +19,9 @@ const { gitFeed: feed, loaded } = storeToRefs(homeData);
     <div v-else-if="feed" class="flex-1 flex flex-col overflow-y-auto">
       <h3>Last git activity</h3>
       <img :src="feed.avatarUrl" alt="User avatar" class="avatar" />
-      <a :href="feed.repoUrl">
+      <Link :href="feed.repoUrl">
         <h3>repo: {{ feed.repoName }}</h3>
-      </a>
+      </Link>
       <p>Action: {{ feed.opType }}</p>
       <p>Message: {{ feed.commitMessage }}</p>
       <small> {{ new Date(feed.createdAt).toLocaleString() }}</small>
diff --git a/nginx/vue/src/views/home/Stamps.vue b/nginx/vue/src/views/home/Stamps.vue
index ad5e7da..0b37bd9 100644
--- a/nginx/vue/src/views/home/Stamps.vue
+++ b/nginx/vue/src/views/home/Stamps.vue
@@ -2,6 +2,7 @@
 import { ref } from "vue";
 
 import Touchscreen from "@/components/util/Touchscreen.vue";
+import Link from "@/components/text/Link.vue";
 import { shuffleArray } from "@/js/utils.js";
 
 let srcs = [
@@ -23,15 +24,15 @@ shuffleArray(srcs);
 <template>
     <Touchscreen>
         <div class="flex flex-wrap tst">
-            <a href="https://www.adam-french.co.uk">
+            <Link bare href="https://www.adam-french.co.uk">
                 <img src="https://www.adam-french.co.uk/img/stamps/mine.gif" />
-            </a>
-            <a href="https://jacobbarron.xyz">
+            </Link>
+            <Link bare href="https://jacobbarron.xyz">
                 <img
                     src="https://jacobbarron.xyz/Banneh.gif"
                     alt="jacobbarron.xyz"
                 />
-            </a>
+            </Link>
             <img v-for="src in srcs" :src="src" />
         </div>
     </Touchscreen>
diff --git a/nginx/vue/src/views/shrines/Demoman.vue b/nginx/vue/src/views/shrines/Demoman.vue
index b130b96..e791982 100644
--- a/nginx/vue/src/views/shrines/Demoman.vue
+++ b/nginx/vue/src/views/shrines/Demoman.vue
@@ -1,5 +1,6 @@
 <script setup>
 import VideoTable from "@/components/util/VideoTable.vue";
+import Link from "@/components/text/Link.vue";
 
 const videoSources = [
     { name: "demoman", link: "/img/demoman/1760582395316219.webm" },
@@ -16,8 +17,8 @@ const videoSources = [
             class="a4page-portrait bdr-1 flex flex-row relative overflow-scroll items-center"
         >
             <p>
-                <a href="https://wiki.teamfortress.com/wiki/Demoman"
-                    >The goat</a
+                <Link href="https://wiki.teamfortress.com/wiki/Demoman"
+                    >The goat</Link
                 >
             </p>
             <div>