@cratis/cast 0.1.0 → 0.2.1

package/site/lib/nav.ts

@@ -1,9 +1,20 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+import { readClientCast } from '../profile/clientCast';
 import { motionReduced } from './motion';
 
-export const onHome = (): boolean => location.pathname === '/' || location.pathname === '/index.html';
+/** Path of the profile's home page: '/' on a Cast site, '/<login>/' in the directory. */
+export const homePath = (): string => readClientCast()?.base ?? '/';
+
+/** A path under the profile's home page. */
+export const profilePath = (path = ''): string => `${homePath()}${path.replace(/^\//, '')}`;
+
+export const onHome = (): boolean => {
+    const base = homePath();
+    const path = location.pathname;
+    return path === base || path === `${base}index.html` || `${path}/` === base;
+};
 
 /** Navigates to another page, through the view-transition router when it is active. */
 export async function go(href: string): Promise<void> {
@@ -25,14 +36,14 @@ export function goSection(id: string): void {
         focusTarget.setAttribute('tabindex', '-1');
         focusTarget.focus({ preventScroll: true });
     } else {
-        void go(`/#${id}`);
+        void go(profilePath(`#${id}`));
     }
 }
 
 /** Scrolls to the career section and starts the replay, from any page. */
 export function startReplay(): void {
     if (onHome() && document.querySelector('[data-replay]')) document.dispatchEvent(new CustomEvent('replay:start'));
-    else void go('/?replay#career');
+    else void go(profilePath('?replay#career'));
 }
 
 export const openExternal = (url: string): void => void window.open(url, '_blank', 'noopener');

package/site/pages/CvPage.astro

@@ -0,0 +1,379 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// The printable CV of one profile. A Cast site serves it at /cv; the directory at /<login>/cv.
+import Base from '../layouts/Base.astro';
+import Nav from '../components/Nav.astro';
+import Footer from '../components/Footer.astro';
+import CastBadge from '../components/CastBadge.astro';
+import Inline from '../components/Inline.astro';
+import type { CastView } from '../profile/CastView';
+import { project, formatMonth, normalizeDate } from '../lib/career';
+import { plainText } from '../lib/inline';
+
+interface Props {
+  cast: CastView;
+}
+const { cast } = Astro.props;
+const { config, person, careerEvents, cratis, skills, education, certifications, talks, firstName, githubUrl, profileLinks, tier, liveProjects: projects, mergedPrFloor, mergedPrTotal, cratisRepos } = cast;
+
+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);
+---
+
+<Base
+  cast={cast}
+  title={`CV · ${person.name}`}
+  description={`Curriculum vitae of ${person.fullName ?? person.name}, ${person.title}${person.location ? `, ${person.location}` : ''}.`}
+  bodyClass="cv-page"
+>
+  <Nav slot="nav" cast={cast} home={false}><slot name="lead" slot="lead" /></Nav>
+
+  <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={cast.href()} class="link-quiet font-mono text-xs">← {cast.host.verified ? `${person.name}'s profile` : siteHost}</a>
+      <div class="flex flex-wrap gap-2">
+        {careerEvents.length > 0 && <a href={cast.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" claim={!cast.host.verified} /></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} rel={cast.host.rel} class="hover:text-fg" data-no-url>{siteHost}</a></li>
+          <li><a href={githubUrl} rel={cast.host.rel} 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} rel={cast.host.rel} 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><Inline text={p} host={cast.host} /></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} rel={cast.host.rel} 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} rel={cast.host.rel} 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} rel={cast.host.rel} 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} rel={cast.host.rel} 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} rel={cast.host.rel} 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>
+
+  <slot name="footer" slot="footer"><Footer cast={cast} /></slot>
+</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 '../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>

package/site/pages/ProfilePage.astro

@@ -0,0 +1,78 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// The home page of one profile. A Cast site serves it at /; the directory at /<login>/.
+import Base from '../layouts/Base.astro';
+import Nav from '../components/Nav.astro';
+import Hero from '../components/Hero.astro';
+import Now from '../components/Now.astro';
+import Stats from '../components/Stats.astro';
+import CareerReplay from '../components/CareerReplay.astro';
+import EventModel from '../components/EventModel.astro';
+import Cratis from '../components/Cratis.astro';
+import Activity from '../components/Activity.astro';
+import Projects from '../components/Projects.astro';
+import Agentic from '../components/Agentic.astro';
+import Writing from '../components/Writing.astro';
+import Talks from '../components/Talks.astro';
+import Skills from '../components/Skills.astro';
+import Contact from '../components/Contact.astro';
+import Footer from '../components/Footer.astro';
+import type { CastView } from '../profile/CastView';
+import { plainText } from '../lib/inline';
+
+interface Props {
+  cast: CastView;
+  /** Page title; defaults to "<name> · <title>". */
+  title?: string;
+  /** Meta description; defaults to the site description, else the tagline and intro. */
+  description?: string;
+}
+const { cast } = Astro.props;
+const { config, person, sections } = cast;
+
+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 title = Astro.props.title ?? `${person.name} · ${person.title}`;
+const description = Astro.props.description ?? config.site.description ?? `${plainText(person.tagline)} ${plainText(person.intro)}`;
+---
+
+<Base cast={cast} title={title} description={description}>
+  <Nav slot="nav" cast={cast}><slot name="lead" slot="lead" /></Nav>
+  {!sections.some((section) => section.id === 'hero') && <slot name="after-hero" />}
+  {
+    sections.map((section, position) => {
+      const Section = components[section.id];
+      const previous = sections[position - 1];
+      return (
+        <>
+          <Section
+            cast={cast}
+            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'}
+          />
+          {section.id === 'hero' && <slot name="after-hero" />}
+        </>
+      );
+    })
+  }
+  <slot name="footer" slot="footer"><Footer cast={cast} /></slot>
+</Base>

package/site/profile/CastHost.ts

@@ -0,0 +1,32 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** Where a profile is rendered: on the member's own Cast site, or by the Cast directory. */
+export type CastHost = {
+    /** Path of the profile's home page, ending with '/': '/' on a Cast site, '/<login>/' in the directory. */
+    base: string;
+
+    /** True when the directory renders the profile. The tier is then verified there, not claimed by the site. */
+    verified: boolean;
+
+    /** The rel attribute for links that come from the member's data. */
+    rel: string;
+
+    /** True when the site's own files (og.png, cast.json, llms.txt, favicon, sitemap) are served next to the pages. */
+    siteFiles: boolean;
+
+    /** Origin that relative links in inline text ('/posts/x') resolve against. Kept relative when undefined. */
+    linkOrigin?: string;
+};
+
+/** A member's own Cast site. */
+export const siteHost: CastHost = { base: '/', verified: false, rel: 'noopener', siteFiles: true };
+
+/** A profile rendered by the Cast directory at `/<login>/`: links from member data are user content. */
+export const directoryHost = (login: string, site?: string): CastHost => ({
+    base: `/${login.toLowerCase()}/`,
+    verified: true,
+    rel: 'noopener nofollow ugc',
+    siteFiles: false,
+    ...(site ? { linkOrigin: site } : {}),
+});

package/site/profile/CastView.ts

@@ -0,0 +1,96 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ImageMetadata } from 'astro';
+import { verificationUrl } from '../../badges/constants';
+import type { CastData } from '../../integration/CastData';
+import { writingView, type WritingView } from '../lib/blog';
+import { gitHubView, type GitHubView } from '../lib/github';
+import type { CastHost } from './CastHost';
+
+/** Everything one profile renders from: the resolved data, plus the imported local portrait on a Cast site. */
+export type CastProfile = CastData & { photo?: ImageMetadata };
+
+/** A profile link with the label it reads as. */
+export type ProfileLink = { key: string; label: string; url: string };
+
+/** Known link names and how they read. Anything else is shown with its key. */
+const linkLabels: Record<string, string> = {
+    github: 'GitHub',
+    linkedin: 'LinkedIn',
+    mastodon: 'Mastodon',
+    bluesky: 'Bluesky',
+    x: 'X',
+    twitter: 'X',
+    youtube: 'YouTube',
+    website: 'Website',
+    blog: 'Blog',
+};
+
+/**
+ * One profile, ready to render: the data, the shortcuts the components read and where it is rendered. Every
+ * page and component of a Cast profile takes this as its `cast` prop, so the same components render a Cast
+ * site and the directory's member pages.
+ */
+export type CastView = CastProfile & GitHubView & WritingView & {
+    host: CastHost;
+    person: CastData['config']['person'];
+    now: CastData['config']['now'];
+    careerEvents: CastData['config']['career']['events'];
+    cratis: CastData['config']['cratis'];
+    projects: CastData['config']['projects'];
+    talks: CastData['config']['talks'];
+    community: CastData['config']['community'];
+    education: CastData['config']['education'];
+    certifications: CastData['config']['certifications'];
+    skills: CastData['config']['skills'];
+    agentic: CastData['config']['agentic'];
+    eventModel: CastData['config']['eventModel'];
+    stats: CastData['config']['stats'];
+    /** First word of the display name: projections are named `<FirstName>.Now`, `<FirstName>.Career`. */
+    firstName: string;
+    /** Profile links with labels, GitHub first. */
+    profileLinks: ProfileLink[];
+    /** The GitHub profile URL: from links, else from the login. */
+    githubUrl: string;
+    /** The organization whose merged pull requests feed the live feed. */
+    feedOrg: string;
+    /** The directory page that verifies this profile's tier. */
+    verificationUrl: string;
+    /** A path under the profile: `href('cv')` is `/cv` on a site and `/<login>/cv` in the directory. */
+    href: (path?: string) => string;
+};
+
+/** Builds the view of one profile for one host. */
+export function castView(profile: CastProfile, host: CastHost): CastView {
+    const { config } = profile;
+    const person = config.person;
+    const profileLinks = Object.entries(person.links)
+        .map(([key, url]) => ({ key, label: linkLabels[key.toLowerCase()] ?? key, url }))
+        .sort((left, right) => Number(right.key === 'github') - Number(left.key === 'github'));
+    return {
+        ...profile,
+        ...gitHubView(config, profile.github),
+        ...writingView(config, profile.writing),
+        host,
+        person,
+        now: config.now,
+        careerEvents: config.career.events,
+        cratis: config.cratis,
+        projects: config.projects,
+        talks: config.talks,
+        community: config.community,
+        education: config.education,
+        certifications: config.certifications,
+        skills: config.skills,
+        agentic: config.agentic,
+        eventModel: config.eventModel,
+        stats: config.stats,
+        firstName: person.name.split(/\s+/)[0] ?? person.handle,
+        profileLinks,
+        githubUrl: person.links['github'] ?? `https://github.com/${config.github.login}`,
+        feedOrg: config.github.orgs[0] ?? 'Cratis',
+        verificationUrl: verificationUrl(config.github.login),
+        href: (path = '') => `${host.base}${path.replace(/^\//, '')}`,
+    };
+}