FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

Refresh the homepage · processing/processing-website@56e6146 · GitHub

  1. processing
  2. processing-website

Repository navigation

Commit 56e6146

Browse files
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. - 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>
1 parent 66a0793 commit 56e6146

26 files changed

Lines changed: 863 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)
Back | FazBrowse Home | New Git URL