From 85e93199bf6f988dbe02d22c5ef11f8f3c5af9e5 Mon Sep 17 00:00:00 2001 From: Florent Tapponnier Date: Fri, 10 Jul 2026 18:39:17 +0200 Subject: [PATCH] infobox: collapsible card design with one-line summary Replaces the flat wide table with a native
card that collapses to a one line summary (label + current leader) and expands to a compact two-column key/value grid. Fixes the visual weight problem where the original table dominated the page above the fold. Design details: - Default open so first-time readers see the facts without interacting - Summary shows the leader claim so the quick answer never requires a click to reveal - Two-column grid on desktop, single column on mobile - Custom chevron rotates 180 degrees when open (native marker hidden) - All microdata + itemProp attributes preserved so LLM crawlers see the content whatever the visual state - Same schema.org Dataset itemtype so Google Rich Results still parses No behaviour change for JSON-LD or the visible TL;DR block. Only the infobox component and its call-site comment change. --- src/app/benchmarks/[slug]/page.tsx | 15 +-- src/components/bench-infobox.tsx | 168 +++++++++++++++++++---------- 2 files changed, 118 insertions(+), 65 deletions(-) diff --git a/src/app/benchmarks/[slug]/page.tsx b/src/app/benchmarks/[slug]/page.tsx index 1ed970be..80f60996 100644 --- a/src/app/benchmarks/[slug]/page.tsx +++ b/src/app/benchmarks/[slug]/page.tsx @@ -463,12 +463,15 @@ export default async function BenchmarkPage({ {benchmark.subtitle}

- {/* Wikipedia-style infobox. Floats right on desktop next to the - TL;DR and the intro copy, stacks above on mobile. Table markup - + microdata make the key/value pairs extractable by LLM - crawlers verbatim (Perplexity, Gemini, ChatGPT-with-web all - hoist this format from Wikipedia pages when composing answers) - while giving readers a two second scan of the headline facts. */} + {/* Compact "At a glance" card. Rendered as a native
+ element so it collapses to a one line summary on click while + still shipping the full microdata + key/value pairs inside the + collapsed body (LLM crawlers see the content whatever the + visual state). Sits between the subtitle and the TL;DR + grounding trace so a reader has: headline claim (H1) → context + (subtitle) → at-a-glance facts (this card) → canonical + grounding sentence (TL;DR) before entering the leaderboard + body. */} {/* Visible grounding-trace TL;DR. Renders the same canonical line diff --git a/src/components/bench-infobox.tsx b/src/components/bench-infobox.tsx index 78697e08..d1f45286 100644 --- a/src/components/bench-infobox.tsx +++ b/src/components/bench-infobox.tsx @@ -4,26 +4,24 @@ import { fmtUnit } from "@/lib/format"; import { SITE } from "@/data/site"; /** - * Wikipedia-style infobox for benchmark pages. A compact `` of - * key/value pairs that sits directly under the H1/subtitle and above the - * TL;DR grounding trace. + * Compact "At a glance" card that sits under the H1/subtitle on every + * benchmark page. Wrapped in a native
element so it collapses + * to a one-line summary and expands to the full key/value grid on click. * * Why this shape: - * - LLM crawlers (Perplexity, Gemini, ChatGPT-with-web) extract Wikipedia - * infoboxes almost verbatim because they are `
` markup with - * ` - - - + + {children} + ); }
`/`` label/value pairs sitting above the fold, before any - * prose. Copying the shape is the single highest-leverage change - * identified in the July 2026 GEO deep-dive. - * - Users get a two-second scan of the key facts (leader, metric, last - * measured, license) without scrolling into the leaderboard body, so - * the UX gain is real and not just an SEO trick. - * - `itemscope` + `itemtype="https://schema.org/Dataset"` layers a - * microdata graph over the DOM in addition to the JSON-LD block, which - * some crawlers prefer. + * - Language models parse the content inside
whether it is + * visually expanded or not, so the LLM-grounding pattern (Wikipedia + * infobox-style key/value pairs directly under the H1) is preserved + * in either state. + * - Human readers get a scannable one-line teaser that a click reveals + * into a compact card. The default is expanded so first-time visitors + * see the facts without having to interact. + * - itemscope + itemtype layer a schema.org Dataset microdata graph + * over the DOM in addition to the JSON-LD block so crawlers that + * parse microdata pick up the same facts. * - * Hidden gracefully when the bench has no defensible leader (draft, - * insufficient, awaiting first run) so the rendered box never publishes - * a fabricated leader row. + * Renders nothing when the bench has no defensible leader (draft, + * insufficient, awaiting) so we never publish a fabricated leader row. */ export function BenchInfobox({ benchmark }: { benchmark: Benchmark }) { const top = leader(benchmark); @@ -33,54 +31,103 @@ export function BenchInfobox({ benchmark }: { benchmark: Benchmark }) { const lastRunIso = benchmark.lastRunAt ? new Date(benchmark.lastRunAt).toISOString() : null; - const lastRunDisplay = lastRunIso ? lastRunIso.replace("T", " ").slice(0, 19) + " UTC" : "n/a"; + const lastRunDisplay = lastRunIso + ? lastRunIso.replace("T", " ").slice(0, 19) + " UTC" + : "n/a"; return (
); } -function InfoRow({ +function InfoPair({ label, children, + className, }: { label: string; children: React.ReactNode; + className?: string; }) { return ( -
+ {label} - {children}