feat: allow rel for socials links to be configured (#899)

Co-authored-by: Yaël GUILLOUX <yael.guilloux@gmail.com>
nuxt-themes · May 16, 2023 · fbd0971 · fbd0971
1 parent a710a9a
commit fbd0971
Show file tree

Hide file tree

Showing 5 changed files with 610 additions and 523 deletions.
diff --git a/.starters/default/content/1.introduction/4.configuration.md b/.starters/default/content/1.introduction/4.configuration.md
@@ -92,6 +92,7 @@ export default defineAppConfig({
 | `socials.[social].label`     | `string`   |                  | A label to use for the social                                                                        |
 | `socials.[social].icon`      | `string`   |                  | A icon to use for the social                                                                         |
 | `socials.[social].href`      | `string`   |                  | A link to use for the social                                                                         |
+| `socials.[social].rel`       | `string`   | `noopener noreferrer` | A space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) |
 | **Header**                   |            |                  |                                                                                                      |
 | `header`                     | `object`   |                  | Header configuration                                                                                 |
 | `header.logo`                | `boolean`  |                  | Whether or not to use `Logo.vue` as the header logo                                                  |

diff --git a/.starters/default/package.json b/.starters/default/package.json
@@ -15,6 +15,6 @@
     "@nuxt/devtools": "^0.4.6",
     "@nuxt/eslint-config": "^0.1.1",
     "eslint": "^8.40.0",
-    "nuxt": "^3.4.3"
+    "nuxt": "^3.5.0"
   }
 }
diff --git a/components/app/AppSocialIcons.vue b/components/app/AppSocialIcons.vue
@@ -12,7 +12,8 @@ const icons = computed<any>(() => {
         return {
           href: `https://${key}.com/${value}`,
           icon: `fa-brands:${key}`,
-          label: value
+          label: value,
+          rel: 'noopener noreferrer'
         }
       } else {
         return null
@@ -26,7 +27,7 @@ const icons = computed<any>(() => {
   <NuxtLink
     v-for="icon in icons"
     :key="icon.label"
-    rel="noopener noreferrer"
+    :rel="icon.rel"
     :title="icon.label"
     :aria-label="icon.label"
     :href="icon.href"

diff --git a/package.json b/package.json
@@ -41,13 +41,13 @@
     "@nuxt/devtools": "^0.4.6",
     "@nuxt/eslint-config": "^0.1.1",
     "@nuxtjs/algolia": "^1.7.0",
-    "@types/node": "^20.1.2",
+    "@types/node": "^20.1.5",
     "eslint": "^8.40.0",
-    "nuxt": "^3.4.3",
+    "nuxt": "^3.5.0",
     "release-it": "^15.10.3",
     "typescript": "^5.0.4",
     "vite-plugin-inspect": "^0.7.26",
-    "vue": "^3.3.1"
+    "vue": "^3.3.2"
   },
   "pnpm": {
     "peerDependencyRules": {