From c2bbd7ad88bec341c89bdfc061780a516f6997a7 Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Wed, 25 Mar 2026 02:43:12 +0000
Subject: [PATCH] Add Link and InlineLink reusable components

Link wraps RouterLink or <a> with consistent styling and automatic rel attributes. InlineLink adds bold italic inline link styling.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 nginx/vue/src/components/text/InlineLink.vue | 39 ++++++++++++++++++++
 nginx/vue/src/components/text/Link.vue       | 38 +++++++++++++++++++
 2 files changed, 77 insertions(+)
 create mode 100644 nginx/vue/src/components/text/InlineLink.vue

diff --git a/nginx/vue/src/components/text/InlineLink.vue b/nginx/vue/src/components/text/InlineLink.vue
new file mode 100644
index 0000000..e9dfc12
--- /dev/null
+++ b/nginx/vue/src/components/text/InlineLink.vue
@@ -0,0 +1,39 @@
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+    href: { type: String, default: "" },
+    to: { type: String, default: "" },
+    target: { type: String, default: undefined },
+    rel: { type: String, default: undefined },
+});
+
+const computedRel = computed(() => {
+    if (props.rel !== undefined) return props.rel;
+    if (props.target === "_blank") return "noopener noreferrer";
+    return undefined;
+});
+</script>
+
+<template>
+    <RouterLink v-if="to" :to="to" class="inline-link">
+        <slot />
+    </RouterLink>
+    <a v-else :href="href" :target="target" :rel="computedRel" class="inline-link">
+        <slot />
+    </a>
+</template>
+
+<style scoped>
+.inline-link {
+    color: var(--primary);
+    font-weight: bold;
+    font-style: italic;
+    text-decoration: none;
+    transition: color 0.15s ease;
+}
+
+.inline-link:hover {
+    color: var(--tertiary);
+}
+</style>
diff --git a/nginx/vue/src/components/text/Link.vue b/nginx/vue/src/components/text/Link.vue
index e69de29..b9d8fc5 100644
--- a/nginx/vue/src/components/text/Link.vue
+++ b/nginx/vue/src/components/text/Link.vue
@@ -0,0 +1,38 @@
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+    href: { type: String, default: "" },
+    to: { type: String, default: "" },
+    target: { type: String, default: undefined },
+    rel: { type: String, default: undefined },
+    bare: { type: Boolean, default: false },
+});
+
+const computedRel = computed(() => {
+    if (props.rel !== undefined) return props.rel;
+    if (props.target === "_blank") return "noopener noreferrer";
+    return undefined;
+});
+</script>
+
+<template>
+    <RouterLink v-if="to" :to="to" :class="{ link: !bare }">
+        <slot />
+    </RouterLink>
+    <a v-else :href="href" :target="target" :rel="computedRel" :class="{ link: !bare }">
+        <slot />
+    </a>
+</template>
+
+<style scoped>
+.link {
+    color: var(--primary);
+    text-decoration: none;
+    transition: color 0.15s ease;
+}
+
+.link:hover {
+    color: var(--tertiary);
+}
+</style>