share social links

frontend/rabbi_gerzi/src/components/SiteFooter.vue

@@ -1,34 +1,29 @@
 <script setup lang="ts">
 import { RouterLink } from 'vue-router'
+import { socialLinks, type SocialLinkLabel } from '@/content/socialLinks'
 
 interface FooterLink {
   label: string
   to: string
 }
 
-interface SocialLink {
-  label: string
-  href: string
-  glyph: string
-}
-
 const signatureImage = {
   src: '/assets/signature.png',
   alt: "R' Yehoshua Gerzi",
 }
 
-const socialLinks: SocialLink[] = [
+const socialGlyphs: Record<SocialLinkLabel, string> = {
-  {
+  YouTube: '▶',
-    label: 'YouTube',
+  Spotify: '♫',
-    href: '#',
+}
-    glyph: '▶',
+
-  },
+const footerSocialLinks = socialLinks.map((socialLink) => {
-  {
+  return {
-    label: 'Spotify',
+    label: socialLink.label,
-    href: '#',
+    href: socialLink.href,
-    glyph: '♫',
+    glyph: socialGlyphs[socialLink.label],
-  },
+  }
-]
+})
 
 const footerLinkColumns: FooterLink[][] = [
   [
@@ -49,11 +44,13 @@ const footerLinkColumns: FooterLink[][] = [
         <img v-bind="signatureImage" class="site-footer__signature" />
         <div class="site-footer__social">
           <a
-            v-for="socialLink in socialLinks"
+            v-for="socialLink in footerSocialLinks"
             :key="socialLink.label"
             :href="socialLink.href"
             class="site-footer__social-link"
             :aria-label="socialLink.label"
+            target="_blank"
+            rel="noopener"
           >
             {{ socialLink.glyph }}
           </a>

frontend/rabbi_gerzi/src/content/socialLinks.ts

@@ -0,0 +1,19 @@
+export type SocialLinkLabel = 'YouTube' | 'Spotify'
+
+export interface SocialLink {
+  label: SocialLinkLabel
+  href: string
+}
+
+const spotifyShowPath = '49H1X9A7KZWAnnIbcoQXQR?si=6253691f23be44ad'
+
+export const socialLinks: SocialLink[] = [
+  {
+    label: 'YouTube',
+    href: 'https://www.youtube.com/@rabbigerzi',
+  },
+  {
+    label: 'Spotify',
+    href: 'https://open.spotify.com/show/' + spotifyShowPath,
+  },
+]

frontend/rabbi_gerzi/src/views/ContactPage.vue

@@ -2,11 +2,7 @@
 import { ref } from 'vue'
 import SiteHeader from '@/components/SiteHeader.vue'
 import SiteFooter from '@/components/SiteFooter.vue'
-
+import { socialLinks } from '@/content/socialLinks'
-interface SocialLink {
-  label: string
-  href: string
-}
 
 const contactFirstName = ref('')
 const contactLastName = ref('')
@@ -17,17 +13,6 @@ const contactMessage = ref('')
 const newsletterFullName = ref('')
 const newsletterEmail = ref('')
 
-const socialLinks: SocialLink[] = [
-  {
-    label: 'YouTube',
-    href: 'https://www.youtube.com/@rabbigerzi',
-  },
-  {
-    label: 'Spotify',
-    href: 'https://open.spotify.com/show/49H1X9A7KZWAnnIbcoQXQR?si=6253691f23be44ad',
-  },
-]
-
 function submitContact(submitEvent: Event): void {
   submitEvent.preventDefault()
   contactFirstName.value = ''