const { useState, useEffect, useMemo, useCallback, useRef } = React; /* ===================== data ===================== */ const ORG = "kiwiprojekt"; const EXCLUDE = new Set(["kiwiprojekt.github.io"]); function formatDate(dateStr) { if (!dateStr) return "—"; try { const d = new Date(dateStr); return d.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" }); } catch { return "—"; } } function toProject(repo) { const tags = [repo.language, ...(repo.topics||[])].filter(Boolean).slice(0, 5); const year = new Date(repo.pushed_at || repo.updated_at || repo.created_at).getFullYear(); return { id: repo.name, name: repo.name, tagline: repo.description || "—", description: repo.description || "No description yet.", tags, year, stars: repo.stargazers_count || 0, forks: repo.forks_count || 0, language: repo.language || "—", highlight: repo.description || "", github: repo.html_url, demo: repo.homepage?.length > 0 ? repo.homepage : null, nuget: null, install: null, license: repo.license?.spdx_id || null, updatedAt: repo.pushed_at || repo.updated_at, }; } async function fetchProjects() { const CACHE_KEY = `kp-repos-${ORG}`; const CACHE_TTL_MS = 10 * 60 * 1000; try { const raw = sessionStorage.getItem(CACHE_KEY); if (raw) { const { t, data } = JSON.parse(raw); if (Date.now() - t < CACHE_TTL_MS && Array.isArray(data)) return { projects: data, source: "cache" }; } } catch {} try { const res = await fetch(`https://api.github.com/orgs/${ORG}/repos?per_page=100&sort=pushed`, { headers: { Accept: "application/vnd.github+json" } }); if (!res.ok) throw new Error(`GitHub API ${res.status}`); const repos = await res.json(); const projects = repos.filter(r => !r.fork && !r.archived && !EXCLUDE.has(r.name)).sort((a,b) => new Date(b.pushed_at) - new Date(a.pushed_at)).map(toProject); try { sessionStorage.setItem(CACHE_KEY, JSON.stringify({ t: Date.now(), data: projects })); } catch {} return { projects, source: "live" }; } catch (err) { return { projects: [], source: "error", error: err.message }; } } /* ===================== icons ===================== */ const Icon = { github: (p) => , external: (p) => , nuget: (p) => , sun: (p) => , moon: (p) => , close: (p) => , star: (p) => , copy: (p) => , settings: (p) => , }; /* ===================== logo ===================== */ const Logo = ({ size = 36, mono = false }) => { const c1 = mono ? "var(--fg)" : "var(--kiwi-sage)"; const c2 = mono ? "var(--fg)" : "var(--kiwi-lime)"; const c3 = mono ? "var(--fg)" : "var(--kiwi-yellow)"; const o = mono ? 0.35 : 0.9; return ( ); }; /* ===================== shared ===================== */ const LANG_COLORS = { "C#": "#68217a", "TypeScript": "#3178c6", "JavaScript": "#f1e05a", "Go": "#00add8", "Rust": "#dea584", }; const LangDot = ({ lang }) => ( {lang} ); const LinkButton = ({ href, icon, children, variant = "ghost" }) => { if (!href) return null; const I = Icon[icon]; return ( e.stopPropagation()}> {I && }{children} ); }; const CopyLine = ({ text }) => { const [copied, setCopied] = useState(false); return (
{ navigator.clipboard?.writeText(text); setCopied(true); setTimeout(()=>setCopied(false),1400); }} role="button" tabIndex={0}> {text}
); }; const ProjectModal = ({ project, onClose }) => { useEffect(() => { if (!project) return; const onKey = e => { if (e.key==="Escape") onClose(); }; window.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; }, [project, onClose]); if (!project) return null; const p = project; return (
e.stopPropagation()} role="dialog" aria-modal="true">

{p.name}

{p.tagline}

· {p.stars.toLocaleString()} · Updated {formatDate(p.updatedAt)}

{p.description}

Highlight {p.highlight}
{p.install &&
Install
}
{p.tags.map(t=>{t})}
View on GitHub Live demo NuGet
); }; function useTheme() { const [theme, setTheme] = useState(() => { try { return localStorage.getItem("kp-theme")||"light"; } catch { return "light"; } }); useEffect(() => { document.documentElement.dataset.theme = theme; try { localStorage.setItem("kp-theme", theme); } catch {} }, [theme]); const toggle = useCallback(() => setTheme(t => t==="light"?"dark":"light"), []); return [theme, toggle]; } function useMouseGlow() { const ref = useRef(null); const rafRef = useRef(0); const pending = useRef(null); const flush = useCallback(() => { rafRef.current = 0; const el = ref.current; const p = pending.current; if (!el || !p) return; el.style.setProperty("--mx", p.x + "%"); el.style.setProperty("--my", p.y + "%"); }, []); const onMove = useCallback((e) => { const el = ref.current; if (!el) return; const r = el.getBoundingClientRect(); pending.current = { x: ((e.clientX-r.left)/r.width)*100, y: ((e.clientY-r.top)/r.height)*100 }; if (!rafRef.current) rafRef.current = requestAnimationFrame(flush); }, [flush]); const onEnter = useCallback(() => { const el = ref.current; if (el) el.style.setProperty("--glow","1"); }, []); const onLeave = useCallback(() => { const el = ref.current; if (el) el.style.setProperty("--glow","0"); }, []); useEffect(() => () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); }, []); return { ref, onPointerMove: onMove, onPointerEnter: onEnter, onPointerLeave: onLeave }; } /* ===================== variant B fancy ===================== */ const VariantBFancy = ({ onOpen, projects = [], source = "loading", onRefetch }) => { const [q, setQ] = useState(""); const [mouse, setMouse] = useState({ x: 50, y: 50 }); const TYPING_LINES = [ { prompt: "whoami", out: "kiwiprojekt — building sharp, small tools." }, { prompt: "ls ./projects", out: null }, ]; const TOTAL_CHARS = TYPING_LINES.reduce((s, l) => s + l.prompt.length, 0); const [charCount, setCharCount] = useState(0); const [linesRevealed, setLinesRevealed] = useState(0); useEffect(() => { if (charCount >= TOTAL_CHARS) return; const id = setTimeout(() => setCharCount(c => c + 1), 55); return () => clearTimeout(id); }, [charCount]); const lineChars = []; let rem = charCount; for (const l of TYPING_LINES) { const s = Math.min(rem, l.prompt.length); lineChars.push(s); rem = Math.max(0, rem - l.prompt.length); } useEffect(() => { const typed = lineChars.filter((c,i) => c >= TYPING_LINES[i].prompt.length).length; if (typed > linesRevealed) { const id = setTimeout(()=>setLinesRevealed(typed),200); return ()=>clearTimeout(id); } }, [charCount]); const allTyped = charCount >= TOTAL_CHARS; const filtered = useMemo(() => projects.filter(p => { if (q && !(p.name.toLowerCase().includes(q.toLowerCase()) || p.tagline.toLowerCase().includes(q.toLowerCase()) || p.tags.join(" ").toLowerCase().includes(q.toLowerCase()))) return false; return true; }), [projects, q]); return (
{ const r=e.currentTarget.getBoundingClientRect(); setMouse({x:((e.clientX-r.left)/r.width)*100,y:((e.clientY-r.top)/r.height)*100}); }} style={{"--mx":`${mouse.x}%`,"--my":`${mouse.y}%`}} >