link donate externally

frontend/rabbi_gerzi/src/components/SiteFooter.vue

@@ -1,12 +1,22 @@
 <script setup lang="ts">
 import { RouterLink } from 'vue-router'
+import { donateLinkAttributes } from '@/content/donateLink'
 import { socialLinks, type SocialLinkLabel } from '@/content/socialLinks'
 
-interface FooterLink {
+interface RouteFooterLink {
+  kind: 'route'
   label: string
   to: string
 }
 
+interface ExternalFooterLink {
+  kind: 'external'
+  label: string
+  linkAttributes: typeof donateLinkAttributes
+}
+
+type FooterLink = RouteFooterLink | ExternalFooterLink
+
 const signatureImage = {
   src: '/assets/signature.png',
   alt: "R' Yehoshua Gerzi",
@@ -27,12 +37,16 @@ const footerSocialLinks = socialLinks.map((socialLink) => {
 
 const footerLinkColumns: FooterLink[][] = [
   [
-    { label: 'Torah Media', to: '/media' },
-    { label: 'About', to: '/about' },
+    { kind: 'route', label: 'Torah Media', to: '/media' },
+    { kind: 'route', label: 'About', to: '/about' },
   ],
   [
-    { label: 'Donate', to: '/donate' },
-    { label: 'Contact', to: '/contact' },
+    {
+      kind: 'external',
+      label: 'Donate',
+      linkAttributes: donateLinkAttributes,
+    },
+    { kind: 'route', label: 'Contact', to: '/contact' },
   ],
 ]
 </script>
@@ -62,10 +76,13 @@ const footerLinkColumns: FooterLink[][] = [
           :key="footerLinkColumnIndex"
           class="site-footer__link-column"
         >
-          <li v-for="footerLink in footerLinkColumn" :key="footerLink.to">
-            <RouterLink :to="footerLink.to">
+          <li v-for="footerLink in footerLinkColumn" :key="footerLink.label">
+            <RouterLink v-if="footerLink.kind === 'route'" :to="footerLink.to">
               {{ footerLink.label }}
             </RouterLink>
+            <a v-else v-bind="footerLink.linkAttributes">
+              {{ footerLink.label }}
+            </a>
           </li>
         </ul>
       </nav>

frontend/rabbi_gerzi/src/components/SiteHeader.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted } from 'vue'
 import { RouterLink, useRoute, type RouteLocationRaw } from 'vue-router'
+import { donateLinkAttributes } from '@/content/donateLink'
 import { useAuthStore } from '@/stores/auth'
 
 interface ContextualNavAction {
@@ -8,6 +9,15 @@ interface ContextualNavAction {
   to: RouteLocationRaw
 }
 
+interface HeaderNavItem {
+  label: string
+  icon: string
+}
+
+interface InternalHeaderNavItem extends HeaderNavItem {
+  href: string
+}
+
 const authStore = useAuthStore()
 const route = useRoute()
 
@@ -24,13 +34,17 @@ async function handleLogout(): Promise<void> {
   await authStore.logout()
 }
 
-const navItems = [
+const navItems: InternalHeaderNavItem[] = [
   { label: 'Torah Media', href: '/media', icon: '▶' },
   { label: 'About', href: '/about', icon: 'ⓘ' },
   { label: 'Contact', href: '/contact', icon: '➤' },
-  { label: 'Donate', href: '/donate', icon: '♡' },
 ]
 
+const donateNavItem: HeaderNavItem = {
+  label: 'Donate',
+  icon: '♡',
+}
+
 const routeElementId = computed(() => {
   const currentRouteElementId = route.params.id
 
@@ -85,6 +99,12 @@ const contextualNavAction = computed<ContextualNavAction | null>(() => {
         </span>
         <span>{{ item.label }}</span>
       </RouterLink>
+      <a v-bind="donateLinkAttributes" class="site-header__nav-link">
+        <span class="site-header__nav-icon" aria-hidden="true">
+          {{ donateNavItem.icon }}
+        </span>
+        <span>{{ donateNavItem.label }}</span>
+      </a>
       <RouterLink
         v-if="contextualNavAction !== null"
         :to="contextualNavAction.to"