From 4e30c63ffe3268f0adb78ee17b35f349eb2a8895 Mon Sep 17 00:00:00 2001
From: Guillaume Cummings <guillaume_cummings@hotmail.com>
Date: Sun, 28 Jul 2024 10:56:17 -0400
Subject: [PATCH 1/3] Add LinkedIn and GitLab in socials

---
 site/pages/docs/api/config.mdx        |  2 +-
 src/app/components/DesktopTopNav.tsx  |  6 ++++++
 src/app/components/MobileTopNav.tsx   |  6 ++++++
 src/app/components/icons/GitLab.tsx   | 14 ++++++++++++++
 src/app/components/icons/LinkedIn.tsx | 14 ++++++++++++++
 src/config.ts                         |  4 +++-
 6 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 src/app/components/icons/GitLab.tsx
 create mode 100644 src/app/components/icons/LinkedIn.tsx

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..a52ff4a1 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<ParsedSocialItem['type'], ComponentType>
 
 const sizesForType = {
@@ -182,6 +186,8 @@ const sizesForType = {
   telegram: '21px',
   warpcast: '20px',
   x: '18px',
+  gitlab: '24px',
+  linkedin: '24px',
 } satisfies Record<ParsedSocialItem['type'], string>
 
 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<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) {
diff --git a/src/app/components/icons/GitLab.tsx b/src/app/components/icons/GitLab.tsx
new file mode 100644
index 00000000..64651092
--- /dev/null
+++ b/src/app/components/icons/GitLab.tsx
@@ -0,0 +1,14 @@
+export function GitLab() {
+    return (
+      <svg width="32" height="32" viewBox="0 0 32 32" 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>
+    )
+  }
+  
\ No newline at end of file
diff --git a/src/app/components/icons/LinkedIn.tsx b/src/app/components/icons/LinkedIn.tsx
new file mode 100644
index 00000000..9c17d4b4
--- /dev/null
+++ b/src/app/components/icons/LinkedIn.tsx
@@ -0,0 +1,14 @@
+export function LinkedIn() {
+    return (
+      <svg width="32" height="32" viewBox="0 0 32 32" 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>
+    )
+  }
+  
\ No newline at end of file
diff --git a/src/config.ts b/src/config.ts
index 7f27e286..46275397 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<SocialItem['icon'], { label: string; type: SocialType }>
 
 function parseSocials(socials: Socials): Socials<true> {
@@ -473,7 +475,7 @@ 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

From a1538b8f36d97f3a649b38f9a7ec99c42efd31a9 Mon Sep 17 00:00:00 2001
From: Guillaume Cummings <guillaume_cummings@hotmail.com>
Date: Sun, 28 Jul 2024 11:49:30 -0400
Subject: [PATCH 2/3] Use the right viewbox for new svgs

---
 src/app/components/DesktopTopNav.tsx  |  8 ++++----
 src/app/components/icons/GitLab.tsx   | 25 ++++++++++++-------------
 src/app/components/icons/LinkedIn.tsx | 25 ++++++++++++-------------
 src/config.ts                         | 11 +++++++++--
 4 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/src/app/components/DesktopTopNav.tsx b/src/app/components/DesktopTopNav.tsx
index a52ff4a1..09d9b175 100644
--- a/src/app/components/DesktopTopNav.tsx
+++ b/src/app/components/DesktopTopNav.tsx
@@ -21,8 +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';
+import { GitLab } from './icons/GitLab.js'
+import { LinkedIn } from './icons/LinkedIn.js'
 
 DesktopTopNav.Curtain = Curtain
 
@@ -186,8 +186,8 @@ const sizesForType = {
   telegram: '21px',
   warpcast: '20px',
   x: '18px',
-  gitlab: '24px',
-  linkedin: '24px',
+  gitlab: '20px',
+  linkedin: '22px',
 } satisfies Record<ParsedSocialItem['type'], string>
 
 function SocialButton({ icon, label, link }: ParsedSocialItem) {
diff --git a/src/app/components/icons/GitLab.tsx b/src/app/components/icons/GitLab.tsx
index 64651092..7cae42fd 100644
--- a/src/app/components/icons/GitLab.tsx
+++ b/src/app/components/icons/GitLab.tsx
@@ -1,14 +1,13 @@
 export function GitLab() {
-    return (
-      <svg width="32" height="32" viewBox="0 0 32 32" 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>
-    )
-  }
-  
\ No newline at end of file
+  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>
+  )
+}
diff --git a/src/app/components/icons/LinkedIn.tsx b/src/app/components/icons/LinkedIn.tsx
index 9c17d4b4..f608aa5d 100644
--- a/src/app/components/icons/LinkedIn.tsx
+++ b/src/app/components/icons/LinkedIn.tsx
@@ -1,14 +1,13 @@
 export function LinkedIn() {
-    return (
-      <svg width="32" height="32" viewBox="0 0 32 32" 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>
-    )
-  }
-  
\ No newline at end of file
+  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>
+  )
+}
diff --git a/src/config.ts b/src/config.ts
index 46275397..a43f0822 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -303,7 +303,7 @@ const socialsMeta = {
   warpcast: { label: 'Warpcast', type: 'warpcast' },
   x: { label: 'X (Twitter)', type: 'x' },
   gitlab: { label: 'GitLab', type: 'gitlab' },
-  linkedin: { label: 'LinkedIn', type: 'linkedin' }
+  linkedin: { label: 'LinkedIn', type: 'linkedin' },
 } satisfies Record<SocialItem['icon'], { label: string; type: SocialType }>
 
 function parseSocials(socials: Socials): Socials<true> {
@@ -475,7 +475,14 @@ export type Sidebar =
   | SidebarItem[]
   | { [path: string]: SidebarItem[] | { backLink?: boolean; items: SidebarItem[] } }
 
-export type SocialType = 'discord' | 'github' | 'telegram' | 'warpcast' | 'x' | 'gitlab' | 'linkedin'
+export type SocialType =
+  | 'discord'
+  | 'github'
+  | 'telegram'
+  | 'warpcast'
+  | 'x'
+  | 'gitlab'
+  | 'linkedin'
 export type SocialItem = {
   /** Social icon to display. */
   icon: SocialType // TODO: Support custom SVG icons

From cd290a02fb91877b71b212f7ebf435a546d568e9 Mon Sep 17 00:00:00 2001
From: Guillaume Cummings <guillaume_cummings@hotmail.com>
Date: Sun, 28 Jul 2024 11:58:47 -0400
Subject: [PATCH 3/3] Add the changeset

---
 .changeset/odd-camels-grab.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/odd-camels-grab.md

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.