Skip to content

Commit 3bf191e

Browse files
SableRafclaude
SableRaf
and
claude
committed
Refresh the homepage
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>
1 parent 66a0793 commit 3bf191e

26 files changed

Lines changed: 867 additions & 414 deletions

‎content/download/platforms/linux.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"title": "Linux",
3+
"userAgent": "X11",
4+
"sort": 2
5+
}

‎content/download/platforms/macos.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"title": "macOS",
3+
"userAgent": "Mac",
4+
"sort": 1
5+
}

‎content/download/platforms/raspberry-pi.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"title": "Raspberry Pi",
3+
"sort": 3,
4+
"assets": "linux"
5+
}

‎content/download/platforms/windows.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"title": "Windows",
3+
"userAgent": "Windows",
4+
"sort": 0
5+
}

‎gatsby-node.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -374,6 +374,19 @@ async function createDownloadAndReleases(actions, graphql) {
374374
selectedPreReleases
375375
}
376376
}
377+
platforms: allFile(
378+
filter: {
379+
sourceInstanceName: { eq: "download" }
380+
relativeDirectory: { eq: "platforms" }
381+
}
382+
) {
383+
nodes {
384+
name
385+
childJson {
386+
title
387+
}
388+
}
389+
}
377390
}
378391
`
379392
);
@@ -392,6 +405,17 @@ async function createDownloadAndReleases(actions, graphql) {
392405
selectedPreReleases
393406
}
394407
});
408+
for (const platform of result.data.platforms.nodes) {
409+
createPage({
410+
path: `/download/${platform.name}`,
411+
component: downloadTemplate,
412+
context: {
413+
selectedReleases,
414+
selectedPreReleases,
415+
os: platform.childJson.title
416+
}
417+
});
418+
}
395419
createPage({
396420
path: '/releases',
397421
component: releasesTemplate,

‎i18n/react-intl/en.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,10 @@
157157
"donateCryptoInfo": "To donate using crypto, DAF, or stocks, visit our <strong><a href='https://www.every.org/processing-foundation?method=crypto,stocks,daf&success_url=https%3A%2F%2Fprocessing.org%2Fdonate&exit_url=https%3A%2F%2Fprocessing.org%2Fdonate&partner_metadata=eyJzb3VyY2UiOiAicHJvY2Vzc2luZy5vcmcifQ==#donate'>Every.org donation page</a></strong> instead.",
158158
"donateButton": "Donate",
159159
"donateHelp": "Help us continue with your generosity!",
160+
"windows": "Windows",
161+
"macos": "macOS",
162+
"linux": "Linux",
163+
"raspberry-pi": "Raspberry Pi",
160164
"moreExamples": "More Examples",
161165
"referenceTitle": "Reference",
162166
"Topic Examples": "Topic Examples",

‎src/components/Button.module.css‎

Lines changed: 60 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,15 @@
99
outline: none;
1010
border: none;
1111
cursor: pointer;
12+
display: inline-flex;
13+
justify-content: center;
14+
gap: var(--gutter-half);
15+
align-items: center;
16+
svg{
17+
width: 1.5em;
18+
height: 1.5em;
19+
align-self: center;
20+
}
1221
}
1322

1423
.root:focus {
@@ -21,42 +30,65 @@
2130
}
2231

2332
/* Variant: Animate1 & Animate2 */
33+
.dark {
34+
background-color: var(--white);
35+
color: var(--processing-blue-dark);
36+
}
37+
.outline{
38+
background-color: transparent;
39+
color: var(--white);
40+
border: 2px solid var(--white);
41+
}
2442

2543
.animate1,
26-
.animate2 {
44+
.animate2,
45+
.dark,
46+
.outline {
2747
position: relative;
48+
&:before{
49+
content: "";
50+
position: absolute;
51+
top: 0;
52+
left: 0;
53+
width: 100%;
54+
height: 100%;
55+
transition: all 0.3s;
56+
z-index: -1;
57+
background-color: var(--processing-blue-light);
58+
transform: translate(-3px, 3px);
59+
}
60+
&:hover::before {
61+
transform: translate(3px, -3px);
62+
}
63+
&.large::before {
64+
transform: translate(-5px, 5px);
65+
}
66+
&.large:hover::before {
67+
transform: translate(5px, -5px);
68+
}
2869
}
29-
30-
.animate1::before,
31-
.animate2::before,
32-
.animate2::after {
33-
content: "";
34-
position: absolute;
35-
top: 0;
36-
left: 0;
37-
width: 100%;
38-
height: 100%;
39-
transition: transform 0.3s;
40-
z-index: -1;
41-
background-color: var(--processing-blue-light);
42-
transform: translate(-3px, 3px);
70+
.dark::before{
71+
background-color: var(--white);
72+
opacity: 0.25;
4373
}
44-
45-
.animate1:hover::before,
46-
.animate2:hover::before {
47-
transform: translate(3px, -3px);
48-
color: white;
74+
.dark:hover{
75+
color: var(--processing-blue-dark);
4976
}
50-
51-
.animate1.large::before,
52-
.animate2.large::before {
53-
transform: translate(-5px, 5px);
77+
.dark:focus{
78+
background-color: var(--white);
79+
color: var(--processing-blue-dark);
5480
}
55-
56-
.animate1.large:hover::before,
57-
.animate2.large:hover::before {
58-
transform: translate(5px, -5px);
81+
.outline::before{
82+
background: none;
83+
border: 2px solid var(--white);
84+
clip-path: inset(4px 4px 0px 0px);
5985
}
86+
.outline:hover::before{
87+
background: none;
88+
border: 2px solid var(--white);
89+
clip-path: inset(0px 0px 4px 4px);
90+
}
91+
6092

6193
/* Variant: Animate2 */
6294

@@ -70,14 +102,6 @@
70102
color: white;
71103
}
72104

73-
.animate2.large::after {
74-
transform: translate(5px, -5px);
75-
}
76-
77-
.animate2.large:hover::after {
78-
transform: translate(-5px, 5px);
79-
}
80-
81105
/* Variant: Gray */
82106

83107
.gray {

‎src/components/Header.module.css‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,4 @@
88

99
.root h1 {
1010
margin: 0;
11-
}
12-
13-
.root a {
14-
color: inherit;
15-
text-decoration: none;
16-
17-
&:focus {
18-
color: var(--processing-blue-dark);
19-
}
2011
}

0 commit comments

Comments
 (0)