Styling/theme pass: port Astro Wanderer design system

.github/aw/logs/.gitignore

@@ -0,0 +1,5 @@
+# Ignore all downloaded workflow logs
+*
+
+# But keep the .gitignore file itself
+!.gitignore

package.json

@@ -18,6 +18,8 @@
   "dependencies": {
     "@astrojs/rss": "^4.0.19",
     "@astrojs/sitemap": "^3.7.4",
+    "@fontsource-variable/inter": "^5.3.0",
+    "@fontsource-variable/jetbrains-mono": "^5.3.0",
     "astro": "^7.3.2",
     "zod": "^4.5.4"
   },

src/components/Footer.astro

@@ -0,0 +1,20 @@
+---
+import { siteConfig } from '../lib/site';
+---
+
+<footer class="site-footer">
+  <div class="container footer-inner">
+    <ul class="footer-links">
+      <li><a href="/">Home</a></li>
+      <li><a href="/about/">About</a></li>
+    </ul>
+    <ul class="footer-links">
+      {Object.values(siteConfig.socials).map((s) => (
+        <li>
+          <a href={s.url} target={s.url.startsWith('http') ? '_blank' : undefined} rel="noopener">{s.label}</a>
+        </li>
+      ))}
+    </ul>
+    <p>&copy; {siteConfig.author}</p>
+  </div>
+</footer>

src/components/Header.astro

@@ -0,0 +1,34 @@
+---
+import ThemeToggle from './ThemeToggle.astro';
+import { siteConfig } from '../lib/site';
+
+const navLinks = [
+  { href: '/', label: 'Home' },
+  { href: '/about/', label: 'About' },
+];
+---
+
+<header class="site-header">
+  <div class="container nav">
+    <a class="brand" href="/">
+      <span aria-hidden="true">&gt;</span> {siteConfig.shortTitle}
+      <span>_</span>
+    </a>
+    <nav aria-label="Main">
+      <ul class="nav-links">
+        {
+          navLinks.map((l) => (
+            <li>
+              <a href={l.href} aria-current={Astro.url.pathname === l.href ? 'page' : undefined}>
+                {l.label}
+              </a>
+            </li>
+          ))
+        }
+        <li>
+          <ThemeToggle />
+        </li>
+      </ul>
+    </nav>
+  </div>
+</header>

src/components/Hero.astro

@@ -0,0 +1,29 @@
+---
+import Icon from './Icon.astro';
+import { siteConfig } from '../lib/site';
+
+interface Props {
+  avatar?: string;
+}
+
+const { avatar } = Astro.props;
+---
+
+<section class="hero container">
+  <div class="hero-inner">
+    <div>
+      <p class="hero-greeting">Hi, I'm</p>
+      <h1>{siteConfig.author}</h1>
+      <p class="hero-bio">{siteConfig.description}</p>
+      <div class="social-row">
+        {Object.values(siteConfig.socials).map((s) => (
+          <a class="social-link" href={s.url} target={s.url.startsWith('http') ? '_blank' : undefined} rel="noopener">
+            <Icon name={s.icon} size={16} />
+            {s.label}
+          </a>
+        ))}
+      </div>
+    </div>
+    {avatar && <img class="hero-avatar" src={avatar} alt={siteConfig.author} />}
+  </div>
+</section>

src/components/Icon.astro

@@ -0,0 +1,49 @@
+---
+export interface Props {
+  name: 'github' | 'linkedin' | 'email' | 'rss' | 'sun' | 'moon';
+  size?: number;
+  class?: string;
+}
+
+const { name, size = 20, class: className } = Astro.props;
+---
+
+{name === 'github' && (
+  <svg class={className} width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+    <path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.3-1.8-1.3-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1.1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-5.9 0-1.3.5-2.4 1.2-3.2 0-.4-.5-1.6.2-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.7 1.6.2 2.8.2 3.2.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.6-5.5 5.9.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .3" />
+  </svg>
+)}
+{name === 'linkedin' && (
+  <svg class={className} width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+    <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.55C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.72C24 .77 23.2 0 22.22 0z" />
+  </svg>
+)}
+{name === 'email' && (
+  <svg class={className} width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+    <path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4.24-8 5-8-5V6.78l8 4.99 8-4.99V8.24z" />
+  </svg>
+)}
+{name === 'rss' && (
+  <svg class={className} width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+    <circle cx="6.18" cy="17.82" r="2.18" />
+    <path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z" />
+  </svg>
+)}
+{name === 'sun' && (
+  <svg class={className} width={size} height={size} 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="5" />
+    <line x1="12" y1="1" x2="12" y2="3" />
+    <line x1="12" y1="21" x2="12" y2="23" />
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+    <line x1="1" y1="12" x2="3" y2="12" />
+    <line x1="21" y1="12" x2="23" y2="12" />
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+  </svg>
+)}
+{name === 'moon' && (
+  <svg class={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+  </svg>
+)}

src/components/PostCard.astro

@@ -0,0 +1,26 @@
+---
+import type { CollectionEntry } from 'astro:content';
+import { entrySlug } from '../lib/slugify';
+
+interface Props {
+  post: CollectionEntry<'posts'>;
+}
+
+const { post } = Astro.props;
+const dateFmt = new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'short', day: 'numeric', timeZone: 'UTC' });
+---
+
+<article>
+  <a class="post-card" href={`/posts/${entrySlug(post.id, post.data.slug)}/`}>
+    <div class="post-meta">
+      <time datetime={post.data.date.toISOString()}>{dateFmt.format(post.data.date)}</time>
+    </div>
+    <h3>{post.data.title}</h3>
+    <p class="post-excerpt">{post.data.description}</p>
+    {post.data.tags.length > 0 && (
+      <div class="tag-list">
+        {post.data.tags.map((t) => <span class="tag">{t}</span>)}
+      </div>
+    )}
+  </a>
+</article>

src/components/ThemeToggle.astro

@@ -0,0 +1,27 @@
+---
+import Icon from './Icon.astro';
+---
+
+<button class="theme-toggle" id="theme-toggle" type="button" aria-label="Toggle theme">
+  <span class="icon-sun"><Icon name="sun" size={18} /></span>
+  <span class="icon-moon"><Icon name="moon" size={18} /></span>
+</button>
+
+<style>
+  .icon-sun, .icon-moon {
+    display: inline-flex;
+    align-items: center;
+  }
+  html[data-theme='dark'] .icon-sun { display: none; }
+  html[data-theme='light'] .icon-moon { display: none; }
+</style>
+
+<script>
+  const btn = document.getElementById('theme-toggle') as HTMLButtonElement;
+
+  btn.addEventListener('click', () => {
+    const dark = document.documentElement.dataset.theme === 'dark';
+    document.documentElement.dataset.theme = dark ? 'light' : 'dark';
+    localStorage.setItem('theme', dark ? 'light' : 'dark');
+  });
+</script>

src/layouts/BaseLayout.astro

@@ -1,4 +1,9 @@
 ---
+import '@fontsource-variable/inter';
+import '@fontsource-variable/jetbrains-mono';
+import '../styles/global.css';
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
 import { siteConfig } from '../lib/site';
 
 interface Props {
@@ -7,30 +12,44 @@ interface Props {
 }
 
 const { title, description } = Astro.props;
+const canonical = new URL(Astro.url.pathname, siteConfig.url).toString();
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>{title} · Dominic Serrano</title>
+    <title>{title} · {siteConfig.author}</title>
     <meta name="description" content={description} />
+    <meta name="author" content={siteConfig.author} />
+    <link rel="canonical" href={canonical} />
     <link rel="icon" href="/favicon.ico" sizes="any" />
-    <link rel="alternate" type="application/rss+xml" title="RSS" href="/feed.xml" />
-    <link rel="stylesheet" href="/styles/site.css" />
+    <link rel="alternate" type="application/rss+xml" title={siteConfig.title} href="/feed.xml" />
+    <meta name="generator" content={Astro.generator} />
+
+    <meta property="og:site_name" content={siteConfig.title} />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:url" content={canonical} />
+
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+
+    <!-- Theme: set before paint to avoid flash -->
+    <script is:inline>
+      const t = localStorage.getItem('theme');
+      const dark = t ? t === 'dark' : matchMedia('(prefers-color-scheme: dark)').matches;
+      document.documentElement.dataset.theme = dark ? 'dark' : 'light';
+    </script>
   </head>
   <body>
-    <header>
-      <nav>
-        <a href="/">Dominic Serrano</a>
-      </nav>
-    </header>
+    <Header />
     <main>
       <slot />
     </main>
-    <footer>
-      <p>&copy; {siteConfig.author}</p>
-    </footer>
+    <Footer />
   </body>
 </html>

src/layouts/PageLayout.astro

@@ -10,10 +10,12 @@ const { title, description } = Astro.props;
 ---
 
 <BaseLayout title={title} description={description}>
-  <article>
+  <article class="container section">
     <header>
       <h1>{title}</h1>
     </header>
-    <slot />
+    <div class="prose">
+      <slot />
+    </div>
   </article>
 </BaseLayout>

src/layouts/PostLayout.astro

@@ -9,23 +9,26 @@ interface Props {
 }
 
 const { title, description, date, tags } = Astro.props;
+const dateFmt = new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'short', day: 'numeric', timeZone: 'UTC' });
 ---
 
 <BaseLayout title={title} description={description}>
-  <article>
+  <article class="container section">
     <header>
       <h1>{title}</h1>
-      <time datetime={date.toISOString()}>
-        {date.toISOString().slice(0, 10)}
-      </time>
+      <div class="post-meta">
+        <time datetime={date.toISOString()}>{dateFmt.format(date)}</time>
+      </div>
       {tags.length > 0 && (
-        <ul class="tags">
+        <div class="tag-list">
           {tags.map((tag) => (
-            <li><a href={`/tags/${tag}/`}>{tag}</a></li>
+            <a class="tag" href={`/tags/${tag}/`}>{tag}</a>
           ))}
-        </ul>
+        </div>
       )}
     </header>
-    <slot />
+    <div class="prose">
+      <slot />
+    </div>
   </article>
 </BaseLayout>

src/lib/site.ts

@@ -1,6 +1,19 @@
+export interface SocialLink {
+  url: string;
+  label: string;
+  icon: 'github' | 'linkedin' | 'email' | 'rss';
+}
+
 export const siteConfig = {
   title: 'Dominic Serrano',
+  shortTitle: 'dmserrano',
   author: 'Dominic Serrano',
   url: 'https://dominicserrano.com',
   description: 'Personal site of Dominic Serrano.',
+  socials: {
+    github: { url: 'https://github.com/dmserrano', label: 'GitHub', icon: 'github' },
+    linkedin: { url: 'https://www.linkedin.com/in/dominic-serrano/', label: 'LinkedIn', icon: 'linkedin' },
+    email: { url: 'mailto:dmsrojo@gmail.com', label: 'Email', icon: 'email' },
+    rss: { url: '/feed.xml', label: 'RSS', icon: 'rss' },
+  } satisfies Record<string, SocialLink>,
 };