feat: support social link target option (#5242)

__tests__/e2e/.vitepress/config.ts

@@ -162,6 +162,14 @@ export default defineConfig({
   themeConfig: {
     nav,
     sidebar,
+    socialLinks: [
+      {
+        icon: 'github',
+        link: '/home',
+        ariaLabel: 'Home social link',
+        target: '_self'
+      }
+    ],
     search: {
       provider: 'local',
       options: {

__tests__/e2e/home.test.ts

@@ -32,4 +32,13 @@ describe('render correct content', async () => {
     const outlineLinksCount = await outlineLinksLocator.count()
     expect(outlineLinksCount).toEqual(4)
   })
+
+  test('social link target override', async () => {
+    const socialLink = page.locator(
+      '.VPNavBarSocialLinks a[aria-label="Home social link"]'
+    )
+
+    expect(await socialLink.getAttribute('href')).toBe('/home')
+    expect(await socialLink.getAttribute('target')).toBe('_self')
+  })
 })

docs/en/reference/default-theme-config.md

@@ -253,6 +253,7 @@ export default {
       // You can add any icon from simple-icons (https://simpleicons.org/):
       { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
       { icon: 'twitter', link: '...' },
+      { icon: 'discord', link: '/community', target: '_self' },
       // You can also add custom icons by passing SVG as string:
       {
         icon: {
@@ -272,6 +273,7 @@ interface SocialLink {
   icon: string | { svg: string }
   link: string
   ariaLabel?: string
+  target?: string
 }
 ```
 

src/client/theme-default/components/VPSocialLink.vue

@@ -7,6 +7,7 @@ const props = defineProps<{
   icon: DefaultTheme.SocialLinkIcon
   link: string
   ariaLabel?: string
+  target?: string
   me: boolean
 }>()
 
@@ -45,7 +46,7 @@ if (import.meta.env.SSR) {
     class="VPSocialLink no-icon"
     :href="link"
     :aria-label="ariaLabel ?? (typeof icon === 'string' ? icon : '')"
-    target="_blank"
+    :target="target ?? '_blank'"
     :rel="me ? 'me noopener' : 'noopener'"
     v-html="svg"
   ></a>

src/client/theme-default/components/VPSocialLinks.vue

@@ -13,11 +13,12 @@ withDefaults(defineProps<{
 <template>
   <div class="VPSocialLinks">
     <VPSocialLink
-      v-for="{ link, icon, ariaLabel } in links"
+      v-for="{ link, icon, ariaLabel, target } in links"
       :key="link"
       :icon
       :link
       :ariaLabel
+      :target
       :me
     />
   </div>

types/default-theme.d.ts

@@ -318,6 +318,7 @@ export namespace DefaultTheme {
     icon: SocialLinkIcon
     link: string
     ariaLabel?: string
+    target?: string
   }
 
   export type SocialLinkIcon = string | { svg: string }