Repository navigation
Apply the Vortex design system's skin to bench - #120
Open
lwwmanning wants to merge 34 commits into
Open
lwwmanning wants to merge 34 commits into
lwwmanning wants to merge 34 commits into
Conversation
- Load vortex-skin.css after globals.css: the Blue accent, warm greys, 6px cards and 4px controls. It sets only visual properties, and app/vortex-skin.test.ts holds it to that. - Load Geist and Geist Mono with Funnel Display in one font request. - Replace the Lucide icons with Material Symbols Sharp, in one shared icons module. The GitHub mark stays. - Write the Compression Size headings as words, without emoji. Co-Authored-By: Claude Opus 5.5 <[email protected]> Signed-off-by: Will Manning <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Bench preview for |
Co-Authored-By: Claude Opus 5.5 <[email protected]> Signed-off-by: Will Manning <[email protected]>
lwwmanning
marked this pull request as ready for review
October 28, 2026 19:33
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
- Bench paints its one --accent as words and as fills. Fills now take --accent-fill with white text: blue-bright (#6e5cff) in Dark, and the same Blue as words in Light, so Light does not change. - app/vortex-skin.test.ts reads globals.css and fails if an accent fill there has no override in the skin. - Dark muted text is grey-450 (#9c9c99), one step below body text. Co-Authored-By: Claude Opus 5.5 <[email protected]> Signed-off-by: Will Manning <[email protected]>
- The group title's description hint was a Unicode text glyph beside Material Symbols Sharp icons. It now renders the Sharp `info` icon from the same pinned source as the others. - components/icons.test.tsx fails if a component uses a text glyph as an icon again. Co-Authored-By: Claude Opus 5.5 <[email protected]> Signed-off-by: Will Manning <[email protected]>
Co-Authored-By: Claude Opus 5.5 <[email protected]> Signed-off-by: Will Manning <[email protected]>
…x.dev - src/styles holds copies of the system's tokens and the base, brand, site, docs, blog and focus components. Its type styles read var(--font-*), which point at next/font's faces and fallbacks. - next/font loads Funnel Display 500 and 600, Geist and Geist Mono. - The ground is the system's Dark ground (#0f0f0e), mirrored in src/lib/theme.ts for the verify parity check. - The blog follows the reader's stored theme (vx-theme); every other page is Dark. An inline script sets it before first paint, and RouteTheme sets it again on client-side navigation. - bun test runs tests/unit in CI. Co-Authored-By: Claude Opus 5.5 <[email protected]> Signed-off-by: Will Manning <[email protected]>
🔦 Lighthouse audit
Run |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 7a4c372aab
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Playwright's default pattern matched the node:test files in tests/unit and failed to load them. testMatch now takes *.spec.ts only; bun test runs tests/unit. Co-Authored-By: Claude Opus 5.5 <[email protected]> Signed-off-by: Will Manning <[email protected]>
- Header follows the Header card's site variant: the Vortex wordmarks (Dark and Light), nav Docs, Bench, Explorer, Blog, Slack, and the GitHub button with the star count. Below 800px the nav takes a second row. - src/lib/github.ts reads the star count at build time with a one-day revalidate and a timeout. The count hides when the fetch fails. - Footer follows the Footer card: the LF mark, the LF Projects line, and Charter, Code of conduct, Security and Calendar. - The root layout puts header, main and footer in one --page-max frame. - Remove the old logos and the donor credit's logo, with their REUSE entries. Annotate the new wordmarks as CC-BY-4.0. - Replace the scramble smoke test with header and footer link checks. Signed-off-by: Will Manning <[email protected]> Co-Authored-By: Claude Opus 5.5 <[email protected]>
…fixes - The GitHub button's count is the Material Symbols Sharp `star` beside the number, not a ★ glyph, and the link names the repository and its stars in full. - A post marks the Blog link as the current section (aria-current="true"); the index stays the current page. - The header's wrap at 800px, the right-hand end group on two rows and the wrapping footer nav are now in the design system; the site's stopgap overrides are removed after syncing its styles. - tests/unit/icons.test.ts fails if site code uses a text glyph as an icon. Co-Authored-By: Claude Opus 5.5 <[email protected]> Signed-off-by: Will Manning <[email protected]>
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 8171a90d3c
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
The header now links /slack, a redirect to Slack's invite page, which answers CI's fetch with 403. The internal-link check no longer follows redirects off the site; a redirect means the route exists. Co-Authored-By: Claude Opus 5.5 <[email protected]> Signed-off-by: Will Manning <[email protected]>
- The page follows the Home card: the hero (Eyebrow, the vx-display headline, InstallTabs and the AsciiMark), then two empty bands for the BenchmarkCard and the LogoBanner. At 1440 x 900 the page fills one screen. Below 1100px the hero stacks, and on phones the headline is 48px. - InstallTabs: Rust, Python, DuckDB, Spark and CLI, one tab stop with the arrow keys, Home and End, and a copy button that leaves out the prompts. All panels share one cell, so the block keeps its height. - src/lib/maven.ts reads the Spark version from Maven Central's metadata at build time with a one-day revalidate. The command shows <latest> when the read fails. - AsciiMark runs the system's renderer, vendored unchanged in src/vendor/vortex-design, with three 0.170.0 from npm. Both load only after the page is idle. Without WebGL it shows the Vortex symbol. - Add the content_copy and check icons. - Remove the old OGL hero and its overlay. - Replace the hero smoke tests with headline, tab, copy and mark checks. Signed-off-by: Will Manning <[email protected]> Co-Authored-By: Claude Opus 5.5 <[email protected]>
The 404 takes the homepage hero's layout and parts: the Eyebrow ("404"),
a vx-h1 headline, one sentence, and buttons to the homepage, the docs and
the blog, with the AsciiMark beside them. Below 1100px the mark moves
under the text, as on the homepage. Under /blog the 404 follows the
reader's theme, and in Light it leaves out the mark, which is drawn for a
Dark ground.
The error page has the same layout without the mark: "Try again" calls
reset(), a second button goes home, and a server error's digest shows as
a mono reference line.
With the OGL heroes gone, these go too:
- hero-404, overlay-404 and the scramble Link, and ogl.
- public/404.glb and public/logo.glb, which nothing loads.
- The spiral-* colours, --color-grey, --font-funnel and the 2md
breakpoint in globals.css. The scrollbar takes the theme's edge and
ground, and the body takes Tailwind's antialiased smoothing directly.
A smoke spec checks that an unknown path returns 404 with the headline,
the three links and the mark, and that it has no horizontal scroll on a
phone.
Co-Authored-By: Claude Opus 5.5 <[email protected]>
Signed-off-by: Will Manning <[email protected]>
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 7957965c46
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
No element on any page carries a Tailwind utility class any more. Only preflight, Tailwind's reset, was still in use. globals.css now holds its own reset in @layer base, so it sits under every unlayered rule, as preflight did. This removes tailwindcss, @tailwindcss/postcss, the PostCSS config, Biome's tailwindDirectives option and the Renovate group. Every page renders the same: full-page screenshots of the homepage, the blog index, all seven posts and the 404, at 1440 and 375 wide, in Dark and on the blog in Light, match the Tailwind build pixel for pixel in Chromium, with the ASCII mark and the logo strip masked. The compiled CSS differs only in two prefixes: the link underline drops a fallback that drew the same colour, and the logo strip's mask gains its unprefixed property. bun audit is unchanged at 9 advisories, all under @lhci/cli. Co-Authored-By: Claude Opus 5.5 <[email protected]> Signed-off-by: Will Manning <[email protected]>
With storage blocked, choosing Light lasted only until the next OS change, which re-read storage, found nothing and reset to Dark. The choice is now also kept per page (a WeakMap keyed by the document), and the stored value, when there is one, still wins. Co-Authored-By: Claude Opus 5.5 <[email protected]> Signed-off-by: Will Manning <[email protected]>
At 320px the button kept the repository name on pages without the theme switch and wrapped to a row of its own, giving the header three rows. Below 360px every header drops the name, as blog headers already did below 480px. Smoke tests cover the row and horizontal scroll at 320px. Co-Authored-By: Claude Opus 5.5 <[email protected]> Signed-off-by: Will Manning <[email protected]>
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 53f69e6ba1
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
RouteTheme applied the theme in a passive effect, after the browser had painted the new route, so moving between the Light blog and a Dark-only page showed one frame in the old palette. It now uses a layout effect on the client. A smoke test records the theme from a MutationObserver as the homepage commits, before paint, and expects Dark. Co-Authored-By: Claude Opus 5.5 <[email protected]> Signed-off-by: Will Manning <[email protected]>
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: b9c060d90a
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
If saving a new choice failed while storage still held an older one, the next OS change re-read the stale value and switched the page back. The page's own choice, the reader's latest action, now comes first. Co-Authored-By: Claude Opus 5.5 <[email protected]> Signed-off-by: Will Manning <[email protected]>
With the marquee stopped, the banner stayed one clipped row and most logos were never visible. The design system's reduced-motion rule now wraps the set into still rows, drops the strip's mask and hides the copies that only fed the loop. Smoke tests check all twelve logos sit inside the viewport at 1440 and 375px. Co-Authored-By: Claude Opus 5.5 <[email protected]> Signed-off-by: Will Manning <[email protected]>
Resolves CLAUDE.md and bun.lock against #128, which moved bench onto the root Bun workspace, Biome, Next.js 16 and TypeScript 7. - CLAUDE.md keeps main's toolchain, CI and deploy notes and this branch's architecture text; the audit state is 10 advisories (8 in the site, all via @lhci/cli, and bench's 2), since this branch removed @tailwindcss/typography. - bun.lock is main's, re-resolved with this branch's dependencies. - bench's vortex-skin.css takes Biome's formatting. Co-Authored-By: Claude Opus 5.5 <[email protected]> Signed-off-by: Will Manning <[email protected]>
The design system's benchmark-card.js now prints each value by its unit, as bench's own summary cards do: two places for GB/s, ms and s, a whole number for MB/s, and three significant figures for a ratio. The site copies the module again, with the types the system now ships, and passes bench's values unrounded. Panel titles join their parts with commas, so a line breaks cleanly, and every title takes two lines, so the big figures line up. At 640px and below the panels sit two to a row, and each bar runs under its name and value: 139px wide at 375px, against 15 to 51px before. A rule now separates wrapped rows. The headline says "six benchmarks", because file size is not a CPU benchmark. Signed-off-by: Will Manning <[email protected]> Co-Authored-By: Claude Opus 5.5 <[email protected]>
Co-Authored-By: Claude Opus 5.5 <[email protected]> Signed-off-by: Will Manning <[email protected]>
…system The design system now has the rules the blog carried in globals.css, so the site uses them and deletes its own: - Header: two rows below 920px with the ThemeSwitch, the repository name drops on phones, and the GitHub button's name starts with its visible text. - ThemeSwitch: the choice shows pressed before hydration. - Field card for the newsletter form, and the focus ring covers fields. - Prose list markers, numeric cells on one line, post rows as a list with heading titles that line up with the heading above them. - Callout titles and GitHub alerts, from the vendored callout.js. - The Shiki theme and code labels, from the vendored code-block.js. - The route-aware first-paint script, from the vendored theme.js. globals.css loses 106 lines, and src/lib/syntax-theme.ts goes. Signed-off-by: Will Manning <[email protected]> Co-Authored-By: Claude Opus 5.5 <[email protected]>
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This change applies the Vortex design system to bench. It changes only how bench looks. The layout and the behavior do not change.
app/vortex-skin.cssloads afterglobals.css. It sets the Blue accent, the warm greys, 6px cards and 4px controls.app/vortex-skin.test.tsfails if the file sets a property that moves, resizes or hides an element.lib/fonts.test.tsfails if its URL andFONTS_CSSare different.🤖 Generated with Claude Code