// app.jsx — MappedSky OSS splash page
//
// Scroll model:
// • Hero pins to viewport top while you scroll through it.
// • A long scroll "stage" between hero and grid drives the sky from day
// (progress=0) to night (progress=1). Each repo gets a sub-range of
// that scroll where its constellation draws in.
// • Then the repo grid + footer scroll normally over the night sky.
const FONTS = {
display: "'EB Garamond', 'Iowan Old Style', Georgia, serif",
body: "'EB Garamond', Georgia, serif",
mono: "'JetBrains Mono', ui-monospace, monospace",
gfont: 'family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=JetBrains+Mono:wght@400;500',
weight: { display: 500, body: 400 },
};
const ACCENT = '#9fc6ff';
const INTENSITY_VALUE = 1.0; // balanced
const ANIMATION_LEVEL = 'full';
// Inject the active Google Font once on mount.
function useGoogleFont(query) {
React.useEffect(() => {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = `https://fonts.googleapis.com/css2?${query}&display=swap`;
document.head.appendChild(link);
}, [query]);
}
// relativeTime — format an ISO timestamp the way GitHub's UI tends to:
// "today", "yesterday", "12 days ago", "~3 months ago".
function relativeTime(iso) {
if (!iso) return null;
const then = new Date(iso);
if (isNaN(then)) return null;
const days = Math.floor((Date.now() - then.getTime()) / 86400000);
if (days <= 0) return 'today';
if (days === 1) return 'yesterday';
if (days < 14) return `${days} days ago`;
if (days < 60) return `~${Math.round(days / 7)} weeks ago`;
if (days < 365) return `~${Math.round(days / 30)} months ago`;
return `~${Math.round(days / 365)} years ago`;
}
// useLiveRepoStats — fetches stars + pushed_at from the GitHub API for each
// repo with a `gh` slug, in parallel. Caches the merged result in
// localStorage for an hour to be polite to the 60-req/hr unauthenticated
// rate limit. Returns the original REPOS array augmented with live values;
// falls back to the baked-in values on any error.
const __STATS_CACHE_KEY = 'mappedsky-oss.repoStats.v1';
const __STATS_TTL_MS = 60 * 60 * 1000;
function useLiveRepoStats() {
const [stats, setStats] = React.useState(() => {
try {
const raw = localStorage.getItem(__STATS_CACHE_KEY);
if (!raw) return null;
const { at, data } = JSON.parse(raw);
if (Date.now() - at > __STATS_TTL_MS) return null;
return data;
} catch (e) { return null; }
});
React.useEffect(() => {
if (stats) return undefined;
let cancelled = false;
const slugs = REPOS.map((r) => r.gh).filter(Boolean);
Promise.all(
slugs.map((slug) =>
fetch(`https://api.github.com/repos/${slug}`, {
headers: { Accept: 'application/vnd.github+json' },
})
.then((r) => (r.ok ? r.json() : null))
.catch(() => null)
.then((d) => d && {
gh: slug,
stars: d.stargazers_count,
pushedAt: d.pushed_at,
}),
),
).then((rows) => {
if (cancelled) return;
const next = {};
rows.forEach((row) => { if (row) next[row.gh] = row; });
if (Object.keys(next).length === 0) return;
setStats(next);
try {
localStorage.setItem(__STATS_CACHE_KEY,
JSON.stringify({ at: Date.now(), data: next }));
} catch (e) {}
});
return () => { cancelled = true; };
}, [stats]);
return React.useMemo(() => REPOS.map((r) => {
const live = stats && r.gh && stats[r.gh];
if (!live) return r;
return {
...r,
stars: typeof live.stars === 'number' ? live.stars : r.stars,
updated: relativeTime(live.pushedAt) || r.updated,
};
}), [stats]);
}
// useScrollProgress — returns scroll position of an element relative to its
// own height. 0 when its top hits the viewport top, 1 when its bottom does.
function useScrollProgress(ref) {
const [p, setP] = React.useState(0);
React.useEffect(() => {
const onScroll = () => {
const el = ref.current;
if (!el) return;
const r = el.getBoundingClientRect();
const total = r.height - window.innerHeight;
const traveled = -r.top;
setP(Math.max(0, Math.min(1, total > 0 ? traveled / total : 0)));
};
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll);
return () => {
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onScroll);
};
}, [ref]);
return p;
}
// ── Constellation chip — small SVG of one repo's constellation ─────────────
function ConstellationChip({ repo, color, size = 88 }) {
const pad = 8;
const project = (x, y) => ({
x: pad + (x / 100) * (100 - pad * 2),
y: pad + (y / 60) * (100 - pad * 2 * (60 / 100)),
});
const pts = repo.stars3d.map(({ x, y }) => project(x, y));
return (
{repo.edges.map(([a, b], i) => {
const p1 = pts[a], p2 = pts[b];
return (
);
}
// ── Repo card ──────────────────────────────────────────────────────────────
function RepoCard({ repo }) {
const langColor = LANG_COLORS[repo.language] || '#888';
const href = repo.url || `https://github.com/mappedsky/${repo.name}`;
return (
{repo.logoSvg ? (
) : (
)}
{repo.name}
{repo.tagline}
{repo.summary}
·
★ {repo.stars.toLocaleString()}
·
{repo.license}
·
updated {repo.updated}
view project →
);
}
// ── Top nav bar ────────────────────────────────────────────────────────────
function NavBar({ scrolled, onJump }) {
return (
MappedSky
/ open source
);
}
// ── Hero ───────────────────────────────────────────────────────────────────
function Hero({ progress }) {
const textLight = progress > 0.45;
return (
Map the sky.Mind the surface.
MappedSky builds open-source infrastructure for security teams who'd rather
read source than read brochures.
↓ scroll
);
}
// ── Stage section that drives sky progress ────────────────────────────────
function SkyStage({ stageRef }) {
return (
{REPOS.map((r, i) => (
{String(i + 1).padStart(2, '0')}
))}
);
}
// ── Repo grid section ─────────────────────────────────────────────────────
function ReposSection({ repos }) {
return (
);
}
// ── Contribute section ────────────────────────────────────────────────────
function ContributeSection() {
const items = [
{
k: '01',
h: 'File an issue',
b: 'Bug reports and feature requests live in each project. We triage weekly.',
},
{
k: '02',
h: 'Open a PR',
b: (
<>
Fork the repo and send it — CI runs on first push. We use the{' '}
DCO
, so all that's needed is to sign off your commits.
),
},
{
k: '03',
h: 'Start a discussion',
b: (
<>
Questions, ideas, and design conversations live in{' '}
GitHub Discussions
{' '}on the org, or any of the individual projects.
),
},
];
return (
contribute
We're a small team. Your changes make these tools better for security
engineers we'll never meet.
{items.map((it) => (
{it.k}
{it.h}
{it.b}
))}
);
}
// ── Footer ────────────────────────────────────────────────────────────────
function FooterBar() {
return (
);
}
// ── Root app ──────────────────────────────────────────────────────────────
function App() {
useGoogleFont(FONTS.gfont);
const liveRepos = useLiveRepoStats();
const stageRef = React.useRef(null);
const stageProgress = useScrollProgress(stageRef);
// Per-repo draw-in progress. Each repo owns 1/N of the scroll stage.
const constellationProgress = React.useMemo(() => {
const n = REPOS.length;
return REPOS.map((_, i) => {
const start = i / n;
const end = (i + 1) / n;
const local = (stageProgress - start) / (end - start);
return Math.max(0, Math.min(1, local));
});
}, [stageProgress]);
// Scroll detection for nav style change
const [scrolled, setScrolled] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > window.innerHeight * 0.6);
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
const onJump = (id) => {
document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
};
return (
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( 
) : (