Something went wrong. Try again.
My website. cameron.stream
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149import assert from "node:assert/strict";import { readFile } from "node:fs/promises";import test from "node:test";import { renderToReadableStream } from "hono/jsx/streaming";import { otherEntries } from "./components/other-index.tsx";import { PageNav } from "./components/page-nav.tsx";import { Site } from "./components/site.tsx";import { ServicesContent } from "./components/services.tsx";import { Shell } from "./components/shell.tsx";import { Webring } from "./components/webring.tsx";
async function render(component: Parameters<typeof renderToReadableStream>[0]): Promise<string> { return new Response(renderToReadableStream(component)).text();}
test("site navigation keeps Services under Other", async () => { const html = await render(<PageNav profile={null} active="other" />); const labels = [...html.matchAll(/<a href="[^"]+"[^>]*>([^<]+)<\/a>/g)].map((match) => match[1]);
assert.deepEqual(labels, ["About", "Blog", "Code", "Knowledge", "Other"]); assert.doesNotMatch(html, /href="\/services"/); assert.match(html, /<a href="\/other" class="active" aria-current="page">Other<\/a>/);});
test("home navigation uses compact horizontal rails", async () => { const html = await render( <Webring name="Letta" label="webring" slug="lettamates" from="https://cameron.stream" />, ); const css = await readFile(new URL("../public/site.css", import.meta.url), "utf8");
assert.match(html, />previous<\/a><a [^>]*>webring<\/a><a [^>]*>next<\/a>/); assert.doesNotMatch(html, />Letta webring</); assert.match(css, /\.home-links \.site-nav-centered \{[\s\S]*?grid-template-columns: repeat\(5, auto\)/); assert.match(css, /\.home-links \.site-nav-centered a \{[\s\S]*?min-height: 2\.75rem/); assert.match(css, /\.home-links \.site-nav-centered a \+ a::before/); assert.match(css, /\.home-page \{[\s\S]*?min-height: 100svh;/);});
test("homepage centers the requested greeting and omits the personal ring", async () => { const html = await render(<Site />); const css = await readFile(new URL("../public/site.css", import.meta.url), "utf8");
assert.match(html, /<h1 class="home-greeting">Hi, I'm Cameron\.<\/h1>/); assert.doesNotMatch(html, /webring|lettamates/); assert.match(css, /\.home-page \{[\s\S]*?text-align: center;/); assert.match(css, /\.home-greeting \{[\s\S]*?font-family: var\(--site-font-body\)/); assert.match(html, /<img src="https:\/\/cdn\.bsky\.app\/img\/avatar\//);});
test("only the homepage opts out of the Around font preload", async () => { const home = await render(<Shell preloadAround={false}><span>home</span></Shell>); const page = await render(<Shell title="Services"><span>page</span></Shell>);
assert.doesNotMatch(home, /rel="preload" href="\/public\/fonts\/around-regular/); assert.match(page, /rel="preload" href="\/public\/fonts\/around-regular/);});
test("appearance controls avoid emoji and leave the mobile header", async () => { const html = await render( <Shell title="Services"> <ServicesContent /> </Shell>, ); const css = await readFile(new URL("../public/site.css", import.meta.url), "utf8"); const script = await readFile(new URL("../public/theme.js", import.meta.url), "utf8");
assert.match(html, /<button class="theme-toggle" id="theme-toggle" type="button" aria-label="Use dark theme"><\/button>/); assert.match(html, /class="theme-preferences" aria-labelledby="theme-preferences-label"/); assert.deepEqual( [...html.matchAll(/data-theme-choice="([^"]+)"/g)].map((match) => match[1]), ["system", "light", "dark"], ); assert.match(css, /\.theme-toggle \{[\s\S]*?width: 2\.75rem;[\s\S]*?height: 2\.75rem;/); assert.match(css, /@media \(max-width: 680px\) \{[\s\S]*?\.theme-toggle \{\s*display: none;/); assert.match(css, /@media \(max-width: 680px\) \{[\s\S]*?\.theme-preferences \{[\s\S]*?display: flex;/); assert.match(script, /btn\.innerHTML = icon\(dark\)/); assert.match(script, /document\.documentElement\.removeAttribute\("data-theme"\)/); assert.doesNotMatch(script, /\\u2600|\\u263E|☀|☾|🌞|🌙/);});
test("Other begins with the Now page", () => { assert.deepEqual(otherEntries[0], { index: "01", href: "/knowledge/now", title: "Now", description: "My current understanding of the systems I am studying.", meta: "Living note", external: false, }); assert.deepEqual(otherEntries[1], { index: "02", href: "/services", title: "Services", description: "Private tutoring, company workshops, and AI and agent consulting.", meta: "Available work", external: false, });});
test("Services page presents the three reviewed offers and contact link", async () => { const html = await render( <Shell title="Services"> <ServicesContent /> </Shell>, );
assert.match(html, /<title>Services — Cameron's website<\/title>/); assert.match(html, /I offer three services tailored to your specific needs\./); assert.doesNotMatch(html, /I offer several services/); assert.match(html, /Private AI tutoring/); assert.match(html, /I offer one-on-one sessions to help you use AI more effectively in your work or everyday life\./); assert.doesNotMatch(html, /I’ll work with you/); assert.match(html, /Company workshops/); assert.match(html, /AI and agent consulting/); assert.match(html, /href="https:\/\/x\.com\/majamediaco\/status\/2083629089349566747"/); assert.match(html, /href="mailto:cameron@pfiffer\.org"/);});
test("prose links keep the text color and use the accent only for the underline", async () => { const css = await readFile(new URL("../public/site.css", import.meta.url), "utf8"); const linkRule = css.match(/\.blog-content a \{([\s\S]*?)\n\}/)?.[1] ?? ""; const hoverRule = css.match(/\.blog-content a:hover \{([\s\S]*?)\n\}/)?.[1] ?? "";
assert.match(linkRule, /color: inherit/); assert.match(linkRule, /text-decoration-color: var\(--site-accent\)/); assert.doesNotMatch(linkRule, /(?:^|\n)\s*color: var\(--site-accent\)/); assert.match(linkRule, /text-decoration-thickness: 0\.1em/); assert.match(hoverRule, /text-decoration-thickness: 0\.16em/);});
test("Talks page lists every section and is linked from Other", async () => { const { TalksContent, talkSections } = await import("./components/talks.tsx"); const html = await render( <Shell title="Talks"> <TalksContent /> </Shell>, );
assert.deepEqual( talkSections.map((section) => section.heading), ["Talks", "Podcasts and conversations", "Courses and workshops", "Open source"], ); assert.match(html, /<title>Talks — Cameron's website<\/title>/); assert.match(html, /href="https:\/\/www\.youtube\.com\/watch\?v=1WTidibVdIA"/); assert.match(html, /href="https:\/\/lu\.ma\/2jacrv79">event<\/a>/); assert.doesNotMatch(html, /TODO/); assert.ok(otherEntries.some((entry) => entry.href === "/talks"));});