Add styling and theming.

Author: brixen

astro.config.mjs

@@ -2,11 +2,13 @@
 import { defineConfig } from 'astro/config';
 import solidJs from '@astrojs/solid-js';
 import markdoc from '@astrojs/markdoc';
+import tailwind from '@tailwindcss/vite'
 
 export default defineConfig({
   output: "static",
   site: 'https://rubinius.com',
   base: '/',
 
+  vite: { plugins: [tailwind()] },
   integrations: [solidJs(), markdoc()],
 });

package-lock.json

@@ -19,6 +19,7 @@
   "devDependencies": {
     "@astrojs/markdoc": "^0.15.8",
     "@mermaid-js/mermaid-cli": "^11.4.0",
+    "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.16",
     "mermaid": "^11.12.1",
     "tailwindcss": "^4.1.16"

package.json

@@ -1,5 +1,5 @@
 ---
-const gaId = "G-5SDC7TZYDR";
+const gaId = "G-KLQJHB8G93";
 ---
 
 <script async src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}></script>

src/components/Analytics.astro

@@ -0,0 +1,33 @@
+---
+import { getBlogList, isActivePath } from "@/lib/blog";
+const blogLinks = await getBlogList();
+
+const { activeId } = Astro.props;
+---
+
+<nav aria-label="All blog posts" class="text-sm">
+  <h2 class="mb-2 px-2 text-xs font-semibold uppercase tracking-wide opacity-70">
+    Blog posts
+  </h2>
+  <ul class="space-y-1">
+    {blogLinks.map((it) => {
+      const isActive = isActivePath(it.path, activeId);
+      return (
+        <li>
+          <a
+            href={it.path}
+            aria-current={isActive ? "page" : undefined}
+            class={
+              "block rounded-md px-2 py-1.5 outline-none ring-0 transition " +
+              (isActive
+                ? "bg-fg/10 font-medium"
+                : "hover:bg-fg/5 focus:bg-fg/5")
+            }
+          >
+            {it.title}
+          </a>
+        </li>
+      );
+    })}
+  </ul>
+</nav>

src/components/BlogList.astro

@@ -0,0 +1,38 @@
+---
+import { buildToc, type RawHeading, type TocItem } from "@/lib/docs";
+
+interface Props {
+  headings: RawHeading[]; // pass through from entry.render()
+}
+const { headings } = Astro.props;
+const toc: TocItem[] = buildToc(headings, [2, 3]);
+---
+
+<nav aria-label="In this document" class="text-sm">
+  <h2 class="mb-2 px-2 text-xs font-semibold uppercase tracking-wide opacity-70">
+    In this document
+  </h2>
+
+  {toc.length === 0 ? (
+    <p class="px-2 opacity-70">No sections</p>
+  ) : (
+    <ul class="space-y-1">
+      {toc.map((h2) => (
+        <li>
+          <a href={h2.slug} class="block rounded-md px-2 py-1.5 hover:bg-fg/5">{h2.text}</a>
+          {h2.children?.length ? (
+            <ul class="mt-1 ms-2 border-s ps-3 space-y-1">
+              {h2.children.map((h3) => (
+                <li>
+                  <a href={h3.slug} class="block rounded-md px-2 py-1 hover:bg-fg/5">
+                    {h3.text}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          ) : null}
+        </li>
+      ))}
+    </ul>
+  )}
+</nav>

src/components/DocToc.astro

@@ -1,13 +1,15 @@
 ---
+import ThemeSwitch from "@/components/ThemeSwitch.astro";
 ---
+
 <header class="flex items-center justify-between h-14">
   <div class="text-sm font-semibold tracking-tight">
     Rubinius
   </div>
-  <nav class="flex items-center gap-4 text-sm font-medium text-slate-700">
-    <a href="/blog/" class="hover:text-slate-900">Blog</a>
-    <a href="/newsletters/" class="hover:text-slate-900">Newsletters</a>
-    <a href="/docs/" class="hover:text-slate-900">Docs</a>
-    <a href="/reference/" class="hover:text-slate-900">Reference</a>
+  <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>
+    <ThemeSwitch />
   </nav>
 </header>

src/components/SiteHeader.astro

@@ -0,0 +1,42 @@
+<script is:inline>
+  // 0. Get system theme
+  function systemTheme() {
+    return window.matchMedia("(prefers-color-scheme: dark)")
+  }
+
+  // 1. Change html to the correct theme (light/dark)
+  function setTheme(isDark) {
+    console.log("setTheme: isDark: " + isDark);
+    document.documentElement.classList.toggle("dark", isDark);
+  }
+
+  // 2. Possibly update theme when system setting is changed
+  function systemUpdateTheme(e) {
+    console.log("systemUpdateTheme " + e.matches)
+    initTheme();
+  }
+
+  systemTheme().addEventListener("change", systemUpdateTheme);
+
+  // 3. Set initial theme from settings
+  function initTheme() {
+    let savedTheme = localStorage.getItem("theme");
+    if (!savedTheme) {
+      selectTheme("system");
+    } else {
+      if (savedTheme === "system") {
+        setTheme(systemTheme().matches);
+      } else {
+        setTheme(savedTheme === "dark");
+      }
+    }
+  }
+
+  // 4. Change theme on button press
+  function selectTheme(theme) {
+    localStorage.setItem("theme", theme);
+    initTheme();
+  }
+
+  initTheme();
+</script>

src/components/ThemeBoot.astro

@@ -0,0 +1,31 @@
+---
+const buttons = [
+  { id: "theme-light",  value: "light", pressed: false },
+  { id: "theme-system", value: "system", pressed: false },
+  { id: "theme-dark",   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>
+
+<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>