Something went wrong. Try again.
My website. cameron.stream
Something went wrong. Try again.
7.4 kB · 222 lines
TSX
at commit 35dc2e35
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223import { Suspense } from "hono/jsx/streaming";import { getCodeActivity, type ActivitySeries, type CodeActivityData } from "../code-activity.ts";import { getProfile } from "../data.ts";import { PageNav } from "./page-nav.tsx";
function ActivityUnavailable({ source }: { source: string }) { return ( <p class="code-activity-unavailable"> {source} activity is temporarily unavailable. </p> );}
function CalendarGraph({ activity, source, noun,}: { activity: ActivitySeries; source: string; noun: string;}) { const firstDay = activity.days[0]?.date; const leadingDays = firstDay ? new Date(`${firstDay}T00:00:00Z`).getUTCDay() : 0;
return ( <div class="code-graph-scroll"> <div class="code-calendar-graph" role="img" aria-label={`${activity.total.toLocaleString("en-US")} ${source} ${noun}s ${activity.period}`} > {Array.from({ length: leadingDays }, (_, index) => ( <span class="code-activity-day code-activity-day-empty" aria-hidden="true" key={`empty-${index}`} /> ))} {activity.days.map((day) => ( <span class={`code-activity-day activity-level-${day.level}`} title={`${day.date}: ${day.count} ${noun}${day.count === 1 ? "" : "s"}`} aria-hidden="true" key={day.date} /> ))} </div> </div> );}
// Layout-stable placeholder for a cold upstream pass. It reserves the same// rows the populated sections occupy so the page does not reflow when the// streamed content replaces it. It renders as inert text without JS.function ActivitySkeleton({ label }: { label: string }) { return ( <div class="code-activity-skeleton" role="status" aria-label={`Loading ${label} activity`}> <div class="code-skeleton-graph" aria-hidden="true"> {Array.from({ length: 28 }, (_, index) => ( <span class="code-skeleton-day" key={index} /> ))} </div> <p class="code-skeleton-note" aria-hidden="true">Loading…</p> </div> );}
function TangledSection({ activity }: { activity: CodeActivityData }) { return ( <> {activity.tangled ? ( <CalendarGraph activity={activity.tangled} source="Tangled" noun="commit" /> ) : ( <ActivityUnavailable source="Tangled" /> )} {activity.tangledPinned.length > 0 && ( <div class="code-pinned-repositories"> <div class="code-pinned-heading"> <h3>Pinned repositories</h3> <p>Selected on Tangled</p> </div> <div class="code-pinned-list"> {activity.tangledPinned.map((repository) => ( <a class="code-pinned-repository" href={repository.url} target="_blank" rel="noopener" key={repository.repoDid} > <span class="code-pinned-repository-name"> {repository.name} <span aria-hidden="true">↗</span> </span> {repository.description && <span>{repository.description}</span>} </a> ))} </div> </div> )} {activity.tangledRecent.length > 0 && ( <div class="code-recent-commits"> <div class="code-recent-heading"> <h3>Recent commits in pinned repositories</h3> <p>Public Tangled activity</p> </div> <ul class="code-recent-list"> {activity.tangledRecent.map((commit) => ( <li class="code-recent-commit" key={commit.url}> <a class="code-recent-subject" href={commit.url} title={commit.subject} target="_blank" rel="noopener"> {commit.subject} </a> <span class="code-recent-repository" title={commit.repository}>{commit.repository.split("/").at(-1)}</span> <time class="code-recent-time" dateTime={commit.time}> {new Intl.DateTimeFormat("en", { month: "short", day: "numeric" }).format(new Date(commit.time))} </time> </li> ))} </ul> </div> )} </> );}
async function TangledActivity() { const activity = await getCodeActivity(); return ( <> {activity.tangled && ( <p class="code-activity-total code-activity-total-streamed"> <strong>{activity.tangled.total.toLocaleString("en-US")}</strong> {" "}commits {activity.tangled.period} </p> )} <TangledSection activity={activity} /> </> );}
async function GithubActivity() { const activity = await getCodeActivity(); return ( <> {activity.github && ( <p class="code-activity-total code-activity-total-streamed"> <strong>{activity.github.total.toLocaleString("en-US")}</strong> {" "}contributions {activity.github.period} </p> )} {activity.github ? <CalendarGraph activity={activity.github} source="GitHub" noun="contribution" /> : <ActivityUnavailable source="GitHub" />} </> );}
async function CodeNavigation() { const profile = await getProfile(); return <PageNav profile={profile} active="code" />;}
export function CodeActivity() { return ( <div class="code-page"> <Suspense fallback={<PageNav profile={null} active="code" />}> <CodeNavigation /> </Suspense>
<header class="code-page-header"> <h1 class="page-title">Code</h1> <p class="page-subtitle"> Public work across{" "} <a href="https://tangled.org/cameron.stream" target="_blank" rel="noopener"> Tangled </a>{" "} and{" "} <a href="https://github.com/just-cameron" target="_blank" rel="noopener"> GitHub </a> . </p> </header>
<main class="code-activity-list"> <noscript> <p>Live activity requires JavaScript. Use the Tangled and GitHub links to browse the source profiles.</p> <style>{`.code-activity-skeleton { display: none; }`}</style> </noscript> <section class="code-activity-section" aria-labelledby="tangled-activity-title"> <div class="code-activity-heading"> <div> <h2 id="tangled-activity-title"> <a href="https://tangled.org/cameron.stream" target="_blank" rel="noopener"> Tangled <span aria-hidden="true">↗</span> </a> </h2> <p>cameron.stream</p> </div> </div> <Suspense fallback={<ActivitySkeleton label="Tangled" />}> <TangledActivity /> </Suspense> </section>
<section class="code-activity-section" aria-labelledby="github-activity-title"> <div class="code-activity-heading"> <div> <h2 id="github-activity-title"> <a href="https://github.com/just-cameron" target="_blank" rel="noopener"> GitHub <span aria-hidden="true">↗</span> </a> </h2> <p>@just-cameron</p> </div> </div> <Suspense fallback={<ActivitySkeleton label="GitHub" />}> <GithubActivity /> </Suspense> </section> </main> </div> );}