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

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

✅ Deploy Preview for java-processing-faf822 ready!

Name	Link
🔨 Latest commit	2af051d
🔍 Latest deploy log	https://app.netlify.com/projects/java-processing-faf822/deploys/6a3bc16788b2b80008a74dde
😎 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.
🤖 Make changes	Run an agent on this branch

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

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.

Different dumber solution :)

Different dumber solution :)

Indeed 🤭

@Stefterv Are we certain there is no way to improve the image compression by the way?

https://www.gatsbyjs.com/docs/conceptual/using-gatsby-image/

@Stefterv Also do we have this module implemented? I know we don't have the content for it but it would be good to be able to add it when ppl volunteer to contribute instructions for their distribution.

There is also still this issue with the donate button, which is not exactly a regression since this behaviour already exists in the current menu but is made more obvious by the new button design.

Split Navbar into smaller components (NavbarItems, NavbarItem, NavbarElement, NavbarItemChildren) and introduce a NavbarItemContext to pass item data. Simplifies active/current detection (uses location.pathname.startsWith and child checks), removes showSubmenu state and global mousedown handler, and streamlines rendering of links and submenus. Removes the 'home' item from the items list. Adjusts className construction and updates CSS: removes list-style/first-child rule, adds .active left-border indicator, and minor spacing tweaks to menu/item styles. Overall aims to simplify component logic and improve active state handling and submenu rendering.

would be good to finish up install.sh before directing people to it. but looks good!

Starting install.sh script today

Any chance adding https://github.com/pre-commit/pre-commit-hooks#end-of-file-fixer to the repo before merging this PR? It seems the PR includes a big number of files with file EOF issues.

Is this file intentional? If so, I recommend adding a .vscode entry to .gitignore with an exclusion for this file, to save feature reviewers with dealing unwanted IDE configs.

I think its nice for users to have a preconfigured vscode

I think this file and the references can be dropped until processing/processing4#1425 is ready.

this PR should be blocked until it is ready tbh

nvm I just read the other convos

I'd recommend adding MacOSBrew.js for https://formulae.brew.sh/cask/processing

Did some testing with images and it seems they can be compressed to 40% - 20% percent of their current sizes without any noticeable quality loss.

I'd also recommend a squash - rebase over latest main since the PR was in progress for a while.

Can this update be handled in a separate PR?

Do we need both json and markdown version of the same set of information? Having it twice feels redundant.

👏🏻

Since the PR was open for a while, and seem to be blocking / relating to some other issues, I added several notes that I believe can help to minimize the changes and helps with a more pleasant review experience, leading to faster merge. I can help with any of those recommendations if needed.

One thing I believe is missing in the current website and couldn't find see in the PR either is checksum / source validation. We have lots of references to the source links, but no info about how to validate the integrity of a download.

Bring over the homepage work from the download-flow-refactor branch (#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. - On small screens, hide the screenshot, stack the buttons and show a compact, centered "Runs on" row with only the platform icons. - 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>

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>

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

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 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

Add inline-flex display to donate subitem for improved layout

a62ef5d

Stefterv added 3 commits March 27, 2026 15:17

New Navbar

1ff9c20

Order fixes

b1895ad

Stefterv added 3 commits June 24, 2026 12:26

Merge branch 'main' into download-flow-refactor

b3d5366

Update package-lock.json

7491816

Added platform picker

2af051d

SableRaf mentioned this pull request Aug 27, 2026

Fix Linux and Raspberry Pi variants displayed "Intel" in /downloads #695

Open

ulgens reviewed Aug 28, 2026

View reviewed changes

ulgens mentioned this pull request Sep 22, 2026

End of file fixer #718

Open

SableRaf mentioned this pull request Oct 20, 2026

Refresh the homepage #726

Merged

                   "classnames": "^2.3.1",
                   "copy-to-clipboard": "^3.3.2",
-                  "gatsby": "^4.22.0",
+                  "gatsby": "^4.25.9",

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

Repository navigation

Download Flow - #683

Download Flow#683Stefterv wants to merge 58 commits intoprocessing:mainprocessing/processing-website:mainfrom Stefterv:download-flow-refactorStefterv/processing-website:download-flow-refactorCopy head branch name to clipboard

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!

Stefterv commented Mar 25, 2026

Uh oh!

Stefterv commented Mar 25, 2026

Uh oh!

SableRaf commented Mar 25, 2026

Uh oh!

SableRaf commented Mar 26, 2026

Uh oh!

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

Uh oh!

Uh oh!

SableRaf commented Mar 26, 2026

Uh oh!

catilac commented Apr 27, 2026

Uh oh!

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

Uh oh!

Uh oh!

ulgens commented Aug 28, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ulgens left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ulgens commented Aug 28, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Download Flow#683
Stefterv wants to merge 58 commits into
processing:mainfrom
Stefterv:download-flow-refactor

Stefterv commented Mar 23, 2026 •
edited
Loading

netlify Bot commented Mar 23, 2026 •
edited
Loading

SableRaf commented Mar 26, 2026 •
edited
Loading

catilac commented Jun 25, 2026 •
edited
Loading