@cratis/cast 0.0.1 → 0.2.0

package/site/components/Stats.astro

@@ -0,0 +1,106 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { CastView } from '../profile/CastView';
+
+interface Props {
+  cast: CastView;
+}
+const { cast } = Astro.props;
+const { stats: siteStats, cratis, github, cratisRepos, mergedPrFloor, snapshotDate } = cast;
+
+type Stat = (typeof siteStats)[number];
+const rankOne = cratisRepos.filter((r) => r.rank === 1).length;
+const live: Record<string, (s: Stat) => Partial<Stat>> = {
+  // Floored to hundreds so the "+" stays true between hourly builds.
+  contributionsLastYear: () => (github.contributions.total ? { value: Math.floor(github.contributions.total / 100) * 100 } : {}),
+  mergedPullRequests: () => (mergedPrFloor ? { value: mergedPrFloor } : {}),
+  rankOneRepositories: (s) => (rankOne ? { label: s.label.replace(/\d+/, String(rankOne)) } : {}),
+  clientLanguages: () => (cratis?.clientLanguages.length ? { value: cratis.clientLanguages.length } : {}),
+};
+const stats = siteStats.map((s) => ({ ...s, ...(s.live ? live[s.live]?.(s) ?? {} : {}) }));
+const fmt = new Intl.NumberFormat('en-US');
+const accents = ['text-event', 'text-command', 'text-view', 'text-fg'];
+---
+
+<section id="stats" aria-label="By the numbers" class="relative border-y border-line bg-ink-900">
+  <div class="container-x">
+    <dl class="grid grid-cols-2 gap-px bg-line lg:grid-cols-4">
+      {
+        stats.map((s, i) => {
+          const plain = s.plain === true;
+          return (
+            <div
+              class="flex flex-col gap-3 bg-ink-900 px-5 py-10 first:pl-0 md:px-10 md:py-14 [&:nth-child(3)]:pl-0 lg:[&:nth-child(3)]:pl-10"
+              data-reveal
+              style={`--reveal-delay:${i * 80}ms`}
+            >
+              <dt class="order-2 max-w-[18ch] text-sm leading-snug text-fg-muted">{s.label}
+                {s.live === 'mergedPullRequests' && <span data-pr-status class="mt-1 block font-mono text-[0.6875rem] text-fg-faint">as of {snapshotDate()}</span>}
+              </dt>
+              <dd class={`order-1 font-display text-[clamp(2.5rem,5vw,4rem)] leading-none font-[650] tracking-[-0.04em] tabular-nums ${accents[i % accents.length]}`}>
+                {s.prefix}<span data-merged-prs={s.live === 'mergedPullRequests' ? 'number' : undefined} data-count={plain ? undefined : s.value}>{plain ? s.value : fmt.format(s.value)}</span>
+                {s.suffix && <span class="text-fg-faint">{s.suffix}</span>}
+              </dd>
+            </div>
+          );
+        })
+      }
+    </dl>
+  </div>
+</section>
+
+<script>
+  import { motionReduced } from '../lib/motion';
+  import { onPageLoad } from '../lib/lifecycle';
+  onPageLoad(() => {
+    const fmt = new Intl.NumberFormat('en-US');
+    const els = document.querySelectorAll<HTMLElement>('[data-count]');
+    const frames = new Set<number>();
+    let io: IntersectionObserver | undefined;
+    if (!motionReduced() && 'IntersectionObserver' in window) {
+      const run = (el: HTMLElement) => {
+        const target = Number(el.dataset['count']);
+        const duration = 1600;
+        const start = performance.now();
+        let frame: number;
+        const step = (ts: number) => {
+          frames.delete(frame);
+          // A browser refresh supersedes this build-time tween.
+          if (el.dataset['live'] === 'true') return;
+          const p = Math.min(1, (ts - start) / duration);
+          const eased = 1 - Math.pow(1 - p, 4);
+          el.textContent = fmt.format(Math.round(target * eased));
+          if (p < 1 && !motionReduced()) {
+            frame = requestAnimationFrame(step);
+            frames.add(frame);
+          } else el.textContent = fmt.format(target);
+        };
+        frame = requestAnimationFrame(step);
+        frames.add(frame);
+      };
+      io = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            if (!e.isIntersecting) continue;
+            io?.unobserve(e.target);
+            run(e.target as HTMLElement);
+          }
+        },
+        { threshold: 0.6 },
+      );
+      els.forEach((el) => {
+        // Reserve the final width so counting never shifts layout.
+        el.style.display = 'inline-block';
+        el.style.minWidth = `${el.getBoundingClientRect().width}px`;
+        el.textContent = '0';
+        io?.observe(el);
+      });
+    }
+    return () => {
+      io?.disconnect();
+      frames.forEach((frame) => cancelAnimationFrame(frame));
+    };
+  });
+</script>

package/site/components/Talks.astro

@@ -0,0 +1,76 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { CastView } from '../profile/CastView';
+import Inline from './Inline.astro';
+import { formatMonth } from '../lib/career';
+import SectionHeader from './SectionHeader.astro';
+
+interface Props {
+  cast: CastView;
+  index: string;
+  title?: string;
+  label?: string;
+}
+const { index, title = 'Talks & *community.*', label = 'TalkGiven' } = Astro.props;
+const { cast } = Astro.props;
+const { talks, community } = cast;
+const talksNewest = [...talks].sort((a, b) => b.date.localeCompare(a.date));
+const day = (d: string) =>
+  d.length === 10 ? new Date(`${d}T00:00:00Z`).toLocaleDateString('en-US', { day: 'numeric', month: 'short', year: 'numeric', timeZone: 'UTC' }) : formatMonth(d);
+const languageName = (lang: string) => {
+  try {
+    return new Intl.DisplayNames(['en'], { type: 'language' }).of(lang) ?? lang;
+  } catch {
+    return lang;
+  }
+};
+---
+
+<section id="talks" class="relative py-24 md:py-32" aria-labelledby="talks-title">
+  <div class="container-x grid grid-cols-1 items-start gap-x-12 lg:grid-cols-12">
+    <div class="lg:sticky lg:top-[calc(var(--nav-h)+2rem)] lg:col-span-5 [&>header]:mb-10 lg:[&>header]:mb-0">
+      <SectionHeader host={cast.host} index={index} label={label} title={title} id="talks-title" />
+    </div>
+    <div class="grid gap-4 lg:col-span-7">
+      {talksNewest.length > 0 && <ul class="grid grid-cols-1 gap-4">
+        {
+          talksNewest.map((t) => {
+            const Tag = t.url ? 'a' : 'div';
+            return (
+              <li data-reveal>
+                <Tag href={t.url} rel={t.url ? cast.host.rel : undefined} class:list={['panel flex h-full flex-col gap-4 p-6 md:p-7', t.url && 'glow group']}>
+                  <span class="flex flex-wrap items-center justify-between gap-2 font-mono text-xs text-fg-faint">
+                    <span class="note">TalkGiven</span>
+                    <span><time datetime={t.date}>{day(t.date)}</time>{!t.lang.startsWith('en') && <> · in {languageName(t.lang)}</>}</span>
+                  </span>
+                  <span lang={t.lang} class="font-display text-2xl leading-tight font-[700] tracking-[-0.025em] transition-colors group-hover:text-event-soft md:text-[1.75rem]">{t.title}</span>
+                  <span class="text-fg-muted"><Inline text={t.summary} host={cast.host} /></span>
+                  <span class="mt-auto flex flex-wrap items-center gap-x-2 gap-y-1 pt-2 text-sm text-fg-muted">
+                    {t.url && <svg viewBox="0 0 16 16" class="size-4 text-event" fill="currentColor" aria-hidden="true"><path d="M5 3.5v9a.5.5 0 0 0 .77.42l7-4.5a.5.5 0 0 0 0-.84l-7-4.5A.5.5 0 0 0 5 3.5Z" /></svg>}
+                    {t.url ? 'Watch · ' : ''}{t.host}
+                    {t.with && <span class="text-fg-faint">· with {t.with}</span>}
+                  </span>
+                </Tag>
+              </li>
+            );
+          })
+        }
+      </ul>}
+      {community.length > 0 && <div class="panel p-5 md:px-7" data-reveal>
+        <p class="note note-view">Community</p>
+        <ul class="mt-3 divide-y divide-line">
+          {
+            community.map((c) => (
+              <li class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 py-2.5">
+                <span class="text-fg">{c.title}{c.detail && <span class="text-fg-muted"> · {c.detail}</span>}</span>
+                <span class="font-mono text-xs text-fg-faint">attended · {formatMonth(c.date)}</span>
+              </li>
+            ))
+          }
+        </ul>
+      </div>}
+    </div>
+  </div>
+</section>

package/site/components/Terminal.astro

@@ -0,0 +1,164 @@
+---
+// 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 type { CastView } from '../profile/CastView';
+
+interface Props {
+  cast: CastView;
+}
+const { person, projects } = Astro.props.cast;
+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-${person.handle.toLowerCase()}`}>
+  <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,128 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { CastView } from '../profile/CastView';
+import Inline from './Inline.astro';
+import SectionHeader from './SectionHeader.astro';
+
+interface Props {
+  cast: CastView;
+  index: string;
+  title?: string;
+  label?: string;
+  intro?: string;
+}
+const { index, title = 'Appended to the *blog.*', label = 'PostPublished', intro } = Astro.props;
+const { cast } = Astro.props;
+const { snapshotDate, posts, themes, blogSource, blogHost, blogFetchedAt, readingMinutes } = cast;
+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 host={cast.host} 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={cast.host.rel}>{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 && <> <Inline text={intro} host={cast.host} /></>}
+      </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={cast.host.rel} 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,11 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// The site's routes read the build's data here. Components never import it: they take the view as a prop,
+// so the Cast directory can render them for any member.
+import { config, github, writing, tier, sections, build, photo, photoUrl } from 'virtual:cast';
+import { siteHost } from './profile/CastHost';
+import { castView, type CastView } from './profile/CastView';
+
+/** This site's profile, rendered on its own site. */
+export const cast: CastView = castView({ config, github, writing, tier, sections, build, ...(photo ? { photo } : {}), ...(photoUrl ? { photoUrl } : {}) }, siteHost);

package/site/layouts/Base.astro

@@ -0,0 +1,156 @@
+---
+// 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 type { CastView } from '../profile/CastView';
+import { clientCast } from '../profile/clientCast';
+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 {
+  cast: CastView;
+  title: string;
+  description: string;
+  /** Path of the OG image under the profile. Defaults to og.png on a Cast site and the portrait elsewhere. */
+  image?: string;
+  noindex?: boolean;
+  bodyClass?: string;
+}
+
+const { cast, title, description, image, noindex = false, bodyClass = '' } = Astro.props;
+const { config, person, githubUrl, profileLinks, host } = cast;
+const canonical = new URL(Astro.url.pathname, Astro.site);
+const ogImageUrl = image ? cast.href(image) : host.siteFiles ? cast.href('og.png') : cast.photoUrl;
+const ogImage = ogImageUrl ? new URL(ogImageUrl, Astro.site) : undefined;
+const iconUrl = host.siteFiles ? cast.href('favicon.svg') : '/favicon.svg';
+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: host.siteFiles ? Astro.site?.toString() : config.site.url,
+  ...(host.siteFiles ? { image: new URL(cast.href('apple-touch-icon.png'), Astro.site).toString() } : cast.photoUrl ? { image: cast.photoUrl } : {}),
+  ...(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={iconUrl} type="image/svg+xml" />
+    {
+      host.siteFiles && (
+        <>
+          <link rel="apple-touch-icon" href={cast.href('apple-touch-icon.png')} />
+          <link rel="sitemap" href={cast.href('sitemap-index.xml')} />
+          <link rel="alternate" type="application/json" href={cast.href('cast.json')} title="Cast profile" />
+          <link rel="alternate" type="text/plain" href={cast.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} />
+    {ogImage && <meta property="og:image" content={ogImage} />}
+    {ogImage && host.siteFiles && <meta property="og:image:width" content="1200" />}
+    {ogImage && host.siteFiles && <meta property="og:image:height" content="630" />}
+    {ogImage && <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={host.siteFiles ? 'summary_large_image' : 'summary'} />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={plainText(description)} />
+    {ogImage && <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" />
+    <script type="application/json" data-cast-client set:html={safeJson(clientCast(cast))} />
+    <CommandPalette cast={cast} />
+    <Terminal cast={cast} />
+    <script>
+      import '../scripts/ambient';
+    </script>
+  </body>
+</html>