@cratis/cast 0.0.1 → 0.1.0

package/site/scripts/live.ts

@@ -0,0 +1,145 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// Public, unauthenticated home-page refresh. Snapshot rendering never depends on it.
+import { onPageLoad } from '../lib/lifecycle';
+import { relativeTime } from '../lib/reltime';
+import type { PullRequest } from '../lib/github';
+import { config } from '../data';
+
+type SearchItem = { repository_url?: string; pull_request?: { merged_at?: string }; title?: unknown; number?: unknown; html_url?: string };
+type SearchResponse = { total_count?: unknown; incomplete_results?: boolean; items?: unknown };
+type PublicEvent = { type?: string; repo?: { name?: string }; created_at?: string; payload?: { action?: string; ref_type?: string; pull_request?: { merged?: boolean } } };
+
+const login = encodeURIComponent(config.github.login);
+const orgs = config.github.orgs;
+const orgPattern = new RegExp(`^https://api\\.github\\.com/repos/(${orgs.map(org => org.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')})/([^/]+)$`, 'i');
+
+const TTL = 5 * 60_000;
+type Merged = { total: number; latest: PullRequest[] };
+type Activity = { type: string; repo: string; at: string };
+let merged: { at: number; data: Merged } | undefined;
+const pending = new Map<string, Promise<unknown>>();
+
+export const getLiveMerged = (): Merged | undefined => merged && Date.now() - merged.at < TTL ? merged.data : undefined;
+
+async function cached<T>(key: string, path: string, parse: (data: unknown) => T): Promise<T> {
+    try {
+        const entry = JSON.parse(sessionStorage.getItem(`github:${key}`) ?? 'null');
+        if (entry && Date.now() - entry.at >= 0 && Date.now() - entry.at < TTL) return parse(entry.data);
+    } catch { /* Storage may be disabled; the snapshot still works. */ }
+    const existing = pending.get(key);
+    if (existing) return existing as Promise<T>;
+    const request = (async () => {
+        const res = await fetch(`https://api.github.com${path}`, { signal: AbortSignal.timeout(8000) });
+        if (res.status !== 200) throw new Error('GitHub unavailable');
+        const data: unknown = await res.json();
+        const parsed = parse(data);
+        try { sessionStorage.setItem(`github:${key}`, JSON.stringify({ at: Date.now(), data })); } catch { /* Optional cache. */ }
+        return parsed;
+    })();
+    pending.set(key, request);
+    try { return await request; } finally { pending.delete(key); }
+}
+
+function parseMerged(raw: unknown): Merged {
+    const data = raw as SearchResponse | null;
+    const total = data?.total_count;
+    if (typeof total !== 'number' || !Number.isSafeInteger(total) || total < 0 || data?.incomplete_results || !Array.isArray(data?.items)) throw new Error('Invalid search');
+    const latest: PullRequest[] = (data.items as SearchItem[]).flatMap((item) => {
+        const match = orgPattern.exec(item?.repository_url ?? '');
+        const at = item?.pull_request?.merged_at ?? '';
+        if (!match || !Number.isFinite(Date.parse(at)) || typeof item.title !== 'string' || typeof item.number !== 'number' || !Number.isSafeInteger(item.number)) return [];
+        const repository = `${match[1]}/${match[2]}`;
+        if (item.html_url?.toLowerCase() !== `https://github.com/${repository}/pull/${item.number}`.toLowerCase()) return [];
+        return [{ title: item.title, repository, number: item.number, url: item.html_url, mergedAt: at }];
+    }).sort((a, b) => b.mergedAt.localeCompare(a.mergedAt));
+    return { total, latest };
+}
+
+function parseEvents(raw: unknown): Activity[] {
+    if (!Array.isArray(raw)) throw new Error('Invalid events');
+    return (raw as PublicEvent[]).flatMap((event) => {
+        if (!event?.repo?.name || !event.created_at || !Number.isFinite(Date.parse(event.created_at))) return [];
+        const p = event.payload ?? {};
+        let type: string | undefined;
+        switch (event.type) {
+            case 'PushEvent': type = 'CommitsPushed'; break;
+            case 'PullRequestEvent': if (p.action === 'closed' && p.pull_request?.merged) type = 'PullRequestMerged'; break;
+            case 'CreateEvent': type = p.ref_type === 'branch' ? 'BranchCreated' : p.ref_type === 'tag' ? 'TagCreated' : undefined; break;
+            case 'ReleaseEvent': if (p.action === 'published') type = 'ReleasePublished'; break;
+            case 'IssuesEvent': type = p.action === 'opened' ? 'IssueOpened' : p.action === 'closed' ? 'IssueClosed' : undefined; break;
+            case 'IssueCommentEvent': if (p.action === 'created') type = 'CommentAdded'; break;
+            case 'PullRequestReviewEvent': if (p.action === 'submitted') type = 'ReviewSubmitted'; break;
+        }
+        return type ? [{ type, repo: event.repo.name, at: event.created_at }] : [];
+    }).sort((a: Activity, b: Activity) => b.at.localeCompare(a.at));
+}
+
+function renderMerged(data: Merged): void {
+    const fmt = new Intl.NumberFormat('en-US');
+    document.querySelectorAll<HTMLElement>('[data-merged-prs]').forEach((el) => {
+        const kind = el.dataset['mergedPrs'];
+        el.dataset['live'] = 'true'; // Supersede any snapshot count-up animation.
+        el.textContent = fmt.format(kind === 'exact' || data.total < 100 ? data.total : Math.floor(data.total / 100) * 100) + (kind === 'floor' && data.total >= 100 ? '+' : '');
+    });
+    document.querySelectorAll('[data-pr-status]').forEach((el) => { el.textContent = 'live'; });
+    const list = document.querySelector('[data-pr-feed]');
+    const template = document.querySelector<HTMLTemplateElement>('[data-pr-template]');
+    if (!list || !template || !data.latest.length) return;
+    const rows = data.latest.slice(0, 8).map((pr, i) => {
+        const row = template.content.firstElementChild!.cloneNode(true) as HTMLElement;
+        row.style.setProperty('--i', String(i));
+        const set = (selector: string, text: string) => { row.querySelector(selector)!.textContent = text; };
+        row.querySelector('a')!.href = pr.url;
+        set('[data-pr-head]', i === 0 ? 'HEAD' : `HEAD~${i}`);
+        set('[data-pr-repo]', pr.repository);
+        set('[data-pr-number]', `#${pr.number}`);
+        set('[data-pr-title]', pr.title);
+        const time = row.querySelector('time')!;
+        time.dateTime = pr.mergedAt;
+        time.textContent = relativeTime(pr.mergedAt);
+        return row;
+    });
+    list.replaceChildren(...rows);
+}
+
+onPageLoad(() => {
+    if (!document.querySelector('[data-hero]')) return;
+    let active = true;
+    let idle: number | undefined;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    const refresh = () => {
+        if (!active || document.visibilityState !== 'visible') return;
+        void cached('merged', `/search/issues?q=author:${login}+${orgs.map(org => `org:${encodeURIComponent(org)}`).join('+')}+is:public+is:pr+is:merged&sort=updated&order=desc&per_page=12`, parseMerged)
+            .then((data) => {
+                merged = { at: Date.now(), data };
+                if (active && document.visibilityState === 'visible') renderMerged(data);
+            }).catch(() => { /* Quietly keep the build-time snapshot. */ });
+        void cached('events', `/users/${login}/events/public?per_page=30`, parseEvents)
+            .then((events) => {
+                if (!active || document.visibilityState !== 'visible' || !events.length) return;
+                const event = events[0]!;
+                const el = document.querySelector('[data-public-event]');
+                if (el) {
+                    el.textContent = `last event ${relativeTime(event.at)}`;
+                    el.setAttribute('title', `${event.type} · ${event.repo} · ${event.at}`);
+                }
+                const status = document.querySelector('[data-event-status]');
+                if (status) status.textContent = 'live';
+            }).catch(() => { /* Quietly keep the career-stream position. */ });
+    };
+    const schedule = () => {
+        if (document.visibilityState !== 'visible' || idle !== undefined || timer !== undefined) return;
+        if ('requestIdleCallback' in window) idle = window.requestIdleCallback(() => { idle = undefined; refresh(); });
+        else timer = setTimeout(() => { timer = undefined; refresh(); }, 0);
+    };
+    document.addEventListener('visibilitychange', schedule);
+    schedule();
+    return () => {
+        active = false;
+        document.removeEventListener('visibilitychange', schedule);
+        if (idle !== undefined) window.cancelIdleCallback(idle);
+        if (timer !== undefined) clearTimeout(timer);
+    };
+});

package/site/scripts/palette.ts

@@ -0,0 +1,296 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// ⌘K command palette: fuzzy filtering, full keyboard navigation, focus return.
+import { person, sections, profileLinks, cratis, eventModel } from '../data';
+import { anchorFor } from '../lib/sections';
+import { copyText } from '../lib/clipboard';
+import { motionReduced, toggleMotion } from '../lib/motion';
+import { currentTheme, toggleTheme } from '../lib/theme';
+import { go, goSection, openExternal, startReplay } from '../lib/nav';
+
+type Kind = 'command' | 'event' | 'view';
+type Item = {
+    id: string;
+    group: 'Navigate' | 'Actions' | 'Links';
+    label: string;
+    keywords?: string;
+    kind: Kind;
+    hint?: () => string;
+    run: () => void | Promise<void>;
+};
+
+const SWATCH: Record<Kind, string> = {
+    command: 'var(--color-command)',
+    event: 'var(--color-event)',
+    view: 'var(--color-view)',
+};
+
+const open = openExternal;
+
+/** Subsequence match with bonuses for word starts and contiguous runs. */
+export function fuzzyScore(query: string, text: string): number {
+    const q = query.toLowerCase().trim();
+    if (!q) return 1;
+    const t = text.toLowerCase();
+    if (t.includes(q)) return 100 - t.indexOf(q);
+    let score = 0;
+    let ti = 0;
+    let run = 0;
+    let first = -1;
+    const chars = q.replace(/\s+/g, '');
+    for (const ch of chars) {
+        const found = t.indexOf(ch, ti);
+        if (found === -1) return 0;
+        if (first === -1) first = found;
+        // Matches scattered across the whole string are noise, not intent.
+        if (found - first > chars.length * 3 + 2) return 0;
+        const wordStart = found === 0 || /[\s\-/.]/.test(t[found - 1] ?? '');
+        run = found === ti ? run + 1 : 0;
+        score += 1 + (wordStart ? 3 : 0) + run * 2;
+        ti = found + 1;
+    }
+    return score;
+}
+
+export function mountPalette(): void {
+    const dialog = document.querySelector<HTMLDialogElement>('[data-palette]');
+    const input = dialog?.querySelector<HTMLInputElement>('[data-palette-input]');
+    const list = dialog?.querySelector<HTMLUListElement>('[data-palette-list]');
+    if (!dialog || !input || !list) return;
+
+    let toast: HTMLElement | null = null;
+    const notify = (msg: string) => {
+        toast?.remove();
+        toast = document.createElement('div');
+        toast.setAttribute('role', 'status');
+        toast.className =
+            'fixed bottom-6 left-1/2 z-[90] -translate-x-1/2 rounded-full border border-line-strong bg-ink-800/95 px-4 py-2 font-mono text-xs text-fg shadow-2xl backdrop-blur';
+        toast.textContent = msg;
+        document.body.append(toast);
+        const el = toast;
+        window.setTimeout(() => el.remove(), 2200);
+    };
+
+    const allItems: Item[] = [
+        { id: 'about', group: 'Navigate', label: 'Now & about', keywords: 'read model projection photo', kind: 'view', run: () => goSection('about') },
+        { id: 'career', group: 'Navigate', label: 'Career event stream', keywords: 'experience jobs timeline', kind: 'event', run: () => goSection('career') },
+        { id: 'model', group: 'Navigate', label: 'How I think: event model', keywords: `${eventModel?.name ?? ''} event modeling board slice`, kind: 'command', run: () => goSection('model') },
+        { id: 'cratis', group: 'Navigate', label: 'Cratis', keywords: 'open source chronicle arc', kind: 'command', run: () => goSection('cratis') },
+        { id: 'activity', group: 'Navigate', label: 'Contribution event store', keywords: 'github heatmap activity calendar', kind: 'event', run: () => goSection('activity') },
+        { id: 'agentic', group: 'Navigate', label: 'Agentic engineering', keywords: 'ai agents harness pi review workflow', kind: 'view', run: () => goSection('agentic') },
+        { id: 'projects', group: 'Navigate', label: 'Things I build', keywords: 'projects cli agents apps', kind: 'command', run: () => goSection('projects') },
+        { id: 'writing', group: 'Navigate', label: 'Writing', keywords: 'blog posts articles', kind: 'event', run: () => goSection('writing') },
+        { id: 'talks', group: 'Navigate', label: 'Talks & community', keywords: 'webinar conference event modeling', kind: 'event', run: () => goSection('talks') },
+        { id: 'skills', group: 'Navigate', label: 'Skills', keywords: 'toolbox stack', kind: 'view', run: () => goSection('skills') },
+        { id: 'contact', group: 'Navigate', label: 'Contact', keywords: 'email message hire', kind: 'command', run: () => goSection('contact') },
+        { id: 'top', group: 'Navigate', label: 'Back to top', keywords: 'home hero start', kind: 'view', run: () => goSection('top') },
+
+        {
+            id: 'replay', group: 'Actions', label: 'Replay career', keywords: 'play event stream projection', kind: 'event',
+            run: startReplay,
+        },
+        {
+            id: 'terminal', group: 'Actions', label: 'Open terminal', keywords: 'shell console cli bash git log', kind: 'command',
+            hint: () => '`',
+            run: () => void document.dispatchEvent(new CustomEvent('terminal:open')),
+        },
+        { id: 'cv', group: 'Actions', label: 'Open CV', keywords: 'resume curriculum vitae', kind: 'view', run: () => go('/cv') },
+        {
+            id: 'print', group: 'Actions', label: 'Print CV / save as PDF', keywords: 'resume pdf download', kind: 'view',
+            run: () => {
+                if (location.pathname.startsWith('/cv')) window.print();
+                else void go('/cv?print');
+            },
+        },
+        ...(person.email ? [<Item>{
+            id: 'email', group: 'Actions', label: 'Copy email address', keywords: person.email, kind: 'command',
+            hint: () => person.email!,
+            run: async () => notify((await copyText(person.email!)) ? `Copied ${person.email}` : 'Copy failed'),
+        }] : []),
+        {
+            id: 'theme', group: 'Actions', label: 'Toggle light / dark theme', keywords: 'appearance colour color mode', kind: 'view',
+            hint: () => currentTheme(),
+            run: () => notify(`Theme: ${toggleTheme()}`),
+        },
+        {
+            id: 'motion', group: 'Actions', label: 'Toggle motion', keywords: 'animation reduce accessibility', kind: 'command',
+            hint: () => (motionReduced() ? 'off' : 'on'),
+            run: () => notify(toggleMotion() ? 'Motion reduced' : 'Motion on'),
+        },
+
+        ...profileLinks.map((link): Item => ({
+            id: `link-${link.key}`, group: 'Links' as const, label: link.label, keywords: `${link.key} ${person.handle} profile`, kind: 'event',
+            hint: () => link.url.replace(/^https?:\/\//, ''), run: () => open(link.url),
+        })),
+        ...Object.entries(cratis?.links ?? {}).map(([label, url]): Item => ({
+            id: `cratis-${label}`, group: 'Links' as const, label, keywords: 'cratis website docs repositories', kind: 'event', run: () => open(url),
+        })),
+        { id: 'cast', group: 'Links' as const, label: 'Cast verification', keywords: 'badge cratis cast tier verified', kind: 'view', run: () => open(`https://cast.cratis.io/${person.handle.toLowerCase()}`) },
+    ];
+    const items = allItems.filter((item) => item.group !== 'Navigate' || item.id === 'top' || sections.some((section) => anchorFor[section.id] === item.id));
+
+    let results: Item[] = items;
+    let active = 0;
+    let returnFocus: HTMLElement | null = null;
+
+    function render() {
+        const q = input!.value;
+        results = items
+            .map((item) => ({ item, score: fuzzyScore(q, `${item.label} ${item.keywords ?? ''}`) * (fuzzyScore(q, item.label) ? 2 : 1) }))
+            .filter((r) => r.score > 0)
+            .sort((a, b) => (q ? b.score - a.score : 0))
+            .map((r) => r.item);
+        active = Math.min(active, Math.max(0, results.length - 1));
+
+        list!.replaceChildren();
+        if (!results.length) {
+            const li = document.createElement('li');
+            li.className = 'px-3 py-8 text-center font-mono text-sm text-fg-faint';
+            li.setAttribute('role', 'presentation');
+            li.textContent = 'EventNotFound: no matching commands';
+            list!.append(li);
+            input!.removeAttribute('aria-activedescendant');
+            return;
+        }
+        let lastGroup = '';
+        results.forEach((item, i) => {
+            if (!q && item.group !== lastGroup) {
+                lastGroup = item.group;
+                const g = document.createElement('li');
+                g.className = 'grp';
+                g.setAttribute('role', 'presentation');
+                g.textContent = item.group;
+                list!.append(g);
+            }
+            const li = document.createElement('li');
+            li.id = `pal-${item.id}`;
+            li.setAttribute('role', 'option');
+            li.setAttribute('aria-selected', String(i === active));
+            li.dataset['index'] = String(i);
+            const sw = document.createElement('span');
+            sw.className = 'sw';
+            sw.style.background = SWATCH[item.kind];
+            sw.setAttribute('aria-hidden', 'true');
+            const label = document.createElement('span');
+            label.textContent = item.label;
+            li.append(sw, label);
+            const hint = item.hint?.();
+            if (hint) {
+                const h = document.createElement('span');
+                h.className = 'hint';
+                h.textContent = hint;
+                li.append(h);
+            }
+            list!.append(li);
+        });
+        syncActive();
+    }
+
+    function syncActive() {
+        list!.querySelectorAll<HTMLElement>('[role="option"]').forEach((el) => {
+            const on = Number(el.dataset['index']) === active;
+            el.setAttribute('aria-selected', String(on));
+            if (on) {
+                input!.setAttribute('aria-activedescendant', el.id);
+                el.scrollIntoView({ block: 'nearest' });
+            }
+        });
+    }
+
+    function show() {
+        if (dialog!.open) return;
+        returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        input!.value = '';
+        active = 0;
+        render();
+        dialog!.showModal();
+        document.documentElement.style.overflow = 'hidden';
+        input!.focus();
+    }
+
+    function hide() {
+        if (dialog!.open) dialog!.close();
+    }
+
+    dialog.addEventListener('close', () => {
+        document.documentElement.style.overflow = '';
+        returnFocus?.focus({ preventScroll: true });
+    });
+
+    async function runActive(index = active) {
+        const item = results[index];
+        if (!item) return;
+        // Navigation moves focus to the target section; everything else returns focus.
+        if (item.group === 'Navigate' || item.id === 'replay' || item.id === 'terminal') returnFocus = null;
+        hide();
+        await item.run();
+    }
+
+    input.addEventListener('input', () => {
+        active = 0;
+        render();
+    });
+
+    input.addEventListener('keydown', (e) => {
+        if (e.key === 'ArrowDown' || (e.key === 'n' && e.ctrlKey)) {
+            e.preventDefault();
+            active = (active + 1) % Math.max(1, results.length);
+            syncActive();
+        } else if (e.key === 'ArrowUp' || (e.key === 'p' && e.ctrlKey)) {
+            e.preventDefault();
+            active = (active - 1 + results.length) % Math.max(1, results.length);
+            syncActive();
+        } else if (e.key === 'Home' && e.ctrlKey) {
+            active = 0;
+            syncActive();
+        } else if (e.key === 'Enter') {
+            e.preventDefault();
+            void runActive();
+        }
+    });
+
+    // Keep Tab inside the dialog (the input and close button are the only stops).
+    dialog.addEventListener('keydown', (e) => {
+        if (e.key !== 'Tab') return;
+        const stops = [...dialog.querySelectorAll<HTMLElement>('input, button')];
+        const first = stops[0];
+        const last = stops[stops.length - 1];
+        if (e.shiftKey && document.activeElement === first) {
+            e.preventDefault();
+            last?.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+            e.preventDefault();
+            first?.focus();
+        }
+    });
+
+    list.addEventListener('click', (e) => {
+        const li = (e.target as Element).closest<HTMLElement>('[role="option"]');
+        if (li) void runActive(Number(li.dataset['index']));
+    });
+    list.addEventListener('pointermove', (e) => {
+        const li = (e.target as Element).closest<HTMLElement>('[role="option"]');
+        const i = Number(li?.dataset['index']);
+        if (li && i !== active) {
+            active = i;
+            syncActive();
+        }
+    });
+
+    dialog.addEventListener('click', (e) => {
+        if (e.target === dialog) hide();
+    });
+    dialog.querySelector('[data-palette-close]')?.addEventListener('click', hide);
+
+    document.addEventListener('click', (e) => {
+        if ((e.target as Element).closest('[data-palette-open]')) show();
+    });
+    document.addEventListener('keydown', (e) => {
+        if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+            e.preventDefault();
+            if (dialog.open) hide();
+            else show();
+        }
+    });
+}