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[] = [
-  {
-    label: 'YouTube',
-    href: '#',
-    glyph: '▶',
-  },
-  {
-    label: 'Spotify',
-    href: '#',
-    glyph: '♫',
-  },
-]
+const socialGlyphs: Record<SocialLinkLabel, string> = {
+  YouTube: '▶',
+  Spotify: '♫',
+}
+
+const footerSocialLinks = socialLinks.map((socialLink) => {
+  return {
+    label: socialLink.label,
+    href: socialLink.href,
+    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>