feat: support rel attribute for social links (#129)

Co-authored-by: Yaël Guilloux <yael.guilloux@gmail.com>

.starters/default/content/articles/2.configure.md

@@ -60,6 +60,12 @@ export default defineAppConfig({
         icon: 'uil:linkedin',
         label: 'LinkedIn',
         href: 'https://www.linkedin.com/company/nuxtlabs'
+      },
+      mastodon: {
+        icon: 'simple-icons:mastodon',
+        label: 'Mastodon',
+        href: 'https://m.webtoo.ls/@nuxt',
+        rel: 'me'
       }
     }
   }

components/SocialIcons.vue

@@ -25,6 +25,14 @@ const icons = computed<any>(() => {
     })
     .filter(Boolean)
 })
+
+const getRel = (icon:any) => {
+  const base = ['noopener', 'noreferrer']
+  if (icon.rel) {
+    base.push(icon.rel)
+  }
+  return base.join(' ')
+}
 </script>
 
 <template>
@@ -32,7 +40,7 @@ const icons = computed<any>(() => {
   <NuxtLink
     v-for="icon in icons"
     :key="icon.label"
-    rel="noopener noreferrer"
+    :rel="getRel(icon)"
     :title="icon.label"
     :aria-label="icon.label"
     :href="icon.href"