@cratis/cast 0.1.0 → 0.2.0

package/routes/cv.astro

@@ -2,370 +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 Base from '../site/layouts/Base.astro';
-import Nav from '../site/components/Nav.astro';
-import Footer from '../site/components/Footer.astro';
-import CastBadge from '../site/components/CastBadge.astro';
-import { config, person, careerEvents, cratis, skills, education, certifications, talks, firstName, githubUrl, profileLinks, tier } from '../site/data';
-import { liveProjects as projects, mergedPrFloor, mergedPrTotal, cratisRepos } from '../site/lib/github';
-import { project, formatMonth, normalizeDate } from '../site/lib/career';
-import { plainText, renderInline } from '../site/lib/inline';
-
-const projection = project(careerEvents);
-
-// Milestones that happened during a role are listed under it.
-const MILESTONES = new Set(['SystemDeployed', 'LeadershipAssigned']);
-const roles = [...projection.roles].reverse().map((r) => ({
-  ...r,
-  milestones: careerEvents.filter((e) => {
-    const d = normalizeDate(e.date);
-    // Same organization (an assignment such as 'Azets (via Everdeen)' counts) and within the role's dates.
-    return MILESTONES.has(e.type) && !!e.org?.includes(r.org) && d >= normalizeDate(r.from) && (!r.to || d < normalizeDate(r.to));
-  }),
-}));
-
-const EARLIER = new Set(['VolunteerTeamJoined', 'PartTimeRoleStarted', 'ContractStarted']);
-const earlier = careerEvents.filter((e) => EARLIER.has(e.type)).reverse();
-
-const range = (from: string, to?: string) => `${formatMonth(from)} – ${to ? formatMonth(to) : 'present'}`;
-const host = (url: string) => url.replace(/^https?:\/\/(www\.)?/, '').replace(/\/$/, '');
-const siteHost = host(config.site.url);
-const list = (names: string[], joiner = ', ') => names.join(joiner);
-// One factual line for the Cratis role, built only from what the data shows.
-const cratisFacts = (() => {
-  if (!cratis) return '';
-  const founded = cratis.repos.filter((x) => x.founded).map((x) => x.name);
-  const leads = cratisRepos.filter((x) => x.rank === 1 && !x.founded).map((x) => x.name);
-  const seconds = cratisRepos.filter((x) => x.rank === 2 && x.group === 'pipeline').map((x) => x.name);
-  const parts = [
-    founded.length ? `Founded ${list(founded)}` : '',
-    leads.length ? `${founded.length ? 'also ' : ''}#1 committer on ${list(leads)}` : '',
-    seconds.length ? `#2 all-time on ${list(seconds, ' and ')}` : '',
-  ].filter(Boolean);
-  const sentence = parts.length ? `${parts.join('; ')}.` : '';
-  const prs = mergedPrTotal > 0 ? ` ${new Intl.NumberFormat('en-US').format(mergedPrFloor)}${mergedPrTotal >= 100 ? '+' : ''} merged pull requests in the Cratis organization.` : '';
-  return `${sentence}${prs}`.trim();
-})();
-const talkYear = (date: string) => date.slice(0, 4);
+import CvPage from '../site/pages/CvPage.astro';
+import { cast } from '../site/data';
 ---
 
-<Base
-  title={`CV · ${person.name}`}
-  description={`Curriculum vitae of ${person.fullName ?? person.name}, ${person.title}${person.location ? `, ${person.location}` : ''}.`}
-  bodyClass="cv-page"
->
-  <Nav slot="nav" home={false} />
-
-  <div class="container-x max-w-5xl pt-[calc(var(--nav-h)+2.5rem)] pb-24 print:p-0">
-    <div class="no-print mb-6 flex flex-wrap items-center justify-between gap-3">
-      <a href="/" class="link-quiet font-mono text-xs">← {siteHost}</a>
-      <div class="flex flex-wrap gap-2">
-        {careerEvents.length > 0 && <a href="/#career" class="btn btn-sm">Replay as event stream</a>}
-        <button type="button" class="btn btn-sm btn-primary" data-print>
-          <svg viewBox="0 0 16 16" class="size-4" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M4.5 6V2.5h7V6M4.5 11.5h-2v-5h11v5h-2M4.5 9.5h7v4h-7z" stroke-linejoin="round"></path></svg>
-          Print / Save as PDF
-        </button>
-      </div>
-    </div>
-
-    <article class="cv panel p-6 sm:p-10 md:p-14" aria-labelledby="cv-name">
-      <header class="cv-head flex flex-col gap-6 border-b border-line pb-8 md:flex-row md:items-end md:justify-between">
-        <div>
-          <p class="no-print mb-4 flex flex-wrap items-center gap-3"><span class="note">Projection: {firstName}.CV</span><CastBadge tier={tier.tier} handle={person.handle} size="compact" /></p>
-          <h1 id="cv-name" transition:name="person-name" class="text-[clamp(2.25rem,5vw,3.5rem)] leading-none font-[800] tracking-[-0.045em]">{person.fullName ?? person.name}</h1>
-          <p class="mt-3 text-lg text-fg-muted">{person.title}</p>
-        </div>
-        <ul class="cv-contact space-y-1 font-mono text-[0.8125rem] text-fg-muted md:text-right">
-          {person.location && <li>{person.location}</li>}
-          {person.email && <li><a href={`mailto:${person.email}`} class="hover:text-fg" data-no-url>{person.email}</a></li>}
-          <li><a href={config.site.url} class="hover:text-fg" data-no-url>{siteHost}</a></li>
-          <li><a href={githubUrl} class="hover:text-fg" data-no-url>{host(githubUrl)}</a></li>
-          {profileLinks.filter((link) => link.key !== 'github').slice(0, 2).map((link) => <li><a href={link.url} class="hover:text-fg" data-no-url>{host(link.url)}</a></li>)}
-        </ul>
-      </header>
-
-      <div class="cv-grid mt-10 grid gap-12 md:grid-cols-[1fr_15rem]">
-        <div class="cv-main space-y-12">
-          <section aria-labelledby="cv-summary">
-            <h2 id="cv-summary" class="cv-h">Summary</h2>
-            <div class="space-y-3 leading-relaxed text-fg-muted">
-              {(person.about.length ? person.about : [person.intro]).map((p) => <p set:html={renderInline(p)} />)}
-            </div>
-          </section>
-
-          <section aria-labelledby="cv-exp">
-            <h2 id="cv-exp" class="cv-h">Experience</h2>
-            <ol class="space-y-8">
-              {
-                roles.map((r) => (
-                  <li class="cv-item">
-                    <div class="flex flex-wrap items-baseline justify-between gap-x-4">
-                      <h3 class="text-lg font-[640] tracking-[-0.01em]">
-                        {r.title}
-                        <span class="font-sans font-normal text-fg-muted">
-                          {' · '}
-                          {r.orgUrl ? <a href={r.orgUrl} data-print-url={host(r.orgUrl)} class="underline decoration-line-strong hover:text-fg">{r.org}</a> : r.org}
-                        </span>
-                      </h3>
-                      <p class="font-mono text-xs whitespace-nowrap text-fg-faint">
-                        {range(r.from, r.to)}
-                        {r.location && ` · ${r.location}`}
-                      </p>
-                    </div>
-                    <p class="mt-2 leading-relaxed text-fg-muted">{plainText(r.summary)}</p>
-                    {r.org === 'Cratis' && cratisFacts && (
-                      <p class="mt-2 leading-relaxed text-fg-muted">{cratisFacts}</p>
-                    )}
-                    {r.milestones.length > 0 && (
-                      <ul class="mt-2 space-y-1 text-sm text-fg-muted">
-                        {r.milestones.map((m) => (
-                          <li class="flex gap-2">
-                            <span class="font-mono text-xs leading-5 whitespace-nowrap text-event">{formatMonth(m.date)}</span>
-                            <span><span class="text-fg">{m.title}.</span> {plainText(m.summary)}</span>
-                          </li>
-                        ))}
-                      </ul>
-                    )}
-                    {r.skills.length > 0 && <p class="mt-2 font-mono text-[0.75rem] text-fg-faint">{r.skills.join(' · ')}</p>}
-                  </li>
-                ))
-              }
-            </ol>
-          </section>
-
-          {earlier.length > 0 && <section aria-labelledby="cv-earlier">
-            <h2 id="cv-earlier" class="cv-h">Earlier</h2>
-            <ol class="space-y-5">
-              {
-                earlier.map((e) => (
-                  <li class="cv-item">
-                    <div class="flex flex-wrap items-baseline justify-between gap-x-4">
-                      <h3 class="font-[620]">
-                        {e.title}
-                        <span class="font-sans font-normal text-fg-muted">
-                          {' · '}
-                          {e.orgUrl ? <a href={e.orgUrl} data-print-url={host(e.orgUrl)} class="underline decoration-line-strong hover:text-fg">{e.org}</a> : e.org}
-                        </span>
-                      </h3>
-                      <p class="font-mono text-xs whitespace-nowrap text-fg-faint">{e.endDate ? range(e.date, e.endDate) : `from ${formatMonth(e.date)}`}</p>
-                    </div>
-                    <p class="mt-1.5 text-sm leading-relaxed text-fg-muted">{plainText(e.summary)}</p>
-                  </li>
-                ))
-              }
-            </ol>
-          </section>}
-
-          {projects.length > 0 && <section aria-labelledby="cv-projects">
-            <h2 id="cv-projects" class="cv-h">Selected projects</h2>
-            <ul class="cv-projects grid gap-x-8 gap-y-4 sm:grid-cols-2">
-              {
-                projects.map((p) => (
-                  <li class="cv-item">
-                    <h3 class="font-[620]">
-                      <a href={p.url} data-print-url={host(p.url)} class="hover:text-event-soft">{p.name}</a>
-                      {p.version && <span class="ml-1.5 font-mono text-xs font-normal text-fg-faint">{p.version}</span>}
-                    </h3>
-                    <p class="mt-0.5 text-sm leading-relaxed text-fg-muted">{plainText(p.pitch)}</p>
-                    <p class="mt-0.5 font-mono text-[0.75rem] text-fg-faint">{p.stack.join(' · ')}</p>
-                  </li>
-                ))
-              }
-            </ul>
-          </section>}
-        </div>
-
-        <aside class="cv-side space-y-10 text-sm">
-          {Object.keys(skills).length > 0 && <section aria-labelledby="cv-skills">
-            <h2 id="cv-skills" class="cv-h">Skills</h2>
-            <dl class="space-y-4">
-              {
-                Object.entries(skills).map(([group, list]) => (
-                  <div>
-                    <dt class="mb-1 font-medium text-fg">{group}</dt>
-                    <dd class="leading-relaxed text-fg-muted">{list.join(', ')}</dd>
-                  </div>
-                ))
-              }
-            </dl>
-          </section>}
-
-          {education.length > 0 && <section aria-labelledby="cv-edu">
-            <h2 id="cv-edu" class="cv-h">Education</h2>
-            {
-              education.map((e) => (
-                <div>
-                  <p class="font-medium text-fg">{e.degree}</p>
-                  <p class="text-fg-muted">{e.school}</p>
-                  <p class="font-mono text-xs text-fg-faint">{e.from}{e.to ? ` – ${e.to}` : ''}</p>
-                </div>
-              ))
-            }
-          </section>}
-
-          {certifications.length > 0 && <section aria-labelledby="cv-certs">
-            <h2 id="cv-certs" class="cv-h">Certifications</h2>
-            <ul class="space-y-3">
-              {
-                certifications.map((c) => (
-                  <li>
-                    {c.url ? <a href={c.url} class="font-medium text-fg hover:text-event-soft" data-no-url>{c.title}</a> : <span class="font-medium text-fg">{c.title}</span>}
-                    <p class="font-mono text-xs text-fg-faint">{c.issuer} · {c.year}</p>
-                  </li>
-                ))
-              }
-            </ul>
-          </section>}
-
-          {talks.length > 0 && <section aria-labelledby="cv-talks">
-            <h2 id="cv-talks" class="cv-h">Talks</h2>
-            {
-              talks.map((t) => (
-                <div>
-                  {t.url ? <a href={t.url} class="font-medium text-fg hover:text-event-soft" data-no-url>{t.title}</a> : <span class="font-medium text-fg">{t.title}</span>}
-                  <p class="text-fg-muted">{t.host}{t.with && `, with ${t.with}`}</p>
-                  <p class="font-mono text-xs text-fg-faint">{talkYear(t.date)}</p>
-                </div>
-              ))
-            }
-          </section>}
-
-          {person.languages.length > 0 && <section aria-labelledby="cv-lang">
-            <h2 id="cv-lang" class="cv-h">Languages</h2>
-            <ul class="space-y-1 text-fg-muted">
-              {person.languages.map((l) => <li>{l}</li>)}
-            </ul>
-          </section>}
-        </aside>
-      </div>
-    </article>
-  </div>
-
-  <Footer slot="footer" />
-</Base>
-
-<style>
-  .cv {
-    backdrop-filter: none;
-    -webkit-backdrop-filter: none;
-  }
-  .cv-h {
-    margin-bottom: 1.25rem;
-    font-family: var(--font-mono);
-    font-size: 0.75rem;
-    font-weight: 500;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    color: var(--color-event);
-  }
-  .cv h3 {
-    font-family: var(--font-display);
-  }
-
-  @media print {
-    @page {
-      size: A4;
-      margin: 13mm 14mm;
-    }
-    :global(.grain::after),
-    :global(header[data-nav]),
-    :global(footer),
-    :global(dialog),
-    :global(.sr-only-focusable),
-    .no-print {
-      display: none !important;
-    }
-    .cv {
-      padding: 0 !important;
-      border: 0 !important;
-      background: none !important;
-      box-shadow: none !important;
-      backdrop-filter: none !important;
-      color: #111;
-    }
-    .cv :global(*) {
-      color: #111 !important;
-      border-color: #d4d4d4 !important;
-    }
-    .cv :global(.text-fg-muted),
-    .cv :global(.text-fg-faint) {
-      color: #444 !important;
-    }
-    .cv-h {
-      color: #b4520d !important;
-      margin-bottom: 0.6rem;
-      font-size: 7.5pt;
-    }
-    .cv-head {
-      padding-bottom: 1rem;
-    }
-    .cv-head h1 {
-      font-size: 24pt;
-    }
-    .cv-grid {
-      display: grid !important;
-      grid-template-columns: 1fr 13.5rem !important;
-      gap: 1.75rem !important;
-      margin-top: 1.25rem !important;
-    }
-    .cv-main {
-      row-gap: 0;
-    }
-    .cv-main > :global(* + *) {
-      margin-top: 1.4rem !important;
-    }
-    .cv-main :global(ol.space-y-8 > * + *) {
-      margin-top: 0.9rem !important;
-    }
-    .cv-side > :global(* + *) {
-      margin-top: 1.25rem !important;
-    }
-    .cv-item,
-    .cv-side > section {
-      break-inside: avoid;
-    }
-    .cv-h {
-      break-after: avoid;
-    }
-    .cv :global(a) {
-      text-decoration: none !important;
-    }
-    .cv-main :global(a[data-print-url])::after {
-      content: ' ' attr(data-print-url);
-      font-family: var(--font-mono);
-      font-size: 7pt;
-      color: #555;
-      word-break: break-all;
-    }
-    .cv :global(.text-lg) {
-      font-size: 10pt;
-    }
-    .cv :global(.leading-relaxed) {
-      line-height: 1.42;
-    }
-    .cv-projects :global(a[data-print-url])::after {
-      display: block;
-      word-break: normal;
-    }
-    .cv-projects {
-      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
-      column-gap: 1rem !important;
-      row-gap: 0.6rem !important;
-    }
-  }
-</style>
-
-<script>
-  import { onPageLoad } from '../site/lib/lifecycle';
-  onPageLoad(() => {
-    if (!document.querySelector('.cv-page')) return;
-    document.querySelector('[data-print]')?.addEventListener('click', () => window.print());
-    const url = new URL(location.href);
-    if (url.searchParams.has('print')) {
-      history.replaceState(history.state, '', url.pathname);
-      const print = () => window.setTimeout(() => window.print(), 400);
-      if (document.readyState === 'complete') print();
-      else window.addEventListener('load', print, { once: true });
-    }
-  });
-</script>
+<CvPage cast={cast} />

package/routes/index.astro

@@ -2,60 +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 Base from '../site/layouts/Base.astro';
-import Nav from '../site/components/Nav.astro';
-import Hero from '../site/components/Hero.astro';
-import Now from '../site/components/Now.astro';
-import Stats from '../site/components/Stats.astro';
-import CareerReplay from '../site/components/CareerReplay.astro';
-import EventModel from '../site/components/EventModel.astro';
-import Cratis from '../site/components/Cratis.astro';
-import Activity from '../site/components/Activity.astro';
-import Projects from '../site/components/Projects.astro';
-import Agentic from '../site/components/Agentic.astro';
-import Writing from '../site/components/Writing.astro';
-import Talks from '../site/components/Talks.astro';
-import Skills from '../site/components/Skills.astro';
-import Contact from '../site/components/Contact.astro';
-import Footer from '../site/components/Footer.astro';
-import { config, person, sections } from '../site/data';
-import { plainText } from '../site/lib/inline';
-
-const components = {
-  hero: Hero,
-  now: Now,
-  stats: Stats,
-  career: CareerReplay,
-  model: EventModel,
-  cratis: Cratis,
-  activity: Activity,
-  agentic: Agentic,
-  projects: Projects,
-  writing: Writing,
-  talks: Talks,
-  skills: Skills,
-  contact: Contact,
-} as const;
-
-const description = config.site.description ?? `${plainText(person.tagline)} ${plainText(person.intro)}`;
+import ProfilePage from '../site/pages/ProfilePage.astro';
+import { cast } from '../site/data';
 ---
 
-<Base title={`${person.name} · ${person.title}`} description={description}>
-  <Nav slot="nav" />
-  {
-    sections.map((section, position) => {
-      const Section = components[section.id];
-      const previous = sections[position - 1];
-      return (
-        <Section
-          index={section.index}
-          {...(section.title ? { title: section.title } : {})}
-          {...(section.label ? { label: section.label } : {})}
-          {...(section.intro ? { intro: section.intro } : {})}
-          compact={section.id === 'skills' && previous?.id === 'talks'}
-        />
-      );
-    })
-  }
-  <Footer slot="footer" />
-</Base>
+<ProfilePage cast={cast} />

package/site/components/Activity.astro

@@ -2,19 +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 SectionHeader from './SectionHeader.astro';
 import PullRequestFeed from './PullRequestFeed.astro';
-import { cratis } from '../data';
-import { renderInline } from '../lib/inline';
 
 interface Props {
+  cast: CastView;
   index: string;
   title?: string;
   label?: string;
   intro?: string;
 }
 const { index, title = 'Every contribution, *appended.*', label = 'Event store', intro } = Astro.props;
-import { github, snapshotDate } from '../lib/github';
+const { cast } = Astro.props;
+const { cratis, github, snapshotDate } = cast;
 import { foldCalendar, formatDay, formatMonthLong } from '../lib/contributions';
 
 const fmt = new Intl.NumberFormat('en-US');
@@ -41,9 +43,9 @@ const summary = `Contribution heatmap: ${fmt.format(total)} contributions betwee
 
 <section id="activity" class="relative py-24 md:py-36" aria-labelledby="activity-title">
   <div class="container-x">
-    <SectionHeader index={index} label={label} title={title} id="activity-title">
+    <SectionHeader host={cast.host} index={index} label={label} title={title} id="activity-title">
       <p class="mt-6 max-w-[60ch] text-lg leading-relaxed text-fg-muted">
-        {intro ? <Fragment set:html={renderInline(intro)} /> : <>My GitHub contribution calendar, re-projected as an event store: one partition per day, brighter means more events appended.
+        {intro ? <Fragment><Inline text={intro} host={cast.host} /></Fragment> : <>My GitHub contribution calendar, re-projected as an event store: one partition per day, brighter means more events appended.
         Captured when the site was built.</>}
       </p>
     </SectionHeader>
@@ -121,7 +123,7 @@ const summary = `Contribution heatmap: ${fmt.format(total)} contributions betwee
         </tbody>
       </table>
     </div>}
-    {!cratis && <PullRequestFeed class="mt-6" />}
+    {!cratis && <PullRequestFeed cast={cast} class="mt-6" />}
   </div>
   <div class="hm-tip" role="presentation" data-heatmap-tip hidden></div>
 </section>

package/site/components/Agentic.astro

@@ -2,17 +2,18 @@
 // 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 { agentic as agenticData, config } from '../data';
-import { github } from '../lib/github';
-import { postsFor, themes } from '../lib/blog';
-import { renderInline } from '../lib/inline';
 
 interface Props {
+  cast: CastView;
   index: string;
   title?: string;
   label?: string;
 }
+const { cast } = Astro.props;
+const { agentic: agenticData, config, github, postsFor, themes } = cast;
 const agentic = agenticData!;
 const { index, title = agentic.title, label = agentic.label } = Astro.props;
 const fmt = new Intl.NumberFormat('en-US');
@@ -25,8 +26,8 @@ const kinds = ['command', 'event', 'view', 'event', 'command'] as const;
 <section id="agentic" class="relative overflow-hidden py-24 md:py-36" aria-labelledby="agentic-title">
   <div class="pointer-events-none absolute top-1/4 -left-40 size-[36rem] rounded-full bg-view/8 blur-[120px]" aria-hidden="true"></div>
   <div class="container-x relative">
-    <SectionHeader index={index} kind="view" label={label} title={title} id="agentic-title">
-      <p class="mt-6 max-w-[62ch] text-lg leading-relaxed text-fg-muted" set:html={renderInline(agentic.pitch)} />
+    <SectionHeader host={cast.host} index={index} kind="view" label={label} title={title} id="agentic-title">
+      <p class="mt-6 max-w-[62ch] text-lg leading-relaxed text-fg-muted"><Inline text={agentic.pitch} host={cast.host} /></p>
     </SectionHeader>
 
     <div class="panel overflow-hidden" data-reveal data-harness>
@@ -46,7 +47,7 @@ const kinds = ['command', 'event', 'view', 'event', 'command'] as const;
               </span>
               <span class="mt-4 block font-display text-2xl font-[650] tracking-[-0.02em]">{w.step}</span>
               <span class={`note mt-1 ${kinds[i] === 'command' ? 'note-command' : kinds[i] === 'view' ? 'note-view' : ''}`}>{w.event}</span>
-              <span class="mt-3 block text-sm leading-relaxed text-fg-muted" set:html={renderInline(w.text)} />
+              <span class="mt-3 block text-sm leading-relaxed text-fg-muted"><Inline text={w.text} host={cast.host} /></span>
               {w.loop && (
                 <span class="loop mt-4 inline-flex whitespace-nowrap items-center gap-1.5 rounded-full border border-event/30 bg-event/8 px-2.5 py-0.5 font-mono text-[0.6875rem] text-event-soft">
                   ↺ {w.loop}
@@ -65,10 +66,10 @@ const kinds = ['command', 'event', 'view', 'event', 'command'] as const;
           const Tag = item.url ? 'a' : 'div';
           return (
             <li class:list={[item.list && 'md:col-span-2']} data-reveal style={`--reveal-delay:${(i % 3) * 60}ms`}>
-              <Tag href={item.url} rel={item.url ? 'noopener' : undefined} class:list={['panel flex h-full flex-col p-5 md:p-6', item.url && 'glow group']} style="--glow: var(--color-view)">
+              <Tag href={item.url} rel={item.url ? cast.host.rel : undefined} class:list={['panel flex h-full flex-col p-5 md:p-6', item.url && 'glow group']} style="--glow: var(--color-view)">
                 <span class="note note-view">{item.kind}</span>
                 <span class="mt-4 font-display text-2xl font-[650] tracking-[-0.02em] transition-colors group-hover:text-view-soft">{item.name}</span>
-                <span class="mt-2 text-sm leading-relaxed text-fg-muted" set:html={renderInline(item.text)} />
+                <span class="mt-2 text-sm leading-relaxed text-fg-muted"><Inline text={item.text} host={cast.host} /></span>
                 {item.list && (
                   <span class="mt-5 block">
                     <span class="block font-mono text-[0.6875rem] tracking-[0.08em] text-fg-faint uppercase">{item.listLabel}</span>
@@ -89,7 +90,7 @@ const kinds = ['command', 'event', 'view', 'event', 'command'] as const;
           <ul class="mt-3 grid gap-x-8 gap-y-2 md:grid-cols-2">
             {aiPosts.map((p) => (
               <li>
-                <a href={p.url} rel="noopener" class="group flex items-baseline gap-3 text-[0.9375rem]">
+                <a href={p.url} rel={cast.host.rel} class="group flex items-baseline gap-3 text-[0.9375rem]">
                   <span class="text-view" aria-hidden="true">→</span>
                   <span class="text-fg group-hover:underline">{p.headline}</span>
                 </a>

package/site/components/CareerReplay.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 { careerEvents, firstName } from '../data';
-import { renderInline } from '../lib/inline';
+import type { CastView } from '../profile/CastView';
+import Inline from './Inline.astro';
+import { project, formatMonth, yearsBetween, alsoText } from '../lib/career';
+import SectionHeader from './SectionHeader.astro';
 
 interface Props {
+  cast: CastView;
   index: string;
   title?: string;
   label?: string;
   intro?: string;
 }
 const { index, title = 'Career, replayed from the *event log.*', label = 'Event stream', intro } = Astro.props;
-import { project, formatMonth, yearsBetween, alsoText } from '../lib/career';
-import SectionHeader from './SectionHeader.astro';
+const { cast } = Astro.props;
+const { careerEvents, firstName } = cast;
 
 const total = careerEvents.length;
 const final = project(careerEvents);
@@ -27,9 +30,9 @@ const icon = {
 
 <section id="career" class="relative py-24 md:py-36" aria-labelledby="career-title" data-replay data-total={total}>
   <div class="container-x">
-    <SectionHeader index={index} label={label} title={title} id="career-title">
+    <SectionHeader host={cast.host} index={index} label={label} title={title} id="career-title">
       <p class="mt-6 max-w-[60ch] text-lg text-fg-muted" data-reveal>
-        {intro ? <Fragment set:html={renderInline(intro)} /> : <>Every role, skill and organization below is a projection, computed by folding these {total} events in order.
+        {intro ? <Fragment><Inline text={intro} host={cast.host} /></Fragment> : <>Every role, skill and organization below is a projection, computed by folding these {total} events in order.
         Scroll, scrub or press play to watch the state rebuild itself.</>}
       </p>
     </SectionHeader>
@@ -176,7 +179,7 @@ const icon = {
                   {e.org && (
                     <p class="mt-1 text-sm text-fg-muted">
                       {e.orgUrl ? (
-                        <a href={e.orgUrl} class="underline decoration-line-strong hover:text-fg hover:decoration-event" rel="noopener">
+                        <a href={e.orgUrl} class="underline decoration-line-strong hover:text-fg hover:decoration-event" rel={cast.host.rel}>
                           {e.org}
                         </a>
                       ) : (
@@ -185,7 +188,7 @@ const icon = {
                       {e.location && <span class="text-fg-faint"> · {e.location}</span>}
                     </p>
                   )}
-                  <p class="mt-3 text-[0.95rem] leading-relaxed text-fg-muted" set:html={renderInline(e.summary)} />
+                  <p class="mt-3 text-[0.95rem] leading-relaxed text-fg-muted"><Inline text={e.summary} host={cast.host} /></p>
                   {e.skills && (
                     <ul class="mt-4 flex flex-wrap gap-1.5" aria-label="Skills">
                       {e.skills.map((s) => (

package/site/components/CommandPalette.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 { config } from '../data';
-const host = new URL(config.site.url).host;
+import type { CastView } from '../profile/CastView';
+
+interface Props {
+  cast: CastView;
+}
+const { cast } = Astro.props;
+const host = new URL(cast.config.site.url).host;
 ---
 
-<dialog class="palette" data-palette aria-label="Command palette" transition:persist="palette">
+<dialog class="palette" data-palette aria-label="Command palette" transition:persist={`palette-${cast.person.handle.toLowerCase()}`}>
   <div class="sheet panel overflow-hidden">
     <div class="flex items-center gap-3 border-b border-line px-4">
       <svg viewBox="0 0 20 20" class="size-4 shrink-0 text-fg-faint" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
@@ -111,6 +116,7 @@ const host = new URL(config.site.url).host;
 </style>
 
 <script>
+  import { onPageLoad } from '../lib/lifecycle';
   import { mountPalette } from '../scripts/palette';
-  mountPalette();
+  onPageLoad(() => mountPalette());
 </script>