Skip to content

Refresh the homepage - #726

Merged
SableRaf merged 1 commit into
processing:mainfrom
SableRaf:homepage-refresh
Oct 20, 2026
Merged

SableRaf merged 1 commit into
processing:mainfrom
SableRaf:homepage-refresh

Conversation

@SableRaf

@SableRaf SableRaf commented Oct 20, 2026 •

Copy link
Copy Markdown
Collaborator

Bring over the homepage work from the download-flow-refactor branch (#683), along with the per-platform download routes it depends on, and fixes some issues of the original design. This does not include the download page redesign itself.

Homepage:

  • Replace the old hero with the DownloadCTA hero: a dark hero with "Download Processing" and "Read the docs" buttons, a "Runs on" row of platform icons, and a screenshot of the editor for the detected platform. Add the dark and outline Button variants it uses.
  • Encode the editor screenshots at quality 100. Gatsby's default quality of 50 made the UI text in them blurry. This fixes an issue with the original PR.
  • Show "Runs on" followed by the platform icons on one row, centered under the buttons, at every width. Each icon link has an aria-label with the platform name.
  • Keep the button labels on one line at every width. Between 961 and 1234px, shrink the buttons and the intro text so they fit next to the screenshot. Stack the buttons on small screens.
  • Hide the screenshot below 961px rather than showing it under the text. Above that, fit it to the height of the hero, aligned right, with a minimum height that grows with the window width.
  • Open the sketch editor by default under a "Sketch with code" intro.
  • Add an introduction to the examples section.

Download routes:

  • Add /download/windows, /download/macos, /download/linux and /download/raspberry-pi. Each one renders the download page for that platform instead of the one detected from the user agent. The routes are built from content/download/platforms, and the homepage platform icons link to them.

Navbar:

  • Refactor the navbar into context-based NavbarItems and add a donate button.
  • Render Documentation, Learn and About as plain divs. They have no href, so they rendered as a Link with to={undefined} and their submenu links were nested inside that anchor. Browsers split nested anchors when they parse the server HTML, which caused a hydration mismatch.

Screenshots

BEFORE

image

AFTER

image

image

image

Bring over the homepage work from the download-flow-refactor branch
(processing#683), along with the per-platform download routes it depends on.

Homepage:
- Replace the old hero with the DownloadCTA hero: a dark hero with
  "Download Processing" and "Read the docs" buttons, a "Runs on" row of
  platform icons, and a screenshot of the editor for the detected
  platform. Add the dark and outline Button variants it uses.
- Encode the editor screenshots at quality 100. Gatsby's default
  quality of 50 made the UI text in them blurry. This fixes an issue with the original PR.
- Show "Runs on" followed by the platform icons on one row, centered
  under the buttons, at every width. Each icon link has an aria-label
  with the platform name.
- Keep the button labels on one line at every width. Between 961 and
  1234px, shrink the buttons and the intro text so they fit next to the
  screenshot. Stack the buttons on small screens.
- Hide the screenshot below 961px rather than showing it under the
  text. Above that, fit it to the height of the hero, aligned right,
  with a minimum height that grows with the window width.
- Open the sketch editor by default under a "Sketch with code" intro.
- Add an introduction to the examples section.

Download routes:
- Add /download/windows, /download/macos, /download/linux and
  /download/raspberry-pi. Each one renders the download page for that
  platform instead of the one detected from the user agent. The routes
  are built from content/download/platforms, and the homepage platform
  icons link to them.

Navbar:
- Refactor the navbar into context-based NavbarItems and add a donate
  button.
- Render Documentation, Learn and About as plain divs. They have no
  href, so they rendered as a Link with to={undefined} and their
  submenu links were nested inside that anchor. Browsers split nested
  anchors when they parse the server HTML, which caused a hydration
  mismatch.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@netlify

netlify Bot commented Oct 20, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for java-processing-faf822 ready!

Name Link
🔨 Latest commit 56e6146
🔍 Latest deploy log https://app.netlify.com/projects/java-processing-faf822/deploys/6ad76cfb74944c0d9a5098c3
😎 Deploy Preview https://deploy-preview-726--java-processing-faf822.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@SableRaf
SableRaf requested a review from catilac October 20, 2026 13:30
@catilac

catilac commented Oct 20, 2026

Copy link
Copy Markdown
Contributor

@SableRaf actually one thing, did we lose internationalization?

@SableRaf

SableRaf commented Oct 20, 2026 •

Copy link
Copy Markdown
Collaborator Author

@SableRaf actually one thing, did we lose internationalization?

Spanish was never completed and the plugin used is long out of date (along with Gatsby). The i18n feature never shipped. I'd suggest we revisit after the Astro migration. Not a blocker for this PR.

@SableRaf
SableRaf merged commit c57ae10 into processing:main Oct 20, 2026
4 checks passed
@SableRaf
SableRaf deleted the homepage-refresh branch October 20, 2026 14:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants