@cratis/cast 0.0.1 → 0.2.0

package/site/lib/accent.ts

@@ -0,0 +1,52 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+type Rgb = [number, number, number];
+
+const darkGround: Rgb = [8, 8, 14];
+const lightGround: Rgb = [250, 249, 246];
+
+const parse = (hex: string): Rgb => {
+    const value = Number.parseInt(hex.replace('#', ''), 16);
+    return [(value >> 16) & 255, (value >> 8) & 255, value & 255];
+};
+
+const format = (color: Rgb): string => `#${color.map(channel => Math.round(channel).toString(16).padStart(2, '0')).join('')}`;
+
+const linear = (channel: number): number => {
+    const value = channel / 255;
+    return value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+};
+
+/** WCAG relative luminance. */
+export const luminance = (color: Rgb): number => 0.2126 * linear(color[0]) + 0.7152 * linear(color[1]) + 0.0722 * linear(color[2]);
+
+/** WCAG contrast ratio between two colors. */
+export const contrast = (first: Rgb, second: Rgb): number => {
+    const [high, low] = [luminance(first), luminance(second)].sort((left, right) => right - left) as [number, number];
+    return (high + 0.05) / (low + 0.05);
+};
+
+const mix = (color: Rgb, target: Rgb, amount: number): Rgb =>
+    color.map((channel, index) => channel + (target[index]! - channel) * amount) as Rgb;
+
+/** Moves `color` toward `target` in small steps until it reaches `ratio` against `ground`. */
+const reach = (color: Rgb, target: Rgb, ground: Rgb, ratio: number): Rgb => {
+    let current = color;
+    for (let step = 0; step < 40 && contrast(current, ground) < ratio; step++) current = mix(current, target, 0.05);
+    return current;
+};
+
+/** Accent tokens for both themes, each at least AA (4.5:1) for text on its ground. */
+export type AccentTokens = { dark: string; darkSoft: string; light: string; lightSoft: string; ink: string };
+
+/** Derives the person's accent tokens from one hex color. */
+export function accentTokens(hex: string): AccentTokens {
+    const base = parse(hex);
+    const dark = reach(base, [255, 255, 255], darkGround, 4.5);
+    const darkSoft = reach(mix(dark, [255, 255, 255], 0.35), [255, 255, 255], darkGround, 7);
+    const light = reach(base, [0, 0, 0], lightGround, 4.5);
+    const lightSoft = reach(mix(light, [0, 0, 0], 0.2), [0, 0, 0], lightGround, 7);
+    const ink = contrast(base, [255, 255, 255]) >= contrast(base, darkGround) ? '#ffffff' : '#0b0a12';
+    return { dark: format(dark), darkSoft: format(darkSoft), light: format(light), lightSoft: format(lightSoft), ink };
+}

package/site/lib/blog.ts

@@ -0,0 +1,58 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// Typed views over the writing captured at build time.
+import type { CastConfig } from '../../config/CastConfig';
+import type { Post as RawPost, WritingSnapshot } from '../../writing/WritingSnapshot';
+
+export type ThemeId = string;
+export type Post = RawPost & { headline: string; series?: string; part?: number; themes: ThemeId[] };
+export type WritingTheme = { id: ThemeId; label: string; tags: string[] };
+
+/** Splits "Title · Series, Part 3" into its parts. */
+function split(title: string): Pick<Post, 'headline' | 'series' | 'part'> {
+    const parts = title.match(/^(.*?)\s+·\s+(.+?),\s+Part\s+(\d+)$/);
+    if (parts) return { headline: parts[1]!, series: parts[2]!, part: Number(parts[3]) };
+    const series = title.match(/^(.*?)\s+·\s+(.+)$/);
+    return series ? { headline: series[1]!, series: series[2]! } : { headline: title };
+}
+
+const hostOf = (url: string): string => {
+    try {
+        return new URL(url).host;
+    } catch {
+        return '';
+    }
+};
+
+/** What the writing sections read. */
+export type WritingView = {
+    /** Reading themes for the filter, each a set of tags, from cast.yaml. */
+    themes: WritingTheme[];
+    /** Newest first; posts published together keep their series order. */
+    posts: Post[];
+    /** The first source, for "on blog.example.com" links. */
+    blogSource: string;
+    blogHost: string;
+    blogFetchedAt?: string;
+    readingMinutes: number;
+    postsFor: (theme: ThemeId | undefined) => Post[];
+};
+
+/** Builds the writing view for one profile. */
+export function writingView(config: CastConfig, writing: WritingSnapshot): WritingView {
+    const themes = config.writing.themes;
+    const posts: Post[] = writing.posts
+        .map(post => ({ ...post, ...split(post.title), themes: themes.filter(theme => post.tags.some(tag => theme.tags.includes(tag))).map(theme => theme.id) }))
+        .sort((left, right) => right.date.slice(0, 10).localeCompare(left.date.slice(0, 10)) || (left.part ?? 0) - (right.part ?? 0));
+    const blogSource = writing.sources[0] ?? '';
+    return {
+        themes,
+        posts,
+        blogSource,
+        blogHost: blogSource ? hostOf(blogSource) : '',
+        ...(writing.fetchedAt ? { blogFetchedAt: writing.fetchedAt } : {}),
+        readingMinutes: posts.reduce((total, post) => total + (post.minutes ?? 0), 0),
+        postsFor: theme => (theme ? posts.filter(post => post.themes.includes(theme)) : []),
+    };
+}

package/site/lib/career.ts

@@ -0,0 +1,148 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { CareerEvent } from '../../config/CastConfig';
+
+/**
+ * The career projection. Every field is derived by folding career events in
+ * stream order; nothing here is hard-coded per position.
+ */
+export type Role = {
+    title: string;
+    org: string;
+    orgUrl?: string | undefined;
+    location?: string | undefined;
+    from: string;
+    to?: string | undefined;
+    summary: string;
+    skills: string[];
+};
+
+export type CareerProjection = {
+    /** Number of events applied (stream position). */
+    position: number;
+    lastEvent: CareerEvent | undefined;
+    /** Latest event date seen; monotonic, so year-only dates never move time backwards. */
+    clock: string | undefined;
+    /** Date of the first event that is not education. */
+    shippingSince: string | undefined;
+    currentRole: Role | undefined;
+    /** Every role still open, newest first. */
+    currentRoles: Role[];
+    roles: Role[];
+    affiliations: string[];
+    skills: string[];
+    /** Skills introduced by the last applied event. */
+    newSkills: string[];
+    eventTypes: Record<string, number>;
+};
+
+/** Event types that mean "joined an organization". Presentation rule only. */
+const AFFILIATION_EVENTS = new Set([
+    'StudiesStarted',
+    'VolunteerTeamJoined',
+    'PartTimeRoleStarted',
+    'ContractStarted',
+    'EmploymentStarted',
+    'CompanyCoFounded',
+]);
+
+const EDUCATION_EVENTS = new Set(['StudiesStarted', 'DegreeCompleted', 'CertificationsEarned']);
+
+export const initialProjection: CareerProjection = {
+    position: 0,
+    lastEvent: undefined,
+    clock: undefined,
+    shippingSince: undefined,
+    currentRole: undefined,
+    currentRoles: [],
+    roles: [],
+    affiliations: [],
+    skills: [],
+    newSkills: [],
+    eventTypes: {},
+};
+
+/** Normalizes 'YYYY' and 'YYYY-MM' to a sortable 'YYYY-MM'. */
+export const normalizeDate = (date: string): string => (date.length === 4 ? `${date}-01` : date);
+
+const later = (a: string | undefined, b: string): string => (!a || b > a ? b : a);
+
+/** Pure reducer: applies one event to a projection. */
+export function apply(state: CareerProjection, event: CareerEvent): CareerProjection {
+    const date = normalizeDate(event.date);
+
+    let roles = state.roles;
+    if (event.endsRole) {
+        roles = roles.map((r) => (r.org === event.endsRole && !r.to ? { ...r, to: event.date } : r));
+    }
+    if (event.role && event.org) {
+        roles = [
+            ...roles,
+            {
+                title: event.role,
+                org: event.org,
+                orgUrl: event.orgUrl,
+                location: event.location,
+                from: event.date,
+                summary: event.summary,
+                skills: event.skills ?? [],
+            },
+        ];
+    }
+
+    const currentRoles = [...roles].reverse().filter((r) => !r.to);
+    const currentRole = currentRoles[0];
+
+    const affiliations =
+        event.org && AFFILIATION_EVENTS.has(event.type) && !state.affiliations.includes(event.org)
+            ? [...state.affiliations, event.org]
+            : state.affiliations;
+
+    const newSkills = (event.skills ?? []).filter((s) => !state.skills.includes(s));
+
+    return {
+        position: state.position + 1,
+        lastEvent: event,
+        clock: later(state.clock, date),
+        shippingSince: state.shippingSince ?? (EDUCATION_EVENTS.has(event.type) ? undefined : date),
+        currentRole,
+        currentRoles,
+        roles,
+        affiliations,
+        skills: [...state.skills, ...newSkills],
+        newSkills,
+        eventTypes: { ...state.eventTypes, [event.type]: (state.eventTypes[event.type] ?? 0) + 1 },
+    };
+}
+
+/** Replays the first `position` events of a stream. */
+export const project = (events: readonly CareerEvent[], position = events.length): CareerProjection =>
+    events.slice(0, position).reduce(apply, initialProjection);
+
+const monthIndex = (date: string): number => {
+    const [y, m] = normalizeDate(date).split('-').map(Number);
+    return (y ?? 0) * 12 + ((m ?? 1) - 1);
+};
+
+/** Years between two YYYY-MM dates, one decimal. */
+export const yearsBetween = (from: string | undefined, to: string | undefined): number =>
+    from && to ? Math.max(0, Math.round(((monthIndex(to) - monthIndex(from)) / 12) * 10) / 10) : 0;
+
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+/** 'YYYY-MM' -> 'Jun 2025', 'YYYY' -> '2025'. */
+export function formatMonth(date: string): string {
+    if (date.length === 4) return date;
+    const [y, m] = date.split('-');
+    return `${MONTHS[Number(m) - 1] ?? ''} ${y}`;
+}
+
+/** "also Co-founder & Chief Architect · Cratis" for the open roles beyond the newest one. */
+export const alsoText = (state: CareerProjection): string =>
+    state.currentRoles.length > 1
+        ? `also ${state.currentRoles
+                .slice(1)
+                .map((r) => `${r.title} · ${r.org}`)
+                .join(', ')}`
+        : '';

package/site/lib/clipboard.ts

@@ -0,0 +1,12 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** Copies text with the async Clipboard API. Returns false when the browser refuses. */
+export async function copyText(text: string): Promise<boolean> {
+    try {
+        await navigator.clipboard.writeText(text);
+        return true;
+    } catch {
+        return false;
+    }
+}

package/site/lib/contributions.ts

@@ -0,0 +1,63 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// Folds the contribution calendar from the GitHub snapshot into what the heatmap shows.
+import type { Week } from './github';
+
+export type Day = { date: string; count: number; level: 0 | 1 | 2 | 3 | 4; week: number; weekday: number };
+
+const DAY_MS = 86_400_000;
+const iso = (t: number) => new Date(t).toISOString().slice(0, 10);
+
+export function foldCalendar(weeks: Week[]) {
+    const days: Day[] = [];
+    weeks.forEach((w, wi) => {
+        const start = Date.parse(`${w.start}T00:00:00Z`);
+        const offset = new Date(start).getUTCDay();
+        w.counts.forEach((count, i) =>
+            days.push({ date: iso(start + i * DAY_MS), count, level: 0, week: wi, weekday: (offset + i) % 7 }),
+        );
+    });
+
+    // Intensity levels from quartiles of active days, so one huge day does not wash out the rest.
+    const active = days.map((d) => d.count).filter((n) => n > 0).sort((a, b) => a - b);
+    const q = (p: number) => active[Math.min(active.length - 1, Math.floor(active.length * p))] ?? 1;
+    const [q1, q2, q3] = [q(0.25), q(0.5), q(0.75)];
+    for (const d of days) d.level = d.count === 0 ? 0 : d.count <= q1 ? 1 : d.count <= q2 ? 2 : d.count <= q3 ? 3 : 4;
+
+    let longest = 0;
+    let run = 0;
+    for (const d of days) {
+        run = d.count > 0 ? run + 1 : 0;
+        longest = Math.max(longest, run);
+    }
+    // Current streak: today may not have contributions yet, so it does not break the streak.
+    let current = 0;
+    for (let i = days.length - 1; i >= 0; i--) {
+        const d = days[i]!;
+        if (d.count > 0) current++;
+        else if (i !== days.length - 1) break;
+    }
+    const busiest = days.reduce((best, d) => (d.count > best.count ? d : best), days[0] ?? { date: '', count: 0 } as Day);
+
+    const months = new Map<string, number>();
+    for (const d of days) months.set(d.date.slice(0, 7), (months.get(d.date.slice(0, 7)) ?? 0) + d.count);
+
+    return {
+        days,
+        weekCount: weeks.length,
+        activeDays: active.length,
+        longest,
+        current,
+        busiest,
+        months: [...months.entries()].map(([month, total]) => ({ month, total })),
+        first: days[0]?.date ?? '',
+        last: days[days.length - 1]?.date ?? '',
+    };
+}
+
+export const formatDay = (date: string): string =>
+    new Date(`${date}T00:00:00Z`).toLocaleDateString('en-US', { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric', timeZone: 'UTC' });
+
+export const formatMonthLong = (month: string): string =>
+    new Date(`${month}-01T00:00:00Z`).toLocaleDateString('en-US', { month: 'long', year: 'numeric', timeZone: 'UTC' });

package/site/lib/github.ts

@@ -0,0 +1,72 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// Typed views over the GitHub data captured at build time.
+import type { z } from 'zod';
+import type { CastConfig } from '../../config/CastConfig';
+import type { cratisRepositorySchema, projectSchema } from '../../config/castSchema';
+import type { GitHubSnapshot } from '../../github/GitHubSnapshot';
+
+export type { PullRequest, ContributionWeek as Week } from '../../github/GitHubSnapshot';
+export type CratisRepo = z.output<typeof cratisRepositorySchema> & { role: string };
+export type Project = z.output<typeof projectSchema>;
+
+const roleFor = (repo: z.output<typeof cratisRepositorySchema>, rank: number): string =>
+    repo.founded
+        ? (rank === 1 ? 'Founder & lead' : 'Founder')
+        : rank === 1
+            ? (repo.role?.startsWith('#') ? '#1 committer' : 'Lead developer')
+            : rank === 2
+                ? (repo.group === 'client' ? '#2 contributor' : '#2 all-time')
+                : 'Contributor';
+
+/** owner/name of a github.com URL. */
+export const repositoryOf = (url: string): string | undefined => url.match(/^https:\/\/github\.com\/([^/]+\/[^/#?]+)/i)?.[1];
+
+/** Formats a capture date as "Oct 16, 2026", or "the last build" when unknown. */
+export const formatSnapshotDate = (date: string | undefined): string =>
+    date ? new Date(date).toLocaleDateString('en-US', { day: 'numeric', month: 'short', year: 'numeric', timeZone: 'UTC' }) : 'the last build';
+
+/** What the sections read from the GitHub snapshot, with cast.yaml values as fallbacks. */
+export type GitHubView = {
+    github: GitHubSnapshot;
+    /** Merged pull requests across the configured organizations, falling back to a stat written in cast.yaml. */
+    mergedPrTotal: number;
+    /** Floors to hundreds for an honest "3,100+" style figure. */
+    mergedPrFloor: number;
+    /** Per-repository figures prefer the snapshot; values written in cast.yaml are fallbacks only. */
+    cratisRepos: CratisRepo[];
+    /** Projects with versions taken from the latest GitHub release when one was captured. */
+    liveProjects: Project[];
+    /** Stars for an owner/name, if tracked. */
+    starsFor: (repository: string) => number | undefined;
+    /** The capture date of a snapshot, by default this one. */
+    snapshotDate: (date?: string) => string;
+    /** Repository names in the live feed, most recent first, without duplicates. */
+    liveRepos: string[];
+};
+
+/** Builds the GitHub view for one profile. */
+export function gitHubView(config: CastConfig, github: GitHubSnapshot): GitHubView {
+    const mergedPrTotal = github.mergedPullRequests.total || (config.stats.find(stat => stat.live === 'mergedPullRequests')?.value ?? 0);
+    const cratisRepos = (config.cratis?.repos ?? []).map(repo => {
+        const counts = repo.url ? github.repositories[`Cratis/${repo.name}`] : undefined;
+        if (!counts) return { ...repo, role: repo.role ?? roleFor(repo, repo.rank) };
+        return { ...repo, ...counts, role: roleFor(repo, counts.rank) };
+    });
+    const liveProjects = config.projects.map(project => {
+        const repository = repositoryOf(project.url);
+        const release = repository ? Object.entries(github.releases).find(([name]) => name.toLowerCase() === repository.toLowerCase())?.[1] : undefined;
+        return release ? { ...project, version: release.tag } : project;
+    });
+    return {
+        github,
+        mergedPrTotal,
+        mergedPrFloor: mergedPrTotal >= 100 ? Math.floor(mergedPrTotal / 100) * 100 : mergedPrTotal,
+        cratisRepos,
+        liveProjects,
+        starsFor: repository => Object.entries(github.stars).find(([name]) => name.toLowerCase() === repository.toLowerCase())?.[1],
+        snapshotDate: (date = github.fetchedAt) => formatSnapshotDate(date),
+        liveRepos: [...new Set(github.mergedPullRequests.latest.map(pullRequest => pullRequest.repository.split('/')[1] ?? pullRequest.repository))],
+    };
+}

package/site/lib/inline.ts

@@ -0,0 +1,79 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** One piece of inline text: plain text, or markup with its own pieces inside. */
+export type InlineToken =
+    | { kind: 'text'; text: string }
+    | { kind: 'code'; text: string }
+    | { kind: 'em' | 'strong'; children: InlineToken[] }
+    | { kind: 'link'; href: string; children: InlineToken[] };
+
+type Pattern = { kind: 'code' | 'link' | 'strong' | 'em'; expression: RegExp };
+
+/** In order of precedence when two start at the same position. */
+const patterns: Pattern[] = [
+    { kind: 'code', expression: /`([^`]+)`/g },
+    { kind: 'link', expression: /\[([^\]]+)\]\(([^)\s]+)\)/g },
+    { kind: 'strong', expression: /\*\*([^*]+)\*\*/g },
+    { kind: 'em', expression: /\*([^*]+)\*/g },
+];
+
+/** Link targets inline text may use: http(s), mailto, a path or an anchor. Anything else stays plain text. */
+const allowedHref = /^(https?:\/\/[^\s]+|mailto:[^\s]+|\/[^\s]*|#[^\s]*)$/i;
+
+/**
+ * Parses the inline markup cast.yaml text may use into tokens: `*emphasis*` (the italic serif accent),
+ * `**strong**`, `` `code` `` and `[links](https://…)`. Tokens are rendered as elements with escaped text,
+ * never as HTML, so markup in member text cannot inject anything. Links to other schemes stay plain text.
+ */
+export function parseInline(text: string): InlineToken[] {
+    const tokens: InlineToken[] = [];
+    let position = 0;
+    while (position < text.length) {
+        let best: { pattern: Pattern; match: RegExpExecArray } | undefined;
+        for (const pattern of patterns) {
+            pattern.expression.lastIndex = position;
+            const match = pattern.expression.exec(text);
+            if (match && (!best || match.index < best.match.index)) best = { pattern, match };
+        }
+        if (!best) break;
+        const { pattern, match } = best;
+        if (match.index > position) tokens.push({ kind: 'text', text: text.slice(position, match.index) });
+        const inner = match[1]!;
+        if (pattern.kind === 'code') tokens.push({ kind: 'code', text: inner });
+        else if (pattern.kind === 'link') {
+            const href = match[2]!;
+            if (allowedHref.test(href)) tokens.push({ kind: 'link', href, children: parseInline(inner) });
+            else tokens.push({ kind: 'text', text: match[0] });
+        } else tokens.push({ kind: pattern.kind, children: parseInline(inner) });
+        position = match.index + match[0].length;
+    }
+    if (position < text.length) tokens.push({ kind: 'text', text: text.slice(position) });
+    return tokens;
+}
+
+const escapeHtml = (value: string): string =>
+    value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+
+const linkClass = 'text-fg underline decoration-line-strong hover:decoration-fg';
+
+/**
+ * Renders inline markup to an HTML string with everything escaped, for outputs that are not Astro components.
+ * Components render `Inline.astro`, which builds elements from the same tokens.
+ */
+export function renderInline(text: string, emphasisClass = 'serif'): string {
+    const render = (tokens: InlineToken[]): string => tokens.map(token => {
+        switch (token.kind) {
+            case 'text': return escapeHtml(token.text);
+            case 'code': return `<code class="inline-code">${escapeHtml(token.text)}</code>`;
+            case 'strong': return `<strong class="text-fg font-semibold">${render(token.children)}</strong>`;
+            case 'em': return `<em class="${escapeHtml(emphasisClass)}">${render(token.children)}</em>`;
+            case 'link': return `<a href="${escapeHtml(token.href)}" class="${linkClass}"${/^https?:/i.test(token.href) ? ' rel="noopener"' : ''}>${render(token.children)}</a>`;
+        }
+    }).join('');
+    return render(parseInline(text));
+}
+
+/** Removes inline markup, for meta tags, JSON and plain-text outputs. */
+export const plainText = (text: string): string =>
+    text.replace(/`([^`]+)`/g, '$1').replace(/\[([^\]]+)\]\([^)]+\)/g, '$1').replace(/\*\*([^*]+)\*\*/g, '$1').replace(/\*([^*]+)\*/g, '$1');

package/site/lib/lifecycle.ts

@@ -0,0 +1,44 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// Page lifecycle that works with and without Astro's <ClientRouter />.
+//
+// With the router, module scripts run once per full load while the DOM is swapped on
+// every navigation. `onPageLoad` runs `init` for every page view (initial and after each
+// navigation) and runs the returned cleanup before the next swap, so nothing double-binds
+// and observers on detached elements are released.
+type Cleanup = (() => void) | void;
+
+const routerActive = () => !!document.querySelector('meta[name="astro-view-transitions-enabled"]');
+
+export function onPageLoad(init: () => Cleanup): void {
+    let cleanup: Cleanup;
+    const run = () => {
+        cleanup?.();
+        cleanup = init();
+    };
+    document.addEventListener('astro:page-load', run);
+    document.addEventListener('astro:before-swap', () => {
+        cleanup?.();
+        cleanup = undefined;
+    });
+    if (!routerActive()) run();
+}
+
+/** Collects teardown callbacks for one page view. */
+export function disposer() {
+    const fns: (() => void)[] = [];
+    return {
+        add<T extends () => void>(fn: T): T {
+            fns.push(fn);
+            return fn;
+        },
+        /** addEventListener that is removed on dispose. */
+        on<E extends Event = Event>(target: EventTarget, type: string, fn: (e: E) => void, opts?: AddEventListenerOptions): void {
+            const listener = fn as unknown as EventListener;
+            target.addEventListener(type, listener, opts);
+            fns.push(() => target.removeEventListener(type, listener, opts));
+        },
+        dispose: () => fns.splice(0).forEach((fn) => fn()),
+    };
+}

package/site/lib/motion.ts

@@ -0,0 +1,43 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+const KEY = 'cast:motion';
+const query = typeof window !== 'undefined' ? window.matchMedia('(prefers-reduced-motion: reduce)') : undefined;
+
+/** True when the OS asks for reduced motion or the visitor turned motion off. */
+export function motionReduced(): boolean {
+    if (typeof document === 'undefined') return true;
+    const pref = document.documentElement.dataset['motion'];
+    if (pref === 'reduced') return true;
+    if (pref === 'full') return false;
+    return query?.matches ?? false;
+}
+
+type Listener = (reduced: boolean) => void;
+const listeners = new Set<Listener>();
+
+export function onMotionChange(listener: Listener): () => void {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+}
+
+const notify = () => {
+    const reduced = motionReduced();
+    document.documentElement.classList.toggle('js-motion', !reduced);
+    listeners.forEach((l) => l(reduced));
+};
+
+query?.addEventListener('change', notify);
+
+/** Toggles the visitor's motion preference and persists it. */
+export function toggleMotion(): boolean {
+    const next = motionReduced() ? 'full' : 'reduced';
+    document.documentElement.dataset['motion'] = next;
+    try {
+        localStorage.setItem(KEY, next);
+    } catch {
+        /* storage may be unavailable */
+    }
+    notify();
+    return next === 'reduced';
+}

package/site/lib/nav.ts

@@ -0,0 +1,49 @@
+// 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';
+
+/** 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> {
+    if (document.querySelector('meta[name="astro-view-transitions-enabled"]')) {
+        const { navigate } = await import('astro:transitions/client');
+        await navigate(href);
+    } else {
+        location.href = href;
+    }
+}
+
+/** Scrolls to a home-page section and moves focus to its heading. */
+export function goSection(id: string): void {
+    const el = document.getElementById(id);
+    if (onHome() && el) {
+        el.scrollIntoView({ behavior: motionReduced() ? 'auto' : 'smooth', block: 'start' });
+        history.replaceState(history.state, '', `#${id}`);
+        const focusTarget = el.querySelector<HTMLElement>('h2') ?? el;
+        focusTarget.setAttribute('tabindex', '-1');
+        focusTarget.focus({ preventScroll: true });
+    } else {
+        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(profilePath('?replay#career'));
+}
+
+export const openExternal = (url: string): void => void window.open(url, '_blank', 'noopener');

package/site/lib/reltime.ts

@@ -0,0 +1,33 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+const rtf = typeof Intl !== 'undefined' ? new Intl.RelativeTimeFormat('en', { numeric: 'auto' }) : undefined;
+const UNITS: [Intl.RelativeTimeFormatUnit, number][] = [
+    ['year', 31_536_000_000],
+    ['month', 2_592_000_000],
+    ['week', 604_800_000],
+    ['day', 86_400_000],
+    ['hour', 3_600_000],
+    ['minute', 60_000],
+];
+
+/** "3 days ago" style text for an ISO timestamp, relative to `now`. */
+export function relativeTime(iso: string, now = Date.now()): string {
+    const diff = Date.parse(iso) - now;
+    for (const [unit, ms] of UNITS) {
+        if (Math.abs(diff) >= ms || unit === 'minute') {
+            return rtf?.format(Math.round(diff / ms), unit) ?? new Date(iso).toDateString();
+        }
+    }
+    return iso;
+}
+
+/** Replaces the build-time text of every <time data-rel> with a live relative time. */
+export function hydrateRelativeTimes(root: ParentNode = document): void {
+    root.querySelectorAll<HTMLTimeElement>('time[data-rel]').forEach((el) => {
+        const iso = el.dateTime;
+        if (!iso) return;
+        el.title ||= new Date(iso).toLocaleString('en-US', { dateStyle: 'medium', timeStyle: 'short' });
+        el.textContent = relativeTime(iso);
+    });
+}