Download Flow by Stefterv · Pull Request #683 · processing/processing-website

Stefterv · 2026-03-23T11:10:24Z

Adds the new download flow and front page refactor to the website

netlify · 2026-03-23T11:10:30Z

✅ Deploy Preview for java-processing-faf822 ready!

Name	Link
🔨 Latest commit	`f752af6`
🔍 Latest deploy log	https://app.netlify.com/projects/java-processing-faf822/deploys/69c43042317c8f0008a4629a
😎 Deploy Preview	https://deploy-preview-683--java-processing-faf822.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

Introduces a new WhatsNew component to display release descriptions on the macOS download page. Updates GraphQL queries to fetch release descriptions and integrates the component into the platform download template for improved release information visibility.

re-organised architecture as the .mdx files where not as useful

Introduces separate instruction components for Windows MSI and Zip downloads, and updates the Windows download page to dynamically select the appropriate instructions based on available assets. Also updates MacOS DMG instructions to specify Intel architecture and cleans up unused imports.

Replaces the Selector component with a new platform guessing hook and updates the download page to use it, providing a more dynamic and user-friendly platform selection. Adds new platform-specific screenshots and icons, updates styles, and removes unused images and components. Improves the Switcher component with new styles and active state indication.

Replaced the download-linux.png and download-windows.png images in the src/images directory with updated versions.

Integrates Fathom analytics by adding unique goal IDs to each DownloadButton instance and triggering events on click. Updates DownloadButton to accept an 'id' prop and report downloads, and modifies download instruction components to pass the appropriate goal IDs.

Integrated Donorbox by adding its widget script and embed iframe to the Donate component. Also applied custom styles and padding for improved layout.

Introduces a new Architecture component and FAQ section to clarify which Processing version users should download based on their system architecture. Refactors MacOS download instructions to use the new component, updates styles for improved layout, and enhances the PreviousReleases and WhatsNew components for better usability and consistency.

Enhances the download page by updating previous releases to filter out prereleases, restructures the display of stable and all releases, and adds styled step numbers to instructions. Updates fetchReleases.js to save release notes as markdown files and include prerelease info. Adjusts layout styles for better alignment, exposes the Link component, and adds resource links to the macOS download page.

Introduces a new /download/releases page listing all previous Processing releases. Updates PreviousReleases, Switcher, and download.js to use Gatsby's Link component for internal navigation and improves the display of stable and previous releases. Refactors PreviousReleases to extract useReleasesByMajor hook and streamlines the UI for easier access to older versions.

Refactors the layout and styling of the download-related components and pages for improved clarity and consistency. Updates PreviousReleases and WhatsNew components to use new flex/grid layouts, adjusts color schemes, and modifies the releases page to use React Router Links. Also updates macOS and platform download templates to match the new structure and visual style.

Added release notes for Processing versions 4.4.8, 4.4.9, 4.4.10, and 4.5.0. Updated corresponding JSON release metadata and changed the selected release to 4.5.0 in selected.json.

…for improved code organization and reusability

…5.2, and 4.5.3; modify selected.json to include version 4.5.3

…te Switcher, and enhance CSS for improved layout and user experience

…TA, update DownloadButton to accept variant prop, and improve instruction styles

…and Donate, improve layout in Windows download page, and update instructions for MacOS and Windows installations

SableRaf · 2026-03-23T11:54:50Z

Thanks for pushing this @Stefterv! Looks fantastic.

A few small notes:

Only old versions have the last step. For now, the easier is leave it out (but make it easy to re-add later). It would need design and the proper social media accounts.

Could we bring this module back? Just above the footer.

Let's make the warning sticky at the top (just under the menu) so it remains visible.

Linux install instructions for older versions would need to the install script.

Step 1 should include the version name for clarity (e.g. “Download Processing 4.5.1”):

This link (edit: every /download link) seems to go to the homepage instead of the main download page:

…ion checks, and add MoreInfoLinks component for improved user guidance

…, macOS, and Windows

Stefterv · 2026-03-24T08:21:24Z

Done

SableRaf · 2026-03-24T12:15:20Z

Thanks for the fixes @Stefterv. Looking good!

Small issues remain:

At smaller breakpoints, the logo is visible but the editor is not, so the module is not functional. This matches the current behavior, but the added “Try it” text implies that it is interactive. The text block should be hidden at smaller breakpoints.

The warning "No ___ distribution is available for this version." is hard to see, and it should say "No ___ distribution is available for Processing {{versionNumber}}" Note: let's also hide the donation and release notes modules which are distracting in that particular edge case.

The PreviousReleases-module has too small a max width. It should be allowed to take the full width available.

For the version warning, let's make the copy more positive and informative: "You’re viewing an older version of Processing. For the latest release: [Go to 4.5.2]"

The layout gets rather messy on mobile. The OS toggles and download buttons could be stacked. The instructions text and step numbers can be smaller.

RPi portable download button gets secondary color even though it's the only button. It should have the default dark blue button style.

SableRaf · 2026-03-24T12:19:44Z

@Stefterv Also, let's add this copy for the logo and examples:

…, improve layout, and modify messaging for clarity

Stefterv · 2026-03-24T13:41:39Z

Done, thanks for the review!

… for improved styling

SableRaf · 2026-03-24T14:39:05Z

Great!

Just one small thing. The clicked state of the donate button is not legible.

The examples copy is not included yet

Should be

SableRaf · 2026-03-24T14:41:57Z

@Stefterv Also, loading the home page causes some jumping around and the image fades in from black.

Stefterv · 2026-03-24T14:48:17Z

@Stefterv Also, loading the home page causes some jumping around and the image fades in from black.

Looks like this only happens when navigating the page with cache disabled, so the only thing to fix would be the first time black square

…ce link states for better accessibility

…or better user engagement

…across download components

Stefterv · 2026-03-24T15:02:50Z

I removed the black fade at least

SableRaf · 2026-03-24T15:06:32Z

Looks much better! Thanks @Stefterv

I noticed one more thing. The donate button in the top menu is not actually clickable, only the word Donate is.

SableRaf · 2026-03-24T15:09:21Z

Ah and the background one the homepage is still using the old wallpaper which lacks contrast with the white text. I've made a separate frame in Figma and tagged you there so you can export the correct asset.

…ackground-darker.svg for improved aesthetics

…ved navigation and update donate button styles for consistency

SableRaf · 2026-03-24T18:43:07Z

@Stefterv will this PR be is blocked by the Linux install script?

Stefterv · 2026-03-24T18:44:46Z

Yeah, but it is also easy to write a quick snap tutorial for now

SableRaf · 2026-03-25T18:38:46Z

@Stefterv It looks like the menu's styling randomly breaks. The Donate button shows as a regular menu item and some other items are not styled and not interactive. It doesn't happen systematically but I couldn't figure out what causes it.

Stefterv · 2026-03-25T18:52:21Z

For me its permanent, looks like a hydration issue between the SSR and SPA

…or improved navigation and update donate button styles for consistency" This reverts commit 0af8ac8.

Stefterv · 2026-03-25T18:58:13Z

Different dumber solution :)

SableRaf · 2026-03-25T23:08:19Z

Different dumber solution :)

Indeed 🤭

Stefterv added 29 commits March 23, 2026 12:10

Setting up architecture for the new download pages

3f9030b

Disable parallel sourcing in Gatsby config

74b13c1

Re-architecture

2f75926

re-organised architecture as the .mdx files where not as useful

Download instructions

a04fb58

Update download images for Linux and Windows

8625d74

Replaced the download-linux.png and download-windows.png images in the src/images directory with updated versions.

Further implemented download pages

24954fa

Show Previous releases by Major and LTS version

3892501

Release indicator

a03d9af

Add Donorbox donation widget to Donate component

63a3426

Integrated Donorbox by adding its widget script and embed iframe to the Donate component. Also applied custom styles and padding for improved layout.

Improved download layout and switcher UI pass

ec30ac7

Further work on the instructions

192cf3a

Further improvement of the instructions

3d432bf

Implemented Donate component and add styling for donation options

cf33247

Add launch configuration for development server in VSCode

1d12ab0

Update Switcher styles for improved download UI consistency

548a573

Add release notes and update release metadata for 4.4.8–4.5.0

50cd45b

Added release notes for Processing versions 4.4.8, 4.4.9, 4.4.10, and 4.5.0. Updated corresponding JSON release metadata and changed the selected release to 4.5.0 in selected.json.

Refactor download flow by creating a dedicated DownloadCTA component …

48c40c5

…for improved code organization and reusability

Update release notes and JSON files for Processing versions 4.5.1, 4.…

8753a75

…5.2, and 4.5.3; modify selected.json to include version 4.5.3

Refactor download flow and styles: create DownloadCTA component, upda…

d6ab01c

…te Switcher, and enhance CSS for improved layout and user experience

Refactor download components and styles: enhance Button and DownloadC…

a61a663

…TA, update DownloadButton to accept variant prop, and improve instruction styles

Refactor download and donation components: enhance styles for Button …

df32bb5

…and Donate, improve layout in Windows download page, and update instructions for MacOS and Windows installations

Stefterv added 2 commits March 24, 2026 09:16

Refactor download components: streamline asset handling, enhance vers…

031ad78

…ion checks, and add MoreInfoLinks component for improved user guidance

Update download instructions to include version information for Linux…

b972e1e

…, macOS, and Windows

Refactor download components and enhance user guidance: update styles…

e074669

…, improve layout, and modify messaging for clarity

Refactor download button variants: implement dynamic class assignment…

24a7597

… for improved styling

SableRaf closed this Mar 24, 2026

Stefterv reopened this Mar 24, 2026

Stefterv added 3 commits March 24, 2026 15:55

Refactor donate button styles: change selector to li.donate and enhan…

ecfa5bb

…ce link states for better accessibility

Enhance examples section: update heading and add instructional text f…

08681aa

…or better user engagement

Refactor CSS formatting: standardize spacing and improve readability …

9f390dc

…across download components

Stefterv added 2 commits March 24, 2026 16:15

Refactor download CTA background: update image source to processing-b…

7481f6c

…ackground-darker.svg for improved aesthetics

Refactor Navbar component: change list items to anchor tags for impro…

0af8ac8

…ved navigation and update donate button styles for consistency

Stefterv added 2 commits March 25, 2026 19:55

Revert "Refactor Navbar component: change list items to anchor tags f…

eafea5e

…or improved navigation and update donate button styles for consistency" This reverts commit 0af8ac8.

Update Navbar.module.css

f752af6

Conversation

Stefterv commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for java-processing-faf822 ready!

Uh oh!

SableRaf commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Stefterv commented Mar 24, 2026

Uh oh!

SableRaf commented Mar 24, 2026

Uh oh!

SableRaf commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Stefterv commented Mar 24, 2026

Uh oh!

SableRaf commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SableRaf commented Mar 24, 2026

Uh oh!

Stefterv commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Stefterv commented Mar 24, 2026

Uh oh!

SableRaf commented Mar 24, 2026

Uh oh!

SableRaf commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SableRaf commented Mar 24, 2026

Uh oh!

Stefterv commented Mar 24, 2026

Uh oh!

SableRaf commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Stefterv commented Mar 25, 2026

Uh oh!

Stefterv commented Mar 25, 2026

Uh oh!

SableRaf commented Mar 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Stefterv commented Mar 23, 2026 •

edited

Loading

netlify bot commented Mar 23, 2026 •

edited

Loading

SableRaf commented Mar 23, 2026 •

edited

Loading

SableRaf commented Mar 24, 2026 •

edited

Loading

SableRaf commented Mar 24, 2026 •

edited

Loading

Stefterv commented Mar 24, 2026 •

edited

Loading

SableRaf commented Mar 24, 2026 •

edited

Loading

SableRaf commented Mar 25, 2026 •

edited

Loading