@cratis/cast 0.1.0 → 0.2.1

package/site/components/Contact.astro

@@ -2,16 +2,19 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { person, profileLinks } from '../data';
-import { renderInline } from '../lib/inline';
+import type { CastView } from '../profile/CastView';
+import Inline from './Inline.astro';
 
 interface Props {
+  cast: CastView;
   index: string;
   title?: string;
   label?: string;
   intro?: string;
 }
 const { index, title = 'Append an event to *my stream.*', label = 'Command', intro = 'Questions about event sourcing, Cratis, a project or a role? Issue the command and it lands in my inbox.' } = Astro.props;
+const { cast } = Astro.props;
+const { person, profileLinks } = cast;
 const mailto = person.email ? `mailto:${person.email}` : undefined;
 const channels = [person.email ? 'email' : undefined, ...profileLinks.slice(0, 3).map((link) => link.label)].filter(Boolean).join(' · ');
 ---
@@ -24,8 +27,8 @@ const channels = [person.email ? 'email' : undefined, ...profileLinks.slice(0, 3
     <p class="mb-5 flex items-center gap-3 font-mono text-xs text-fg-faint" data-reveal>
       {index && <span class="text-fg-muted">{index}</span>}{index && <span class="h-px w-8 bg-line-strong" aria-hidden="true"></span>}<span class="note note-command">{label}</span>
     </p>
-    <h2 id="contact-title" class="max-w-[14ch] text-[clamp(2.75rem,7.5vw,6.5rem)] leading-[0.92] font-[800] tracking-[-0.045em]" data-reveal set:html={renderInline(title)} />
-    <p class="mt-6 max-w-[52ch] text-lg text-fg-muted" data-reveal set:html={renderInline(intro)} />
+    <h2 id="contact-title" class="max-w-[14ch] text-[clamp(2.75rem,7.5vw,6.5rem)] leading-[0.92] font-[800] tracking-[-0.045em]" data-reveal><Inline text={title} host={cast.host} /></h2>
+    <p class="mt-6 max-w-[52ch] text-lg text-fg-muted" data-reveal><Inline text={intro} host={cast.host} /></p>
 
     <div class="mt-14 grid grid-cols-1 items-center gap-6 lg:grid-cols-[1fr_auto_1fr]" data-reveal data-contact>
       <!-- Command sticky note -->
@@ -71,7 +74,7 @@ const channels = [person.email ? 'email' : undefined, ...profileLinks.slice(0, 3
           </span>
         </div>}
         <div class="mt-3 flex flex-wrap gap-2.5">
-          {profileLinks.map((link) => <a href={link.url} class="btn btn-sm" rel="me noopener">{link.label}</a>)}
+          {profileLinks.map((link) => <a href={link.url} class="btn btn-sm" rel={cast.host.verified ? cast.host.rel : 'me noopener'}>{link.label}</a>)}
         </div>
       </div>
     </div>

package/site/components/Cratis.astro

@@ -2,17 +2,19 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { cratis as cratisData } from '../data';
+import type { CastView } from '../profile/CastView';
+import Inline from './Inline.astro';
 import SectionHeader from './SectionHeader.astro';
 import PullRequestFeed from './PullRequestFeed.astro';
-import { cratisRepos, mergedPrFloor, mergedPrTotal, snapshotDate, starsFor, type CratisRepo } from '../lib/github';
-import { renderInline } from '../lib/inline';
-
+import type { CratisRepo } from '../lib/github';
 interface Props {
+  cast: CastView;
   index: string;
   title?: string;
   label?: string;
 }
+const { cast } = Astro.props;
+const { cratis: cratisData, cratisRepos, mergedPrFloor, mergedPrTotal, mergedPrStatus, snapshotDate, starsFor } = cast;
 const cratis = cratisData!;
 const { index, title = cratis.title, label = cratis.label } = Astro.props;
 
@@ -38,23 +40,23 @@ const badge = (r: CratisRepo) => (r.founded ? 'b-founded' : r.rank === 1 ? 'b-le
 <section id="cratis" class="relative overflow-hidden py-24 md:py-36" aria-labelledby="cratis-title">
   <div class="pointer-events-none absolute top-1/3 -right-40 size-[40rem] rounded-full bg-command/10 blur-[120px]" aria-hidden="true"></div>
   <div class="container-x relative">
-    <SectionHeader index={index} kind="command" label={label} title={title} id="cratis-title">
+    <SectionHeader host={cast.host} index={index} kind="command" label={label} title={title} id="cratis-title">
       <div class="mt-6 grid max-w-[64ch] gap-4 text-lg leading-relaxed">
-        {cratis.pitch && <p class="text-fg" set:html={renderInline(cratis.pitch)} />}
-        <p class="text-fg-muted" set:html={renderInline(cratis.role)} />
+        {cratis.pitch && <p class="text-fg"><Inline text={cratis.pitch} host={cast.host} /></p>}
+        <p class="text-fg-muted"><Inline text={cratis.role} host={cast.host} /></p>
       </div>
       <div class="mt-6 flex flex-wrap gap-3">
-        {Object.entries(cratis.links).map(([text, href]) => <a href={href} class="btn btn-sm" rel="noopener">{text} <span aria-hidden="true">↗</span></a>)}
+        {Object.entries(cratis.links).map(([text, href]) => <a href={href} class="btn btn-sm" rel={cast.host.rel}>{text} <span aria-hidden="true">↗</span></a>)}
       </div>
     </SectionHeader>
 
-    {headline.length > 0 && <dl class:list={['grid grid-cols-2 gap-px overflow-hidden rounded-2xl border border-line bg-line', headline.length >= 4 ? 'lg:grid-cols-4' : headline.length === 3 ? 'lg:grid-cols-3' : '']} data-reveal>
+    {headline.length > 0 && <dl class:list={['grid gap-px', headline.length > 1 ? 'grid-cols-2' : 'grid-cols-1', 'overflow-hidden rounded-2xl border border-line bg-line', headline.length >= 4 ? 'lg:grid-cols-4' : headline.length === 3 ? 'lg:grid-cols-3' : '']} data-reveal>
       {
         headline.map((h) => (
           <div class="flex flex-col bg-ink-900 p-5 md:p-6">
             <dt class="order-2 mt-2 text-sm leading-snug text-fg-muted">
               {h.label}
-              {h.live && <> (<span data-merged-prs="exact">{fmt.format(mergedPrTotal)}</span>, <span data-pr-status>as of {asOf}</span>)</>}
+              {h.live && <> (<span data-merged-prs="exact">{fmt.format(mergedPrTotal)}</span>, <span data-pr-status>{mergedPrStatus}</span>)</>}
             </dt>
             <dd data-merged-prs={h.live ? 'floor' : undefined} class={`order-1 font-display text-[clamp(2.25rem,4.4vw,3.5rem)] leading-none font-[750] tracking-[-0.045em] tabular-nums ${h.accent}`}>{h.value}</dd>
           </div>
@@ -71,7 +73,7 @@ const badge = (r: CratisRepo) => (r.founded ? 'b-founded' : r.rank === 1 ? 'b-le
         {
           pipeline.map((r, i) => (
             <li class="relative">
-              <a href={r.url} rel="noopener" class="panel glow group flex h-full flex-col p-5" style="--glow: var(--color-command)">
+              <a href={r.url} rel={cast.host.rel} class="panel glow group flex h-full flex-col p-5" style="--glow: var(--color-command)">
                 <span class="flex items-center justify-between gap-2 font-mono text-[0.6875rem]">
                   <span class="text-fg-faint">{String(i + 1).padStart(2, '0')} · {r.step}</span>
                   <span class={`badge ${badge(r)}`}>{r.role}</span>
@@ -81,7 +83,7 @@ const badge = (r: CratisRepo) => (r.founded ? 'b-founded' : r.rank === 1 ? 'b-le
                 <span class="mt-3 text-sm leading-relaxed text-fg-muted">{r.desc}</span>
                 <span class="mt-auto flex gap-4 pt-5 font-mono text-xs text-fg-faint tabular-nums">
                   <span><span class="text-fg">{fmt.format(r.commits)}</span> commits</span>
-                  <span><span class="text-fg">{fmt.format(r.prs)}</span> PRs</span>
+                  {r.prs > 0 && <span><span class="text-fg">{fmt.format(r.prs)}</span> PRs</span>}
                   {starsFor(`Cratis/${r.name}`) !== undefined && <span class="ml-auto" aria-label={`${starsFor(`Cratis/${r.name}`)} stars on GitHub`}>★ {starsFor(`Cratis/${r.name}`)}</span>}
                 </span>
               </a>
@@ -99,7 +101,7 @@ const badge = (r: CratisRepo) => (r.founded ? 'b-founded' : r.rank === 1 ? 'b-le
             const Tag = r.url ? 'a' : 'div';
             return (
               <li>
-                <Tag href={r.url} rel={r.url ? 'noopener' : undefined} class:list={['panel flex h-full flex-col p-5', r.url && 'glow group']} style="--glow: var(--color-command)">
+                <Tag href={r.url} rel={r.url ? cast.host.rel : undefined} class:list={['panel flex h-full flex-col p-5', r.url && 'glow group']} style="--glow: var(--color-command)">
                   <span class="flex items-center justify-between gap-2 font-mono text-[0.6875rem]">
                     <span class="note note-command">{r.kind}</span>
                     <span class={`badge ${badge(r)}`}>{r.role}</span>
@@ -109,7 +111,7 @@ const badge = (r: CratisRepo) => (r.founded ? 'b-founded' : r.rank === 1 ? 'b-le
                   {r.note && <span class="mt-2 font-mono text-xs text-view">{r.note}</span>}
                   <span class="mt-auto flex gap-4 pt-4 font-mono text-xs text-fg-faint tabular-nums">
                     <span><span class="text-fg">{fmt.format(r.commits)}</span> commits</span>
-                    <span><span class="text-fg">{fmt.format(r.prs)}</span> PRs</span>
+                    {r.prs > 0 && <span><span class="text-fg">{fmt.format(r.prs)}</span> PRs</span>}
                   </span>
                 </Tag>
               </li>
@@ -125,7 +127,7 @@ const badge = (r: CratisRepo) => (r.founded ? 'b-founded' : r.rank === 1 ? 'b-le
           {
             clients.map((r) => (
               <li>
-                <a href={r.url} rel="noopener" class="group flex items-start justify-between gap-3 py-3">
+                <a href={r.url} rel={cast.host.rel} class="group flex items-start justify-between gap-3 py-3">
                   <span class="min-w-0">
                     <span class="block font-mono text-sm text-fg group-hover:underline">{r.name}</span>
                     <span class="block text-xs leading-relaxed text-fg-muted">{r.desc}</span>
@@ -143,7 +145,7 @@ const badge = (r: CratisRepo) => (r.founded ? 'b-founded' : r.rank === 1 ? 'b-le
     </div>}
 
     <div class="mt-16 grid gap-6 md:mt-20 lg:grid-cols-12">
-      <PullRequestFeed class="lg:col-span-7" />
+      <PullRequestFeed cast={cast} class="lg:col-span-7" />
 
       {cratis.highlights.length > 0 && <div class="lg:col-span-5" data-reveal style="--reveal-delay:120ms">
         <h3 class="font-display text-2xl font-[620] tracking-[-0.02em]">Highlights from the log</h3>

package/site/components/EventModel.astro

@@ -2,17 +2,20 @@
 // 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';
-import { eventModel } from '../data';
-import { renderInline } from '../lib/inline';
 import { safeJson } from '../lib/safeJson';
 
 interface Props {
+  cast: CastView;
   index: string;
   title?: string;
   label?: string;
   intro?: string;
 }
+const { cast } = Astro.props;
+const { eventModel } = cast;
 const m = eventModel!;
 type ModelCard = (typeof m.cards)[number];
 const { index, title = m.title, label = m.label, intro = m.intro } = Astro.props;
@@ -68,10 +71,10 @@ const stepsFor = (id: string) => m.steps.flatMap((s, i) => (s.cards.includes(id)
 
 <section id="model" class="relative py-24 md:py-36" aria-labelledby="model-title">
   <div class="container-x">
-    <SectionHeader index={index} kind="command" label={label} title={title} id="model-title">
+    <SectionHeader host={cast.host} index={index} kind="command" label={label} title={title} id="model-title">
       <p class="mt-6 max-w-[62ch] text-lg leading-relaxed text-fg-muted">
-        {intro ? <Fragment set:html={renderInline(intro)} /> : <>Before code, I draw how information flows: screens send commands, commands append events, events feed read models, read models feed screens.
-        This is a real slice from <a href={m.repo} class="text-fg underline decoration-line-strong hover:decoration-fg" rel="noopener">{m.name}</a>, and every name on it is a type in its source.</>}
+        {intro ? <Fragment><Inline text={intro} host={cast.host} /></Fragment> : <>Before code, I draw how information flows: screens send commands, commands append events, events feed read models, read models feed screens.
+        This is a real slice from <a href={m.repo} class="text-fg underline decoration-line-strong hover:decoration-fg" rel={cast.host.rel}>{m.name}</a>, and every name on it is a type in its source.</>}
       </p>
     </SectionHeader>
 

package/site/components/Footer.astro

@@ -2,16 +2,21 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { config, person, tier } from '../data';
+import type { CastView } from '../profile/CastView';
 import { castDirectoryUrl, verificationUrl } from '../../badges/constants';
 import CratisMark from './CratisMark.astro';
+interface Props {
+  cast: CastView;
+}
+const { cast } = Astro.props;
+const { config, person, tier } = cast;
 const year = new Date().getFullYear();
 const castUrl = tier.tier ? verificationUrl(person.handle) : castDirectoryUrl;
 ---
 
 <footer class="border-t border-line print:hidden">
   <div class="container-x flex flex-col gap-6 py-10 text-sm text-fg-muted md:flex-row md:items-center md:justify-between">
-    <a href={castUrl} class="cast-link group inline-flex items-center gap-3 rounded-lg" rel="noopener">
+    <a href={castUrl} class="cast-link group inline-flex items-center gap-3 rounded-lg" rel={cast.host.rel}>
       <span class="grid size-9 place-items-center rounded-xl border border-line bg-ink-900 text-fg transition-colors group-hover:border-line-strong">
         <CratisMark class="size-5" />
       </span>
@@ -21,8 +26,8 @@ const castUrl = tier.tier ? verificationUrl(person.handle) : castDirectoryUrl;
       </span>
     </a>
     <p class="font-mono text-xs">
-      © {year} {person.name} · built with <a href="https://github.com/Cratis/Cast" class="underline decoration-line-strong hover:text-fg" rel="noopener">Cast</a>
-      {config.site.source && <> · <a href={config.site.source} class="underline decoration-line-strong hover:text-fg" rel="noopener">source</a></>}
+      © {year} {person.name} · built with <a href="https://github.com/Cratis/Cast" class="underline decoration-line-strong hover:text-fg" rel={cast.host.rel}>Cast</a>
+      {config.site.source && <> · <a href={config.site.source} class="underline decoration-line-strong hover:text-fg" rel={cast.host.rel}>source</a></>}
     </p>
   </div>
 </footer>

package/site/components/Hero.astro

@@ -2,11 +2,16 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { person, careerEvents, firstName, githubUrl, tier, sections } from '../data';
-import { renderInline } from '../lib/inline';
+import type { CastView } from '../profile/CastView';
+import Inline from './Inline.astro';
 import CastBadge from './CastBadge.astro';
-import { liveRepos } from '../lib/github';
 import type { BoardLabels } from '../scripts/event-board';
+
+interface Props {
+  cast: CastView;
+}
+const { cast } = Astro.props;
+const { person, careerEvents, firstName, githubUrl, tier, sections, liveRepos } = cast;
 const position = careerEvents.length;
 const hasContact = sections.some((section) => section.id === 'contact');
 
@@ -45,7 +50,7 @@ const labels: BoardLabels = {
       </span>
       stream <span class="text-fg">{person.handle}</span> · <span data-public-event>position <span class="text-event">{position}</span></span>
     </p>
-    <CastBadge tier={tier.tier} handle={person.handle} />
+    <CastBadge tier={tier.tier} handle={person.handle} claim={!cast.host.verified} />
     </div>
 
     <h1>
@@ -54,19 +59,17 @@ const labels: BoardLabels = {
       </span>
       <span
         class="headline hero-in block max-w-[13ch] text-[clamp(2.85rem,7.4vw,6.5rem)] leading-[0.95] font-[800] tracking-[-0.04em]"
-        style="--d:120ms"
-        set:html={renderInline(person.tagline, 'serif text-shine')}
-      />
+        style="--d:120ms"><Inline text={person.tagline} emphasisClass='serif text-shine' host={cast.host} /></span>
     </h1>
 
-    <p class="hero-in mt-8 max-w-[58ch] text-lg leading-relaxed text-fg-muted md:text-xl" style="--d:200ms" set:html={renderInline(person.intro)} />
+    <p class="hero-in mt-8 max-w-[58ch] text-lg leading-relaxed text-fg-muted md:text-xl" style="--d:200ms"><Inline text={person.intro} host={cast.host} /></p>
 
     <div class="hero-in mt-10 flex flex-wrap items-center gap-3" style="--d:280ms">
-      <a href="/cv" class="btn btn-primary" data-magnetic>
+      <a href={cast.href('cv')} class="btn btn-primary" data-magnetic>
         View CV
         <svg viewBox="0 0 16 16" class="size-4" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4" stroke-linecap="round" stroke-linejoin="round"></path></svg>
       </a>
-      <a href={githubUrl} class="btn" rel="me noopener">
+      <a href={githubUrl} class="btn" rel={cast.host.verified ? cast.host.rel : 'me noopener'}>
         <svg viewBox="0 0 16 16" class="size-4" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
         GitHub
       </a>

package/site/components/Inline.astro

@@ -0,0 +1,45 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// Inline markup from cast.yaml, rendered as elements with escaped text. Never set:html.
+import { parseInline, type InlineToken } from '../lib/inline';
+import type { CastHost } from '../profile/CastHost';
+
+interface Props {
+  text?: string;
+  tokens?: InlineToken[];
+  /** Class of `*emphasis*`, the italic serif accent by default. */
+  emphasisClass?: string;
+  /** Where the text is rendered; decides the rel of links and how relative links resolve. */
+  host?: CastHost;
+}
+const { text = '', tokens = parseInline(text), emphasisClass = 'serif', host } = Astro.props;
+const linkClass = 'text-fg underline decoration-line-strong hover:decoration-fg';
+
+const target = (href: string): string => {
+  if (!host?.linkOrigin || !href.startsWith('/')) return href;
+  try {
+    return new URL(href, host.linkOrigin).toString();
+  } catch {
+    return '#';
+  }
+};
+const relFor = (href: string): string | undefined => (/^https?:/i.test(href) ? (host?.rel ?? 'noopener') : undefined);
+---
+
+{
+  tokens.map((token) =>
+    token.kind === 'text' ? (
+      token.text
+    ) : token.kind === 'code' ? (
+      <code class="inline-code">{token.text}</code>
+    ) : token.kind === 'strong' ? (
+      <strong class="font-semibold text-fg"><Astro.self tokens={token.children} emphasisClass={emphasisClass} host={host} /></strong>
+    ) : token.kind === 'em' ? (
+      <em class={emphasisClass}><Astro.self tokens={token.children} emphasisClass={emphasisClass} host={host} /></em>
+    ) : (
+      <a href={target(token.href)} class={linkClass} rel={relFor(target(token.href))}><Astro.self tokens={token.children} emphasisClass={emphasisClass} host={host} /></a>
+    ),
+  )
+}

package/site/components/Monogram.astro

@@ -2,13 +2,16 @@
 // 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';
 // The person's monogram: their initial on their accent, the same shape as the favicon.
-import { person } from '../data';
 
 interface Props {
+  cast: CastView;
   class?: string;
 }
 const { class: className = 'size-7' } = Astro.props;
+const { cast } = Astro.props;
+const { person } = cast;
 const initial = (person.name.trim()[0] ?? person.handle[0] ?? 'C').toUpperCase();
 ---
 

package/site/components/Nav.astro

@@ -2,17 +2,19 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { person, sections, tier } from '../data';
+import type { CastView } from '../profile/CastView';
 import { navLinks } from '../lib/sections';
 import CastBadge from './CastBadge.astro';
 import Monogram from './Monogram.astro';
 
 interface Props {
-  /** Prefix anchor links with '/' when not on the home page. */
+  cast: CastView;
+  /** Prefix anchor links with the home page path when not on the home page. */
   home?: boolean;
 }
-const { home = true } = Astro.props;
-const base = home ? '' : '/';
+const { cast, home = true } = Astro.props;
+const { person, sections, tier } = cast;
+const base = home ? '' : cast.href();
 const links = navLinks(sections);
 ---
 
@@ -21,12 +23,13 @@ const links = navLinks(sections);
   class="group/nav fixed inset-x-0 top-0 z-50 h-[var(--nav-h)] border-b border-transparent transition-[background-color,border-color,backdrop-filter] duration-300 data-[scrolled]:border-line data-[scrolled]:bg-ink-950/70 data-[scrolled]:backdrop-blur-xl data-[scrolled]:backdrop-saturate-150 print:hidden"
 >
   <nav class="container-x flex h-full items-center justify-between gap-4" aria-label="Primary">
-    <div class="flex items-center gap-3">
-      <a href={home ? '#top' : '/'} class="group flex items-center gap-2.5 rounded-md" aria-label={`${person.handle}, home`}>
-        <Monogram class="size-7 shrink-0 transition-transform duration-500 ease-[var(--ease-spring)] group-hover:-rotate-6" />
+    <div class="flex min-w-0 items-center gap-3">
+      <slot name="lead" />
+      <a href={home ? '#top' : cast.href()} class="group flex items-center gap-2.5 rounded-md" aria-label={`${person.handle}, home`}>
+        <Monogram cast={cast} class="size-7 shrink-0 transition-transform duration-500 ease-[var(--ease-spring)] group-hover:-rotate-6" />
         <span class="font-mono text-[0.9375rem] font-semibold tracking-tight">{person.handle}</span>
       </a>
-      <span class="hidden sm:inline-flex"><CastBadge tier={tier.tier} handle={person.handle} size="compact" /></span>
+      <span class="hidden sm:inline-flex"><CastBadge tier={tier.tier} handle={person.handle} size="compact" claim={!cast.host.verified} /></span>
     </div>
 
     <ul class="hidden items-center gap-1 md:flex">
@@ -44,7 +47,7 @@ const links = navLinks(sections);
         ))
       }
       <li>
-        <a href="/cv" class="rounded-lg px-3 py-2 text-sm text-fg-muted transition-colors hover:text-fg">CV</a>
+        <a href={cast.href('cv')} class="rounded-lg px-3 py-2 text-sm text-fg-muted transition-colors hover:text-fg">CV</a>
       </li>
     </ul>
 

package/site/components/Now.astro

@@ -2,18 +2,21 @@
 // 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 { 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 {
+  cast: CastView;
   index: string;
   title?: string;
   label?: string;
 }
 const { index, title = 'Where the stream is *now.*', label = 'Read model' } = Astro.props;
+const { cast } = Astro.props;
+const { person, now, careerEvents, firstName, photo, photoUrl } = cast;
 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,
@@ -23,7 +26,7 @@ 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" />
+    <SectionHeader host={cast.host} 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>
@@ -69,7 +72,7 @@ const hasPortrait = photo !== undefined || photoUrl !== undefined;
                       ))}
                     </ul>
                   ) : (
-                    <Fragment set:html={renderInline(r.value)} />
+                    <Fragment><Inline text={r.value} host={cast.host} /></Fragment>
                   )}
                 </dd>
               </div>
@@ -79,16 +82,16 @@ const hasPortrait = photo !== undefined || photoUrl !== undefined;
       </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.about.length > 0 || person.interests.length > 0) && <div class="mt-16 grid grid-cols-1 gap-10 md:mt-24 md:grid-cols-12">
+      {person.about.length > 0 && <h3 class="eyebrow md:col-span-3" data-reveal>About</h3>}
+      {person.about.length > 0 && <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']}><Inline text={p} host={cast.host} /></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>}
   </div>
 </section>
 

package/site/components/Projects.astro

@@ -2,18 +2,20 @@
 // 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 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 = 'Things I build *after hours.*', label = 'Side projects', intro } = Astro.props;
+const { cast } = Astro.props;
+const { config, liveProjects: projects } = cast;
 // 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));
@@ -21,19 +23,14 @@ const categories = [...declared, ...used.filter((id) => !declared.some((c) => c.
 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>');
+const breakable = (cmd: string) => cmd.split(/(?<=[/ ])/);
 ---
 
 <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 host={cast.host} index={index} label={label} title={title} id="projects-title">
+      {intro && <p class="mt-6 max-w-[62ch] text-lg leading-relaxed text-fg-muted"><Inline text={intro} host={cast.host} /></p>}
     </SectionHeader>
 
     <div class="mb-8 flex flex-wrap gap-2" role="group" aria-label="Filter projects by category" data-filters hidden>
@@ -57,7 +54,7 @@ const breakable = (cmd: string) =>
                 <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">
+                    <a href={p.url} rel={cast.host.rel} class="hover:text-event-soft">
                       {p.name}
                     </a>
                     {p.version && (
@@ -67,7 +64,7 @@ const breakable = (cmd: string) =>
                     )}
                   </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`}>
+                <a href={p.url} rel={cast.host.rel} 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>
@@ -88,7 +85,7 @@ const breakable = (cmd: string) =>
                   <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)} />
+                      {breakable(p.install).map((part, i) => <>{i > 0 && <wbr />}<span class="whitespace-nowrap">{part}</span></>)}
                     </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>

package/site/components/PullRequestFeed.astro

@@ -3,14 +3,16 @@
 // 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 type { CastView } from '../profile/CastView';
 import { relativeTime } from '../lib/reltime';
 
 interface Props {
+  cast: CastView;
   class?: string;
 }
 const { class: className = '' } = Astro.props;
+const { cast } = Astro.props;
+const { config, github, snapshotDate } = cast;
 // 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();
@@ -27,7 +29,7 @@ const orgs = config.github.orgs.join(', ');
     </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]">
+        <a rel={cast.host.rel} 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">
@@ -46,7 +48,7 @@ const orgs = config.github.orgs.join(', ');
         <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]">
+              <a href={pr.url} rel={cast.host.rel} 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">

package/site/components/SectionHeader.astro

@@ -2,7 +2,8 @@
 // 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';
+import type { CastHost } from '../profile/CastHost';
+import Inline from './Inline.astro';
 
 interface Props {
   index: string;
@@ -11,8 +12,10 @@ interface Props {
   /** May use *emphasis* for the italic serif accent. */
   title: string;
   id?: string;
+  /** Where the profile is rendered, for links in the title. */
+  host?: CastHost;
 }
-const { index, kind = 'event', label, title, id } = Astro.props;
+const { index, kind = 'event', label, title, id, host } = Astro.props;
 const noteClass = kind === 'command' ? 'note note-command' : kind === 'view' ? 'note note-view' : 'note';
 ---
 
@@ -22,6 +25,6 @@ const noteClass = kind === 'command' ? 'note note-command' : kind === 'view' ? '
     {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)} />
+  <h2 id={id} class="section-title max-w-[22ch]"><Inline text={title} host={host} /></h2>
   <slot />
 </header>