Redesign: wholesale site rebuild (preview on fork Pages)#67
Draft
ajbozarth wants to merge 24 commits into
Draft
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>
Closed
Member
|
I don't think the preview works (?) I still see the old website 
|
Contributor
Author
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>
Contributor
Author
|
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>
Contributor
Author
|
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>
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
3 participants
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.
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)