diff --git a/.changeset/odd-camels-grab.md b/.changeset/odd-camels-grab.md new file mode 100644 index 00000000..90467c6d --- /dev/null +++ b/.changeset/odd-camels-grab.md @@ -0,0 +1,5 @@ +--- +"vocs": minor +--- + +Add LinkedIn and GitLab icons and ability to add them through the config. diff --git a/site/pages/docs/api/config.mdx b/site/pages/docs/api/config.mdx index fbed5603..ae98c1d6 100644 --- a/site/pages/docs/api/config.mdx +++ b/site/pages/docs/api/config.mdx @@ -613,7 +613,7 @@ export default defineConfig({ Social links displayed in the top navigation. -Supports **Discord**, **GitHub**, **Telegram**, **X**, and **Warpcast**. +Supports **Discord**, **GitHub**, **Telegram**, **X**, **Warpcast**, **GitLab**, and **LinkedIn**. ```tsx twoslash import { defineConfig } from 'vocs' diff --git a/src/app/components/DesktopTopNav.tsx b/src/app/components/DesktopTopNav.tsx index 22f0897b..09d9b175 100644 --- a/src/app/components/DesktopTopNav.tsx +++ b/src/app/components/DesktopTopNav.tsx @@ -21,6 +21,8 @@ import { Sun } from './icons/Sun.js' import { Telegram } from './icons/Telegram.js' import { Warpcast } from './icons/Warpcast.js' import { X } from './icons/X.js' +import { GitLab } from './icons/GitLab.js' +import { LinkedIn } from './icons/LinkedIn.js' DesktopTopNav.Curtain = Curtain @@ -174,6 +176,8 @@ const iconsForIcon = { telegram: Telegram, warpcast: Warpcast, x: X, + gitlab: GitLab, + linkedin: LinkedIn, } satisfies Record const sizesForType = { @@ -182,6 +186,8 @@ const sizesForType = { telegram: '21px', warpcast: '20px', x: '18px', + gitlab: '20px', + linkedin: '22px', } satisfies Record function SocialButton({ icon, label, link }: ParsedSocialItem) { diff --git a/src/app/components/MobileTopNav.tsx b/src/app/components/MobileTopNav.tsx index 963899a1..4ba2630b 100644 --- a/src/app/components/MobileTopNav.tsx +++ b/src/app/components/MobileTopNav.tsx @@ -29,6 +29,8 @@ import { Menu } from './icons/Menu.js' import { Telegram } from './icons/Telegram.js' import { Warpcast } from './icons/Warpcast.js' import { X } from './icons/X.js' +import { GitLab } from './icons/GitLab.js' +import { LinkedIn } from './icons/LinkedIn.js' MobileTopNav.Curtain = Curtain @@ -200,6 +202,8 @@ const iconsForIcon = { telegram: Telegram, warpcast: Warpcast, x: X, + gitlab: GitLab, + linkedin: LinkedIn, } satisfies Record const sizesForTypes = { @@ -208,6 +212,8 @@ const sizesForTypes = { telegram: '21px', warpcast: '18px', x: '16px', + gitlab: '24px', + linkedin: '24px', } satisfies Record function SocialButton({ icon, label, link, type }: Config.ParsedSocialItem) { diff --git a/src/app/components/icons/GitLab.tsx b/src/app/components/icons/GitLab.tsx new file mode 100644 index 00000000..7cae42fd --- /dev/null +++ b/src/app/components/icons/GitLab.tsx @@ -0,0 +1,13 @@ +export function GitLab() { + return ( + + GitLab + + + ) +} diff --git a/src/app/components/icons/LinkedIn.tsx b/src/app/components/icons/LinkedIn.tsx new file mode 100644 index 00000000..f608aa5d --- /dev/null +++ b/src/app/components/icons/LinkedIn.tsx @@ -0,0 +1,13 @@ +export function LinkedIn() { + return ( + + LinkedIn + + + ) +} diff --git a/src/config.ts b/src/config.ts index 7f27e286..a43f0822 100644 --- a/src/config.ts +++ b/src/config.ts @@ -302,6 +302,8 @@ const socialsMeta = { telegram: { label: 'Telegram', type: 'telegram' }, warpcast: { label: 'Warpcast', type: 'warpcast' }, x: { label: 'X (Twitter)', type: 'x' }, + gitlab: { label: 'GitLab', type: 'gitlab' }, + linkedin: { label: 'LinkedIn', type: 'linkedin' }, } satisfies Record function parseSocials(socials: Socials): Socials { @@ -473,7 +475,14 @@ export type Sidebar = | SidebarItem[] | { [path: string]: SidebarItem[] | { backLink?: boolean; items: SidebarItem[] } } -export type SocialType = 'discord' | 'github' | 'telegram' | 'warpcast' | 'x' +export type SocialType = + | 'discord' + | 'github' + | 'telegram' + | 'warpcast' + | 'x' + | 'gitlab' + | 'linkedin' export type SocialItem = { /** Social icon to display. */ icon: SocialType // TODO: Support custom SVG icons