464 lines
14 KiB
TypeScript
464 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
|
|
|
|
/* --------------------------------------------------------------- reveal */
|
|
|
|
export function Reveal({
|
|
children,
|
|
delay = 0,
|
|
className = "",
|
|
}: {
|
|
children: ReactNode;
|
|
delay?: number;
|
|
className?: string;
|
|
}) {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const el = ref.current;
|
|
if (!el) return;
|
|
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
|
|
el.classList.add("is-in");
|
|
return;
|
|
}
|
|
const io = new IntersectionObserver(
|
|
(entries) => {
|
|
for (const e of entries) {
|
|
if (e.isIntersecting) {
|
|
el.classList.add("is-in");
|
|
io.disconnect();
|
|
}
|
|
}
|
|
},
|
|
{ rootMargin: "0px 0px -12% 0px", threshold: 0.06 }
|
|
);
|
|
|
|
const rect = el.getBoundingClientRect();
|
|
const onScreen = rect.top < window.innerHeight && rect.bottom > 0;
|
|
if (onScreen) {
|
|
// First screenful: stagger in document order so it fills top to bottom.
|
|
const all = Array.from(document.querySelectorAll<HTMLElement>(".reveal"));
|
|
const order = Math.min(Math.max(0, all.indexOf(el)), 8);
|
|
el.style.setProperty("--delay", `${delay + order * 90}ms`);
|
|
requestAnimationFrame(() => el.classList.add("is-in"));
|
|
} else {
|
|
io.observe(el);
|
|
}
|
|
return () => io.disconnect();
|
|
}, [delay]);
|
|
|
|
return (
|
|
<div ref={ref} className={`reveal ${className}`} style={{ "--delay": `${delay}ms` } as CSSProperties}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ------------------------------------------------------------- hardware */
|
|
|
|
export function Led({
|
|
kind = "on",
|
|
pulse = false,
|
|
slow = false,
|
|
className = "",
|
|
style,
|
|
}: {
|
|
kind?: "on" | "amber" | "off";
|
|
pulse?: boolean;
|
|
slow?: boolean;
|
|
className?: string;
|
|
style?: CSSProperties;
|
|
}) {
|
|
return (
|
|
<i
|
|
aria-hidden="true"
|
|
className={`w-led w-led--${kind}${pulse ? (slow ? " w-led--pulse-slow" : " w-led--pulse") : ""} ${className}`}
|
|
style={style}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function Screws({ count = 2, brass = false, className = "" }: { count?: number; brass?: boolean; className?: string }) {
|
|
return (
|
|
<span className={`w-unit__screws ${className}`}>
|
|
{Array.from({ length: count }).map((_, i) => (
|
|
<i key={i} className={`w-screw${brass ? " w-screw--brass" : ""}`} />
|
|
))}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
/** Section heading: a brass tab screwed to the desk + painted title. */
|
|
export function SectionHead({ index, label, title }: { index: string; label: string; title: string }) {
|
|
return (
|
|
<div className="w-sechead">
|
|
<span className="w-mt-brass w-sechead__tab">{index} · {label}</span>
|
|
<h2 className="w-serif w-paint w-sechead__title">{title}</h2>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ----------------------------------------------------------- the machine */
|
|
|
|
export function Monitor({ children, className = "" }: { children: ReactNode; className?: string }) {
|
|
return (
|
|
<div className={`w-monitor ${className}`}>
|
|
<div className="w-monitor__frame">
|
|
<div className="w-mt-glass w-monitor__glass">{children}</div>
|
|
<div className="w-monitor__chin">
|
|
<Led kind="amber" />
|
|
<span className="w-monitor__brand">DXD</span>
|
|
<span className="w-monitor__osd" aria-hidden="true">
|
|
<i className="w-osdkey" />
|
|
<i className="w-osdkey" />
|
|
<i className="w-osdkey" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="w-monitor__stand" aria-hidden="true">
|
|
<i className="w-monitor__neck" />
|
|
<i className="w-monitor__base" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const KEY_ROWS = ["1234567890-=".split(""), "qwertyuiop[]".split(""), "asdfghjkl;'".split("")];
|
|
|
|
export function Keyboard() {
|
|
return (
|
|
<div className="w-keyboard" aria-hidden="true">
|
|
<div className="w-keyboard__deck">
|
|
{KEY_ROWS.map((row, i) => (
|
|
<div key={i} className="w-keyboard__row">
|
|
{row.map((k) => (
|
|
<span key={k} className="w-key">
|
|
{k}
|
|
</span>
|
|
))}
|
|
</div>
|
|
))}
|
|
<div className="w-keyboard__row">
|
|
<span className="w-key w-key--space" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** A small rack that sits on the desk in the hero. */
|
|
export function MiniRack({ label = "DXD-01" }: { label?: string }) {
|
|
return (
|
|
<div className="w-rack w-mt-metal" aria-hidden="true">
|
|
<div className="w-rack__top">
|
|
<Led kind="on" pulse />
|
|
<span className="w-engrave text-[0.62rem] tracking-[0.2em]">{label}</span>
|
|
<span className="w-rack__vent w-vents" />
|
|
</div>
|
|
<div className="w-rack__grid">
|
|
<span className="w-rails" />
|
|
<div>
|
|
{[0, 1, 2, 3].map((i) => (
|
|
<div key={i} className="w-unit !min-h-[46px] !gap-[10px] !py-2">
|
|
<span className="w-unit__grille !h-6 !w-9" />
|
|
<Led kind="on" pulse style={{ animationDelay: `${i * 0.5}s` }} />
|
|
<Led kind="amber" pulse slow style={{ animationDelay: `${i * 0.3}s` }} />
|
|
<span className="ml-auto w-engrave text-[0.58rem] tracking-[0.14em]">
|
|
{["pxe", "aio", "nas", "web"][i]}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<span className="w-rails" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** A brass plate with one number stamped into it. */
|
|
export function Plaque({ value, label }: { value: string; label: string }) {
|
|
return (
|
|
<div className="w-mt-brass w-plaque relative">
|
|
<span className="w-plaque__value">{value}</span>
|
|
<span className="w-plaque__label">{label}</span>
|
|
<i className="w-screw w-screw--brass w-plaque__screw" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ------------------------------------------------------------- services */
|
|
|
|
export type ServiceAccess = "public" | "private" | "on_request";
|
|
|
|
export function ServiceUnit({
|
|
name,
|
|
desc,
|
|
url,
|
|
access,
|
|
checkUrl,
|
|
disabled,
|
|
}: {
|
|
name: string;
|
|
desc: string;
|
|
url: string;
|
|
access?: ServiceAccess;
|
|
checkUrl?: string;
|
|
disabled?: boolean;
|
|
}) {
|
|
const [status, setStatus] = useState<"pending" | "up" | "down">("pending");
|
|
|
|
useEffect(() => {
|
|
if (disabled) return;
|
|
let alive = true;
|
|
fetch(`/api/ping?url=${encodeURIComponent(checkUrl || url)}`)
|
|
.then((r) => r.json())
|
|
.then((d) => {
|
|
if (alive) setStatus(d.status === "up" ? "up" : "down");
|
|
})
|
|
.catch(() => {
|
|
if (alive) setStatus("down");
|
|
});
|
|
return () => {
|
|
alive = false;
|
|
};
|
|
}, [url, checkUrl, disabled]);
|
|
|
|
const live = disabled ? "up" : status;
|
|
const kind = live === "up" ? "on" : live === "down" ? "off" : "amber";
|
|
const label = disabled ? "STANDBY" : live === "up" ? "ONLINE" : live === "down" ? "OFFLINE" : "POLLING";
|
|
const accessLabel = access === "public" ? "public" : access === "private" ? "private" : access === "on_request" ? "on request" : null;
|
|
|
|
const host = (() => {
|
|
try {
|
|
return new URL(url).host;
|
|
} catch {
|
|
return url;
|
|
}
|
|
})();
|
|
|
|
const inner = (
|
|
<>
|
|
<span className="w-unit__grip" aria-hidden="true" />
|
|
<span className="w-unit__grille w-grille" aria-hidden="true" />
|
|
<span className="w-unit__id">
|
|
<span className="w-unit__name w-engrave">{name}</span>
|
|
<span className="w-tape mt-1">
|
|
{host}
|
|
{accessLabel ? ` · ${accessLabel}` : ""}
|
|
</span>
|
|
<span className="sr-only">{desc}</span>
|
|
</span>
|
|
<span className="w-unit__state">
|
|
<Led kind={kind} pulse={live === "up"} />
|
|
<span className="w-unit__status w-engrave">{label}</span>
|
|
</span>
|
|
<Screws />
|
|
</>
|
|
);
|
|
|
|
if (disabled) {
|
|
return (
|
|
<span className="w-unit" aria-disabled="true">
|
|
{inner}
|
|
</span>
|
|
);
|
|
}
|
|
return (
|
|
<a href={url} target="_blank" rel="noopener noreferrer" className="w-unit w-unit--link" title={desc}>
|
|
{inner}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
/* -------------------------------------------------------- activity report */
|
|
|
|
interface HeatmapPoint {
|
|
timestamp: number;
|
|
contributions: number;
|
|
}
|
|
interface Activity {
|
|
op_type: string;
|
|
content?: string | null;
|
|
created: string;
|
|
repo?: { full_name?: string };
|
|
}
|
|
|
|
const DOT_OPACITY = [0.07, 0.3, 0.48, 0.64, 0.82];
|
|
|
|
export function Report() {
|
|
const [weeks, setWeeks] = useState<{ date: string; contribs: number; level: number }[][]>([]);
|
|
const [total, setTotal] = useState(0);
|
|
const [activities, setActivities] = useState<Activity[]>([]);
|
|
const [state, setState] = useState<"loading" | "ready" | "error">("loading");
|
|
|
|
useEffect(() => {
|
|
let alive = true;
|
|
(async () => {
|
|
try {
|
|
const res = await fetch("/api/heatmap");
|
|
if (!res.ok) throw new Error("bad status");
|
|
const data: HeatmapPoint[] = await res.json();
|
|
const map = new Map<string, number>();
|
|
let sum = 0;
|
|
let max = 0;
|
|
for (const item of data) {
|
|
const d = new Date(item.timestamp * 1000);
|
|
const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
|
|
const v = (map.get(key) ?? 0) + item.contributions;
|
|
map.set(key, v);
|
|
if (v > max) max = v;
|
|
sum += item.contributions;
|
|
}
|
|
|
|
const end = new Date();
|
|
end.setHours(0, 0, 0, 0);
|
|
const start = new Date(end);
|
|
start.setFullYear(start.getFullYear() - 1);
|
|
start.setDate(start.getDate() - start.getDay());
|
|
|
|
const out: { date: string; contribs: number; level: number }[][] = [];
|
|
let week: { date: string; contribs: number; level: number }[] = [];
|
|
for (const d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
|
|
const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
|
|
const contribs = map.get(key) ?? 0;
|
|
let level = 0;
|
|
if (contribs > 0) {
|
|
level = 1;
|
|
if (contribs > max * 0.25) level = 2;
|
|
if (contribs > max * 0.5) level = 3;
|
|
if (contribs > max * 0.75) level = 4;
|
|
}
|
|
week.push({ date: key, contribs, level });
|
|
if (week.length === 7) {
|
|
out.push(week);
|
|
week = [];
|
|
}
|
|
}
|
|
if (week.length) out.push(week);
|
|
|
|
if (!alive) return;
|
|
setWeeks(out);
|
|
setTotal(sum);
|
|
setState("ready");
|
|
} catch {
|
|
if (alive) setState("error");
|
|
}
|
|
})();
|
|
|
|
(async () => {
|
|
try {
|
|
const res = await fetch("/api/activities");
|
|
if (!res.ok) return;
|
|
const data: Activity[] = await res.json();
|
|
if (alive) {
|
|
setActivities(data.filter((d) => d.op_type === "commit_repo" || d.op_type === "push_repo").slice(0, 3));
|
|
}
|
|
} catch {
|
|
/* ignore */
|
|
}
|
|
})();
|
|
|
|
return () => {
|
|
alive = false;
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className="w-printout">
|
|
<div className="w-mt-paper w-printout__paper">
|
|
<span className="w-printout__perf w-printout__perf--l" aria-hidden="true" />
|
|
<span className="w-printout__perf w-printout__perf--r" aria-hidden="true" />
|
|
|
|
<p className="w-print__head">
|
|
<span>GITDXD // ACTIVITY REPORT</span>
|
|
<span className="ml-auto">{state === "ready" ? "PRINTED LIVE" : state === "error" ? "PRINTER OFFLINE" : "SPOOLING…"}</span>
|
|
</p>
|
|
|
|
{state === "error" ? (
|
|
<p className="w-mono mt-5 text-[0.72rem] text-[#4a4133]">could not reach the forge.</p>
|
|
) : (
|
|
<>
|
|
<div className="mt-5 flex flex-wrap items-end gap-x-6 gap-y-2">
|
|
<div>
|
|
<p className="w-mono text-[0.62rem] tracking-[0.16em] text-[#4a4133]">TOTAL / 12 MONTHS</p>
|
|
<p className="w-serif text-[2.6rem] leading-none text-[var(--ink)]">
|
|
{state === "loading" ? "—" : total}
|
|
</p>
|
|
</div>
|
|
<p className="w-mono text-[0.62rem] leading-relaxed text-[#6f6450]">
|
|
each dot = one day
|
|
<br />
|
|
darkest = busiest
|
|
</p>
|
|
</div>
|
|
|
|
<div className="w-dotgrid w-scroll" aria-hidden={state === "loading"}>
|
|
{weeks.map((w, i) => (
|
|
<span key={i} className="w-dotgrid__col">
|
|
{w.map((d) => (
|
|
<span
|
|
key={d.date}
|
|
className="w-dot"
|
|
style={{ opacity: DOT_OPACITY[d.level] }}
|
|
title={`${d.contribs} on ${d.date}`}
|
|
/>
|
|
))}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
{activities.length > 0 ? (
|
|
<div className="w-print__log">
|
|
{activities.map((a, i) => {
|
|
let msg = "commit";
|
|
try {
|
|
if (a.content) {
|
|
const parsed = JSON.parse(a.content) as {
|
|
Commits?: { Message?: string }[];
|
|
HeadCommit?: { Message?: string };
|
|
};
|
|
msg =
|
|
parsed.Commits?.[0]?.Message?.split("\n")[0] ??
|
|
parsed.HeadCommit?.Message?.split("\n")[0] ??
|
|
msg;
|
|
}
|
|
} catch {
|
|
/* keep default */
|
|
}
|
|
return (
|
|
<p key={i} className="truncate">
|
|
> {a.repo?.full_name || "unknown"} — {msg}
|
|
</p>
|
|
);
|
|
})}
|
|
</div>
|
|
) : null}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ------------------------------------------------------------- socials */
|
|
|
|
/** The bundled linkedin.svg is a filled badge, which masks to a plain square. */
|
|
function LinkedInGlyph({ className = "size-4" }: { className?: string }) {
|
|
return (
|
|
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className={className}>
|
|
<path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3zM9 9h3.8v1.7h.05c.53-.95 1.83-1.95 3.77-1.95 4.03 0 4.78 2.5 4.78 5.75V21h-4v-5.6c0-1.34-.03-3.06-1.95-3.06-1.95 0-2.25 1.45-2.25 2.96V21H9z" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function SocialGlyph({ name, icon }: { name: string; icon: string }) {
|
|
if (name === "LinkedIn") return <LinkedInGlyph />;
|
|
return (
|
|
<span
|
|
aria-hidden="true"
|
|
className="social-mask size-4"
|
|
style={{ WebkitMaskImage: `url(${icon})`, maskImage: `url(${icon})` } as CSSProperties}
|
|
/>
|
|
);
|
|
}
|