@cratis/cast 0.0.1 → 0.1.0

package/site/components/Terminal.astro

@@ -0,0 +1,159 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// Shell for the interactive terminal. The behavior lives in scripts/terminal.ts and is
+// only downloaded the first time the terminal opens.
+import { person, projects } from '../data';
+const firstProject = projects[0]?.name;
+const chips = ['help', 'whoami', 'now', 'git log --oneline', 'stream tail', 'ls projects', ...(firstProject ? [`cat ${firstProject}`] : []), 'contact', 'replay'];
+---
+
+<dialog class="term" data-terminal aria-label="Terminal" aria-describedby="term-hint" transition:persist="terminal">
+  <div class="shell panel flex flex-col overflow-hidden">
+    <div class="flex items-center gap-3 border-b border-line px-4 py-2.5">
+      <span class="flex gap-1.5" aria-hidden="true">
+        <span class="size-2.5 rounded-full bg-[#ff5f57]/80"></span>
+        <span class="size-2.5 rounded-full bg-[#febc2e]/80"></span>
+        <span class="size-2.5 rounded-full bg-[#28c840]/80"></span>
+      </span>
+      <p class="flex-1 truncate text-center font-mono text-xs text-fg-muted">{person.handle}@stream: ~</p>
+      <button type="button" class="kbd cursor-pointer" data-terminal-close aria-label="Close terminal">esc</button>
+    </div>
+    <div class="out min-h-0 flex-1 overflow-y-auto px-4 py-3 font-mono text-[0.8125rem] leading-relaxed" role="log" aria-live="polite" aria-label="Terminal output" data-terminal-out></div>
+    <form class="flex items-center gap-2 border-t border-line px-4 py-3 font-mono text-[0.8125rem]" data-terminal-form>
+      <label for="term-input" class="shrink-0"><span class="text-view">{person.handle}@stream</span><span class="text-fg-faint">:</span><span class="text-command">~</span><span class="text-fg-faint">$</span></label>
+      <input
+        id="term-input"
+        type="text"
+        class="min-w-0 flex-1 bg-transparent text-fg focus:outline-none"
+        autocomplete="off"
+        autocapitalize="off"
+        autocorrect="off"
+        spellcheck="false"
+        enterkeyhint="go"
+        aria-describedby="term-hint"
+        data-terminal-input
+      />
+    </form>
+    <div class="chips flex gap-2 overflow-x-auto border-t border-line px-4 py-2.5" role="group" aria-label="Suggested commands" data-terminal-chips>
+      {chips.map((c) => <button type="button" class="chip" data-cmd={c}>{c}</button>)}
+    </div>
+    <p id="term-hint" class="sr-only">Type help for a list of commands. Up and down browse history, Tab completes, Escape closes.</p>
+  </div>
+</dialog>
+
+<style>
+  .term {
+    position: fixed;
+    inset: 0;
+    margin: 0;
+    padding: 10vh 1rem 1rem;
+    width: 100%;
+    max-width: none;
+    height: 100%;
+    max-height: none;
+    background: transparent;
+    color: inherit;
+    border: 0;
+  }
+  .term:not([open]) {
+    display: none;
+  }
+  .term::backdrop {
+    background: rgb(4 4 8 / 0.6);
+    backdrop-filter: blur(6px);
+  }
+  .shell {
+    margin-inline: auto;
+    max-width: 46rem;
+    height: min(34rem, 80dvh);
+    background: color-mix(in oklab, var(--color-ink-900) 94%, transparent);
+    box-shadow:
+      inset 0 1px 0 color-mix(in srgb, var(--color-fg) 6%, transparent),
+      0 50px 120px -20px rgb(0 0 0 / 0.8),
+      0 0 0 1px color-mix(in srgb, var(--color-fg) 4%, transparent);
+  }
+  @media (max-width: 639px) {
+    .term {
+      padding: 0.75rem;
+    }
+    .shell {
+      height: min(30rem, 70dvh);
+    }
+  }
+  :global(.js-motion) .term[open] .shell {
+    animation: shell-in 260ms var(--ease-out-expo);
+  }
+  @keyframes shell-in {
+    from {
+      opacity: 0;
+      transform: translateY(10px) scale(0.985);
+    }
+  }
+  #term-input {
+    caret-color: var(--color-event);
+    caret-shape: block;
+  }
+  .chip {
+    flex-shrink: 0;
+    border-radius: 999px;
+    border: 1px solid var(--color-line);
+    padding: 0.2rem 0.65rem;
+    font-family: var(--font-mono);
+    font-size: 0.6875rem;
+    color: var(--color-fg-muted);
+    white-space: nowrap;
+    cursor: pointer;
+    transition: color 150ms ease, border-color 150ms ease;
+  }
+  .chip:hover {
+    color: var(--color-fg);
+    border-color: var(--color-line-strong);
+  }
+  .chips {
+    scrollbar-width: none;
+  }
+  .out :global(.ln) {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  .out :global(a) {
+    text-decoration: underline;
+    text-decoration-color: var(--color-line-strong);
+  }
+  .out :global(a:hover) {
+    color: var(--color-fg);
+  }
+</style>
+
+<script>
+  import { onPageLoad } from '../lib/lifecycle';
+
+  type Mod = typeof import('../scripts/terminal');
+  let mod: Promise<Mod> | null = null;
+  const load = () => (mod ??= import('../scripts/terminal'));
+  const open = () => void load().then((m) => m.openTerminal());
+
+  const typing = (el: EventTarget | null) =>
+    el instanceof HTMLElement && (el.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName));
+
+  // Bound once per full page load; the router swaps the DOM but keeps these.
+  document.addEventListener('keydown', (e) => {
+    if ((e.key !== '`' && e.key !== '~') || e.metaKey || e.ctrlKey || e.altKey || typing(e.target)) return;
+    if (document.querySelector('dialog[open]')) return;
+    e.preventDefault();
+    open();
+  });
+  document.addEventListener('click', (e) => {
+    if ((e.target as Element | null)?.closest('[data-terminal-open]')) open();
+  });
+  document.addEventListener('terminal:open', open);
+
+  // Warm the chunk when the visitor shows intent, so the first open feels instant.
+  onPageLoad(() => {
+    const warm = () => void load();
+    const triggers = document.querySelectorAll<HTMLElement>('[data-terminal-open]');
+    triggers.forEach((t) => t.addEventListener('pointerenter', warm, { once: true }));
+  });
+</script>

package/site/components/Writing.astro

@@ -0,0 +1,126 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import SectionHeader from './SectionHeader.astro';
+import { posts, themes, blogSource, blogHost, blogFetchedAt, readingMinutes } from '../lib/blog';
+import { snapshotDate } from '../lib/github';
+import { renderInline } from '../lib/inline';
+
+interface Props {
+  index: string;
+  title?: string;
+  label?: string;
+  intro?: string;
+}
+const { index, title = 'Appended to the *blog.*', label = 'PostPublished', intro } = Astro.props;
+const hours = Math.round(readingMinutes / 60);
+const INITIAL = 8;
+const series = [...new Set(posts.map((p) => p.series).filter(Boolean))];
+const day = (d: string) => new Date(d).toLocaleDateString('en-US', { day: 'numeric', month: 'short', year: 'numeric', timeZone: 'UTC' });
+---
+
+<section id="writing" class="relative py-24 md:py-36" aria-labelledby="writing-title">
+  <div class="container-x">
+    <SectionHeader index={index} label={label} title={title} id="writing-title">
+      <p class="mt-6 max-w-[62ch] text-lg leading-relaxed text-fg-muted">
+        {posts.length} {posts.length === 1 ? 'post' : 'posts'}{blogHost && <> on <a href={blogSource} class="text-fg underline decoration-line-strong hover:decoration-fg" rel="noopener">{blogHost}</a></>}{hours > 0 && <>, about {hours} {hours === 1 ? 'hour' : 'hours'} of reading</>}{series.length > 0 && <>, including the <span class="text-fg">{series[0]}</span> series</>}.
+        {intro && <Fragment set:html={' ' + renderInline(intro)} />}
+      </p>
+    </SectionHeader>
+
+    {posts.length === 0 && <div class="panel p-8 font-mono text-sm text-fg-faint" data-reveal>EventNotFound: no posts have been captured yet. They appear after the first build that can reach the writing sources.</div>}
+    <div class="mb-6 flex flex-wrap gap-2" role="group" aria-label="Filter posts by theme" data-writing-filters hidden>
+      <button type="button" class="filter" data-theme-filter="all" aria-pressed="true">All <span class="font-mono text-[0.6875rem] opacity-60">{posts.length}</span></button>
+      {
+        themes.map((t) => (
+          <button type="button" class="filter" data-theme-filter={t.id} aria-pressed="false">
+            {t.label} <span class="font-mono text-[0.6875rem] opacity-60">{posts.filter((p) => p.themes.includes(t.id)).length}</span>
+          </button>
+        ))
+      }
+    </div>
+    <p class="sr-only" aria-live="polite" data-writing-status></p>
+
+    <ol class="panel divide-y divide-line overflow-hidden" data-writing-list data-reveal>
+      {
+        posts.map((p, i) => (
+          <li class:list={['post', i >= INITIAL && 'extra']} data-themes={p.themes.join(' ')}>
+            <a href={p.url} rel="noopener" class="group grid gap-x-6 gap-y-2 px-5 py-5 transition-colors hover:bg-fg/[0.02] md:grid-cols-[7rem_1fr_auto] md:px-7">
+              <span class="font-mono text-xs leading-6 text-fg-faint">
+                {p.part !== undefined ? <>Part <span class="text-event">{String(p.part).padStart(2, '0')}</span></> : <span class="text-event">Overview</span>}
+              </span>
+              <span class="min-w-0">
+                <span class="block font-display text-lg leading-snug font-[620] tracking-[-0.01em] text-fg transition-colors group-hover:text-event-soft md:text-xl">{p.headline}</span>
+                <span class="clamp mt-1.5 block text-[0.9375rem] leading-relaxed text-fg-muted">{p.description}</span>
+                <span class="mt-3 flex flex-wrap gap-1.5">
+                  {p.tags.slice(0, 5).map((t) => <span class="tag px-2 py-0 font-mono text-[0.6875rem]">{t}</span>)}
+                </span>
+              </span>
+              <span class="font-mono text-xs whitespace-nowrap text-fg-faint md:text-right md:leading-6">
+                <time datetime={p.date}>{day(p.date)}</time>
+                {p.minutes && <span class="md:block"><span class="md:hidden"> · </span>{p.minutes} min read</span>}
+              </span>
+            </a>
+          </li>
+        ))
+      }
+    </ol>
+    <div class="mt-5 flex flex-wrap items-center justify-between gap-3">
+      {posts.length > INITIAL && <button type="button" class="btn btn-sm" data-writing-more aria-expanded="false">Show all {posts.length} posts</button>}
+      <p class="font-mono text-xs text-fg-faint">snapshot taken <time datetime={blogFetchedAt}>{snapshotDate(blogFetchedAt)}</time></p>
+    </div>
+  </div>
+</section>
+
+<style>
+  .clamp {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  /* Without JS everything shows; with JS the list starts collapsed. */
+  :global(.js) [data-writing-list]:not([data-expanded]):not([data-filtered]) .extra {
+    display: none;
+  }
+</style>
+
+<script>
+  import { onPageLoad, disposer } from '../lib/lifecycle';
+
+  onPageLoad(() => {
+    const bar = document.querySelector<HTMLElement>('[data-writing-filters]');
+    const list = document.querySelector<HTMLElement>('[data-writing-list]');
+    const more = document.querySelector<HTMLButtonElement>('[data-writing-more]');
+    const status = document.querySelector<HTMLElement>('[data-writing-status]');
+    if (!bar || !list) return;
+    const d = disposer();
+    bar.hidden = false;
+    const items = [...list.querySelectorAll<HTMLElement>('.post')];
+
+    d.on<MouseEvent>(bar, 'click', (e) => {
+      const btn = (e.target as Element).closest<HTMLButtonElement>('[data-theme-filter]');
+      if (!btn) return;
+      const id = btn.dataset['themeFilter'] ?? 'all';
+      bar.querySelectorAll('[data-theme-filter]').forEach((b) => b.setAttribute('aria-pressed', String(b === btn)));
+      list.toggleAttribute('data-filtered', id !== 'all');
+      let shown = 0;
+      for (const li of items) {
+        const match = id === 'all' || (li.dataset['themes'] ?? '').split(' ').includes(id);
+        li.hidden = !match;
+        if (match) shown++;
+      }
+      if (more) more.hidden = id !== 'all';
+      if (status) status.textContent = `Showing ${shown} post${shown === 1 ? '' : 's'}`;
+    });
+    if (more)
+      d.on(more, 'click', () => {
+        const open = !list.hasAttribute('data-expanded');
+        list.toggleAttribute('data-expanded', open);
+        more.setAttribute('aria-expanded', String(open));
+        more.textContent = open ? 'Show fewer' : `Show all ${items.length} posts`;
+      });
+    return d.dispose;
+  });
+</script>

package/site/data.ts

@@ -0,0 +1,48 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// The one place components read cast.yaml and build-time data from.
+import { config, github, writing, tier, sections, build, photo, photoUrl } from 'virtual:cast';
+
+export { config, github, writing, tier, sections, build, photo, photoUrl };
+
+export const person = config.person;
+export const now = config.now;
+export const careerEvents = config.career.events;
+export const cratis = config.cratis;
+export const projects = config.projects;
+export const talks = config.talks;
+export const community = config.community;
+export const education = config.education;
+export const certifications = config.certifications;
+export const skills = config.skills;
+export const agentic = config.agentic;
+export const eventModel = config.eventModel;
+export const stats = config.stats;
+
+/** First word of the display name: projections are named `<FirstName>.Now`, `<FirstName>.Career`. */
+export const firstName = person.name.split(/\s+/)[0] ?? person.handle;
+
+/** Known link names and how they read. Anything else is shown with its key. */
+const linkLabels: Record<string, string> = {
+    github: 'GitHub',
+    linkedin: 'LinkedIn',
+    mastodon: 'Mastodon',
+    bluesky: 'Bluesky',
+    x: 'X',
+    twitter: 'X',
+    youtube: 'YouTube',
+    website: 'Website',
+    blog: 'Blog',
+};
+
+/** Profile links with labels, GitHub first. */
+export const profileLinks: { key: string; label: string; url: string }[] = Object.entries(person.links)
+    .map(([key, url]) => ({ key, label: linkLabels[key.toLowerCase()] ?? key, url }))
+    .sort((left, right) => Number(right.key === 'github') - Number(left.key === 'github'));
+
+/** The GitHub profile URL: from links, else from the handle. */
+export const githubUrl = person.links['github'] ?? `https://github.com/${config.github.login}`;
+
+/** The organization whose merged pull requests feed the live feed. */
+export const feedOrg = config.github.orgs[0] ?? 'Cratis';

package/site/layouts/Base.astro

@@ -0,0 +1,144 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import '@fontsource-variable/inter/wght.css';
+import '@fontsource-variable/jetbrains-mono/wght.css';
+import '@fontsource-variable/fraunces/opsz-italic.css';
+import '../styles/global.css';
+import interUrl from '@fontsource-variable/inter/files/inter-latin-wght-normal.woff2?url';
+import monoUrl from '@fontsource-variable/jetbrains-mono/files/jetbrains-mono-latin-wght-normal.woff2?url';
+import { ClientRouter } from 'astro:transitions';
+import { config, person, githubUrl, profileLinks } from '../data';
+import { plainText } from '../lib/inline';
+import { accentTokens } from '../lib/accent';
+import { safeJson } from '../lib/safeJson';
+import CommandPalette from '../components/CommandPalette.astro';
+import Terminal from '../components/Terminal.astro';
+
+interface Props {
+  title: string;
+  description: string;
+  /** Path of the OG image. */
+  image?: string;
+  noindex?: boolean;
+  bodyClass?: string;
+}
+
+const { title, description, image = '/og.png', noindex = false, bodyClass = '' } = Astro.props;
+const canonical = new URL(Astro.url.pathname, Astro.site);
+const ogImage = new URL(image, Astro.site);
+const [firstName, ...rest] = (person.fullName ?? person.name).split(/\s+/);
+const themeMode = config.theme.mode;
+const accent = accentTokens(config.theme.accent);
+
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'Person',
+  name: person.name,
+  alternateName: [person.fullName, person.handle].filter(Boolean),
+  jobTitle: person.title,
+  ...(person.email ? { email: `mailto:${person.email}` } : {}),
+  url: Astro.site?.toString(),
+  image: new URL('/apple-touch-icon.png', Astro.site).toString(),
+  ...(person.location ? { address: { '@type': 'PostalAddress', addressLocality: person.location.split(',')[0]?.trim(), ...(person.country ? { addressCountry: person.country } : {}) } } : {}),
+  knowsAbout: person.interests,
+  sameAs: [githubUrl, ...profileLinks.filter((link) => link.key !== 'github').map((link) => link.url)],
+};
+---
+
+<!doctype html>
+<html lang={config.site.language} data-theme-default={themeMode}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{title}</title>
+    <meta name="description" content={plainText(description)} />
+    <link rel="canonical" href={canonical} />
+    {noindex && <meta name="robots" content="noindex" />}
+    <meta name="theme-color" content="#08080e" />
+    <meta name="color-scheme" content="dark light" />
+    <meta name="author" content={person.name} />
+    <meta name="generator" content={Astro.generator} />
+    <meta name="cast:handle" content={person.handle} />
+
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <link rel="sitemap" href="/sitemap-index.xml" />
+    <link rel="alternate" type="application/json" href="/cast.json" title="Cast profile" />
+    <link rel="alternate" type="text/plain" href="/llms.txt" title="Profile for AI agents" />
+
+    <link rel="preload" href={interUrl} as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href={monoUrl} as="font" type="font/woff2" crossorigin />
+
+    <meta property="og:type" content="profile" />
+    <meta property="og:site_name" content={person.name} />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={plainText(description)} />
+    <meta property="og:url" content={canonical} />
+    <meta property="og:image" content={ogImage} />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:image:alt" content={`${person.name}: ${plainText(person.tagline)}`} />
+    {firstName && <meta property="profile:first_name" content={firstName} />}
+    {rest.length > 0 && <meta property="profile:last_name" content={rest[rest.length - 1]} />}
+    <meta property="profile:username" content={person.handle} />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={plainText(description)} />
+    <meta name="twitter:image" content={ogImage} />
+
+    <script type="application/ld+json" set:html={safeJson(jsonLd)} />
+    <style set:html={`:root{--color-accent:${accent.dark};--color-accent-soft:${accent.darkSoft};--color-accent-ink:${accent.ink}}html[data-theme='light']{--color-accent:${accent.light};--color-accent-soft:${accent.lightSoft}}`}></style>
+
+    <script is:inline>
+      /* eslint-disable no-var, no-empty, @typescript-eslint/no-unused-vars -- runs before anything else loads, so it stays ES5 */
+      // Apply the stored theme and motion preference before first paint, and carry them
+      // over to every page the view-transition router swaps in.
+      (function () {
+        function apply(d) {
+          var preference = document.documentElement.getAttribute('data-theme-default') || 'dark';
+          var t = preference === 'light' ? 'light' : 'dark';
+          if (preference === 'system') t = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+          try {
+            var m = localStorage.getItem('cast:motion');
+            if (m === 'reduced' || m === 'full') d.dataset.motion = m;
+            var stored = localStorage.getItem('cast:theme');
+            if (stored === 'light' || stored === 'dark') t = stored;
+          } catch (e) {}
+          d.dataset.theme = t;
+          d.style.colorScheme = t;
+          var reduced =
+            d.dataset.motion === 'reduced' ||
+            (d.dataset.motion !== 'full' && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+          if (!reduced) d.classList.add('js-motion');
+          d.classList.add('js');
+          var meta = d.querySelector('meta[name="theme-color"]');
+          if (meta) meta.setAttribute('content', t === 'light' ? '#faf9f6' : '#08080e');
+        }
+        apply(document.documentElement);
+        document.addEventListener('astro:before-swap', function (e) {
+          apply(e.newDocument.documentElement);
+        });
+      })();
+    </script>
+    <ClientRouter fallback="swap" />
+  </head>
+  <body class:list={['grain', bodyClass]}>
+    <a
+      href="#main"
+      class="sr-only-focusable fixed top-3 left-3 z-[100] rounded-lg bg-accent px-4 py-2 font-medium text-accent-ink"
+      >Skip to content</a
+    >
+    <slot name="nav" />
+    <main id="main" tabindex="-1" class="outline-none">
+      <slot />
+    </main>
+    <slot name="footer" />
+    <CommandPalette />
+    <Terminal />
+    <script>
+      import '../scripts/ambient';
+    </script>
+  </body>
+</html>

package/site/lib/accent.ts

@@ -0,0 +1,52 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+type Rgb = [number, number, number];
+
+const darkGround: Rgb = [8, 8, 14];
+const lightGround: Rgb = [250, 249, 246];
+
+const parse = (hex: string): Rgb => {
+    const value = Number.parseInt(hex.replace('#', ''), 16);
+    return [(value >> 16) & 255, (value >> 8) & 255, value & 255];
+};
+
+const format = (color: Rgb): string => `#${color.map(channel => Math.round(channel).toString(16).padStart(2, '0')).join('')}`;
+
+const linear = (channel: number): number => {
+    const value = channel / 255;
+    return value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+};
+
+/** WCAG relative luminance. */
+export const luminance = (color: Rgb): number => 0.2126 * linear(color[0]) + 0.7152 * linear(color[1]) + 0.0722 * linear(color[2]);
+
+/** WCAG contrast ratio between two colors. */
+export const contrast = (first: Rgb, second: Rgb): number => {
+    const [high, low] = [luminance(first), luminance(second)].sort((left, right) => right - left) as [number, number];
+    return (high + 0.05) / (low + 0.05);
+};
+
+const mix = (color: Rgb, target: Rgb, amount: number): Rgb =>
+    color.map((channel, index) => channel + (target[index]! - channel) * amount) as Rgb;
+
+/** Moves `color` toward `target` in small steps until it reaches `ratio` against `ground`. */
+const reach = (color: Rgb, target: Rgb, ground: Rgb, ratio: number): Rgb => {
+    let current = color;
+    for (let step = 0; step < 40 && contrast(current, ground) < ratio; step++) current = mix(current, target, 0.05);
+    return current;
+};
+
+/** Accent tokens for both themes, each at least AA (4.5:1) for text on its ground. */
+export type AccentTokens = { dark: string; darkSoft: string; light: string; lightSoft: string; ink: string };
+
+/** Derives the person's accent tokens from one hex color. */
+export function accentTokens(hex: string): AccentTokens {
+    const base = parse(hex);
+    const dark = reach(base, [255, 255, 255], darkGround, 4.5);
+    const darkSoft = reach(mix(dark, [255, 255, 255], 0.35), [255, 255, 255], darkGround, 7);
+    const light = reach(base, [0, 0, 0], lightGround, 4.5);
+    const lightSoft = reach(mix(light, [0, 0, 0], 0.2), [0, 0, 0], lightGround, 7);
+    const ink = contrast(base, [255, 255, 255]) >= contrast(base, darkGround) ? '#ffffff' : '#0b0a12';
+    return { dark: format(dark), darkSoft: format(darkSoft), light: format(light), lightSoft: format(lightSoft), ink };
+}

package/site/lib/blog.ts

@@ -0,0 +1,32 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// Typed access to the writing captured at build time.
+import type { Post as RawPost } from '../../writing/WritingSnapshot';
+import { config, writing } from '../data';
+
+export type ThemeId = string;
+export type Post = RawPost & { headline: string; series?: string; part?: number; themes: ThemeId[] };
+
+/** Reading themes for the filter, each a set of tags, from cast.yaml. */
+export const themes: { id: ThemeId; label: string; tags: string[] }[] = config.writing.themes;
+
+/** Splits "Title · Series, Part 3" into its parts. */
+function split(title: string): Pick<Post, 'headline' | 'series' | 'part'> {
+    const parts = title.match(/^(.*?)\s+·\s+(.+?),\s+Part\s+(\d+)$/);
+    if (parts) return { headline: parts[1]!, series: parts[2]!, part: Number(parts[3]) };
+    const series = title.match(/^(.*?)\s+·\s+(.+)$/);
+    return series ? { headline: series[1]!, series: series[2]! } : { headline: title };
+}
+
+/** Newest first; posts published together keep their series order. */
+export const posts: Post[] = writing.posts
+    .map(post => ({ ...post, ...split(post.title), themes: themes.filter(theme => post.tags.some(tag => theme.tags.includes(tag))).map(theme => theme.id) }))
+    .sort((left, right) => right.date.slice(0, 10).localeCompare(left.date.slice(0, 10)) || (left.part ?? 0) - (right.part ?? 0));
+
+/** The first source, for "on blog.example.com" links. */
+export const blogSource: string = writing.sources[0] ?? '';
+export const blogHost: string = blogSource ? new URL(blogSource).host : '';
+export const blogFetchedAt = writing.fetchedAt;
+export const readingMinutes = posts.reduce((total, post) => total + (post.minutes ?? 0), 0);
+export const postsFor = (theme: ThemeId | undefined): Post[] => (theme ? posts.filter(post => post.themes.includes(theme)) : []);