Merge pull request #436 from JoPrignol/add-rel-prop

feat: added a rel prop

Author: stefanobartoletti

docs/content/2.usage/1.component.md

@@ -41,6 +41,7 @@ The component will render by default the following minimal HTML:
   href="{share url}"
   style="--color-brand: {network brand color};"
   aria-label="Share with {network}"
+  rel="nofollow noopener noreferrer"
   target="_blank"
 >
   <svg class="social-share-button__icon">{...}</svg>
@@ -133,6 +134,14 @@ Comma separated list of hashtags used as a parameter of the sharing URL, in netw
 
 Image path used as a parameter of the sharing URL, in networks that support it. Optional, check the list of [supported networks](/usage/supported-networks).
 
+### `rel`
+
+- Required: `No`
+- Type: `String`
+- Default: `nofollow noopener noreferrer`
+
+Sets some default values to the `rel` attribute of the link anchor. Customizable if needed, sets by default the [`nofollow`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel#nofollow), [`noopener`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel#noopener) and [`noreferrer`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel#noreferrer) for both SEO and security concerns.
+
 ## Slots
 
 ::note

src/runtime/SocialShare.vue

@@ -6,6 +6,7 @@
     :href="selectedNetwork.shareUrl"
     :style="`--color-brand:${selectedNetwork.color}`"
     :aria-label="`Share with ${selectedNetwork.name}`"
+    :rel="rel"
     target="_blank"
   >
     <template v-if="hasIcon">
@@ -37,6 +38,8 @@ const props = defineProps({
   user: { type: String, default: undefined },
   hashtags: { type: String, default: undefined },
   image: { type: String, default: undefined },
+  // Link props
+  rel: { type: String, default: 'nofollow noopener noreferrer' },
 })
 
 const moduleOptions = useRuntimeConfig().public.socialShare