Something went wrong. Try again.
My website. cameron.stream
Something went wrong. Try again.
6.0 kB · 171 lines
TSX
at commit 5c3fe1f4
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172import { getCodeActivity, type ActivitySeries } 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> );}
export async function CodeActivity() { const [profile, activity] = await Promise.all([ getProfile(), getCodeActivity(), ]);
return ( <div class="code-page"> <PageNav profile={profile} active="code" />
<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"> <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> {activity.tangled && ( <p class="code-activity-total"> <strong>{activity.tangled.total.toLocaleString("en-US")}</strong> {" "}commits {activity.tangled.period} </p> )} </div> {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> )} </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> {activity.github && ( <p class="code-activity-total"> <strong>{activity.github.total.toLocaleString("en-US")}</strong> {" "}contributions {activity.github.period} </p> )} </div> {activity.github ? ( <CalendarGraph activity={activity.github} source="GitHub" noun="contribution" /> ) : ( <ActivityUnavailable source="GitHub" /> )} </section> </main> </div> );}