feat(SocialIcons): add SocialIcons component for social media links

Author: sizzlebop

website/astro.config.mjs

@@ -20,6 +20,7 @@ export default defineConfig({
 				Sidebar: './src/components/starlight/Sidebar.astro',
 				Footer: './src/components/starlight/Footer.astro',
 				MobileMenuFooter: './src/components/starlight/MobileMenuFooter.astro',
+				SocialIcons: './src/components/starlight/SocialIcons.astro',
 			},
 			sidebar: [
 				{

website/src/components/starlight/SocialIcons.astro

@@ -0,0 +1,66 @@
+---
+import config from 'virtual:starlight/user-config';
+
+const links = config.social || [];
+---
+
+{
+	links.map(({ label, href, icon }) => (
+		<a {href} rel="me" target="_blank" class="sl-flex" aria-label={label}>
+			<span class="sr-only">{label}</span>
+			{icon === 'github' && (
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="1.25rem"
+					height="1.25rem"
+					viewBox="0 0 16 16"
+					aria-hidden="true"
+					fill="currentColor"
+				>
+					<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
+				</svg>
+			)}
+		</a>
+	))
+}
+
+<a
+	href="https://pinkpixel.dev"
+	target="_blank"
+	rel="noopener noreferrer"
+	class="sl-flex"
+	aria-label="Pink Pixel"
+	title="pinkpixel.dev"
+>
+	<span class="sr-only">Pink Pixel</span>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="1.25rem"
+		height="1.25rem"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		aria-hidden="true"
+	>
+		<circle cx="12" cy="12" r="10"></circle>
+		<line x1="2" y1="12" x2="22" y2="12"></line>
+		<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
+		></path>
+	</svg>
+</a>
+
+<style>
+	@layer starlight.core {
+		a {
+			color: var(--sl-color-text-accent);
+			padding: 0.5em;
+			margin: -0.5em;
+		}
+		a:hover {
+			opacity: 0.66;
+		}
+	}
+</style>

website/src/styles/bytebox-docs.css

@@ -18,6 +18,8 @@
   --sl-color-gray-5: #59647a;
   --sl-color-gray-6: #3f495c;
   --sl-color-black: #090b10;
+
+  --sl-nav-height: 5rem;
 }
 
 body {
@@ -52,7 +54,7 @@ body {
 }
 
 .site-title img {
-  max-height: 2rem;
+  max-height: 3.2rem;
   width: auto;
   filter: drop-shadow(0 4px 20px rgba(247, 37, 133, 0.25));
 }
@@ -117,8 +119,12 @@ body {
     padding: 1.25rem;
   }
 
+  :root {
+    --sl-nav-height: 4rem;
+  }
+
   .site-title img {
-    max-height: 1.75rem;
+    max-height: 2.4rem;
   }
 }