guestbook
{roots.length}
{admin ? "admin mode" : "one per visitor"}
{loading &&
loading…
}
{!loading && error && roots.length === 0 &&
{error}
}
{!loading && !error && roots.length === 0 && (
nobody yet. feel free to be the first.
)}
{roots.map((g) => (
{g.who.slice(0, 1).toUpperCase()}
{g.who}
{g.country && {countryFlag(g.country)} {g.country}}
{g.msg}
{admin && (
<>
)}
{timeAgo(g.created_at)}
{repliesOf(g.id).map(r => (
{r.who.slice(0, 1).toUpperCase()}
{r.who} re
{r.country && {countryFlag(r.country)} {r.country}}
{r.msg}
{admin && (
)}
{timeAgo(r.created_at)}
))}
{replyTo === g.id && !hasReplied(g.id) && (
setReplyText(e.target.value)}
onKeyDown={e => e.key === "Enter" && submitReply(g.id)}
maxLength={140}
autoFocus
/>
)}
))}
{hasPosted ? (
you already left a note. thanks for that.
) : (
setName(e.target.value)}
style={{ width: 80 }}
maxLength={16}
/>
setMsg(e.target.value)}
onKeyDown={e => e.key === "Enter" && submit()}
maxLength={140}
/>
)}
{error && roots.length > 0 && (
{error}
)}
);
}
function VisitorsAndContact() {
const [count] = useState(() => {
const base = parseInt(localStorage.getItem("hub.visits") || "0", 10);
const next = base + 1;
localStorage.setItem("hub.visits", String(next));
return next;
});
return (
Tweaks
{ACCENT_PRESETS.map(a => (
set("accentHue", a.hue)}
title={a.name}
/>
))}
set("density", parseFloat(e.target.value))}
/>
);
}
const DEFAULTS = {
accentHue: 262,
theme: "light",
layout: "sidebar",
density: 1,
};
function App() {
const [config, setConfig] = useState(() => {
try { return { ...DEFAULTS, ...JSON.parse(localStorage.getItem("hub.config") || "{}") }; }
catch { return DEFAULTS; }
});
const [cmdk, setCmdk] = useState(false);
const [tweaks, setTweaks] = useState(false);
const [active, setActive] = useState("overview");
const [disclaimer, setDisclaimer] = useState(() => !localStorage.getItem("hub.seen"));
const admin = useAdmin();
const scrollToRandomRef = useRef(() => {});
const onRandomGuest = useCallback(() => scrollToRandomRef.current(), []);
const dismissDisclaimer = () => {
localStorage.setItem("hub.seen", "1");
setDisclaimer(false);
};
useEffect(() => {
const r = document.documentElement;
r.setAttribute("data-theme", config.theme);
r.style.setProperty("--accent-hue", config.accentHue);
r.style.setProperty("--density", config.density);
localStorage.setItem("hub.config", JSON.stringify(config));
}, [config]);
useEffect(() => {
const onKey = (e) => {
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
e.preventDefault(); setCmdk(c => !c);
}
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, []);
return (
<>
{config.layout === "sidebar" && (
setConfig(c => ({ ...c, theme: t }))}
theme={config.theme}
onOpenCmdK={() => setCmdk(true)}
onRandomGuest={onRandomGuest}
admin={admin}
/>
)}
setCmdk(true)}
theme={config.theme}
setTheme={(t) => setConfig(c => ({ ...c, theme: t }))}
/>
);
}
ReactDOM.createRoot(document.getElementById("root")).render(
);