Skip to content

Categorise the products into a nav menu, and give the hero its gateway graph - #30

Merged
fajarhide merged 5 commits into
mainfrom
feat/product-nav-and-hero-graph
Sep 2, 2026
Merged

fajarhide merged 5 commits into
mainfrom
feat/product-nav-and-hero-graph

Conversation

@fajarhide

Copy link
Copy Markdown
Contributor

Closes #28. Closes #29.

The seven products lived in two hand-maintained lists and the navbar could only
offer a hash link to the section. lib/products.js is now the one catalog, with
a category per entry, and both the navbar menu and the landing rows read it. The
same file holds the rule about which repos are public enough to count, which used
to be a comment in app/page.tsx next to a hardcoded array.

The hero gets the picture it was describing: agents on the left, one gateway in
the middle, tools on the right, and particles carrying requests through it.
three loads through next/dynamic with ssr: false, so it is not in the first
load. Colours come from the design package and follow the theme toggle,
prefers-reduced-motion gets one static frame, and the loop stops on a hidden tab
or a canvas out of view.

npm test        30 pass, 0 fail   (8 new in lib/products.test.js)
npm run build   Route /   1.36 kB   First Load JS 95.4 kB

Checked in headless Chromium at 1440 and 390 wide, both themes: menu opens on
hover and click, closes on Escape and outside click, mobile panel groups the same
way, and the scene renders in light and dark.

No new pages and no new destinations. Everything in the menu points where it
already pointed.

… for it

The seven products were written down twice, once as SHIPPED in app/page.tsx and
once as two hand-written cards above it, while the navbar carried nothing but a
hash link to that section. lib/products.js now holds the catalog, the category
each product is filed under, and the rule about which repos are public enough to
count stars.

Products becomes a full width menu with one column per category. Every link
points at a destination that already exists, so this adds no pages, and the
mobile panel gets the same grouping without the hover.
The hero was a headline, a paragraph and two buttons on empty space, with
nothing under it but more text. components/HeroGraph.tsx puts agents on the
left, one gateway in the middle, tools on the right, and a field of particles
carrying requests through it. The landing rows pick up the same categories the
nav menu uses, so the menu and the page are one map rather than two.

three loads through next/dynamic with ssr: false and stays out of the first
load, which is still 95.4 kB for /. Colours resolve from the design package
custom properties and follow the theme toggle. prefers-reduced-motion draws a
single static frame, and the loop stops while the tab is hidden or the canvas is
scrolled out of view.

Two traps are worth naming, both commented at the point they bite. THREE.Color
cannot parse oklch() and reading fillStyle back does not normalise it, so tokens
are resolved by painting one pixel and reading it. Float32BufferAttribute copies
the array it is handed, so writes to the array you passed in never reach the GPU.
@vercel

vercel Bot commented Sep 2, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
weekndlabs-com Ready Ready Preview Sep 2, 2026 5:26am UTC

…uct split

The hero sold "open-source tools you can keep", which names a licence rather than
a product. It now names the three layers: a gateway for the credentials agents
hold, a context layer for what they read twice, and routing for the models they
call. The star clause and the reproducibility promise are untouched, and the hero
still states no tool count.

The section under it split on "In focus" and "Also shipped", an axis that said
which two products got the month and nothing about what any of them do. It runs
on the same categories as the nav menu now, each opening with a line on what that
layer is for, and the install commands sit with the cards they install.

The category lines live in lib/products.js beside the catalog, with a test that
fails when a category has none.
@fajarhide

Copy link
Copy Markdown
Contributor Author

Added a third commit that reworks the copy rather than the structure.

The hero was selling a licence ("open-source tools you can keep, all MIT and
Apache 2.0"). It now names the three layers: a gateway for the credentials agents
hold, a context layer for what they read twice, and routing for the models they
call. lib/hero-count.test.js still passes, so the reproducibility promise is
intact and the hero still counts nothing.

The section below dropped the "In focus" / "Also shipped" split. That axis said
which two products got the month and nothing about what any of them do, and it
was a second map next to the nav menu's. It now runs on the same four categories,
each opening with a line on what that layer is for.

npm test        31 pass, 0 fail
npm run build   Route /   1.36 kB   First Load JS 95.4 kB

focusProducts and restProducts were left behind when the section moved to
filtering inside each category group. Nothing rendered them any more, and the two
tests that did were testing the helpers rather than the rule.

The rule is still worth a test, so the focus assertion now reads PRODUCTS
directly and says why it matters: a third card breaks the two-column grid, and a
focus product with no tags renders an empty tag strip.
@fajarhide
fajarhide merged commit cf033ea into main Sep 2, 2026
3 checks passed
@fajarhide
fajarhide deleted the feat/product-nav-and-hero-graph branch September 2, 2026 05:26

This branch was successfully deployed

1 active deployment
Preview — 737b48a2 Deployed Sep 2, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Give the hero the gateway graph it is describing Group the products into a categorised nav menu, from one source

1 participant