Add social icons and improve theme switching.

Author: brixen

package-lock.json

@@ -14,6 +14,8 @@
     "@shoelace-style/shoelace": "^2.20.1",
     "astro": "^5.6.1",
     "sharp": "^0.34.2",
+    "simple-icons": "^15.20.0",
+    "solid-heroicons": "^3.2.4",
     "solid-js": "^1.9.10"
   },
   "devDependencies": {

package.json

@@ -1,15 +1,17 @@
 ---
+import SocialIcons from "@/components/SocialIcons.astro";
 import ThemeSwitch from "@/components/ThemeSwitch.astro";
 ---
 
 <header class="flex items-center justify-between h-14">
   <div class="text-sm font-semibold tracking-tight">
-    Rubinius
+    <a href="/">Rubinius</a>
   </div>
-  <nav class="hidden md:flex gap-4 text-sm text-slate-200/80 items-end">
-    <a href="/" class="text-black dark:text-white">Home</a>
-    <a href="/blog" class="text-black dark:text-white">Blog</a>
-    <a href="/docs" class="text-black dark:text-white">Docs</a>
+  <nav class="hidden md:flex gap-4 text-sm items-end">
+    <a href="/blog/">Blog</a>
+    <a href="/docs/">Docs</a>
+
+    <SocialIcons />
     <ThemeSwitch />
   </nav>
 </header>

src/components/SiteHeader.astro

@@ -0,0 +1,20 @@
+---
+import { siBluesky, siGithub, siDiscord, siYoutube } from "simple-icons";
+
+const icons = [
+  { icon: siBluesky, url: "https://bsky.app/profile/rubinius.com" },
+  { icon: siDiscord, url: "https://discord.gg/25GuZR4fBN" },
+  // { icon: siYoutube, url: "" },
+  { icon: siGithub, url: "https://github.com/rubinius/" },
+];
+---
+
+<div class="flex gap-2 items-end">
+  {icons.map(({ icon, color, dark, url }) => (
+  <a class="text-fg/60 rounded-sm hover:text-fg/100 hover:ring-1 hover:p-1 hover:ring-accent/60" href={url}>
+    <svg fill="currentColor" viewBox="0 0 24 24" aria-label={icon.title} width="24" height="24">
+      <path d={icon.path} />
+    </svg>
+  </a>
+  ))}
+</div>

src/components/SocialIcons.astro

@@ -34,7 +34,14 @@
 
   // 4. Change theme on button press
   function selectTheme(theme) {
+    const group = document.getElementById("theme-group");
+    group.querySelectorAll('[aria-pressed]').forEach((btn) => {
+      const isActive = btn.id === `theme-${theme}`;
+      btn.setAttribute("aria-pressed", isActive ? "true" : "false");
+    });
+
     localStorage.setItem("theme", theme);
+
     initTheme();
   }
 

src/components/ThemeBoot.astro

@@ -1,31 +1,26 @@
 ---
+import { createSignal, onMount } from "solid-js";
+import { Icon } from "solid-heroicons";
+import { sun, moon, computerDesktop } from "solid-heroicons/solid";
+
 const buttons = [
-  { id: "theme-light",  value: "light", pressed: false },
-  { id: "theme-system", value: "system", pressed: false },
-  { id: "theme-dark",   value: "dark", pressed: false },
+  { id: "theme-light",  icon: sun, value: "light", pressed: false },
+  { id: "theme-system", icon: computerDesktop, value: "system", pressed: true },
+  { id: "theme-dark",   icon: moon, value: "dark", pressed: false },
 ];
 ---
 
-<div class="flex gap-2" role="radiogroup">
-  {buttons.map(({ id, value, pressed }) => (
-    <button
-      id={id}
-      type="button"
-      class="text-black border-black dark:text-white dark:border-white px-3 py-1.5 rounded-xl text-sm font-medium border"
-      aria-pressed={pressed}
-    >
-      {value}
-    </button>
+<div id="theme-group"
+    class="flex gap-2 border border-fg/20 rounded-xl p-1 flex items-center" role="radiogroup">
+  {buttons.map(({ id, icon, value, pressed }) => (
+  <button
+    id={id}
+    type="button"
+    class="inline-flex items-center justify-center text-fg/60 p-1 rounded-sm hover:text-fg/100 aria-[pressed=true]:ring-1 aria-[pressed=true]:ring-accent/60"
+    aria-pressed={pressed}
+    onclick={`selectTheme('${value}')`}
+  >
+    <Icon path={icon} class="h-5 w-5" />
+  </button>
   ))}
 </div>
-
-<script is:inline>
-  function attachThemeHandler(id, value) {
-    const el = document.getElementById(id);
-    if (el) el.addEventListener("click", () => selectTheme(value));
-  }
-
-  attachThemeHandler("theme-light",  "light");
-  attachThemeHandler("theme-system", "system");
-  attachThemeHandler("theme-dark",   "dark");
-</script>

src/components/ThemeSwitch.astro

@@ -22,28 +22,7 @@ const blog = defineCollection({
   }),
 });
 
-const newsletters = defineCollection({
-  type: "content",
-  schema: z.object({
-    issue: z.number().optional(),
-  }),
-});
-
-const papers = defineCollection({
-  type: "content",
-  schema: z.object({
-    title: z.string(),
-    subtitle: z.string().optional(),
-    authors: z.array(z.string()),
-    emails: z.array(z.string()),
-    date: z.date(),
-    tags: z.array(z.string()).optional(),
-  }),
-});
-
 export const collections = {
   blog: blog,
-  newsletters: newsletters,
   docs: docs,
-  papers: papers,
 };