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

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

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>

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>

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>
+            </Link>
-            <a href="https://jacobbarron.xyz">
+            <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>

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"
+                <Link href="https://wiki.teamfortress.com/wiki/Demoman"
-                    >The goat</a
+                    >The goat</Link
                 >
             </p>
             <div>