Skip to content

feat(badges): public catalog page for embedding live rankings#744

Merged
Flotapponnier merged 2 commits into
mainfrom
feat/badges-catalog-page-v2
Jun 26, 2026
Merged

feat(badges): public catalog page for embedding live rankings#744
Flotapponnier merged 2 commits into
mainfrom
feat/badges-catalog-page-v2

Conversation

@Flotapponnier

Copy link
Copy Markdown
Collaborator

Why

The /api/badge/<bench>/<provider> SVG endpoint and its /snippet helper have been live for months, powering the per-row embed buttons on bench pages and the /partners docs. Nothing on the site lets a visitor browse what is available, so providers who land here from search have no way to discover and grab their own badge.

What this PR adds

  • /badges server component (src/app/badges/page.tsx) with hero, 5 featured live previews, filterable catalog grid and footer CTAs.
  • Client catalog (src/components/badges-catalog.tsx): provider/bench search, category filter pills, per-pair cards with live SVG preview and rank pill, plus an embed-snippet modal with [Markdown] [HTML] [URL] [JSON] tabs, scope dropdowns (chain / region) when the parent bench declares those dimensions, and a copy button. Snippets are fetched on demand from the existing /snippet route so a scope change is one network call.
  • CollectionPage + BreadcrumbList JSON-LD on the page.
  • Sitemap entry (src/app/sitemap.ts, priority 0.7, daily).
  • Footer link under Developers (src/components/site-footer.tsx).

Impact

Each embedded snippet is a permanent backlink from a provider README, docs site or marketing page back to the matching OCB bench page. The page itself is also a referral-friendly tool that the partners team can point providers to instead of explaining the URL shape over email.

Test plan

  • /badges renders with the 5 preview badges loading inline
  • Search filters cards as you type, category pills toggle correctly
  • Modal opens, all four tabs return real snippets, Copy works
  • Scope dropdowns appear only on benches with chain or region dimensions and refetch the snippet correctly
  • Sitemap lists /badges, footer Developers column links to it
  • Mobile viewport stays usable, modal is scrollable on small screens

Florent Tapponnier and others added 2 commits June 26, 2026 15:01
The /api/badge/<bench>/<provider> SVG route and its /snippet helper
have been live for months but have no discovery surface. Visitors who
want to embed their rank on a README or doc had to read source.

/badges is the shields.io-style catalog: search, filter by category,
preview every (benchmark, provider) pair, copy a Markdown / HTML / URL
/ JSON snippet for any of them. Chain and region scope dropdowns are
exposed when the parent bench declares those dimensions.

Each embed is one more permanent backlink from the provider's README
or docs site, so this page should also move the needle on referring
domains.
@Flotapponnier
Flotapponnier merged commit 5fbabcb into main Jun 26, 2026
1 check passed
@Flotapponnier
Flotapponnier deleted the feat/badges-catalog-page-v2 branch July 17, 2026 14:42
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.

1 participant