@cratis/cast 0.0.0-stage → 0.1.0

package/site/components/Now.astro

@@ -0,0 +1,113 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Picture } from 'astro:assets';
+import { person, now, careerEvents, firstName, photo, photoUrl } from '../data';
+import { formatMonth } from '../lib/career';
+import { renderInline } from '../lib/inline';
+import SectionHeader from './SectionHeader.astro';
+
+interface Props {
+  index: string;
+  title?: string;
+  label?: string;
+}
+const { index, title = 'Where the stream is *now.*', label = 'Read model' } = Astro.props;
+const rows: { key: string; value: string | string[] }[] = Object.entries(now).map(([key, value]) => ({
+  key,
+  value: typeof value === 'string' && /^\d{4}-\d{2}$/.test(value) ? formatMonth(value) : value,
+}));
+const hasPortrait = photo !== undefined || photoUrl !== undefined;
+---
+
+<section id="about" class="relative py-24 md:py-36" aria-labelledby="about-title">
+  <div class="container-x">
+    <SectionHeader index={index} kind="view" label={label} title={title} id="about-title" />
+
+    <div class="grid grid-cols-1 gap-6 lg:grid-cols-12">
+      {hasPortrait && <figure class="avatar group panel overflow-hidden p-2 lg:col-span-4" data-reveal>
+        <div class="relative aspect-square overflow-hidden rounded-[0.9rem]">
+          {photo ? <Picture
+            src={photo}
+            alt={`Portrait of ${person.name}`}
+            widths={[320, 500]}
+            sizes="(min-width: 1024px) 380px, 90vw"
+            formats={['avif', 'webp']}
+            loading="lazy"
+            class="size-full object-cover"
+          /> : <img src={photoUrl} alt={`Portrait of ${person.name}`} width="460" height="460" loading="lazy" class="size-full object-cover" />}
+          <div class="tint pointer-events-none absolute inset-0" aria-hidden="true"></div>
+          <div class="pointer-events-none absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-ink-950/80 to-transparent" aria-hidden="true"></div>
+        </div>
+        <figcaption class="flex items-center justify-between px-2 pt-3 pb-1 font-mono text-xs text-fg-muted">
+          <span>{person.fullName ?? person.name}</span>
+          <span class="text-fg-faint">{person.location}</span>
+        </figcaption>
+      </figure>}
+
+      {rows.length > 0 && <div class:list={['panel overflow-hidden', hasPortrait ? 'lg:col-span-8' : 'lg:col-span-12']} data-reveal style="--reveal-delay:120ms">
+        <div class="flex items-center justify-between gap-4 border-b border-line px-5 py-3.5 md:px-7">
+          <p class="font-mono text-sm">
+            <span class="text-fg-faint">Projection:</span> <span class="text-view">{firstName}.Now</span>
+          </p>
+          <p class="flex items-center gap-2 font-mono text-xs text-fg-muted">
+            <span class="size-1.5 animate-pulse-dot rounded-full bg-view" aria-hidden="true"></span>
+            projected from {careerEvents.length} events
+          </p>
+        </div>
+        <dl class="divide-y divide-line">
+          {
+            rows.map((r) => (
+              <div class="grid gap-1 px-5 py-4 sm:grid-cols-[9rem_1fr] sm:gap-6 md:px-7">
+                <dt class="font-mono text-xs leading-6 text-fg-faint">{r.key}</dt>
+                <dd class="text-[0.975rem] leading-6 text-fg">
+                  {Array.isArray(r.value) ? (
+                    <ul class="flex flex-wrap gap-2" aria-label={r.key}>
+                      {r.value.map((v) => (
+                        <li class="tag border-view/25 bg-view/5 text-view-soft">{v}</li>
+                      ))}
+                    </ul>
+                  ) : (
+                    <Fragment set:html={renderInline(r.value)} />
+                  )}
+                </dd>
+              </div>
+            ))
+          }
+        </dl>
+      </div>}
+    </div>
+
+    <div class="mt-16 grid grid-cols-1 gap-10 md:mt-24 md:grid-cols-12">
+      <h3 class="eyebrow md:col-span-3" data-reveal>About</h3>
+      <div class="text-lg leading-relaxed text-fg-muted md:col-span-9 md:columns-2 md:gap-10 [&>p]:mb-6 [&>p]:break-inside-avoid" data-reveal>
+        {person.about.map((p, i) => <p class:list={[i === 0 && 'text-fg']} set:html={renderInline(p)} />)}
+      </div>
+      {person.interests.length > 0 && <h3 class="eyebrow md:col-span-3" data-reveal>Interests</h3>}
+      {person.interests.length > 0 && <ul class="flex flex-wrap gap-2 md:col-span-9" data-reveal>
+        {person.interests.map((i) => <li class="tag">{i}</li>)}
+      </ul>}
+    </div>
+  </div>
+</section>
+
+<style>
+  .avatar :global(img) {
+    filter: grayscale(1) contrast(1.08) brightness(0.95);
+    transition: filter 900ms var(--ease-out-expo), transform 900ms var(--ease-out-expo);
+  }
+  .tint {
+    background: linear-gradient(160deg, var(--color-accent) 0%, #2dd4bf 100%);
+    mix-blend-mode: color;
+    opacity: 0.55;
+    transition: opacity 900ms var(--ease-out-expo);
+  }
+  .avatar:hover :global(img) {
+    filter: none;
+    transform: scale(1.03);
+  }
+  .avatar:hover .tint {
+    opacity: 0;
+  }
+</style>

package/site/components/Projects.astro

@@ -0,0 +1,188 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { liveProjects as projects } from '../lib/github';
+import { config } from '../data';
+import { renderInline } from '../lib/inline';
+import SectionHeader from './SectionHeader.astro';
+
+interface Props {
+  index: string;
+  title?: string;
+  label?: string;
+  intro?: string;
+}
+const { index, title = 'Things I build *after hours.*', label = 'Side projects', intro } = Astro.props;
+// Categories in cast.yaml order, then any others in first-use order.
+const used = [...new Set(projects.map((p) => p.category))];
+const declared = config.projectCategories.filter((c) => used.includes(c.id));
+const categories = [...declared, ...used.filter((id) => !declared.some((c) => c.id === id)).map((id) => ({ id, label: id.charAt(0).toUpperCase() + id.slice(1), filter: undefined }))];
+const filters = categories.length > 1 ? [{ id: 'all', label: 'All' }, ...categories.map((c) => ({ id: c.id, label: c.filter ?? c.label }))] : [];
+const countFor = (id: string) => (id === 'all' ? projects.length : projects.filter((p) => p.category === id).length);
+const categoryLabel: Record<string, string> = Object.fromEntries(categories.map((c) => [c.id, c.label]));
+const escape = (t: string) => t.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+/** Lets a command wrap only after spaces and slashes, with no added visible characters. */
+const breakable = (cmd: string) =>
+  cmd
+    .split(/(?<=[/ ])/)
+    .map((part) => `<span class="whitespace-nowrap">${escape(part)}</span>`)
+    .join('<wbr>');
+---
+
+<section id="projects" class="relative py-24 md:py-36" aria-labelledby="projects-title">
+  <div class="container-x">
+    <SectionHeader index={index} label={label} title={title} id="projects-title">
+      {intro && <p class="mt-6 max-w-[62ch] text-lg leading-relaxed text-fg-muted" set:html={renderInline(intro)} />}
+    </SectionHeader>
+
+    <div class="mb-8 flex flex-wrap gap-2" role="group" aria-label="Filter projects by category" data-filters hidden>
+      {
+        filters.map((f, i) => (
+          <button type="button" class="filter" data-filter={f.id} aria-pressed={i === 0 ? 'true' : 'false'}>
+            {f.label}
+            <span class="font-mono text-[0.6875rem] opacity-60">{countFor(f.id)}</span>
+          </button>
+        ))
+      }
+    </div>
+    <p class="sr-only" aria-live="polite" data-filter-status></p>
+
+    <ul class="bento grid grid-cols-1 gap-4 md:grid-cols-3" data-bento>
+      {
+        projects.map((p, i) => (
+          <li class:list={['proj', p.featured && 'md:col-span-2']} data-category={p.category} data-reveal style={`--reveal-delay:${(i % 3) * 70}ms`}>
+            <article class="panel glow flex h-full flex-col p-6 md:p-7">
+              <header class="flex items-start justify-between gap-4">
+                <div>
+                  <p class="font-mono text-[0.6875rem] tracking-wider text-fg-faint uppercase">{categoryLabel[p.category]}</p>
+                  <h3 class="mt-2 flex items-center gap-3 font-display text-[1.75rem] leading-none font-[650] tracking-[-0.03em]">
+                    <a href={p.url} rel="noopener" class="hover:text-event-soft">
+                      {p.name}
+                    </a>
+                    {p.version && (
+                      <span class="rounded-md border border-event/30 bg-event/10 px-1.5 py-0.5 font-mono text-[0.6875rem] font-medium tracking-normal text-event-soft">
+                        {p.version}
+                      </span>
+                    )}
+                  </h3>
+                </div>
+                <a href={p.url} rel="noopener" class="grid size-9 shrink-0 place-items-center rounded-lg border border-line text-fg-muted transition-colors hover:border-line-strong hover:text-fg" aria-label={`${p.name} on GitHub`}>
+                  <svg viewBox="0 0 16 16" class="size-4" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M5 11 11 5M6 5h5v5" stroke-linecap="round" stroke-linejoin="round" /></svg>
+                </a>
+              </header>
+
+              <p class="mt-4 text-[1.0625rem] leading-relaxed text-fg">{p.pitch}</p>
+
+              <ul class:list={['mt-5 grid gap-2 text-sm text-fg-muted', p.featured && 'sm:grid-cols-2 sm:gap-x-6']}>
+                {p.features.map((f) => (
+                  <li class="flex gap-2.5">
+                    <span class="mt-[0.45rem] size-1.5 shrink-0 rounded-[2px] bg-view/80" aria-hidden="true" />
+                    {f}
+                  </li>
+                ))}
+              </ul>
+
+              <div class="mt-auto pt-6">
+                {p.install && (
+                  <div class="term mb-4 flex items-start gap-2.5 rounded-xl border border-line bg-ink-950/80 py-1.5 pr-1.5 pl-3.5 font-mono text-[0.8125rem] leading-5">
+                    <span class="py-[0.3rem] text-view select-none" aria-hidden="true">$</span>
+                    <code class="min-w-0 flex-1 py-[0.3rem] [overflow-wrap:anywhere] text-fg">
+                      <Fragment set:html={breakable(p.install)} />
+                    </code>
+                    <button type="button" class="copy" data-copy={p.install} aria-label={`Copy install command for ${p.name}`}>
+                      <svg viewBox="0 0 16 16" class="ic-copy size-3.5" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="5" y="5" width="9" height="9" rx="2" /><path d="M11 5V3.5A1.5 1.5 0 0 0 9.5 2h-6A1.5 1.5 0 0 0 2 3.5v6A1.5 1.5 0 0 0 3.5 11H5" /></svg>
+                      <svg viewBox="0 0 16 16" class="ic-ok size-3.5" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="m3 8.5 3 3 7-7" stroke-linecap="round" stroke-linejoin="round" /></svg>
+                      <span data-copy-label>Copy</span>
+                    </button>
+                    <span class="sr-only" aria-live="polite" data-copy-status />
+                  </div>
+                )}
+                <ul class="flex flex-wrap gap-1.5" aria-label="Stack">
+                  {p.stack.map((s) => (
+                    <li class="rounded-md bg-fg/[0.04] px-2 py-0.5 font-mono text-[0.6875rem] text-fg-muted">{s}</li>
+                  ))}
+                </ul>
+              </div>
+            </article>
+          </li>
+        ))
+      }
+    </ul>
+  </div>
+</section>
+
+<style>
+  .bento[data-filtered] .proj {
+    grid-column: auto;
+  }
+  .copy {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    height: 1.9rem;
+    padding-inline: 0.6rem;
+    border-radius: 0.55rem;
+    font-size: 0.75rem;
+    color: var(--color-fg-muted);
+    border: 1px solid var(--color-line);
+    background: color-mix(in srgb, var(--color-fg) 3%, transparent);
+    transition: all 160ms ease;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+  .copy:hover {
+    color: var(--color-fg);
+    border-color: var(--color-line-strong);
+  }
+  .copy .ic-ok,
+  .copy[data-copied='true'] .ic-copy {
+    display: none;
+  }
+  .copy[data-copied='true'] {
+    color: var(--color-view);
+    border-color: rgb(45 212 191 / 0.4);
+    background: rgb(45 212 191 / 0.08);
+  }
+  .copy[data-copied='true'] .ic-ok {
+    display: block;
+  }
+  .proj[hidden] {
+    display: none;
+  }
+  :global(.js-motion) .proj.enter {
+    animation: var(--animate-pop-in);
+  }
+</style>
+
+<script>
+  import { onPageLoad } from '../lib/lifecycle';
+  onPageLoad(() => {
+    const bar = document.querySelector<HTMLElement>('[data-filters]');
+    const grid = document.querySelector<HTMLElement>('[data-bento]');
+    const status = document.querySelector<HTMLElement>('[data-filter-status]');
+    if (bar && grid) {
+      bar.hidden = false;
+      const cards = [...grid.querySelectorAll<HTMLElement>('.proj')];
+      bar.addEventListener('click', (e) => {
+        const btn = (e.target as Element).closest<HTMLButtonElement>('[data-filter]');
+        if (!btn) return;
+        const id = btn.dataset['filter'];
+        bar.querySelectorAll('[data-filter]').forEach((b) => b.setAttribute('aria-pressed', String(b === btn)));
+        grid.toggleAttribute('data-filtered', id !== 'all');
+        let shown = 0;
+        for (const card of cards) {
+          const match = id === 'all' || card.dataset['category'] === id;
+          card.hidden = !match;
+          card.classList.remove('enter');
+          if (match) {
+            shown++;
+            void card.offsetWidth;
+            card.classList.add('enter', 'is-visible');
+          }
+        }
+        if (status) status.textContent = `Showing ${shown} project${shown === 1 ? '' : 's'}`;
+      });
+    }
+  });
+</script>

package/site/components/PullRequestFeed.astro

@@ -0,0 +1,86 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// The live feed of merged public pull requests: rendered from the build-time snapshot, refreshed in the browser.
+import { config } from '../data';
+import { github, snapshotDate } from '../lib/github';
+import { relativeTime } from '../lib/reltime';
+
+interface Props {
+  class?: string;
+}
+const { class: className = '' } = Astro.props;
+// The section shows the newest eight; the terminal's `stream tail` gets the full snapshot.
+const feed = github.mergedPullRequests.latest.slice(0, 8);
+const builtAt = github.fetchedAt ? Date.parse(github.fetchedAt) : Date.now();
+const orgs = config.github.orgs.join(', ');
+---
+
+  <div class:list={['panel overflow-hidden', className]} data-reveal data-feed>
+    <div class="flex flex-wrap items-center justify-between gap-3 border-b border-line px-5 py-3.5">
+      <h3 class="flex items-center gap-2.5 font-mono text-sm">
+        <span class="size-1.5 animate-pulse-dot rounded-full bg-view" aria-hidden="true"></span>
+        <span class="text-fg-faint">tail -f</span> <span class="text-fg">Tailing the stream</span>
+      </h3>
+      <p data-pr-status class="font-mono text-xs text-fg-faint">as of <time datetime={github.fetchedAt}>{snapshotDate()}</time></p>
+    </div>
+    <template data-pr-template>
+      <li class="feed-row">
+        <a rel="noopener" class="group grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 px-5 py-3.5 transition-colors hover:bg-fg/[0.025] sm:grid-cols-[4.5rem_1fr_auto]">
+          <span data-pr-head class="font-mono text-xs leading-6 text-fg-faint tabular-nums"></span>
+          <span class="min-w-0">
+            <span class="flex flex-wrap items-center gap-x-2.5 gap-y-1 font-mono text-xs">
+              <span class="text-event">PullRequestMerged</span>
+              <span data-pr-repo class="rounded-md border border-command/25 bg-command/8 px-1.5 py-px text-command-soft"></span>
+              <span data-pr-number class="text-fg-faint"></span>
+            </span>
+            <span data-pr-title class="mt-1 block text-[0.9375rem] leading-snug text-fg group-hover:underline"></span>
+          </span>
+          <time data-rel class="col-start-2 font-mono text-xs text-fg-faint sm:col-start-3 sm:leading-6"></time>
+        </a>
+      </li>
+    </template>
+    {
+      feed.length ? (
+        <ol data-pr-feed class="divide-y divide-line" aria-label={`Latest merged pull requests in ${orgs}`}>
+          {feed.map((pr, i) => (
+            <li class="feed-row" style={`--i:${i}`}>
+              <a href={pr.url} rel="noopener" class="group grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 px-5 py-3.5 transition-colors hover:bg-fg/[0.025] sm:grid-cols-[4.5rem_1fr_auto]">
+                <span class="font-mono text-xs leading-6 text-fg-faint tabular-nums">{i === 0 ? 'HEAD' : `HEAD~${i}`}</span>
+                <span class="min-w-0">
+                  <span class="flex flex-wrap items-center gap-x-2.5 gap-y-1 font-mono text-xs">
+                    <span class="text-event">PullRequestMerged</span>
+                    <span class="rounded-md border border-command/25 bg-command/8 px-1.5 py-px text-command-soft">{pr.repository}</span>
+                    <span class="text-fg-faint">#{pr.number}</span>
+                  </span>
+                  <span class="mt-1 block text-[0.9375rem] leading-snug text-fg group-hover:underline">{pr.title}</span>
+                </span>
+                <time datetime={pr.mergedAt} data-rel class="col-start-2 font-mono text-xs text-fg-faint sm:col-start-3 sm:leading-6">{relativeTime(pr.mergedAt, builtAt)}</time>
+              </a>
+            </li>
+          ))}
+        </ol>
+      ) : (
+        <ol data-pr-feed class="divide-y divide-line" aria-label={`Latest merged pull requests in ${orgs}`}>
+          <li class="px-5 py-8 font-mono text-sm text-fg-faint">EventNotFound: the snapshot has no merged pull requests yet.</li>
+        </ol>
+      )
+    }
+    <p class="border-t border-line px-5 py-3 font-mono text-[0.6875rem] text-fg-faint">
+      Public repositories only, newest first. Refreshed hourly and on page load.
+    </p>
+  </div>
+
+<style>
+  :global(.js-motion) [data-feed].is-visible :global(.feed-row) {
+    animation: feed-in 700ms var(--ease-out-expo) both;
+    animation-delay: calc(var(--i) * 45ms + 200ms);
+  }
+  @keyframes feed-in {
+    from {
+      opacity: 0;
+      transform: translateY(-6px);
+    }
+  }
+</style>

package/site/components/SectionHeader.astro

@@ -0,0 +1,27 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { renderInline } from '../lib/inline';
+
+interface Props {
+  index: string;
+  kind?: 'event' | 'command' | 'view';
+  label: string;
+  /** May use *emphasis* for the italic serif accent. */
+  title: string;
+  id?: string;
+}
+const { index, kind = 'event', label, title, id } = Astro.props;
+const noteClass = kind === 'command' ? 'note note-command' : kind === 'view' ? 'note note-view' : 'note';
+---
+
+<header class="mb-12 md:mb-16" data-reveal>
+  <p class="mb-5 flex items-center gap-3 font-mono text-xs text-fg-faint">
+    {index && <span class="text-fg-muted">{index}</span>}
+    {index && <span class="h-px w-8 bg-line-strong" aria-hidden="true"></span>}
+    <span class={noteClass}>{label}</span>
+  </p>
+  <h2 id={id} class="section-title max-w-[22ch]" set:html={renderInline(title)} />
+  <slot />
+</header>

package/site/components/Skills.astro

@@ -0,0 +1,41 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { skills } from '../data';
+import SectionHeader from './SectionHeader.astro';
+
+interface Props {
+  index: string;
+  title?: string;
+  label?: string;
+  /** Sits directly under the talks section, so it needs less top padding there. */
+  compact?: boolean;
+}
+const { index, title = 'The *toolbox.*', label = 'Read model', compact = false } = Astro.props;
+const groups = Object.entries(skills);
+const accents = ['bg-event', 'bg-command', 'bg-view', 'bg-accent'];
+---
+
+<section id="skills" class:list={['relative pb-24 md:pb-36', compact ? '' : 'pt-24 md:pt-32']} aria-labelledby="skills-title">
+  <div class="container-x">
+    <SectionHeader index={index} kind="view" label={label} title={title} id="skills-title" />
+    <div class="grid grid-cols-1 gap-px overflow-hidden rounded-[1.25rem] border border-line bg-line sm:grid-cols-2 lg:grid-cols-3">
+      {
+        groups.map(([group, list], i) => (
+          <div class="bg-ink-950 p-6 md:p-7" data-reveal style={`--reveal-delay:${(i % 3) * 60}ms`}>
+            <h3 class="mb-4 flex items-center gap-2.5 font-mono text-xs tracking-wider text-fg-muted uppercase">
+              <span class={`size-2 rounded-[2px] ${accents[i % accents.length]}`} aria-hidden="true" />
+              {group}
+            </h3>
+            <ul class="flex flex-wrap gap-1.5">
+              {list.map((s) => (
+                <li class="tag">{s}</li>
+              ))}
+            </ul>
+          </div>
+        ))
+      }
+    </div>
+  </div>
+</section>

package/site/components/Stats.astro

@@ -0,0 +1,101 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { stats as siteStats, cratis } from '../data';
+import { github, cratisRepos, mergedPrFloor, snapshotDate } from '../lib/github';
+
+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,73 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { talks, community } from '../data';
+import { formatMonth } from '../lib/career';
+import { renderInline } from '../lib/inline';
+import SectionHeader from './SectionHeader.astro';
+
+interface Props {
+  index: string;
+  title?: string;
+  label?: string;
+}
+const { index, title = 'Talks & *community.*', label = 'TalkGiven' } = Astro.props;
+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 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 ? 'noopener' : 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" set:html={renderInline(t.summary)} />
+                  <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>