---
import Window from "../layouts/Window.astro";
import { loadDocs, urlFor } from "../lib/docs";
import { SECTIONS, INDEX_ICON } from "../lib/nav";
import { icon } from "../lib/icons";
import { allPages, crumbsFor, HOME_DESCRIPTION } from "../lib/site";
import { blurbs, firstParagraph } from "../lib/blurbs";
const docs = await loadDocs();
const lines = blurbs(docs);
const readme = docs.get("README")!;
const intro = firstParagraph(readme) ?? "";
// what the banner shows on hover, keyed by the thing hovered. every entry is in the html,
// stacked in one grid cell, so the banner is always as tall as its tallest entry and
// switching between them never moves the grid below.
const banner: Record<string, { icon?: string; icons?: string[]; title: string; where: string; html: string }> = {};
const boxes = SECTIONS.map((s) => {
const items = [
...(s.index ? [{ doc: s.index, label: "overview", icon: INDEX_ICON }] : []),
...s.pages,
];
for (const it of items) {
const doc = docs.get(it.doc)!;
banner[doc.url] = { icon: it.icon, title: it.label === "overview" ? `${s.title} overview` : it.label, where: s.title, html: lines.get(it.doc) ?? doc.title };
}
const index = s.index ? docs.get(s.index) : undefined;
banner[`#${s.id}`] = {
icons: s.pages.slice(0, 3).map((p) => p.icon),
title: s.title,
where: `${s.pages.length} pages: ${s.pages.map((p) => p.label).join(", ")}`,
html: (index && (firstParagraph(index) ?? lines.get(s.index!))) ?? "",
};
return { s, items: items.map((it) => ({ ...it, url: urlFor(it.doc) })) };
});
---
<Window layout="none" description={HOME_DESCRIPTION} crumbs={crumbsFor()} pages={allPages()}>
<div class="home" data-home>
<div class="banner" data-banner>
<div class="layer on" data-for="">
<Fragment set:html={icon("hydrant", 56)} />
<div><b>hydrant</b><Fragment set:html={intro} /></div>
</div>
{Object.entries(banner).map(([key, e]) => (
<div class="layer" data-for={key} aria-hidden="true">
{e.icons ? <span class="stack" set:html={e.icons.map((i) => icon(i, 40)).join("")} /> : <Fragment set:html={icon(e.icon!, 56)} />}
<div><b>{e.title}</b><span class="where">{e.where}</span><Fragment set:html={e.html} /></div>
</div>
))}
</div>
{boxes.map(({ s, items }) => (
<fieldset class="box" id={s.id} data-section={`#${s.id}`}>
<legend>{s.title}</legend>
<div class="icons">
{items.map((it) => (
<a class="ico" href={it.url} data-page={it.url}>
<Fragment set:html={icon(it.icon, 48)} />
<span set:html={it.label.replaceAll(".", ".<wbr>")} />
</a>
))}
</div>
</fieldset>
))}
</div>
<script>
import "../scripts/home";
</script>
</Window>