Add GitLab and LinkedIn social links

.changeset/odd-camels-grab.md

@@ -0,0 +1,5 @@
+---
+"vocs": minor
+---
+
+Add LinkedIn and GitLab icons and ability to add them through the config.

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'

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<ParsedSocialItem['type'], ComponentType>
 
 const sizesForType = {
@@ -182,6 +186,8 @@ const sizesForType = {
   telegram: '21px',
   warpcast: '20px',
   x: '18px',
+  gitlab: '20px',
+  linkedin: '22px',
 } satisfies Record<ParsedSocialItem['type'], string>
 
 function SocialButton({ icon, label, link }: ParsedSocialItem) {

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<Config.ParsedSocialItem['type'], ComponentType>
 
 const sizesForTypes = {
@@ -208,6 +212,8 @@ const sizesForTypes = {
   telegram: '21px',
   warpcast: '18px',
   x: '16px',
+  gitlab: '24px',
+  linkedin: '24px',
 } satisfies Record<Config.ParsedSocialItem['type'], string>
 
 function SocialButton({ icon, label, link, type }: Config.ParsedSocialItem) {

src/app/components/icons/GitLab.tsx

@@ -0,0 +1,13 @@
+export function GitLab() {
+  return (
+    <svg width="32" height="32" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <title>GitLab</title>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="m24.507 9.5-.034-.09L21.082.562a.896.896 0 0 0-1.694.091l-2.29 7.01H7.825L5.535.653a.898.898 0 0 0-1.694-.09L.451 9.411.416 9.5a6.297 6.297 0 0 0 2.09 7.278l.012.01.03.022 5.16 3.867 2.56 1.935 1.554 1.176a1.051 1.051 0 0 0 1.268 0l1.555-1.176 2.56-1.935 5.197-3.89.014-.01A6.297 6.297 0 0 0 24.507 9.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

src/app/components/icons/LinkedIn.tsx

@@ -0,0 +1,13 @@
+export function LinkedIn() {
+  return (
+    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <title>LinkedIn</title>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

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<SocialItem['icon'], { label: string; type: SocialType }>
 
 function parseSocials(socials: Socials): Socials<true> {
@@ -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