mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-08 04:08:24 +00:00
Phase 5: every page of the site, the resume PDF and RSS
Landing, About, Now, Resume (with a generated PDF), Work and case studies, Inquiries and the sent page, Library and the Shelf, Workshop and craft pages, Tabletop, Blog with topics and posts, RSS, the Store, product lines, the order form and the 404, all rendered from the content service's notes. Schema: experience previousRoles, skills stack core items, page stats, make tags and deck favorite. Icon names from notes map to brand icons in one place, and HTML comments are dropped when Markdown renders. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx
This commit is contained in:
Claude
@@ -0,0 +1,369 @@
|
||||
---
|
||||
/**
|
||||
* The Shelf: every board game. What is on the table (from the status log),
|
||||
* then the collection, filtered by how it plays, owned, want to play and
|
||||
* favorites, and sorted by last played, A to Z or recently added. Player
|
||||
* counts and play times come from BoardGameGeek later; no filter for them yet.
|
||||
*/
|
||||
import Divider from "@gk/ui/components/Divider.astro";
|
||||
import FilterGroup from "@gk/ui/components/FilterGroup.astro";
|
||||
import GiltCorners from "@gk/ui/components/GiltCorners.astro";
|
||||
import PageShell from "@gk/ui/components/PageShell.astro";
|
||||
import SearchField from "@gk/ui/components/SearchField.astro";
|
||||
import Star from "@gk/ui/components/Star.astro";
|
||||
import StarChartArt from "@gk/ui/components/StarChartArt.astro";
|
||||
import TickScale from "@gk/ui/components/TickScale.astro";
|
||||
import FilterLayout from "../../components/library/FilterLayout.astro";
|
||||
import GameCard from "../../components/library/GameCard.astro";
|
||||
import LibraryHero from "../../components/library/LibraryHero.astro";
|
||||
import RailGroup from "../../components/library/RailGroup.astro";
|
||||
import { gameShows, onTheTable, playStyles, searchText, shelfFilter, sortGames, sorts, type Game } from "../../lib/library.ts";
|
||||
import { site } from "../../lib/page.ts";
|
||||
import { formatDate, mediaSrc } from "../../lib/site.ts";
|
||||
|
||||
const s = await site();
|
||||
const f = shelfFilter(Astro.url.searchParams);
|
||||
const all = s.all("board-game");
|
||||
const games = sortGames(all, f.sort);
|
||||
const styles = playStyles(all);
|
||||
const owned = all.filter((g) => g.data.owned).length;
|
||||
const lede = s.pageText("/library/shelf")?.data.lede ?? "My board game collection. Filter by how it plays, sort by what hit the table last.";
|
||||
|
||||
const text = (g: Game) => searchText([g.title, g.data.blurb, ...(g.data.howItPlays ?? [])]);
|
||||
const visible = new Set(games.filter((g) => gameShows(g, f, text(g))).map((g) => g.slug));
|
||||
|
||||
// On the table: board-game statuses, then the most recent play not already listed.
|
||||
const table: { label: string; game: Game; note?: string; live: boolean }[] = onTheTable(s).map(({ status, game }) => ({
|
||||
label: `${status.data.kind} now`,
|
||||
game,
|
||||
note: status.data.note,
|
||||
live: true,
|
||||
}));
|
||||
const recent = sortGames(all, "played").find((g) => g.data.lastPlayed && !table.some((t) => t.game.path === g.path));
|
||||
if (recent) table.push({ label: "Played recently", game: recent, note: `Last played ${formatDate(recent.data.lastPlayed)}`, live: false });
|
||||
|
||||
const sortHref = (key: string) => {
|
||||
const p = new URLSearchParams(Astro.url.searchParams);
|
||||
p.set("sort", key);
|
||||
return `/library/shelf?${p}`;
|
||||
};
|
||||
---
|
||||
<PageShell title="The Shelf" family="shelf" current="library" description="Greg's board game collection: what is on the table, how each one plays, and what hit the table last.">
|
||||
<Fragment slot="hero"><LibraryHero current="shelf" lede={lede} /></Fragment>
|
||||
|
||||
<section aria-labelledby="sh-table" class="top">
|
||||
<div class="count gk-featured">
|
||||
<StarChartArt class="count-art" ratio="auto" seal="tria-prima" />
|
||||
<GiltCorners />
|
||||
<p class="count-text"><span class="num">{owned}</span><span>{owned === 1 ? "game" : "games"} on the shelf</span></p>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="kick">
|
||||
<h2 id="sh-table"><Star size={14} />On the table</h2>
|
||||
<TickScale width={150} height={10} count={30} />
|
||||
</div>
|
||||
{
|
||||
table.length > 0 ? (
|
||||
<ul class="table-list">
|
||||
{table.map((t) => (
|
||||
<li>
|
||||
<a href={`#${t.game.slug}`} class:list={["gk-card", "table-card", { live: t.live }]}>
|
||||
<StarChartArt class="table-art" ratio="1 / 1" seal="tria-prima" src={mediaSrc(t.game.data.cover)} />
|
||||
<span class="table-body">
|
||||
<span class="table-label">{t.label}</span>
|
||||
<span class="table-title">{t.game.title}</span>
|
||||
{t.note && <span class="table-note">{t.note}</span>}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p class="quiet">Nothing on the table right now.</p>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divide"><Divider seed="shelf-list" /></div>
|
||||
|
||||
<FilterLayout action="/library/shelf" formId="shelf-filters">
|
||||
<Fragment slot="rail">
|
||||
<SearchField label="Search the Shelf" placeholder="Search games" value={f.q || undefined} />
|
||||
<input type="hidden" name="sort" value={f.sort} />
|
||||
{
|
||||
styles.length > 0 && (
|
||||
<RailGroup legend="How it plays">
|
||||
{styles.map((p) => <label class="check"><input type="checkbox" name="plays" value={p.toLowerCase()} checked={f.plays.has(p.toLowerCase())} />{p}</label>)}
|
||||
</RailGroup>
|
||||
)
|
||||
}
|
||||
<RailGroup legend="Show">
|
||||
<label class="check"><input type="checkbox" name="owned" value="1" checked={f.owned} />Owned</label>
|
||||
<label class="check"><input type="checkbox" name="want" value="1" checked={f.want} />Want to play</label>
|
||||
<label class="check"><input type="checkbox" name="fav" value="1" checked={f.favorites} />Favorites only</label>
|
||||
</RailGroup>
|
||||
</Fragment>
|
||||
|
||||
<section aria-label="Games" class="games">
|
||||
<div class="bar">
|
||||
<p class="showing" aria-live="polite">Showing <strong data-count>{visible.size}</strong> <span data-noun>{visible.size === 1 ? "game" : "games"}</span></p>
|
||||
<div class="sort">
|
||||
<span class="sort-label" aria-hidden="true">Sort</span>
|
||||
<FilterGroup label="Sort" items={sorts.map((o) => ({ label: o.label, href: sortHref(o.key), active: o.key === f.sort, value: o.key }))} />
|
||||
</div>
|
||||
</div>
|
||||
<ul class="grid" data-grid>
|
||||
{games.map((g) => <GameCard game={g} site={s} hidden={!visible.has(g.slug)} />)}
|
||||
</ul>
|
||||
<p class="quiet" data-empty hidden={visible.size > 0}>No games on the Shelf match these filters.</p>
|
||||
</section>
|
||||
</FilterLayout>
|
||||
</PageShell>
|
||||
|
||||
<style>
|
||||
.top {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
align-items: stretch;
|
||||
padding: 0 0 8px;
|
||||
}
|
||||
.count {
|
||||
position: relative;
|
||||
flex: 1 1 380px;
|
||||
min-width: 0;
|
||||
min-height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.count :global(.count-art) {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.count::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(90deg, rgba(14, 21, 34, 0.9), rgba(14, 21, 34, 0.2));
|
||||
}
|
||||
.count-text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
padding: 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.num {
|
||||
font-family: var(--gk-font-display);
|
||||
font-weight: 700;
|
||||
font-size: 56px;
|
||||
line-height: 1;
|
||||
color: var(--gk-gold-bright);
|
||||
}
|
||||
.count :global(.gk-corner) {
|
||||
z-index: 1;
|
||||
}
|
||||
.table {
|
||||
flex: 2 1 520px;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.kick {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.kick h2 {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-family: var(--gk-font-body);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.3em;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: var(--gk-gold-bright);
|
||||
}
|
||||
.table-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.table-list li {
|
||||
flex: 1 1 280px;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
}
|
||||
.table-card {
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
.table-card.live {
|
||||
border-color: var(--gk-gold);
|
||||
}
|
||||
.table-card :global(.table-art) {
|
||||
flex: 0 0 56px;
|
||||
width: 56px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.table-card :global(.table-art .mat) {
|
||||
display: none;
|
||||
}
|
||||
.table-card :global(.table-art .seal) {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
.table-body {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.table-label {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.16em;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: var(--gk-gold-bright);
|
||||
}
|
||||
.table-title {
|
||||
font-family: var(--gk-font-display);
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
}
|
||||
.table-note,
|
||||
.quiet {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: var(--gk-muted);
|
||||
}
|
||||
.divide {
|
||||
padding: 24px 0 4px;
|
||||
}
|
||||
.games {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
.bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.showing {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: var(--gk-muted);
|
||||
}
|
||||
.showing strong {
|
||||
color: var(--gk-text);
|
||||
}
|
||||
.sort {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.sort-label {
|
||||
font-size: 13px;
|
||||
color: var(--gk-muted);
|
||||
margin-right: 4px;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 16px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Live filtering and sorting: the same rules as the server, on the rendered cards.
|
||||
const form = document.getElementById("shelf-filters") as HTMLFormElement | null;
|
||||
const grid = document.querySelector<HTMLElement>("[data-grid]");
|
||||
if (form && grid) {
|
||||
const cards = [...grid.children] as HTMLElement[];
|
||||
const text = new Map(cards.map((c) => [c, (c.querySelector(".body")?.textContent ?? "").toLowerCase()]));
|
||||
const title = (c: HTMLElement) => c.querySelector("h3")?.textContent?.trim() ?? "";
|
||||
const sortInput = form.querySelector<HTMLInputElement>('input[name="sort"]')!;
|
||||
const sortLinks = [...document.querySelectorAll<HTMLAnchorElement>(".sort .gk-filter")];
|
||||
const count = document.querySelector("[data-count]");
|
||||
const noun = document.querySelector("[data-noun]");
|
||||
const empty = document.querySelector<HTMLElement>("[data-empty]");
|
||||
form.querySelector("[data-nojs]")?.remove();
|
||||
|
||||
const desc = (k: "lp" | "c") => (a: HTMLElement, b: HTMLElement) => (b.dataset[k] ?? "").localeCompare(a.dataset[k] ?? "") || title(a).localeCompare(title(b));
|
||||
const orders: Record<string, (a: HTMLElement, b: HTMLElement) => number> = {
|
||||
played: desc("lp"),
|
||||
az: (a, b) => title(a).localeCompare(title(b)),
|
||||
added: desc("c"),
|
||||
};
|
||||
|
||||
const apply = () => {
|
||||
const data = new FormData(form);
|
||||
const q = String(data.get("q") ?? "").trim().toLowerCase();
|
||||
const plays = data.getAll("plays").map(String);
|
||||
const owned = data.has("owned");
|
||||
const want = data.has("want");
|
||||
const fav = data.has("fav");
|
||||
let n = 0;
|
||||
for (const c of cards) {
|
||||
const d = c.dataset;
|
||||
const ok =
|
||||
(!(owned || want) || (owned && !!d.o) || (want && !!d.w)) &&
|
||||
(!fav || !!d.f) &&
|
||||
(!plays.length || (d.p ?? "").split("|").some((p) => plays.includes(p))) &&
|
||||
(!q || text.get(c)!.includes(q));
|
||||
c.hidden = !ok;
|
||||
if (ok) n++;
|
||||
}
|
||||
if (count) count.textContent = String(n);
|
||||
if (noun) noun.textContent = n === 1 ? "game" : "games";
|
||||
if (empty) empty.hidden = n > 0;
|
||||
};
|
||||
|
||||
const sort = (key: string) => {
|
||||
sortInput.value = key;
|
||||
grid.append(...[...cards].sort(orders[key] ?? orders.played));
|
||||
};
|
||||
|
||||
form.addEventListener("input", apply);
|
||||
form.addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
apply();
|
||||
});
|
||||
for (const a of sortLinks) {
|
||||
a.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
const key = new URL(a.href).searchParams.get("sort") ?? "played";
|
||||
sortLinks.forEach((l) => (l === a ? l.setAttribute("aria-current", "page") : l.removeAttribute("aria-current")));
|
||||
history.replaceState(null, "", a.href);
|
||||
sort(key);
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user