Redesign: wholesale site rebuild (preview on fork Pages)#67
Conversation
Configure the fork to deploy a live preview of the in-progress site redesign from the `redesign` branch to GitHub Pages, without disturbing the canonical deploy-from-main behavior that ships upstream. - nextjs.yml: trigger on redesign push, build with NEXT_PUBLIC_BASE_PATH=/mellea-website, deploy from redesign (all tagged TEMP(redesign) for revert before upstream merge) - rename public/CNAME -> CNAME.sav so Pages ignores the upstream mellea.ai custom domain on the fork - add REDESIGN-NOTES.md documenting the keep-list (content/config the wholesale rewrite must preserve), the revert-list, and team access Assisted-by: Claude Code Signed-off-by: Alex Bozarth <ajbozart@us.ibm.com>
The first preview run failed because test-e2e serves out/ at the server root and asserts the current site's structure, so it 404s against the basePath preview (and will break under the wholesale rewrite anyway); link-check also flags the not-yet-published preview URL. Gate the preview deploy on test-unit + build instead. Both jobs still run and report status on the PR — they just no longer block the preview. Documented in the REDESIGN-NOTES revert-list. Assisted-by: Claude Code Signed-off-by: Alex Bozarth <ajbozart@us.ibm.com>
|
I don't think the preview works (?) I still see the old website 
|
That would be because @Vanguardbots has no yet pushed anything new to it. I've just set up a working branch for him to build on that has GitHub pages working on a branch he has access to. This PR is what give him access |
Fixes per feedback - Cursor trail toggles off by default, remembers choice, adjusted follow behavior/physics - Header particle animation optimized (still tweaking) - Updated with/without chart background color - Removed dark mode - Adjusted blog card and section styling (still tweaking) - Removed typing scroll animation for all sections after header - Added hamburger menu for mobile sizes - Adjusted colors for Mellea function flow chart - Adjusted section title letter spacing
- Blog - Fixed header background on scroll - Blog - Adjusted margin and padding - Blog - removed section before footer
removed blog main page subtitle max-width cap
adjusted text color of blog tags
Reordered header nav links
…ering Review-pass fixes on the redesign branch: - Remove the dropped News feature: delete src/lib/news.ts, content/news/*, and its docs in AGENTS.md / CONTRIBUTING.md; correct REDESIGN-NOTES keep-list. - GitHub stars: delete duplicate public/js/githubStars.js; add a 12h localStorage TTL cache in GitHubStarsInit and render it from SiteHeader so the count survives client-side navigation. - Code blocks: add public/css/code-theme.css (Mellea brand syntax palette) and converge the landing panel + blog onto build-time highlight.js highlighting; fix blog image centering and the unreadable code-block background. - Cursor JS: make animatePosition cancellable to fix the enter/exit race; add mount/teardown wiring in main.js; tighten the Granite follower activation. - Compare slider: crop via clip-path instead of counter-scaling (fixes blur). - Drop next/script for a plain module inject + data-scroll-behavior to clear console warnings; extract shared clipboard.js. - Remove dead assets (old compare/og images, favicon) and trim comments. Also align AGENTS.md commit + AI-assistant conventions with the mellea repo. Assisted-by: Claude Code Signed-off-by: Alex Bozarth <ajbozart@us.ibm.com>
Blog-body images used root-absolute paths (/images/...) rendered verbatim by ReactMarkdown, so they 404'd under the Pages preview basePath (/mellea-website) while working at root locally. Add a urlTransform that runs the default (XSS-safe) transform then assetUrl() on root-absolute paths, so both markdown ![]() and raw <img> images become basePath-aware. No-op at root (production). Assisted-by: Claude Code Signed-off-by: Alex Bozarth <ajbozart@us.ibm.com>
- Rename opaque cursor sprite files a.svg–h.svg → mel-a.svg–mel-h.svg (Mel mascot expression variants); update all refs in cursorConfig.js, main.js, and the assetBase.js jsdoc example in lockstep. - Repoint siteConfig.ogImage to the new-brand social card (assets/mellea-site-logo-social.png, 1200x630); add the card + its svg. - Remove public/images/mellea-logo.* — the legacy mascot logo, no longer referenced on the site (canonical copy lives in the mellea repo). Assisted-by: Claude Code Signed-off-by: Alex Bozarth <ajbozart@us.ibm.com>
Define --mellea-honey, --mellea-honey-light, --surface, and --gray-border in styles.css and use them for the colors repeated across the stylesheet. Give code-theme.css its own light and dark syntax-color variables. No color change. Assisted-by: Claude Code Signed-off-by: Alex Bozarth <ajbozart@us.ibm.com>
|
A few remaining TODOs for me next week before moving this out of draft:
|
AGENTS.md described the pre-redesign site (globals.css, IBM Plex via Google Fonts, dark/light theme, Next.js 15). Update to the current setup: public/css stylesheets, self-hosted Aileron + JetBrains Mono, light theme, and unversioned framework references so the docs don't re-stale on the next bump. README: correct the Mellea positioning to match the repo tagline and site hero, drop the stale font/version facts, collapse the duplicated Contributing steps into pointers to CONTRIBUTING.md, and add a License section for the Apache 2.0 LICENSE already in the repo. Assisted-by: Claude Code Signed-off-by: Alex Bozarth <ajbozart@us.ibm.com>
The vanilla ES modules in public/js were loaded by eslint-config-next but only under React/JSX rules — no-unused-vars and no-undef were both off, so the landing-page JS had no backstop against dead code or typos. Add a flat-config block scoped to public/js/**/*.js with eslint:recommended + no-unused-vars + no-undef and browser globals. This surfaced two unused variables, now removed: the write-only `visible` mirror in cursorSprite.js (the CSS class is the real state) and a leftover `stageRect` in melleaCompare.js. Also disable @next/next/no-img-element project-wide: the site is a static export (images.unoptimized) serving only inline SVGs, so next/image offers no benefit and raw <img> is correct. npm run lint is now clean with zero warnings. Document in AGENTS.md that public/js is plain browser JS, untyped by design and covered by ESLint rather than tsc. Assisted-by: Claude Code Signed-off-by: Alex Bozarth <ajbozart@us.ibm.com>
The redesign/ subfolder namespaced the new site's components while it was built alongside the old site. This branch is now the site, so the name no longer means anything and would mislead future readers. Move all 12 components up to src/components/ (nothing else lived there, so no collisions) and update the 13 @/components/redesign/... imports across src/app/. Typecheck, lint, and build all pass. Assisted-by: Claude Code Signed-off-by: Alex Bozarth <ajbozart@us.ibm.com>
- cursorSprite.js: only bind scroll/resize listeners when the config defines a scroll trigger, so mounts don't wire up handlers that run on every scroll for nothing (no scroll triggers are active yet). - next.config.mjs: replace a hardcoded LAN IP in allowedDevOrigins with a NEXT_DEV_ORIGIN env var, keeping on-device dev testing configurable without committing a specific address. Dev-only; no build impact. - Strip stale Figma node-ID references from comments across styles.css and the JS modules; rewrite the cursorToggle.js header to describe what the module does. - dotField.js: document bulgeOnly/cursorForce as the physics-mode feature flag they are (bulge vs. velocity repulsion). No behavior change. Lint, typecheck, and build all pass. Assisted-by: Claude Code Signed-off-by: Alex Bozarth <ajbozart@us.ibm.com>
- styles.css: add a blanket reduced-motion catch-all so any transition/ animation is neutralized for users who prefer reduced motion, not just the specifically-listed elements. - styles.css: declare color-scheme: light on :root so browser-native UI renders light-only, matching the site's theme. - dotField.js: document the lerp/easing smoothing factors. Assisted-by: Claude Code Signed-off-by: Alex Bozarth <ajbozart@us.ibm.com>
- page.tsx: drop the metadata export whose every field (title, description, canonical, OG, Twitter) duplicated the root layout, which Next merges down. Verified the built <head> is unchanged. - styles.css: collapse the identical max-width/margin/gutter core of the five homepage __inner blocks into one shared selector-list rule; each block keeps only its own gap. Assisted-by: Claude Code Signed-off-by: Alex Bozarth <ajbozart@us.ibm.com>
|
The website redesign is ready for final review. You can look at the new site at https://ajbozarth.github.io/mellea-website/ and leave review here. |
- flowchart: use minmax(0, 1fr) so it scales instead of overflowing - footer headline: clamp() instead of fixed 76px - cursor follower: hide on touch via (hover: none), (pointer: coarse) - menu overlay: inset: 0 + body scroll lock so the page can't show behind it - menu overlay padding sits links just below the header - close the menu when rotating past the mobile-nav breakpoint Assisted-by: Claude Code Signed-off-by: Alex Bozarth <ajbozart@us.ibm.com>
- show the Get Started CTA inside the mobile dropdown (was hidden by the shared btn-nav-get-started rule) - swap header actions order so the hamburger sits in the top-right corner with the GitHub button before it Assisted-by: Claude Code Signed-off-by: Alex Bozarth <ajbozart@us.ibm.com>
Render the dropdown Get Started as plain text with an arrow that follows the link color, instead of the filled header button. Assisted-by: Claude Code Signed-off-by: Alex Bozarth <ajbozart@us.ibm.com>
Address flakiness the redesign inherited from the initial test port, seen in CI as intermittent failures that pass on re-run. - Add Playwright retries (2 in CI, 1 locally) so hydration races and cold-compile timeouts don't red the build; this also makes the existing trace: 'on-first-retry' actually capture a trace. - Extract retryUntilTabSelected helper for the future-panel tab handlers, which are wired by an afterInteractive script and can miss an interaction that lands before they bind. Apply it to the accessibility keyboard-nav test (previously unguarded and flaky) and reuse it in the home tab-switch test. - Drop an unused variable in the 404 infrastructure test. - Assert blog tags render unconditionally instead of guarding on presence, since all posts carry tags by convention. Assisted-by: Claude Code Signed-off-by: Alex Bozarth <ajbozart@us.ibm.com>
planetf1
left a comment
planetf1
left a comment
There was a problem hiding this comment.
Also noted the footer needs extra spacing after year
| <span className="future-panel__tab-title">{tab.title}</span> | ||
| <span className="future-panel__tab-body"> | ||
| <span className="future-panel__tab-desc">{tab.description}</span> | ||
| <Link |
There was a problem hiding this comment.
Codex reports the following - I've not verified but worth checking for accessibility and html validity (could break in different browser engines)
Each tab is a containing a “Learn more” link. Nested interactive controls are invalid HTML and produce
an unclear keyboard and screen-reader interaction model. Make the link a sibling of the tab button (or place it in the
associated tab panel).
|
The background of the 'blog' section differs to the main page (ie it's use of a grid). Unsure if intentional or unintentional. |
|
Should the 'off' button (default is off) on the 'sprite' character also disable the background animation? (design question) |
Fixing now (its a nextjs compile issue, not a simple fix after all)
This is intentional and was a request on my part. The landing page actually alternates between two background colors and only has the dot grid at the top. The blogs use the darker of the two background for better readability.
@Vanguardbots ? I would personally say no as those are two separate feature |
|
yes the toggle should only affect the cursor sprite. I don't want to turn off the header animation. I already dialed it back a significant amount after considering the feedback. |
Assisted-by: Claude Code Signed-off-by: Alex Bozarth <ajbozart@us.ibm.com>
A "Learn more" <Link> nested inside <button role="tab"> is invalid HTML with an ambiguous keyboard/SR model. Revert the tab to <div role="tab"> (as on main) and add Enter/Space activation the button gave for free. Assisted-by: Claude Code Signed-off-by: Alex Bozarth <ajbozart@us.ibm.com>
|
Feedback from Hendrik (via Slack):
@Vanguardbots These are mostly design items unlike Nigels review which I was able to act on. These are also mostly echos of items I already fought with you on earlier in development. |
AngeloDanducci
left a comment
AngeloDanducci
left a comment
There was a problem hiding this comment.
Skip-to-content - layout.tsx removed the skip link, its CSS, and the test that guarded it, with no replacement.
Recommend restoring the skip link + a consistent id="main-content" landmark (including the home page), and re-add the skip-to-content link exists test.
Restore the skip-to-content link, CSS, and test dropped in the redesign, and add the missing id="main-content" target on the home page (PR generative-computing#67). Related keyboard fixes surfaced while verifying: - consistent themed focus ring on links, buttons, and panel tabs - future-panel "Learn more" now navigates on Enter instead of being swallowed by the tablist keydown handler - future-panel code area sizes to the tallest snippet; drop unused tabpanel tabindex Assisted-by: Claude Code Signed-off-by: Alex Bozarth <ajbozart@us.ibm.com>
Fixed in 0dce46d along with a handful of other accessibility bugs |
|
Could we include the SIL Open Font License 1.1 and the respective copyright notices for the self-hosted Aileron and JetBrains Mono files? Both fonts are distributed from This does not require visible attribution in the site UI. I did not find any newly added npm dependency or other confirmed third-party asset license that needs an additional notice in this PR. |
5 participants
What this is
A from-scratch rebuild of the mellea.ai site to replace the current implementation wholesale, rather than refactoring it in place. Work happens on the fork branch
ajbozarth:redesign, which deploys a live preview to GitHub Pages:This PR is intentionally a draft — it is open so that:
Why wholesale, not a refactor
We previously attempted an incremental rework of the existing design in #66. Compounding the new design onto the current implementation proved awkward (large, entangled diffs; deferred decisions like dark-mode removal piling up). This branch takes the opposite approach: a clean rebuild, with the existing content and a small set of config carried over intact.
What carries over (and what doesn't)
The rewrite replaces the site code (
src/, implementation-specific build/test config). It must preserve the editorial content and a few cross-cutting files. The full keep-list and the fork-preview revert-list are documented inREDESIGN-NOTES.mdon the branch. In short:content/(17 blogs + 3 news),public/images/, SEO/meta files (llms.txt,robots.txt,favicon.svg),templates/blog-post.md,lychee.toml,.markdownlint-cli2.jsonc,.github/, root docs +LICENSE.nextjs.ymldeploy-from-redesign+basePathchanges, andpublic/CNAMEstashed asCNAME.sav. All taggedTEMP(redesign)in source.CI status — expect red
test-e2e/link-checkOn this branch the preview deploy is gated on build only.
test-e2eandlink-checkstill run, but will show red by design: the e2e suite servesout/at the server root and asserts the current site's structure, so it fails against both the/mellea-websitebasePath and the upcoming rewrite;link-checkflags the preview URL until it's published. These don't block the preview and return to blocking onmainafter the revert. SeeREDESIGN-NOTES.md.Reviewing
Don't review the diff line-by-line yet — it will churn heavily. Use the live preview above to evaluate the design, and
REDESIGN-NOTES.mdto confirm nothing on the keep-list gets dropped.Replaces the approach in #66.
Fixes #1 (I included this fix in the refactor)