Skip to content

Redesign: wholesale site rebuild (preview on fork Pages)#67

Draft
ajbozarth wants to merge 11 commits into
generative-computing:mainfrom
ajbozarth:redesign
Draft

Redesign: wholesale site rebuild (preview on fork Pages)#67
ajbozarth wants to merge 11 commits into
generative-computing:mainfrom
ajbozarth:redesign

Conversation

@ajbozarth

@ajbozarth ajbozarth commented Jun 26, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

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:

👉 Preview: https://ajbozarth.github.io/mellea-website/

This PR is intentionally a draft — it is open so that:

  1. Maintainers can push directly to the redesign branch ("Allow edits by maintainers" is enabled).
  2. The redesign has a single coordination/review surface.
  3. Upstream CI runs against the diff as the work progresses.

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 in REDESIGN-NOTES.md on the branch. In short:

  • Keep: everything under 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.
  • Temporary (fork-preview only, reverted before merge): nextjs.yml deploy-from-redesign + basePath changes, and public/CNAME stashed as CNAME.sav. All tagged TEMP(redesign) in source.

CI status — expect red test-e2e / link-check

On this branch the preview deploy is gated on build only. test-e2e and link-check still run, but will show red by design: the e2e suite serves out/ at the server root and asserts the current site's structure, so it fails against both the /mellea-website basePath and the upcoming rewrite; link-check flags the preview URL until it's published. These don't block the preview and return to blocking on main after the revert. See REDESIGN-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.md to confirm nothing on the keep-list gets dropped.

Replaces the approach in #66.

Fixes #1 (I included this fix in the refactor)

ajbozarth added 2 commits June 26, 2026 11:23
@ajbozarth
ci(redesign): set up fork Pages preview from redesign branch
cc0fd28 
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>
@ajbozarth
ci(redesign): gate preview deploy on build, not e2e/link-check
9447782 
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>
@ajbozarth ajbozarth mentioned this pull request Jun 26, 2026
Closed
@psschwei

psschwei commented Jun 26, 2026

Copy link
Copy Markdown
Member

I don't think the preview works (?) I still see the old website

image

@ajbozarth

ajbozarth commented Jun 26, 2026

Copy link
Copy Markdown
Contributor Author

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

Terris Poole and others added 9 commits June 26, 2026 18:38
Initial Migration
f786ad1 
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
Design Fixes
4abc762 
- Blog - Fixed header background on scroll
- Blog - Adjusted margin and padding
- Blog - removed section before footer
Update to style.css
792e864 
removed blog main page subtitle max-width cap
Updated style.css
0c025d8 
adjusted text color of blog tags
Header Nav Links
f2878ba 
Reordered header nav links
@ajbozarth
fix: redesign review — remove news, dedupe stars, fix code/image rend…
b16b96a 
…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>
@ajbozarth
fix: prefix blog markdown image URLs with basePath
2cc6b66 
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>
@ajbozarth
refactor: rename cursor sprites, repoint OG image, drop unused logo
086daf2 
- 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>
@ajbozarth
refactor: use CSS variables for repeated colors
2ba45cc 
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>
@ajbozarth

ajbozarth commented Jul 11, 2026

Copy link
Copy Markdown
Contributor Author

A few remaining TODOs for me next week before moving this out of draft:

  • Do an in-depth review of the quality of the code (in contrast to its functionality)
  • Investigate the CI failure (might be a separate PR and a rebase/merge with main)
  • Look into the e2e tests and figure out how to make them less flaky
  • (Before final merge) squash all the commits to fix DCO and clean up the commit history

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@Vanguardbots Vanguardbots

@ajbozarth ajbozarth

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Cache GitHub API stats at build time to avoid rate limits

3 participants

@ajbozarth @psschwei @Vanguardbots