mirror of
https://github.com/Dvorinka/Dash.git
synced 2026-10-28 07:41:27 +00:00
feat(landing): rebuild as Next.js app with live product mocks
Replaces the static HTML page with a Next.js 15 + Tailwind v4 + Motion app. The hero renders the dashboard itself - live tiles, ticking clock, wandering metrics, pulsing status dots - instead of screenshots. Adds a playable four-renderer switcher (bento/cards/index/console) with layout animations, live monitor/domain/system mocks, and a cycling alert feed. Vercel project dash is now git-connected with root dir landing/; pushes deploy automatically. Canonical alias: dash-homelab.vercel.app. Authored By: TDvorak <[email protected]> Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
Tomas DvorakandDevin committed
1 parent
e88429514b
commit
d1486d5ec8
30 files changed
+3099
-466
No files matched your search
@@ -0,0 +1,268 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { motion } from "motion/react";
|
||||
|
||||
/* A live miniature of the product - rendered, not screenshotted. */
|
||||
|
||||
type Service = {
|
||||
name: string;
|
||||
host: string;
|
||||
letter: string;
|
||||
tint: string;
|
||||
};
|
||||
|
||||
const MEDIA: Service[] = [
|
||||
{ name: "Plex", host: "plex.localhost:32400", letter: "P", tint: "#e5a00d" },
|
||||
{ name: "Jellyfin", host: "jellyfin.localhost:8096", letter: "J", tint: "#aa5cc3" },
|
||||
{ name: "Immich", host: "immich.localhost:2283", letter: "I", tint: "#f16d9a" },
|
||||
];
|
||||
|
||||
const INFRA: Service[] = [
|
||||
{ name: "Proxmox", host: "proxmox.localhost:8006", letter: "P", tint: "#e57000" },
|
||||
{ name: "Pi-hole", host: "pihole.localhost", letter: "P", tint: "#f05454" },
|
||||
{ name: "Gitea", host: "gitea.localhost:3000", letter: "G", tint: "#609926" },
|
||||
];
|
||||
|
||||
function useReduced() {
|
||||
const [reduced, setReduced] = useState(false);
|
||||
useEffect(() => {
|
||||
const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
|
||||
setReduced(mq.matches);
|
||||
const fn = (e: MediaQueryListEvent) => setReduced(e.matches);
|
||||
mq.addEventListener("change", fn);
|
||||
return () => mq.removeEventListener("change", fn);
|
||||
}, []);
|
||||
return reduced;
|
||||
}
|
||||
|
||||
function useClock() {
|
||||
const [now, setNow] = useState<Date | null>(null);
|
||||
const reduced = useReduced();
|
||||
useEffect(() => {
|
||||
setNow(new Date());
|
||||
if (reduced) return;
|
||||
const t = setInterval(() => setNow(new Date()), 1000);
|
||||
return () => clearInterval(t);
|
||||
}, [reduced]);
|
||||
return now;
|
||||
}
|
||||
|
||||
function useWander(base: number, spread: number, ms: number) {
|
||||
const [v, setV] = useState(base);
|
||||
const reduced = useReduced();
|
||||
useEffect(() => {
|
||||
if (reduced) return;
|
||||
const t = setInterval(
|
||||
() => setV(Math.round(base + (Math.random() - 0.35) * spread)),
|
||||
ms,
|
||||
);
|
||||
return () => clearInterval(t);
|
||||
}, [base, spread, ms, reduced]);
|
||||
return v;
|
||||
}
|
||||
|
||||
function StatusDot({ down = false }: { down?: boolean }) {
|
||||
return (
|
||||
<span
|
||||
className={`inline-block h-1.5 w-1.5 rounded-full ${down ? "bg-down" : "bg-up animate-pulse-dot"}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function Tile({
|
||||
i,
|
||||
className = "",
|
||||
children,
|
||||
}: {
|
||||
i: number;
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.45, delay: 0.05 * i, ease: [0.2, 0, 0, 1] }}
|
||||
className={`rounded-lg border border-line bg-surface p-3 transition-colors duration-150 hover:border-line-strong hover:bg-surface-hover ${className}`}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function ServiceTile({ s, i, down }: { s: Service; i: number; down?: boolean }) {
|
||||
return (
|
||||
<Tile i={i} className="col-span-3 flex items-center gap-3 sm:col-span-2">
|
||||
<span
|
||||
className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-iconbg text-sm font-semibold"
|
||||
style={{ color: s.tint }}
|
||||
>
|
||||
{s.letter}
|
||||
</span>
|
||||
<span className="min-w-0">
|
||||
<span className="block truncate text-[13px] font-medium">{s.name}</span>
|
||||
<span className="block truncate font-mono text-[10.5px] text-faint">{s.host}</span>
|
||||
</span>
|
||||
<span className="ml-auto flex items-center gap-1.5 rounded border border-line px-1.5 py-0.5 font-mono text-[10px] text-dim">
|
||||
<StatusDot down={down} />
|
||||
{down ? "degraded" : "up"}
|
||||
</span>
|
||||
</Tile>
|
||||
);
|
||||
}
|
||||
|
||||
function ClockTile({ i }: { i: number }) {
|
||||
const now = useClock();
|
||||
return (
|
||||
<Tile i={i} className="col-span-3 sm:col-span-2">
|
||||
<div className="font-mono text-[10px] uppercase tracking-[0.14em] text-faint">local time</div>
|
||||
<div className="mt-1.5 font-mono text-xl font-medium tabular-nums">
|
||||
{now ? now.toLocaleTimeString("en-GB") : "--:--:--"}
|
||||
</div>
|
||||
<div className="mt-1 font-mono text-[10.5px] text-dim">Europe/Prague</div>
|
||||
</Tile>
|
||||
);
|
||||
}
|
||||
|
||||
function PiholeTile({ i }: { i: number }) {
|
||||
const blocked = useWander(24, 6, 2600);
|
||||
return (
|
||||
<Tile i={i} className="col-span-3 sm:col-span-2">
|
||||
<div className="font-mono text-[10px] uppercase tracking-[0.14em] text-faint">pi-hole</div>
|
||||
<div className="mt-1.5 text-xl font-medium tabular-nums">
|
||||
{blocked.toFixed(1)}
|
||||
<span className="text-sm text-dim">%</span>
|
||||
</div>
|
||||
<div className="mt-1 font-mono text-[10.5px] text-dim">queries blocked</div>
|
||||
</Tile>
|
||||
);
|
||||
}
|
||||
|
||||
function HeartbeatTile({ i }: { i: number }) {
|
||||
const [bars, setBars] = useState<number[]>(() => Array.from({ length: 26 }, () => 1));
|
||||
const ping = useWander(42, 30, 1500);
|
||||
const reduced = useReduced();
|
||||
useEffect(() => {
|
||||
if (reduced) return;
|
||||
const t = setInterval(() => {
|
||||
setBars((b) => [...b.slice(1), Math.random() > 0.06 ? 1 : 0]);
|
||||
}, 1100);
|
||||
return () => clearInterval(t);
|
||||
}, [reduced]);
|
||||
return (
|
||||
<Tile i={i} className="col-span-3 sm:col-span-2">
|
||||
<div className="flex items-baseline justify-between">
|
||||
<span className="font-mono text-[10px] uppercase tracking-[0.14em] text-faint">api</span>
|
||||
<span className="font-mono text-[10.5px] tabular-nums text-dim">{ping} ms</span>
|
||||
</div>
|
||||
<div className="mt-2 flex h-7 items-end gap-[3px]">
|
||||
{bars.map((v, k) => (
|
||||
<span
|
||||
key={k}
|
||||
className={`flex-1 rounded-[2px] ${v ? "bg-up" : "bg-down"} transition-opacity duration-300`}
|
||||
style={{ height: `${v ? 60 + ((k * 37) % 40) : 100}%`, opacity: v ? 0.85 : 1 }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Tile>
|
||||
);
|
||||
}
|
||||
|
||||
function SystemTile({ i }: { i: number }) {
|
||||
const cpu = useWander(34, 26, 2200);
|
||||
return (
|
||||
<Tile i={i} className="col-span-3 sm:col-span-2">
|
||||
<div className="font-mono text-[10px] uppercase tracking-[0.14em] text-faint">nas-01</div>
|
||||
<div className="mt-1.5 flex items-baseline gap-1">
|
||||
<span className="text-xl font-medium tabular-nums">{cpu}%</span>
|
||||
<span className="font-mono text-[10.5px] text-dim">cpu</span>
|
||||
</div>
|
||||
<div className="mt-2 space-y-1">
|
||||
<div className="h-1 w-full overflow-hidden rounded bg-iconbg">
|
||||
<div className="h-full rounded bg-accent transition-all duration-700" style={{ width: `${Math.min(cpu, 100)}%` }} />
|
||||
</div>
|
||||
<div className="h-1 w-full overflow-hidden rounded bg-iconbg">
|
||||
<div className="h-full rounded bg-up/70 transition-all duration-700" style={{ width: "61%" }} />
|
||||
</div>
|
||||
</div>
|
||||
</Tile>
|
||||
);
|
||||
}
|
||||
|
||||
function DomainTile({ i }: { i: number }) {
|
||||
return (
|
||||
<Tile i={i} className="col-span-3 sm:col-span-2">
|
||||
<div className="font-mono text-[10px] uppercase tracking-[0.14em] text-faint">tdvorak.dev</div>
|
||||
<div className="mt-1.5 text-xl font-medium">
|
||||
260<span className="text-sm text-dim">d</span>
|
||||
</div>
|
||||
<div className="mt-1 font-mono text-[10.5px] text-dim">until expiry · tls 81d</div>
|
||||
</Tile>
|
||||
);
|
||||
}
|
||||
|
||||
export function Board() {
|
||||
const [warn, setWarn] = useState(-1);
|
||||
const reduced = useReduced();
|
||||
useEffect(() => {
|
||||
if (reduced) return;
|
||||
const t = setInterval(() => {
|
||||
const pick = Math.floor(Math.random() * MEDIA.length);
|
||||
setWarn(pick);
|
||||
setTimeout(() => setWarn(-1), 2600);
|
||||
}, 11000);
|
||||
return () => clearInterval(t);
|
||||
}, [reduced]);
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden rounded-xl border border-line-strong bg-bg shadow-[0_24px_80px_-24px_rgba(0,0,0,0.7)]">
|
||||
{/* window chrome */}
|
||||
<div className="flex h-9 items-center gap-2 border-b border-line bg-surface px-3.5">
|
||||
<span className="h-2.5 w-2.5 rounded-full bg-line-strong" />
|
||||
<span className="h-2.5 w-2.5 rounded-full bg-line-strong" />
|
||||
<span className="h-2.5 w-2.5 rounded-full bg-line-strong" />
|
||||
<span className="ml-2 rounded-md border border-line bg-bg px-2 py-0.5 font-mono text-[10px] text-faint">
|
||||
localhost:3000
|
||||
</span>
|
||||
<span className="ml-auto hidden items-center gap-1 rounded-md border border-line px-2 py-0.5 font-mono text-[10px] text-faint sm:flex">
|
||||
⌘K
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="p-3.5 sm:p-5">
|
||||
<div className="mb-2.5 flex items-center gap-3">
|
||||
<span className="font-mono text-[10px] font-semibold uppercase tracking-[0.14em] text-dim">
|
||||
Media
|
||||
</span>
|
||||
<span className="font-mono text-[10px] text-faint">05</span>
|
||||
<span className="h-px flex-1 bg-line" />
|
||||
</div>
|
||||
<div className="grid grid-cols-6 gap-2.5">
|
||||
{MEDIA.map((s, k) => (
|
||||
<ServiceTile key={s.name} s={s} i={k} down={warn === k} />
|
||||
))}
|
||||
<ClockTile i={3} />
|
||||
<PiholeTile i={4} />
|
||||
</div>
|
||||
|
||||
<div className="mb-2.5 mt-5 flex items-center gap-3">
|
||||
<span className="font-mono text-[10px] font-semibold uppercase tracking-[0.14em] text-dim">
|
||||
Infrastructure
|
||||
</span>
|
||||
<span className="font-mono text-[10px] text-faint">06</span>
|
||||
<span className="h-px flex-1 bg-line" />
|
||||
</div>
|
||||
<div className="grid grid-cols-6 gap-2.5">
|
||||
{INFRA.map((s, k) => (
|
||||
<ServiceTile key={s.name} s={s} i={k + 5} />
|
||||
))}
|
||||
<HeartbeatTile i={8} />
|
||||
<SystemTile i={9} />
|
||||
<DomainTile i={10} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
export function CopyButton({ text, label }: { text: string; label: string }) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
aria-label={label}
|
||||
onClick={async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 1400);
|
||||
} catch {
|
||||
/* clipboard unavailable - select manually */
|
||||
}
|
||||
}}
|
||||
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-faint transition-colors hover:bg-surface-hover hover:text-text"
|
||||
>
|
||||
{copied ? (
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--color-up)" strokeWidth="2.5" aria-hidden="true">
|
||||
<path d="M20 6 9 17l-5-5" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" />
|
||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import { CopyButton } from "./CopyButton";
|
||||
import { Reveal } from "./Reveal";
|
||||
|
||||
const CURL = "curl -fsSL https://raw.githubusercontent.com/Dvorinka/Dash/main/install.sh | sh";
|
||||
const DOCKER = "docker run -d -v ./data:/data -p 3000:3000 ghcr.io/dvorinka/dash:latest";
|
||||
|
||||
export function Install() {
|
||||
return (
|
||||
<div className="grid gap-2.5 md:grid-cols-2">
|
||||
<Reveal className="overflow-hidden rounded-xl border border-line bg-surface/50">
|
||||
<div className="flex items-center justify-between border-b border-line px-4 py-2.5">
|
||||
<span className="font-mono text-[10px] uppercase tracking-[0.14em] text-faint">
|
||||
one-liner
|
||||
</span>
|
||||
<CopyButton text={CURL} label="Copy install command" />
|
||||
</div>
|
||||
<pre className="overflow-x-auto p-4 font-mono text-[12.5px] leading-7 text-dim">
|
||||
<span className="text-text">$</span> curl -fsSL https://raw.githubusercontent.com/
|
||||
{"\n"} Dvorinka/Dash/main/install.sh | sh{"\n"}
|
||||
<span className="text-faint"># installs into ./dash, serves :3000</span>
|
||||
</pre>
|
||||
</Reveal>
|
||||
<Reveal delay={0.08} className="overflow-hidden rounded-xl border border-line bg-surface/50">
|
||||
<div className="flex items-center justify-between border-b border-line px-4 py-2.5">
|
||||
<span className="font-mono text-[10px] uppercase tracking-[0.14em] text-faint">
|
||||
docker
|
||||
</span>
|
||||
<CopyButton text={DOCKER} label="Copy docker command" />
|
||||
</div>
|
||||
<pre className="overflow-x-auto p-4 font-mono text-[12.5px] leading-7 text-dim">
|
||||
<span className="text-text">$</span> docker run -d -v ./data:/data \{"\n"}
|
||||
{" "}-p 3000:3000 \{"\n"}
|
||||
{" "}ghcr.io/dvorinka/dash:latest
|
||||
</pre>
|
||||
</Reveal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,241 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
/* Small live mocks for feature rows - data-shaped divs, no images. */
|
||||
|
||||
function useReduced() {
|
||||
const [r, setR] = useState(false);
|
||||
useEffect(() => {
|
||||
const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
|
||||
setR(mq.matches);
|
||||
const fn = (e: MediaQueryListEvent) => setR(e.matches);
|
||||
mq.addEventListener("change", fn);
|
||||
return () => mq.removeEventListener("change", fn);
|
||||
}, []);
|
||||
return r;
|
||||
}
|
||||
|
||||
function usePing(base: number, spread: number, ms: number) {
|
||||
const [v, setV] = useState(base);
|
||||
const reduced = useReduced();
|
||||
useEffect(() => {
|
||||
if (reduced) return;
|
||||
const t = setInterval(() => setV(Math.round(base + (Math.random() - 0.4) * spread)), ms);
|
||||
return () => clearInterval(t);
|
||||
}, [base, spread, ms, reduced]);
|
||||
return v;
|
||||
}
|
||||
|
||||
function HeartbeatStrip({ seed, ms }: { seed: number; ms: number }) {
|
||||
const [bars, setBars] = useState<number[]>(() =>
|
||||
Array.from({ length: 32 }, (_, k) => ((k * seed) % 23 === 0 ? 0 : 1)),
|
||||
);
|
||||
const reduced = useReduced();
|
||||
useEffect(() => {
|
||||
if (reduced) return;
|
||||
const t = setInterval(
|
||||
() => setBars((b) => [...b.slice(1), Math.random() > 0.045 ? 1 : 0]),
|
||||
ms,
|
||||
);
|
||||
return () => clearInterval(t);
|
||||
}, [seed, ms, reduced]);
|
||||
return (
|
||||
<div className="flex h-6 flex-1 items-end gap-[2px]">
|
||||
{bars.map((v, k) => (
|
||||
<span
|
||||
key={k}
|
||||
className={`flex-1 rounded-[1.5px] transition-colors duration-300 ${v ? "bg-up" : "bg-down"}`}
|
||||
style={{ height: v ? `${55 + ((k * 29) % 45)}%` : "100%", opacity: v ? 0.8 : 1 }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const MONITORS = [
|
||||
{ name: "gitea.tdvorak.dev", kind: "https · 30s", up: "99.98", base: 38, seed: 3 },
|
||||
{ name: "api.internal", kind: "tcp · 60s", up: "100.00", base: 12, seed: 7 },
|
||||
{ name: "pihole.local", kind: "keyword · 60s", up: "99.62", base: 24, seed: 11 },
|
||||
];
|
||||
|
||||
function MonitorRow({ m, i }: { m: (typeof MONITORS)[number]; i: number }) {
|
||||
const ping = usePing(m.base, 18, 1700 + i * 300);
|
||||
return (
|
||||
<div className="flex items-center gap-4 px-4 py-3">
|
||||
<div className="w-36 shrink-0">
|
||||
<div className="truncate font-mono text-[12px]">{m.name}</div>
|
||||
<div className="font-mono text-[10px] text-faint">{m.kind}</div>
|
||||
</div>
|
||||
<HeartbeatStrip seed={m.seed} ms={1300 + i * 250} />
|
||||
<div className="w-14 text-right font-mono text-[11px] tabular-nums text-dim">{ping} ms</div>
|
||||
<div className="w-16 rounded border border-line px-1.5 py-0.5 text-center font-mono text-[10px] text-up">
|
||||
{m.up}%
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function MonitorMock() {
|
||||
return (
|
||||
<div className="divide-y divide-line rounded-xl border border-line bg-surface/50">
|
||||
{MONITORS.map((m, i) => (
|
||||
<MonitorRow key={m.name} m={m} i={i} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const DOMAINS = [
|
||||
{ name: "tdvorak.dev", days: 260, pct: 71, tags: ["porkbun", "cloudflare", "tls 81d"] },
|
||||
{ name: "kan.tdvorak.dev", days: 260, pct: 71, tags: ["porkbun", "cloudflare", "tls 81d"] },
|
||||
{ name: "old-legacy.net", days: 12, pct: 8, tags: ["godaddy", "ns1", "tls 9d"], warn: true },
|
||||
];
|
||||
|
||||
export function DomainMock() {
|
||||
return (
|
||||
<div className="divide-y divide-line rounded-xl border border-line bg-surface/50">
|
||||
{DOMAINS.map((d) => (
|
||||
<div key={d.name} className="flex items-center gap-4 px-4 py-3.5">
|
||||
<div className="w-36 shrink-0">
|
||||
<div className="truncate font-mono text-[12px]">{d.name}</div>
|
||||
<div className="mt-1.5 h-1 w-full overflow-hidden rounded bg-iconbg">
|
||||
<div
|
||||
className={`h-full rounded ${d.warn ? "bg-down" : "bg-accent"}`}
|
||||
style={{ width: `${d.pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className={`font-mono text-[12px] tabular-nums ${d.warn ? "text-down" : "text-dim"}`}
|
||||
>
|
||||
{d.days}d
|
||||
</span>
|
||||
<div className="ml-auto hidden gap-1.5 sm:flex">
|
||||
{d.tags.map((t) => (
|
||||
<span
|
||||
key={t}
|
||||
className="rounded border border-line px-1.5 py-0.5 font-mono text-[10px] text-faint"
|
||||
>
|
||||
{t}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function SystemMock() {
|
||||
const cpu = usePing(37, 30, 1900);
|
||||
const mem = usePing(61, 6, 2600);
|
||||
const R = 44;
|
||||
const C = 2 * Math.PI * R;
|
||||
return (
|
||||
<div className="flex items-center gap-6 rounded-xl border border-line bg-surface/50 p-5">
|
||||
<div className="relative h-28 w-28 shrink-0">
|
||||
<svg viewBox="0 0 100 100" className="h-full w-full -rotate-90">
|
||||
<circle cx="50" cy="50" r={R} fill="none" stroke="var(--color-iconbg)" strokeWidth="7" />
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r={R}
|
||||
fill="none"
|
||||
stroke="var(--color-accent)"
|
||||
strokeWidth="7"
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={C}
|
||||
strokeDashoffset={C - (C * Math.min(cpu, 100)) / 100}
|
||||
style={{ transition: "stroke-dashoffset 0.9s cubic-bezier(0.2,0,0,1)" }}
|
||||
/>
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center">
|
||||
<span className="text-xl font-medium tabular-nums">{cpu}%</span>
|
||||
<span className="font-mono text-[9px] uppercase tracking-[0.12em] text-faint">cpu</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 space-y-3.5">
|
||||
<div>
|
||||
<div className="mb-1 flex justify-between font-mono text-[10px] text-faint">
|
||||
<span>memory</span>
|
||||
<span className="tabular-nums">{mem}%</span>
|
||||
</div>
|
||||
<div className="h-1.5 overflow-hidden rounded bg-iconbg">
|
||||
<div className="h-full rounded bg-up/80 transition-all duration-700" style={{ width: `${mem}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="mb-1 flex justify-between font-mono text-[10px] text-faint">
|
||||
<span>disk /data</span>
|
||||
<span>44%</span>
|
||||
</div>
|
||||
<div className="h-1.5 overflow-hidden rounded bg-iconbg">
|
||||
<div className="h-full rounded bg-accent/80" style={{ width: "44%" }} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between font-mono text-[10px] text-faint">
|
||||
<span>8 containers</span>
|
||||
<span className="tabular-nums">load 0.42 · up 14d</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const ALERTS: { at: string; text: string; kind: "ok" | "down" | "warn" }[] = [
|
||||
{ at: "12:04:11", text: "pihole.local recovered", kind: "ok" },
|
||||
{ at: "12:03:48", text: "pihole.local is down", kind: "down" },
|
||||
{ at: "11:58:02", text: "old-legacy.net expires in 12d", kind: "warn" },
|
||||
];
|
||||
|
||||
const ALERT_STYLE: Record<(typeof ALERTS)[number]["kind"], string> = {
|
||||
ok: "text-up",
|
||||
down: "text-destructive",
|
||||
warn: "text-down",
|
||||
};
|
||||
|
||||
export function StatusBand() {
|
||||
const [i, setI] = useState(0);
|
||||
const reduced = useReduced();
|
||||
useEffect(() => {
|
||||
if (reduced) return;
|
||||
const t = setInterval(() => setI((v) => (v + 1) % ALERTS.length), 3000);
|
||||
return () => clearInterval(t);
|
||||
}, [reduced]);
|
||||
const a = ALERTS[i];
|
||||
|
||||
return (
|
||||
<div className="rounded-xl border border-line bg-surface/50 p-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-mono text-[10px] uppercase tracking-[0.14em] text-faint">
|
||||
status page · public
|
||||
</span>
|
||||
<span className="rounded border border-line px-1.5 py-0.5 font-mono text-[10px] text-faint">
|
||||
/status/lab
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-4 rounded-md bg-up/90 px-3 py-2 text-center text-[12.5px] font-medium text-[#052e16]">
|
||||
All systems operational
|
||||
</div>
|
||||
<div className="mt-4 space-y-2">
|
||||
{["edge", "api", "media"].map((s) => (
|
||||
<div key={s} className="flex items-center gap-2.5 font-mono text-[11px] text-dim">
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-up animate-pulse-dot" />
|
||||
{s}
|
||||
<span className="ml-auto text-faint">operational</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-5 border-t border-line pt-3.5">
|
||||
<div className="flex items-center gap-2 font-mono text-[10.5px]">
|
||||
<span className="text-faint">{a.at}</span>
|
||||
<span className={`truncate ${ALERT_STYLE[a.kind]}`}>{a.text}</span>
|
||||
<span className="ml-auto shrink-0 rounded border border-line px-1.5 py-0.5 text-[9.5px] text-faint">
|
||||
→ slack · ntfy · smtp
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
export function Nav() {
|
||||
return (
|
||||
<nav className="sticky top-0 z-20 border-b border-line bg-bg/80 backdrop-blur-md">
|
||||
<div className="mx-auto flex h-14 max-w-5xl items-center gap-2.5 px-5">
|
||||
<a href="#" className="flex items-center gap-2 text-[14.5px] font-semibold tracking-tight">
|
||||
<img src="/dash.svg" alt="" width={20} height={20} className="rounded-[5px]" />
|
||||
Dash
|
||||
</a>
|
||||
<div className="ml-4 hidden gap-0.5 sm:flex">
|
||||
{[
|
||||
["Boards", "#renderers"],
|
||||
["Monitors", "#monitors"],
|
||||
["Stack", "#stack"],
|
||||
["Install", "#install"],
|
||||
].map(([label, href]) => (
|
||||
<a
|
||||
key={href}
|
||||
href={href}
|
||||
className="rounded-md px-2.5 py-1.5 text-[13px] text-dim transition-colors hover:bg-surface-hover hover:text-text"
|
||||
>
|
||||
{label}
|
||||
</a>
|
||||
))}
|
||||
<a
|
||||
href="https://github.com/Dvorinka/Dash/tree/main/docs"
|
||||
className="rounded-md px-2.5 py-1.5 text-[13px] text-dim transition-colors hover:bg-surface-hover hover:text-text"
|
||||
>
|
||||
Docs
|
||||
</a>
|
||||
</div>
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<a
|
||||
href="https://github.com/Dvorinka/Dash"
|
||||
aria-label="GitHub repository"
|
||||
className="flex h-[34px] w-[34px] items-center justify-center rounded-lg border border-line bg-surface text-dim transition-colors hover:border-line-strong hover:text-text"
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href="#install"
|
||||
className="flex h-[34px] items-center rounded-lg bg-text px-3.5 text-[13px] font-medium text-bg transition-transform duration-100 active:scale-[0.97]"
|
||||
>
|
||||
Get started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { motion } from "motion/react";
|
||||
|
||||
/* Same state, four skins - the product's renderer seam, playable in-page. */
|
||||
|
||||
type Mode = "bento" | "cards" | "index" | "console";
|
||||
const MODES: Mode[] = ["bento", "cards", "index", "console"];
|
||||
|
||||
const ITEMS = [
|
||||
{ name: "Plex", host: "plex.local", letter: "P", tint: "#e5a00d" },
|
||||
{ name: "Jellyfin", host: "jf.local", letter: "J", tint: "#aa5cc3" },
|
||||
{ name: "Pi-hole", host: "pihole.local", letter: "P", tint: "#f05454" },
|
||||
{ name: "Gitea", host: "git.local", letter: "G", tint: "#609926" },
|
||||
{ name: "Grafana", host: "graf.local", letter: "G", tint: "#f46800" },
|
||||
];
|
||||
|
||||
const BENTO_SPAN = ["sm:col-span-2", "sm:col-span-2", "sm:col-span-2", "sm:col-span-3", "sm:col-span-3"];
|
||||
|
||||
function Chip({ up = true }: { up?: boolean }) {
|
||||
return (
|
||||
<span className="flex items-center gap-1.5 rounded border border-line px-1.5 py-0.5 font-mono text-[10px] text-dim">
|
||||
<span className={`h-1.5 w-1.5 rounded-full ${up ? "bg-up animate-pulse-dot" : "bg-down"}`} />
|
||||
up
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function RendererDemo() {
|
||||
const [mode, setMode] = useState<Mode>("bento");
|
||||
const locked = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
const t = setInterval(() => {
|
||||
if (!locked.current) {
|
||||
setMode((m) => MODES[(MODES.indexOf(m) + 1) % MODES.length]);
|
||||
}
|
||||
}, 3400);
|
||||
return () => clearInterval(t);
|
||||
}, []);
|
||||
|
||||
const pick = (m: Mode) => {
|
||||
locked.current = true;
|
||||
setMode(m);
|
||||
};
|
||||
|
||||
const gridCls =
|
||||
mode === "bento"
|
||||
? "grid grid-cols-2 gap-2 sm:grid-cols-6"
|
||||
: mode === "cards"
|
||||
? "grid grid-cols-2 gap-2 sm:grid-cols-5"
|
||||
: mode === "console"
|
||||
? "grid grid-cols-1 gap-2 sm:grid-cols-3"
|
||||
: "flex flex-col divide-y divide-line";
|
||||
|
||||
return (
|
||||
<div className="rounded-xl border border-line bg-bg">
|
||||
<div className="flex items-center gap-2 border-b border-line px-4 py-3">
|
||||
<span className="font-mono text-[10px] uppercase tracking-[0.14em] text-faint">
|
||||
same board, four renderers
|
||||
</span>
|
||||
<div className="ml-auto flex gap-1">
|
||||
{MODES.map((m) => (
|
||||
<button
|
||||
key={m}
|
||||
type="button"
|
||||
aria-pressed={mode === m}
|
||||
onClick={() => pick(m)}
|
||||
className={`rounded-md border px-2.5 py-1 font-mono text-[11px] transition-colors duration-150 ${
|
||||
mode === m
|
||||
? "border-line-strong bg-surface-hover text-text"
|
||||
: "border-transparent text-faint hover:text-dim"
|
||||
}`}
|
||||
>
|
||||
{m}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4">
|
||||
<div className={gridCls}>
|
||||
{ITEMS.map((it, k) => (
|
||||
<motion.div
|
||||
key={it.name}
|
||||
layout
|
||||
transition={{ duration: 0.5, ease: [0.2, 0, 0, 1] }}
|
||||
className={mode === "index" ? "" : mode === "bento" ? `col-span-1 ${BENTO_SPAN[k]}` : "col-span-1"}
|
||||
>
|
||||
<motion.div
|
||||
key={mode}
|
||||
initial={{ opacity: 0.4 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className={
|
||||
mode === "index"
|
||||
? "flex items-center gap-4 py-3"
|
||||
: mode === "console"
|
||||
? "flex items-center gap-3 rounded-[4px] border border-line px-3 py-2.5 font-mono"
|
||||
: "flex items-center gap-3 rounded-lg border border-line bg-surface p-3"
|
||||
}
|
||||
>
|
||||
{mode === "index" ? (
|
||||
<>
|
||||
<span className="font-mono text-[11px] text-faint">0{k + 1}</span>
|
||||
<span className="text-[14px] font-medium tracking-tight">{it.name}</span>
|
||||
<span className="hidden font-mono text-[11px] text-faint sm:block">{it.host}</span>
|
||||
<span className="ml-auto"><Chip /></span>
|
||||
</>
|
||||
) : mode === "console" ? (
|
||||
<>
|
||||
<span className="text-[11px] text-text">{it.name.toLowerCase()}</span>
|
||||
<span className="text-[10px] text-faint">{it.host}</span>
|
||||
<span className="ml-auto text-[10px] text-up">[ up ]</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span
|
||||
className={`flex shrink-0 items-center justify-center rounded-md bg-iconbg font-semibold ${mode === "cards" ? "h-7 w-7 text-[11px]" : "h-9 w-9 text-sm"}`}
|
||||
style={{ color: it.tint }}
|
||||
>
|
||||
{it.letter}
|
||||
</span>
|
||||
<span className="min-w-0">
|
||||
<span className={`block truncate font-medium ${mode === "cards" ? "text-[12px]" : "text-[13px]"}`}>
|
||||
{it.name}
|
||||
</span>
|
||||
{mode === "bento" && (
|
||||
<span className="block truncate font-mono text-[10.5px] text-faint">{it.host}</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="ml-auto"><Chip /></span>
|
||||
</>
|
||||
)}
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "motion/react";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
export function Reveal({
|
||||
children,
|
||||
delay = 0,
|
||||
className,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
delay?: number;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<motion.div
|
||||
className={className}
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.55, delay, ease: [0.2, 0, 0, 1] }}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user