Skip to content

feat(ag-p07): 8 catalogue list pages — hero, filter bar, item grid #867

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ashleyshaw merged 2 commits into from
Jun 6, 2026
Merged

feat(ag-p07): 8 catalogue list pages — hero, filter bar, item grid #867

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
766179a
feat(ag-p07): add catalogue list pages with filter bar
ashleyshaw Jun 6, 2026
5cd25c4
feat(ag-p07): fix review feedback on catalogue and header
ashleyshaw Jun 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added

- **Awesome GitHub Site Phase 06: Wapuu mascot system** — Added a reusable `WapuuHero` Astro component with a canonical page-type mapping, copied the three confirmed Wapuu assets into `website/public/assets/wapuus/`, and wired the learn, cookbook, tools, and catalogue hero sections to render the correct mascot with responsive hiding at ≤860px and decorative accessibility attributes. ([#864](https://github.com/lightspeedwp/.github/issues/864))
- **Awesome GitHub Site Phase 07: Catalogue list pages with filter bar and Wapuu hero** — Replaced the old catalogue index with a spec-aligned `/c/[cat]` route, added the shared Wapuu hero component, introduced tag-chip filtering with AND logic, and surfaced the category type note and install-action cards for all eight catalogue pages. ([#866](https://github.com/lightspeedwp/.github/issues/866), [#867](https://github.com/lightspeedwp/.github/pull/867))
- **Awesome GitHub Site Phase 05: Homepage all 5 blocks wired to live data** — Rebuilt the homepage with the spec-aligned hero, live catalogue counts, feature strip, and Cook+Learn cards. Added the typed catalogue exports used by the homepage counts, copied the Wapuu assets into `website/public/assets/wapuus/`, and added an `onboarding/` alias that redirects to `getting-started/` for the primary CTA. ([#861](https://github.com/lightspeedwp/.github/issues/861), [#862](https://github.com/lightspeedwp/.github/pull/862))

- **Awesome GitHub Site Phase 02: CSS Token Layer + Global Styles** — Established the complete CSS foundation for the Awesome GitHub site. Added `website/src/styles/site-tokens.css` with app-specific surface tokens (`--panel`, `--panel-2`, `--hair`), font stacks, radius/shadow/transition scales, and `color-scheme` declarations for both light and dark themes. Added `website/src/styles/global.css` with container system (`.wrap` 1320px, `.wrap-prose` 820px), section rhythm via `clamp()`, button system (`.btn-primary`, `.btn-ghost`, `.btn-soft`, `.icon-btn`) with `:focus-visible` rings and browser-compat fallbacks, breadcrumb, kbd chip, burger breakpoints, `.md` prose styles, and scroll-motion accessibility guard. Fixed `BaseLayout.astro` CSS import order and corrected `localStorage` theme key to `ag-theme`. ([#852](https://github.com/lightspeedwp/.github/issues/852), [#853](https://github.com/lightspeedwp/.github/pull/853))
Expand Down
8 changes: 4 additions & 4 deletions website/src/components/Header.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,9 @@ const resources = [
Browse
<span class="chev" set:html={svg(icons.chevronDown, 15)} />
</button>
<div class="nav-dropdown dd-cats" id="browse-dropdown" role="menu">
<div class="nav-dropdown dd-cats" id="browse-dropdown">
{CATEGORIES.map(cat => (
<a href={`${base}c/${cat.id}/`} class="dd-item" role="menuitem">
<a href={`${base}c/${cat.id}/`} class="dd-item">
<div class="ddi" set:html={svg(catIconMap[cat.id] ?? icons.robot, 16)} />
<div>
<b>{cat.label}</b>
Expand All @@ -94,9 +94,9 @@ const resources = [
Resources
<span class="chev" set:html={svg(icons.chevronDown, 15)} />
</button>
<div class="nav-dropdown dd-res" id="resources-dropdown" role="menu">
<div class="nav-dropdown dd-res" id="resources-dropdown">
{resources.map(r => (
<a href={r.href} class="dd-simple" role="menuitem">
<a href={r.href} class="dd-simple">
<span class="ddi" set:html={svg(r.icon, 16)} />
{r.label}
</a>
Expand Down
53 changes: 32 additions & 21 deletions website/src/components/WapuuHero.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,36 +4,47 @@ interface Props {
class?: string;
}

const FALLBACK = "/assets/wapuus/wapuu-astropuu.png";
const WAPUU_MAP: Record<string, string> = {
learn: "assets/wapuus/wapuu-yoduu.png",
cookbook: "assets/wapuus/wapuu-rocket.svg",
tools: "assets/wapuus/wapuu-astropuu.png",
agents: "assets/wapuus/wapuu-astropuu.png",
instructions: "assets/wapuus/wapuu-astropuu.png",
prompts: "assets/wapuus/wapuu-astropuu.png",
skills: "assets/wapuus/wapuu-astropuu.png",
hooks: "assets/wapuus/wapuu-astropuu.png",
workflows: "assets/wapuus/wapuu-astropuu.png",
plugins: "assets/wapuus/wapuu-astropuu.png",
"getting-started": "assets/wapuus/wapuu-astropuu.png",
onboarding: "assets/wapuus/wapuu-astropuu.png",
glossary: "assets/wapuus/wapuu-astropuu.png",
why: "assets/wapuus/wapuu-astropuu.png",
"404": "assets/wapuus/wapuu-astropuu.png",
agents: "/assets/wapuus/wapuu-astropuu.png",
instructions: "/assets/wapuus/wapuu-astropuu.png",
prompts: "/assets/wapuus/wapuu-astropuu.png",
Comment on lines +7 to +11

@chatgpt-codex-connector chatgpt-codex-connector Bot Jun 6, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Prefix Wapuu asset URLs with Astro base

In any non-root Astro build, such as serving the site below /awesome-github/, these absolute /assets/... paths bypass import.meta.env.BASE_URL while the surrounding site links and assets are base-aware. The catalogue pages would render the new hero image as /assets/wapuus/... instead of /awesome-github/assets/wapuus/..., so the Wapuu hero 404s outside a root-domain deployment.

Useful? React with 👍 / 👎.

skills: "/assets/wapuus/wapuu-astropuu.png",
hooks: "/assets/wapuus/wapuu-astropuu.png",
workflows: "/assets/wapuus/wapuu-astropuu.png",
plugins: "/assets/wapuus/wapuu-astropuu.png",
tools: "/assets/wapuus/wapuu-astropuu.png",
learn: "/assets/wapuus/wapuu-yoduu.png",
cookbook: "/assets/wapuus/wapuu-rocket.svg",
"getting-started": "/assets/wapuus/wapuu-astropuu.png",
onboarding: "/assets/wapuus/wapuu-astropuu.png",
glossary: "/assets/wapuus/wapuu-astropuu.png",
why: "/assets/wapuus/wapuu-astropuu.png",
404: "/assets/wapuus/wapuu-astropuu.png",
};

const FALLBACK = "assets/wapuus/wapuu-astropuu.png";

const { page, class: className } = Astro.props as Props;
const base = import.meta.env.BASE_URL;
const src = `${base}${WAPUU_MAP[page] ?? FALLBACK}`;
const src = WAPUU_MAP[page] ?? FALLBACK;
---

<img
src={src}
alt=""
aria-hidden="true"
class:list={["page-hero-wapuu", className]}
loading="lazy"
decoding="async"
/>

<style>
.page-hero-wapuu {
height: clamp(140px, 16vw, 230px);
width: auto;
flex: none;
filter: drop-shadow(0 12px 28px rgba(9, 9, 9, 0.18));
}

@media (max-width: 860px) {
.page-hero-wapuu {
display: none;
}
}
</style>
Loading
Loading