Repository navigation
Apply the Vortex design system's skin to bench - #120
Open
lwwmanning wants to merge 21 commits into
Open
lwwmanning wants to merge 21 commits into
lwwmanning wants to merge 21 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 <noreply@anthropic.com> Signed-off-by: Will Manning <will@willmanning.io>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Bench preview for |
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Signed-off-by: Will Manning <will@willmanning.io>
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 <noreply@anthropic.com> Signed-off-by: Will Manning <will@willmanning.io>
- 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 <noreply@anthropic.com> Signed-off-by: Will Manning <will@willmanning.io>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Signed-off-by: Will Manning <will@willmanning.io>
…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 <noreply@anthropic.com> Signed-off-by: Will Manning <will@willmanning.io>
🔦 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 <noreply@anthropic.com> Signed-off-by: Will Manning <will@willmanning.io>
- 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 <will@willmanning.io> Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…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 <noreply@anthropic.com> Signed-off-by: Will Manning <will@willmanning.io>
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 <noreply@anthropic.com> Signed-off-by: Will Manning <will@willmanning.io>
- 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 <will@willmanning.io> Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- The Octicons mark-github is MIT, © GitHub Inc. The site's and bench's copies move into mark-github.tsx files with that licence and copyright, and LICENSES/MIT.txt is added. - src/components/icons.tsx credits Google LLC for its Material Symbols paths, as bench's icons module does. - tests/unit/licensing.test.ts fails if an Octicons path ships without the MIT notice, or a Material path without Google's copyright. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Signed-off-by: Will Manning <will@willmanning.io>
src/styles now comes from the system's tools/site-styles.mjs (sections base, brand, site, docs, blog and focus; next/font faces), which replaces a scratch script. Only the file headers change. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Signed-off-by: Will Manning <will@willmanning.io>
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 703c93da11
ℹ️ 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 read the colour-scheme query once per route, so an OS switch left an open blog page on the old palette. applyRouteTheme sets the theme and re-applies it on the query's change event until the route changes; it takes the window as an argument so a unit test can drive it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Signed-off-by: Will Manning <will@willmanning.io>
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 4bf0d39f04
ℹ️ 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".
When the Maven lookup failed, the Spark tab showed and copied `dev.vortex:vortex-spark_2.13:<latest>:all`, which Gradle cannot resolve. Now the tab only appears with a real version. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Signed-off-by: Will Manning <will@willmanning.io>
The host gets data-mark-mode: live, reduced or static from the system's module, or error when mounting throws, in which case it shows the static symbol instead of an empty box. The smoke test can then assert what the browser actually drew, and name the mode when it fails. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Signed-off-by: Will Manning <will@willmanning.io>
- src/lib/bench-summary.ts reads bench.vortex.dev/api/groups at build time with a one-day revalidate, and makes the six panels: scan and write throughput, random access on NVMe and S3 (cold), ClickBench on DataFusion, and file size against Parquet. Values are rounded as bench's summary cards show them. A system that bench did not measure on all datasets shows "Not measured". When the read fails or a group is missing, the page has no card. - BenchmarkCard draws each panel in JSX from the system's benchmark-card.js, vendored unchanged. A unit test makes sure that its markup is the same as renderPanel's. The source line gives the date of bench's answer. - LogoBanner shows the twelve cleared adopters in the Home card's order and sizes. Copies for the loop are hidden from assistive technology, and copiesNeeded sets their number. Each mark is LicenseRef-Third-Party in REUSE.toml with its owner. Hudi's PNG is scaled down to 315px wide. - Add the open_in_new icon and types for ascii-core.js. - Smoke tests check the card (six panels or none), the twelve logos, and the ASCII mark's recorded mode. - At 1440 x 900 the page still fills one screen. Signed-off-by: Will Manning <will@willmanning.io> Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 87d7340094
ℹ️ 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".
Comment on lines
40
to
+42
| const funnelDisplay = Funnel_Display({ | ||
| weight: ["300"], | ||
| variable: "--font-funnel-display", | ||
| weight: ["500", "600"], | ||
| variable: "--vx-face-display", |
There was a problem hiding this comment.
The blog index, blog post, and error headings still use font-funnel font-light, which requests weight 300, but this change removes the only loaded 300 face and loads only 500 and 600. Those routes therefore render their explicitly light headings with the nearest available heavier face; retain weight 300 or migrate those consumers away from font-light in the same change.
Useful? React with 👍 / 👎.
Comment on lines
+54
to
+56
| <div className="site-frame"> | ||
| <Header /> | ||
| <main className="w-full h-auto mx-auto"> | ||
| <div className="flex flex-col mx-auto relative justify-center items-center"> | ||
| {children} | ||
| </div> | ||
| </main> | ||
| <main className="site-main">{children}</main> |
There was a problem hiding this comment.
On a missing route, the new constrained flex frame is also applied to HeroASCIINotFound, but that component still sizes its wrapper with 100dvh - 312px and its canvas with window.innerWidth - 32, both based on the old header/footer. This leaves a large unused band before the new footer at ordinary desktop sizes and clips or shifts the viewport-wide canvas when the viewport exceeds the frame's 1440px maximum; size the 404 renderer from its container and the available main area.
Useful? React with 👍 / 👎.
- src/styles resyncs from the system: every vx- element sizes with border-box, InstallTabs stacks its panels in .vx-tabs-panels, wraps long commands, and has .vx-sr-only; vx-display sets at 48px on phones. - InstallTabs uses those classes and drops its own CSS module, so the block is the tallest panel's height (74px) instead of a fixed minimum. - The vendored ascii-core and ascii-mark match the system again: tall hosts keep the mark's sides, the fallback is decorative, and bundlers ignore the CDN import. - The page drops its own phone headline rule, which the system now has. - The Vortex symbol SVG loses a clip-path that pointed at nothing. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Signed-off-by: Will Manning <will@willmanning.io>
CI's GPU-less Chromium reports data-mark-mode="error": mounting threw. The host now also carries data-mark-error with the exception's message, so the smoke test can name the cause. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Signed-off-by: Will Manning <will@willmanning.io>
The design system's ThemeSwitch (Light, Dark, System; default Dark) sits last in the header's end group on /blog and its posts, as the Header card's docs variant places it. It stores the choice in localStorage["vx-theme"] and applies it through themeFor, so the first-paint bootstrap, client navigation and OS changes agree. The homepage stays Dark only and shows no switch. The switch adds about 104px to the header, so a blog header wraps to the card's two-row layout below 920px, and below 480px the GitHub button drops the repository name. Also in the smoke tests: the install-tab height test takes the rendered tabs, because the Spark tab is left out when the Maven lookup fails, and the ASCII mark test names the exception it records. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Signed-off-by: Will Manning <will@willmanning.io>
The index is the BlogIndex card: the heading with the RSS, Atom and JSON feeds, then one row per post. The newsletter form closes the list, in a primary vx-btn and a field styled from the system's tokens, because the system has no Field card. A post is the Article card: an h1, a mono byline (date, authors, reading time), and the body in vx-reading in a 68ch column on surface, then up to three "More posts" rows. The index and the posts share one column. - Code keeps rehype-pretty-code, with a Shiki theme whose colours are the syntax-* tokens, so code follows Light and Dark. Each block is a CodeBlock with a language label and a copy button. - A post's top heading level moves to h2, under the title. - A blockquote that opens with an emoji is an aside, drawn as a Callout with the info icon. - Tables sit in vx-table-wrap, with numeric columns and the Total row marked. The old prose-grey rules and the dashed utilities go, and with them @tailwindcss/typography, which also clears the postcss-selector-parser advisory. The feeds are unchanged. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Signed-off-by: Will Manning <will@willmanning.io>
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