// huske website — Mark, Nav, theme controller, Footer, shared icons. const Mark = ({ size = 22 }) => ( ); const ArrowRight = ({ size = 14 }) => ( ); const SunIcon = () => ( ); const MoonIcon = () => ( ); const GhGlyph = ({ size = 14 }) => ( ); const StarGlyph = ({ size = 12 }) => ( ); const CopyGlyph = () => ( ); const CheckGlyph = () => ( ); const KeyGlyph = ({ size = 13 }) => ( ); // ---- Reusable copy-to-clipboard button ---- const CopyButton = ({ text, className = "copy", withLabel = true }) => { const [copied, setCopied] = React.useState(false); return ( ); }; // ---- Live GitHub star count (cached, fails quiet) ---- const STARS_CACHE_KEY = "huske-stars"; const STARS_TTL_MS = 5 * 60 * 1000; // refetch at most every 5 min per visitor function formatStars(n) { if (n >= 1000) { const k = n / 1000; return `${k >= 10 ? Math.round(k) : k.toFixed(1).replace(/\.0$/, "")}k`; } return String(n); } function useGitHubStars(repo = "tiagomoraes/huske") { const [stars, setStars] = React.useState(() => { try { const raw = localStorage.getItem(STARS_CACHE_KEY); if (!raw) return null; const { n } = JSON.parse(raw); return typeof n === "number" ? n : null; } catch (e) { return null; } }); React.useEffect(() => { let fresh = false; try { const raw = localStorage.getItem(STARS_CACHE_KEY); if (raw) { const { t } = JSON.parse(raw); fresh = typeof t === "number" && Date.now() - t < STARS_TTL_MS; } } catch (e) {} if (fresh) return; let alive = true; fetch(`https://api.github.com/repos/${repo}`) .then((r) => (r.ok ? r.json() : Promise.reject(r.status))) .then((d) => { if (!alive || typeof d.stargazers_count !== "number") return; setStars(d.stargazers_count); try { localStorage.setItem(STARS_CACHE_KEY, JSON.stringify({ n: d.stargazers_count, t: Date.now() })); } catch (e) {} }) .catch(() => {}); return () => { alive = false; }; }, [repo]); return stars; } // ---- Theme ---- function useTheme() { const [theme, setTheme] = React.useState(() => { if (typeof window === "undefined") return "dark"; return localStorage.getItem("huske-theme") || "dark"; }); React.useEffect(() => { document.documentElement.setAttribute("data-theme", theme); localStorage.setItem("huske-theme", theme); }, [theme]); return [theme, setTheme]; } const ThemeToggle = ({ theme, setTheme }) => ( ); // `base` prefixes the in-page anchors so the shared Nav works on the docs page // (docs/index.html): on the landing page base="" → "#why"; on the docs page // base="../" → "../#why" (i.e. /huske/#why). `docsHref` is the link to the docs // page itself: "docs/" from the landing root, "./" when already on the docs page. const Nav = ({ theme, setTheme, base = "", docsHref = "docs/" }) => { const stars = useGitHubStars(); const at = (id) => `${base}#${id}`; return ( ); }; const Footer = ({ base = "", docsHref = "docs/" }) => ( ); Object.assign(window, { Mark, ArrowRight, SunIcon, MoonIcon, GhGlyph, StarGlyph, CopyGlyph, CheckGlyph, KeyGlyph, CopyButton, useGitHubStars, formatStars, useTheme, ThemeToggle, Nav, Footer, });