nexu-io/open-design PR #4158 — Home redesign: Atelier Zero tokens, newsletter, and download UX — PR #4158
nexu-io/open-design · pull request #4158 ·
Transcript
PlainEnglish
Pull request forty-one fifty-eight is a landing page redesign that touches forty-two files. It brings the Atelier Zero design system to the homepage, expands navigation to show all twenty-one agents, and adds a newsletter subscription band localized to eighteen languages.
PlainEnglish
This PR has two main goals: redesign the homepage with a fresh hero, newsletter band, and glass-effect navigation, and align the entire design system to Atelier Zero tokens. Along the way, it expands the header to show all twenty-one agents, restructures the plugin and agent catalog pages, adds smart platform detection for download buttons, and localizes all the new content across eighteen languages. It also swaps the old release metadata endpoint for direct GitHub API calls, while keeping the static export and zero client runtime guarantees.
PlainEnglish
The landing page previously used warm cream and terracotta tones with a single English hero subtitle, static download buttons, and a navigation menu that showed only a subset of agents. This PR migrates everything to the Atelier Zero design tokens, featuring light greys and neon coral accents. The hero subtitle is now localized for all eighteen supported languages, download buttons detect the visitor's operating system and Mac chip architecture, and the navigation expands to display all twenty-one agents with restructured solution and resource menus.
Architecture
Let's zoom out and see the change surface. The homepage itself lives in page dot t s x, which now imports BlurText and RemixIcon components. A new home-translations dot t s file defines all localized copy for eighteen languages. The globals and sub-pages CSS files get major updates to bring in Atelier Zero tokens and the eight-pixel spacing baseline. Under components, header dot t s x is refactored to show all twenty-one agents, and home-enhancer dot astro gains the new platform-detection logic. The github dot t s library module switches from reading release metadata to parsing GitHub releases directly. Public assets include the new hero home dot png, lab stage backgrounds, twenty-one agent icons, and a contributors manifest. Finally, a new vendor-contributors script fetches contributor data from GitHub at build time.
Architecture
The design system transformation starts with the color palette. The old warm tones — cream paper, terracotta warm five hundred — are replaced with light greys and a neon coral accent. Atelier Zero also introduces a comprehensive spacing scale based on an eight-pixel grid, an eight-pixel card radius, and the Albert Sans typeface. These tokens flow through to the entire site: the navigation picks up a liquid glass effect with backdrop blur and chromatic refraction, icons switch to Remix Icon font glyphs, and catalog pages adopt three-up agent card grids with consistent spacing.
Architecture
The homepage hero gets two major updates. First, the subtitle text is no longer hardcoded in English — it's pulled from the new home-translations file, which supplies localized versions like "best open-source alternative" for non-English locales. Second, a newsletter subscription band appears below the hero. This band is a client-side stub at the moment — the form renders, but there's no backend provider wired yet. The structure and localized labels are in place across all eighteen languages, ready for integration.
Architecture
Download buttons now detect the visitor's platform and link directly to the right installer. On page load, home-enhancer dot astro sniffs the operating system from user agent data. For Mac users, it goes a step further — it reads the WebGL renderer string to figure out whether the machine is arm sixty-four or x eighty-six sixty-four. Then it fetches the latest release from GitHub's API, matches the platform to the correct asset, and rewrites the download button's href to point straight at the installer file. No more landing pages or manual selection.
Architecture
The header navigation gets a structural overhaul. Previously, it used dynamic lookup to show a filtered subset of agents. Now, an explicit agents array lists all twenty-one agents with their routes, so every agent appears in the dropdown. The solution, resources, and community menus are populated from fixed positional tuples defined in the i18n translations — use cases, roles, and resource links are no longer computed on the fly. This makes the navigation data transparent and easier to localize.
PlainEnglish
Once this lands, the landing page will reflect the full Atelier Zero design language — light greys, neon coral accents, and an eight-pixel spacing grid. The homepage hero and newsletter band will show localized copy for all eighteen supported languages. The navigation dropdown will list every one of the twenty-one agents alongside restructured solution, resource, and community menus. Download buttons will automatically detect the visitor's operating system and Mac architecture, linking straight to the correct installer on GitHub. Catalog pages for plugins, agents, and solutions will share a consistent eleven-eighty-pixel safe area with unified styling. And contributor testimonials will pull live avatar images directly from GitHub's API.
CodeQuality
Five concerns were flagged during the analysis. The most impactful is the vite dev server rewrite plugin, which checks for paths without a dot to detect directory URLs — but this could over-match routes that aren't directories. The WebGL renderer detection for Mac chip architecture uses loose pattern matching that might return the wrong chip if driver strings are ambiguous. The GitHub asset matcher silently degrades if a release is missing an expected file, with no build-time warning. The home translations interface documents multi-line string expectations in comments, but there's no runtime validation to catch single-line mistakes. And the contributors manifest file is tracked in git, which could mask generation failures or create merge conflicts. Let's take a closer look at the top two.
CodeQuality
The vite dev server plugin rewrites community directory URLs to index dot html during local development. It checks whether the path includes a dot to decide if it's a file or directory request. The concern here is that this check will also match any path without an extension — for example, a dynamic route like slash some dash page slash — and silently rewrite it to index dot html, serving mismatched content. A safer approach would be to only rewrite the exact slash community slash prefix, not all dot-less paths. Cloudflare Pages handles this correctly in production, so the risk is limited to local dev.
CodeQuality
The platform detection code tries to figure out whether a Mac is running Apple Silicon or Intel by reading the WebGL renderer string. It checks for the word apple first to return arm sixty-four, then looks for intel, amd, or nvidia to return x eighty-six dash sixty-four. The issue is that the patterns are tested in order, so if a renderer string contains both apple and intel — say, in a driver name — the check could return the wrong architecture. A more robust approach would test for Intel, AMD, and NVIDIA first, and only fall back to the apple pattern if none of those match. For most users this will work fine, but edge cases with unusual driver strings could get the wrong download link.
PlainEnglish
This PR is a comprehensive landing-page redesign that migrates the entire site to Atelier Zero design tokens, adds localized hero copy and a newsletter subscription band across eighteen languages, introduces smart platform detection for download buttons, and expands the navigation to show all twenty-one agents. A few notes to watch: the vite rewrite plugin could over-match dot-less paths in local dev, the WebGL renderer heuristic might confuse chip detection if driver strings are ambiguous, and the contributors manifest file is tracked in git when it should probably be generated and ignored. Overall, this is a solid refresh that unifies the design system and sets the stage for a more localized, user-friendly landing experience.
How this was made
Lenzon read nexu-io/open-design at pull request #4158 and generated this walkthrough automatically. The narration above is the transcript of what it says.
Explain a pull request from your own repo
Point Lenzon at a repo or a pull request and get a narrated walkthrough like this one.
Try it