diff --git a/docs/en/reference/default-theme-config.md b/docs/en/reference/default-theme-config.md index 4a43153893cd..90232aea2fe9 100644 --- a/docs/en/reference/default-theme-config.md +++ b/docs/en/reference/default-theme-config.md @@ -228,6 +228,7 @@ You may define this option to show your social account links with icons in nav. export default { themeConfig: { socialLinks: [ + // You can add any icon from simple-icons (https://simpleicons.org/): { icon: 'github', link: 'https://github.com/vuejs/vitepress' }, { icon: 'twitter', link: '...' }, // You can also add custom icons by passing SVG as string: @@ -246,24 +247,10 @@ export default { ```ts interface SocialLink { - icon: SocialLinkIcon + icon: string | { svg: string } link: string ariaLabel?: string } - -type SocialLinkIcon = - | 'discord' - | 'facebook' - | 'github' - | 'instagram' - | 'linkedin' - | 'mastodon' - | 'npm' - | 'slack' - | 'twitter' - | 'x' - | 'youtube' - | { svg: string } ``` ## footer diff --git a/docs/es/reference/default-theme-config.md b/docs/es/reference/default-theme-config.md index 72cebed7005b..129f16f64277 100644 --- a/docs/es/reference/default-theme-config.md +++ b/docs/es/reference/default-theme-config.md @@ -233,24 +233,10 @@ export default { ```ts interface SocialLink { - icon: SocialLinkIcon + icon: string | { svg: string } link: string ariaLabel?: string } - -type SocialLinkIcon = - | 'discord' - | 'facebook' - | 'github' - | 'instagram' - | 'linkedin' - | 'mastodon' - | 'npm' - | 'slack' - | 'twitter' - | 'x' - | 'youtube' - | { svg: string } ``` ## footer diff --git a/docs/ko/reference/default-theme-config.md b/docs/ko/reference/default-theme-config.md index b9ae698736eb..b0df3361795a 100644 --- a/docs/ko/reference/default-theme-config.md +++ b/docs/ko/reference/default-theme-config.md @@ -246,24 +246,10 @@ export default { ```ts interface SocialLink { - icon: SocialLinkIcon + icon: string | { svg: string } link: string ariaLabel?: string } - -type SocialLinkIcon = - | 'discord' - | 'facebook' - | 'github' - | 'instagram' - | 'linkedin' - | 'mastodon' - | 'npm' - | 'slack' - | 'twitter' - | 'x' - | 'youtube' - | { svg: string } ``` ## footer diff --git a/docs/pt/reference/default-theme-config.md b/docs/pt/reference/default-theme-config.md index 417cbc30a67a..54e53e4a65cf 100644 --- a/docs/pt/reference/default-theme-config.md +++ b/docs/pt/reference/default-theme-config.md @@ -233,24 +233,10 @@ export default { ```ts interface SocialLink { - icon: SocialLinkIcon + icon: string | { svg: string } link: string ariaLabel?: string } - -type SocialLinkIcon = - | 'discord' - | 'facebook' - | 'github' - | 'instagram' - | 'linkedin' - | 'mastodon' - | 'npm' - | 'slack' - | 'twitter' - | 'x' - | 'youtube' - | { svg: string } ``` ## footer diff --git a/docs/ru/reference/default-theme-config.md b/docs/ru/reference/default-theme-config.md index 265d17f19166..56c802e6c321 100644 --- a/docs/ru/reference/default-theme-config.md +++ b/docs/ru/reference/default-theme-config.md @@ -233,24 +233,10 @@ export default { ```ts interface SocialLink { - icon: SocialLinkIcon + icon: string | { svg: string } link: string ariaLabel?: string } - -type SocialLinkIcon = - | 'discord' - | 'facebook' - | 'github' - | 'instagram' - | 'linkedin' - | 'mastodon' - | 'npm' - | 'slack' - | 'twitter' - | 'x' - | 'youtube' - | { svg: string } ``` ## footer {#footer} diff --git a/docs/zh/reference/default-theme-config.md b/docs/zh/reference/default-theme-config.md index a7028f1694b8..dd7e86b35e4e 100644 --- a/docs/zh/reference/default-theme-config.md +++ b/docs/zh/reference/default-theme-config.md @@ -233,24 +233,10 @@ export default { ```ts interface SocialLink { - icon: SocialLinkIcon + icon: string | { svg: string } link: string ariaLabel?: string } - -type SocialLinkIcon = - | 'discord' - | 'facebook' - | 'github' - | 'instagram' - | 'linkedin' - | 'mastodon' - | 'npm' - | 'slack' - | 'twitter' - | 'x' - | 'youtube' - | { svg: string } ``` ## footer diff --git a/package.json b/package.json index b486493c15c2..350380e300b4 100644 --- a/package.json +++ b/package.json @@ -100,6 +100,7 @@ "dependencies": { "@docsearch/css": "^3.6.2", "@docsearch/js": "^3.6.2", + "@iconify-json/simple-icons": "^1.2.10", "@shikijs/core": "^1.22.2", "@shikijs/transformers": "^1.22.2", "@shikijs/types": "^1.22.2", @@ -118,6 +119,7 @@ }, "devDependencies": { "@clack/prompts": "^0.7.0", + "@iconify/utils": "^2.1.33", "@mdit-vue/plugin-component": "^2.1.3", "@mdit-vue/plugin-frontmatter": "^2.1.3", "@mdit-vue/plugin-headers": "^2.1.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3c7b1692e62b..3fbd6a8f7740 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -22,6 +22,9 @@ importers: '@docsearch/js': specifier: ^3.6.2 version: 3.6.2(@algolia/client-search@4.24.0) + '@iconify-json/simple-icons': + specifier: ^1.2.10 + version: 1.2.10 '@shikijs/core': specifier: ^1.22.2 version: 1.22.2 @@ -71,6 +74,9 @@ importers: '@clack/prompts': specifier: ^0.7.0 version: 0.7.0 + '@iconify/utils': + specifier: ^2.1.33 + version: 2.1.33(supports-color@9.4.0) '@mdit-vue/plugin-component': specifier: ^2.1.3 version: 2.1.3 @@ -385,6 +391,12 @@ packages: '@algolia/transporter@4.24.0': resolution: {integrity: sha512-86nI7w6NzWxd1Zp9q3413dRshDqAzSbsQjhcDhPIatEFiZrL1/TjnHL8S7jVKFePlIMzDsZWXAXwXzcok9c5oA==} + '@antfu/install-pkg@0.4.1': + resolution: {integrity: sha512-T7yB5QNG29afhWVkVq7XeIMBa5U/vs9mX69YqayXypPRmYzUmzwnYltplHmPtZ4HPCn+sQKeXW8I47wCbuBOjw==} + + '@antfu/utils@0.7.10': + resolution: {integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==} + '@babel/code-frame@7.25.7': resolution: {integrity: sha512-0xZJFNE5XMpENsgfHYTw8FbX4kv53mFLn2i3XPoq69LyhYSCBJtitaHx9QnsVTrsogI4Z3+HtEfZ2/GFPOtf5g==} engines: {node: '>=6.9.0'} @@ -745,6 +757,15 @@ packages: resolution: {integrity: sha512-e5+YUKENATs1JgYHMzTr2MW/NDcXGfYFAuOQU8gJgF/kEh4EqKgfGrfLI67bMD4tbhZVlkigz/9YYwWcbOFthg==} engines: {node: '>=10.13.0'} + '@iconify-json/simple-icons@1.2.10': + resolution: {integrity: sha512-9OK1dsSjXlH36lhu5n+BlSoXuqFjHUErGLtNdzHpq0vHq4YFBuGYWtZ+vZTHLreRQ8ijPRv/6EsgkV+nf6AReQ==} + + '@iconify/types@2.0.0': + resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==} + + '@iconify/utils@2.1.33': + resolution: {integrity: sha512-jP9h6v/g0BIZx0p7XGJJVtkVnydtbgTgt9mVNcGDYwaa7UhdHdI9dvoq+gKj9sijMSJKxUPEG2JyjsgXjxL7Kw==} + '@isaacs/cliui@8.0.2': resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==} engines: {node: '>=12'} @@ -1234,6 +1255,11 @@ packages: '@vueuse/shared@11.1.0': resolution: {integrity: sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==} + acorn@8.14.0: + resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==} + engines: {node: '>=0.4.0'} + hasBin: true + add-stream@1.0.0: resolution: {integrity: sha512-qQLMr+8o0WC4FZGQTcJiKBVC59JylcPSrTtk6usvmIDFUOCKegapy1VHQwRbFMOFyb/inzUVqHs+eMYKDM1YeQ==} @@ -1414,6 +1440,9 @@ packages: compare-func@2.0.0: resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==} + confbox@0.1.8: + resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==} + conventional-changelog-angular@8.0.0: resolution: {integrity: sha512-CLf+zr6St0wIxos4bmaKHRXWAcsCXrJU6F4VdNDrGRK3B8LDLKoX3zuMV5GhtbGkVR/LohZ6MT6im43vZLSjmA==} engines: {node: '>=18'} @@ -1947,6 +1976,9 @@ packages: resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==} engines: {node: '>=6'} + kolorist@1.8.0: + resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==} + lilconfig@3.1.2: resolution: {integrity: sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==} engines: {node: '>=14'} @@ -1963,6 +1995,10 @@ packages: resolution: {integrity: sha512-iyAZCeyD+c1gPyE9qpFu8af0Y+MRtmKOncdGoA2S5EY8iFq99dmmvkNnHiWo+pj0s7yH7l3KPIgee77tKpXPWQ==} engines: {node: '>=18.0.0'} + local-pkg@0.5.0: + resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==} + engines: {node: '>=14'} + lodash._reinterpolate@3.0.0: resolution: {integrity: sha512-xYHt68QRoYGjeeM/XOE1uJtvXQAgvszfBhjV4yvsQH0u2i9I6cI6c6/eG4Hh3UAOVn0y/xAXwmTzEay49Q//HA==} @@ -2118,6 +2154,9 @@ packages: mj-context-menu@0.6.1: resolution: {integrity: sha512-7NO5s6n10TIV96d4g2uDpG7ZDpIhMh0QNfGdJw/W47JswFcosz457wqz/b5sAKvl12sxINGFCn80NZHKwxQEXA==} + mlly@1.7.2: + resolution: {integrity: sha512-tN3dvVHYVz4DhSXinXIk7u9syPYaJvio118uomkovAtWBT+RdbP6Lfh/5Lvo519YMmwBafwlh20IPTXIStscpA==} + mrmime@2.0.0: resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==} engines: {node: '>=10'} @@ -2200,6 +2239,9 @@ packages: package-json-from-dist@1.0.1: resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==} + package-manager-detector@0.2.2: + resolution: {integrity: sha512-VgXbyrSNsml4eHWIvxxG/nTL4wgybMTXCV2Un/+yEc3aDKKU6nQBZjbeP3Pl3qm9Qg92X/1ng4ffvCeD/zwHgg==} + parse-json@8.1.0: resolution: {integrity: sha512-rum1bPifK5SSar35Z6EKZuYPJx85pkNaFrxBK3mwdfSJ1/WKbYrjoW/zTPSjRRamfmVX1ACBIdFAO0VRErW/EA==} engines: {node: '>=18'} @@ -2272,6 +2314,9 @@ packages: resolution: {integrity: sha512-4peoBq4Wks0riS0z8741NVv+/8IiTvqnZAr8QGgtdifrtpdXbNw/FxRS1l6NFqm4EMzuS0EDqNNx4XGaz8cuyQ==} engines: {node: '>=18'} + pkg-types@1.2.1: + resolution: {integrity: sha512-sQoqa8alT3nHjGuTjuKgOnvjo4cljkufdtLMnO2LBP/wRwuDlo1tkaEdMxCRhyGRPacv/ztlZgDPm2b7FAmEvw==} + playwright-chromium@1.48.2: resolution: {integrity: sha512-bMBvYPlj5X6yyifahATDy5ZQySyNRDD75Q8ZCMcvn234CCA7m8vxgJIlrbJq+jcmuZVsCzNybRtEJHVGqg+v4w==} engines: {node: '>=18'} @@ -2666,6 +2711,9 @@ packages: uc.micro@2.1.0: resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==} + ufo@1.5.4: + resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==} + uglify-js@3.19.3: resolution: {integrity: sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==} engines: {node: '>=0.8.0'} @@ -2980,6 +3028,13 @@ snapshots: '@algolia/logger-common': 4.24.0 '@algolia/requester-common': 4.24.0 + '@antfu/install-pkg@0.4.1': + dependencies: + package-manager-detector: 0.2.2 + tinyexec: 0.3.1 + + '@antfu/utils@0.7.10': {} + '@babel/code-frame@7.25.7': dependencies: '@babel/highlight': 7.25.7 @@ -3196,6 +3251,24 @@ snapshots: '@hutson/parse-repository-url@5.0.0': {} + '@iconify-json/simple-icons@1.2.10': + dependencies: + '@iconify/types': 2.0.0 + + '@iconify/types@2.0.0': {} + + '@iconify/utils@2.1.33(supports-color@9.4.0)': + dependencies: + '@antfu/install-pkg': 0.4.1 + '@antfu/utils': 0.7.10 + '@iconify/types': 2.0.0 + debug: 4.3.7(supports-color@9.4.0) + kolorist: 1.8.0 + local-pkg: 0.5.0 + mlly: 1.7.2 + transitivePeerDependencies: + - supports-color + '@isaacs/cliui@8.0.2': dependencies: string-width: 5.1.2 @@ -3724,6 +3797,8 @@ snapshots: - '@vue/composition-api' - vue + acorn@8.14.0: {} + add-stream@1.0.0: {} algoliasearch@4.24.0: @@ -3913,6 +3988,8 @@ snapshots: array-ify: 1.0.0 dot-prop: 5.3.0 + confbox@0.1.8: {} + conventional-changelog-angular@8.0.0: dependencies: compare-func: 2.0.0 @@ -4481,6 +4558,8 @@ snapshots: kleur@3.0.3: {} + kolorist@1.8.0: {} + lilconfig@3.1.2: {} linkify-it@5.0.0: @@ -4511,6 +4590,11 @@ snapshots: rfdc: 1.4.1 wrap-ansi: 9.0.0 + local-pkg@0.5.0: + dependencies: + mlly: 1.7.2 + pkg-types: 1.2.1 + lodash._reinterpolate@3.0.0: {} lodash.template@4.5.0: @@ -4663,6 +4747,13 @@ snapshots: mj-context-menu@0.6.1: {} + mlly@1.7.2: + dependencies: + acorn: 8.14.0 + pathe: 1.1.2 + pkg-types: 1.2.1 + ufo: 1.5.4 + mrmime@2.0.0: {} ms@2.1.3: {} @@ -4743,6 +4834,8 @@ snapshots: package-json-from-dist@1.0.1: {} + package-manager-detector@0.2.2: {} + parse-json@8.1.0: dependencies: '@babel/code-frame': 7.25.7 @@ -4794,6 +4887,12 @@ snapshots: dependencies: find-up-simple: 1.0.0 + pkg-types@1.2.1: + dependencies: + confbox: 0.1.8 + mlly: 1.7.2 + pathe: 1.1.2 + playwright-chromium@1.48.2: dependencies: playwright-core: 1.48.2 @@ -5176,6 +5275,8 @@ snapshots: uc.micro@2.1.0: {} + ufo@1.5.4: {} + uglify-js@3.19.3: optional: true diff --git a/src/client/app/ssr.ts b/src/client/app/ssr.ts index eb408cc75fd0..984335f0cb0c 100644 --- a/src/client/app/ssr.ts +++ b/src/client/app/ssr.ts @@ -6,7 +6,7 @@ import type { SSGContext } from '../shared' export async function render(path: string) { const { app, router } = await createApp() await router.go(path) - const ctx: SSGContext = { content: '' } + const ctx: SSGContext = { content: '', vpSocialIcons: new Set() } ctx.content = await renderToString(app, ctx) return ctx } diff --git a/src/client/theme-default/components/VPSocialLink.vue b/src/client/theme-default/components/VPSocialLink.vue index 1c0a8ab344d2..905ec89799bb 100644 --- a/src/client/theme-default/components/VPSocialLink.vue +++ b/src/client/theme-default/components/VPSocialLink.vue @@ -1,6 +1,7 @@