/* global React */
const { useEffect, useRef, useState } = React;
// =============================================================
// useReveal: IntersectionObserver hook to add `.in` to elements.
// Also observes the DOM for new `.reveal` nodes added later (e.g. when a
// section toggles between two mockups), otherwise late-mounted elements
// stay at opacity:0 forever.
// =============================================================
function useReveal() {
useEffect(() => {
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add("in");
io.unobserve(e.target);
}
});
}, { threshold: 0.12 });
const observe = (el) => {
if (el.classList.contains("in")) return;
io.observe(el);
};
document.querySelectorAll(".reveal").forEach(observe);
const mo = new MutationObserver((muts) => {
for (const m of muts) {
m.addedNodes.forEach((n) => {
if (n.nodeType !== 1) return;
if (n.classList && n.classList.contains("reveal")) observe(n);
n.querySelectorAll && n.querySelectorAll(".reveal").forEach(observe);
});
}
});
mo.observe(document.body, { childList: true, subtree: true });
return () => { io.disconnect(); mo.disconnect(); };
}, []);
}
// =============================================================
// detectOS
// =============================================================
function detectOS() {
if (typeof navigator === "undefined") return "mac";
const ua = navigator.userAgent || "";
const platform = navigator.platform || "";
if (/Mac|iPhone|iPad|iPod/.test(platform) || /Mac/.test(ua)) return "mac";
if (/Win/.test(platform) || /Windows/.test(ua)) return "win";
if (/Linux/.test(platform) || /Linux|X11/.test(ua)) return "linux";
return "mac";
}
// =============================================================
// Brand mark
// =============================================================
function BrandMark({ size = 28 }) {
return (
);
}
// =============================================================
// Keycap
// =============================================================
function Keycap({ children, size = "md" }) {
const sizes = {
sm: { fs: 11, pad: "3px 6px", minW: 18, h: 20 },
md: { fs: 13, pad: "5px 9px", minW: 24, h: 26 },
lg: { fs: 16, pad: "8px 12px", minW: 32, h: 34 },
};
const s = sizes[size];
return (
{children}
);
}
// =============================================================
// Section header
// =============================================================
function Eyebrow({ children, color = "#38BDF8", num }) {
return (
{num && (
{String(num).padStart(2, "0")}
)}
{children}
);
}
function SectionTitle({ children, align = "left", maxWidth }) {
return (
{children}
);
}
function SectionLead({ children, align = "left", maxWidth = 560 }) {
return (
{children}
);
}
// =============================================================
// Button
// =============================================================
function Button({ href = "#", primary, children, sub, icon, onClick }) {
const [hover, setHover] = useState(false);
return (
setHover(true)} onMouseLeave={() => setHover(false)}
style={{
display: "inline-flex", alignItems: "center", gap: 12,
padding: "12px 20px", borderRadius: 10,
background: primary
? (hover ? "var(--btn-primary-hover, rgba(255,255,255,0.92))" : "var(--btn-primary, white)")
: (hover ? "var(--bg-elev)" : "transparent"),
color: primary ? "var(--btn-primary-fg, #0A0A0A)" : "var(--fg)",
border: primary ? "0" : "1px solid var(--line-strong)",
textDecoration: "none",
fontFamily: "var(--font-sans)",
transition: "all 200ms cubic-bezier(0.2,0.8,0.2,1)",
transform: hover ? "translateY(-1px)" : "translateY(0)",
boxShadow: primary && hover ? "0 8px 24px rgba(255,255,255,0.15)" : "none",
cursor: "pointer",
}}>
{icon}
{children}
{sub && {sub}}
);
}
// =============================================================
// OS Logo (drawn in CSS for crispness)
// =============================================================
function OSLogo({ os, size = 16 }) {
const fill = "currentColor";
if (os === "mac") return (
);
if (os === "win") return (
);
if (os === "linux") return (
);
return null;
}
// =============================================================
// Card
// =============================================================
function Card({ children, padding = 24, style = {} }) {
return (
{children}
);
}
// =============================================================
// Code dot
// =============================================================
function CodeDot({ color }) {
return ;
}
// =============================================================
// useGitHubStars: fetch live star count with localStorage cache
// =============================================================
function useGitHubStars(repo = "KonradDallaOrg/dimmy") {
const [stars, setStars] = useState(null);
useEffect(() => {
const cacheKey = `gh-stars-${repo}`;
const ttl = 60 * 60 * 1000; // 1h
try {
const cached = JSON.parse(localStorage.getItem(cacheKey) || "null");
if (cached && Date.now() - cached.t < ttl && typeof cached.n === "number") {
setStars(cached.n);
return;
}
} catch (e) {}
fetch(`https://api.github.com/repos/${repo}`)
.then((r) => (r.ok ? r.json() : null))
.then((data) => {
if (data && typeof data.stargazers_count === "number") {
setStars(data.stargazers_count);
try { localStorage.setItem(cacheKey, JSON.stringify({ n: data.stargazers_count, t: Date.now() })); } catch (e) {}
}
})
.catch(() => {});
}, [repo]);
return stars;
}
function formatStars(n) {
if (n == null) return null;
if (n >= 10000) return `${Math.round(n / 1000)}k`;
if (n >= 1000) return `${(n / 1000).toFixed(1).replace(/\.0$/, "")}k`;
return String(n);
}
// =============================================================
// useLatestRelease: fetch latest release tag (e.g. "v1.4.0") from GitHub
// =============================================================
function useLatestRelease(repo = "KonradDallaOrg/dimmy") {
const [tag, setTag] = useState(null);
useEffect(() => {
const cacheKey = `gh-release-${repo}`;
const ttl = 60 * 60 * 1000;
try {
const cached = JSON.parse(localStorage.getItem(cacheKey) || "null");
if (cached && Date.now() - cached.t < ttl && typeof cached.v === "string") {
setTag(cached.v);
return;
}
} catch (e) {}
fetch(`https://api.github.com/repos/${repo}/releases/latest`)
.then((r) => (r.ok ? r.json() : null))
.then((data) => {
if (data && typeof data.tag_name === "string") {
setTag(data.tag_name);
try { localStorage.setItem(cacheKey, JSON.stringify({ v: data.tag_name, t: Date.now() })); } catch (e) {}
}
})
.catch(() => {});
}, [repo]);
return tag;
}
window.Common = { useReveal, detectOS, BrandMark, Keycap, Eyebrow, SectionTitle, SectionLead, Button, OSLogo, Card, CodeDot, useGitHubStars, formatStars, useLatestRelease };