Initial rewrite

src/components/Header.astro

@@ -0,0 +1,88 @@
+---
+import { site } from '../lib/site';
+
+const current = Astro.url.pathname;
+
+const navItems = [
+  { href: '/articles/', label: 'Articles' },
+  { href: '/projects/', label: 'Projects' },
+  { href: '/about/', label: 'About' },
+  { href: '/rss.xml', label: 'RSS' },
+];
+
+function isCurrent(href: string) {
+  return href !== '/rss.xml' && current.startsWith(href);
+}
+---
+
+<a class="skip-link" href="#content">Skip to content</a>
+<header class="site-header" aria-label="Site header">
+  <a class="site-title" href="/">{site.name}</a>
+  <div class="header-actions">
+    <nav class="site-nav" aria-label="Primary navigation">
+      {
+        navItems.map((item) => (
+          <a href={item.href} aria-current={isCurrent(item.href) ? 'page' : undefined}>
+            {item.label}
+          </a>
+        ))
+      }
+    </nav>
+    <label class="theme-control" for="theme-switcher">
+      <span class="sr-only">Use dark theme</span>
+      <input id="theme-switcher" class="theme-switcher" type="checkbox" name="theme" />
+    </label>
+  </div>
+</header>
+
+<script is:inline data-theme-script>
+  (() => {
+    const key = 'theme';
+    const legacyKey = 'dark-mode';
+    const switcher = document.getElementById('theme-switcher');
+    const media = matchMedia('(prefers-color-scheme: dark)');
+
+    const getStored = () => {
+      try {
+        const value = localStorage.getItem(key);
+        if (value === 'light' || value === 'dark') return value;
+
+        const legacyValue = localStorage.getItem(legacyKey);
+        if (legacyValue !== null) {
+          return JSON.parse(legacyValue) ? 'dark' : 'light';
+        }
+      } catch {
+        return null;
+      }
+
+      return null;
+    };
+
+    const getSystemTheme = () => (media.matches ? 'dark' : 'light');
+
+    const apply = (theme) => {
+      document.documentElement.dataset.theme = theme;
+      document.documentElement.style.colorScheme = theme;
+      switcher.checked = theme === 'dark';
+    };
+
+    if (!switcher) return;
+
+    apply(getStored() || getSystemTheme());
+
+    switcher.addEventListener('change', () => {
+      const theme = switcher.checked ? 'dark' : 'light';
+      try {
+        localStorage.setItem(key, theme);
+        localStorage.setItem(legacyKey, JSON.stringify(theme === 'dark'));
+      } catch {
+        // The switch still applies for the current page when storage is unavailable.
+      }
+      apply(theme);
+    });
+
+    media.addEventListener('change', () => {
+      if (!getStored()) apply(getSystemTheme());
+    });
+  })();
+</script>