Skip to content

Commit 911519a

Browse files
authored
Merge branch 'develop' into fix/mobile-autocomplete
2 parents c81a883 + 9c8dbff commit 911519a

10 files changed

Lines changed: 126 additions & 34 deletions

File tree

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
.env.staging
55
.vscode/
66
node_modules/
7+
minio/
78
npm-debug.log
89
dump.rdb
910
static/dist/

client/i18n.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@ import {
1818
uk,
1919
sv,
2020
tr,
21-
enIN,
22-
ne
21+
enIN
2322
} from 'date-fns/locale';
2423

2524
import { getPreferredLanguage } from './utils/language-utils';
@@ -101,8 +100,7 @@ export function languageKeyToDateLocale(lang) {
101100
'zh-CN': zhCN,
102101
'zh-TW': zhTW,
103102
tr,
104-
ur: enIN,
105-
ne
103+
ur: enIN
106104
};
107105
return languageMap[lang];
108106
}

client/modules/IDE/components/Banner.jsx

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
// import { Trans } from 'react-i18next';
3+
import { Trans } from 'react-i18next';
44
import { CrossIcon } from '../../../common/icons';
55

66
/**
@@ -24,28 +24,18 @@ import { CrossIcon } from '../../../common/icons';
2424

2525
const Banner = ({ onClose }) => {
2626
// URL can be updated depending on the opportunity or announcement.
27-
// const bannerURL = 'https://processingfoundation.org/donate';
27+
const bannerURL = 'https://processingfoundation.org/donate';
2828

2929
// currently holds donation copy, will switch back when temp maintenance is done
30-
// const bannerCopy = (
31-
// <>
32-
// <Trans i18nKey="Banner.Copy" components={{ bold: <strong /> }} />
33-
// </>
34-
// );
35-
36-
// temp copy for maintenance, will remove on 3/22/2026
37-
const bannerTempCopy = (
30+
const bannerCopy = (
3831
<>
39-
p5js.org will be undergoing scheduled maintenance on{' '}
40-
<strong>Sunday March 22, 2026 8:00am CET</strong>. The p5.js website may
41-
be down for up to 24 hours.
32+
<Trans i18nKey="Banner.Copy" components={{ bold: <strong /> }} />
4233
</>
4334
);
4435

4536
return (
4637
<div className="banner">
47-
{/* <a href={bannerURL}>{bannerCopy}</a> */}
48-
<a href="https://p5js.org">{bannerTempCopy}</a>
38+
<a href={bannerURL}>{bannerCopy}</a>
4939
<button className="banner-close-button" onClick={onClose}>
5040
<CrossIcon icon={{ default: '#000', hover: '#333' }} />
5141
</button>

client/modules/IDE/pages/IDEView.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ const IDEView = () => {
114114
const [sidebarSize, setSidebarSize] = useState(160);
115115
const [isOverlayVisible, setIsOverlayVisible] = useState(false);
116116
const [MaxSize, setMaxSize] = useState(window.innerWidth);
117-
const [displayBanner, setDisplayBanner] = useState(true); // set to true if in use
117+
const [displayBanner, setDisplayBanner] = useState(false); // set to true if in use
118118

119119
const cmRef = useRef({});
120120

@@ -189,12 +189,12 @@ const IDEView = () => {
189189
const lastClosedAt = stored ? Number(stored) : null;
190190

191191
if (!lastClosedAt) {
192-
setDisplayBanner(true); // set to true if in use
192+
setDisplayBanner(false); // set to true if in use
193193
return;
194194
}
195195

196196
if (minutesSince(lastClosedAt) >= BANNER_COOLDOWN_MINUTES) {
197-
setDisplayBanner(true); // set to true if in use
197+
setDisplayBanner(false); // set to true if in use
198198
} else {
199199
setDisplayBanner(false);
200200
}

client/modules/User/components/NewPasswordForm.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export function NewPasswordForm(props: { resetPasswordToken: string }) {
3434
className="form__input"
3535
aria-label={t('NewPasswordForm.TitleARIA')}
3636
type="password"
37-
id="Password"
37+
id="password"
3838
autoComplete="new-password"
3939
{...field.input}
4040
/>
@@ -49,14 +49,14 @@ export function NewPasswordForm(props: { resetPasswordToken: string }) {
4949
<Field name="confirmPassword">
5050
{(field) => (
5151
<p className="form__field">
52-
<label htmlFor="confirm password" className="form__label">
52+
<label htmlFor="confirmPassword" className="form__label">
5353
{t('NewPasswordForm.ConfirmPassword')}
5454
</label>
5555
<input
5656
className="form__input"
5757
type="password"
5858
aria-label={t('NewPasswordForm.ConfirmPasswordARIA')}
59-
id="confirm password"
59+
id="confirmPassword"
6060
autoComplete="new-password"
6161
{...field.input}
6262
/>

client/styles/abstracts/_variables.scss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ $themes: (
5757
error-color: $p5js-pink,
5858
file-hover-color: $light,
5959
file-selected-color: $medium-light,
60-
form-input-placeholder-text-color: $middle-light,
60+
form-input-placeholder-text-color: $middle-gray,
6161
form-input-text-color: $dark,
6262
form-navigation-options-color: $middle-dark,
6363
form-secondary-title-color: $medium-dark,
@@ -91,7 +91,7 @@ $themes: (
9191
ide-border-color: $medium-light,
9292
inactive-text-color: $middle-dark,
9393
input-background-color: $lightest,
94-
input-border-color: $middle-light,
94+
input-border-color: $middle-dark,
9595
input-secondary-background-color: $lightest,
9696
input-selection-background-color: $medium-light,
9797
input-selection-text-color: $dark,
@@ -155,6 +155,7 @@ $themes: (
155155
error-color: $p5js-pink,
156156
file-hover-color: $dark,
157157
file-selected-color: $medium-dark,
158+
form-input-placeholder-text-color: $middle-gray,
158159
form-navigation-options-color: $middle-light,
159160
form-secondary-title-color: $medium-light,
160161
form-title-color: $lightest,
@@ -187,7 +188,7 @@ $themes: (
187188
ide-border-color: $middle-dark,
188189
inactive-text-color: $middle-light,
189190
input-background-color: $dark,
190-
input-border-color: $middle-dark,
191+
input-border-color: $light,
191192
input-secondary-background-color: $medium-dark,
192193
input-selection-background-color: $lightest,
193194
input-selection-text-color: $darkest,

common/p5Versions.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
export const currentP5Version = '1.11.11'; // Don't update to 2.x until 2026
1+
export const currentP5Version = '1.11.12'; // Don't update to 2.x until 2026
22

33
// Generated from https://www.npmjs.com/package/p5?activeTab=versions
44
// Run this in the console:
55
// JSON.stringify([...document.querySelectorAll('._132722c7')].map(n => n.innerText), null, 2)
66
// TODO: use their API for this to grab these at build time?
77
export const p5Versions = [
8-
{ version: '2.2.2', label: '(Beta)' },
8+
{ version: '2.2.3', label: '(Beta)' },
9+
'2.2.2',
910
'2.2.1',
1011
'2.2.0',
1112
'2.1.2',
@@ -16,7 +17,8 @@ export const p5Versions = [
1617
'2.0.2',
1718
'2.0.1',
1819
'2.0.0',
19-
{ version: '1.11.11', label: '(Default)' },
20+
{ version: '1.11.12', label: '(Default)' },
21+
'1.11.11',
2022
'1.11.10',
2123
'1.11.9',
2224
'1.11.8',

contributor_docs/s3_configuration.md

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,13 @@
11
# S3 Bucket Configuration
2+
3+
This guide covers two options for S3 storage configuration:
4+
- **[Option 1: AWS S3 (Production)](#aws-s3-production)** - For production environments
5+
- **[Option 2: MinIO (Local Development)](#minio-local-development)** - Recommended for local development
6+
7+
## AWS S3 (Production)
8+
9+
For production environments, use AWS S3:
10+
211
1. [Create an S3 bucket](https://docs.aws.amazon.com/AmazonS3/latest/userguide/create-bucket-overview.html), with any name.
312
2. Navigate to the S3 bucket permissions and add the following CORS policy. This is for development only, as it allows CORS from any origin.
413
```
@@ -63,3 +72,94 @@ name, you can also set it using this variable. I.e.:
6372
`S3_BUCKET_URL_BASE=https://files.mydomain.com`
6473

6574
For more information on using a custom domain, see [this documentation link](http://docs.aws.amazon.com/AmazonS3/latest/dev/VirtualHosting.html#VirtualHostingCustomURLs).
75+
76+
77+
## MinIO (Local Development)
78+
79+
MinIO is an S3-compatible object storage server that can run locally, making it ideal for development without needing to setup AWS account or incurring cloud storage costs.
80+
81+
### Installation
82+
83+
Install `minio-client` from a package manager then, choose one of the following installation methods:
84+
85+
#### Option A: AUR (Arch Linux)
86+
```bash
87+
yay -S minio
88+
```
89+
90+
#### Option B: Download Binary (Linux)
91+
```bash
92+
wget https://dl.min.io/server/minio/release/linux-amd64/minio
93+
chmod +x minio
94+
sudo mv minio /usr/local/bin/
95+
```
96+
97+
Visit [https://www.min.io/download](https://www.min.io/download) for other installation options.
98+
99+
### Setup
100+
101+
1. **Start MinIO server:**
102+
```bash
103+
minio server minio/ --console-address ":9090"
104+
```
105+
106+
This will start MinIO and create the folder if it doesn't exist and outputs the following information:
107+
- API endpoint (typically `http://127.0.0.1:9000`)
108+
- WebUI (typically `http://127.0.0.1:9090`)
109+
- Root credentials (default: `minioadmin` / `minioadmin`)
110+
111+
2. **Access the MinIO Web Console:**
112+
- Open your browser and navigate to `http://127.0.0.1:9090`
113+
- Login (default):
114+
- Username: `minioadmin`
115+
- Password: `minioadmin`
116+
117+
3. **Create a bucket:**
118+
- In the left panel, click "Create Bucket"
119+
- Enter bucket name: `p5js-editor`
120+
- Click "Create Bucket"
121+
122+
4. **Configure bucket access (Public Access):**
123+
- In your prefered terminal, configure the bucket to allow anonymous viewing `mcli anonymous set public local/p5js-editor`
124+
125+
5. **Update your `.env` file:**
126+
```bash
127+
# MinIO Configuration
128+
AWS_ACCESS_KEY=minioadmin
129+
AWS_SECRET_KEY=minioadmin
130+
AWS_REGION=us-east-1
131+
AWS_S3_ENDPOINT=http://127.0.0.1:9000
132+
AWS_S3_SIGNATURE_VERSION=v4
133+
S3_BUCKET=p5js-editor
134+
S3_BUCKET_URL_BASE=http://127.0.0.1:9000/p5js-editor/
135+
```
136+
137+
6. **Update S3 client configuration in code:**
138+
139+
The following files need to be updated to use MinIO locally:
140+
141+
**server/controllers/aws.controller.js:**
142+
```javascript
143+
const s3Client = new S3Client({
144+
endpoint: process.env.AWS_S3_ENDPOINT || 'http://127.0.0.1:9000',
145+
credentials: {
146+
accessKeyId: process.env.AWS_ACCESS_KEY,
147+
secretAccessKey: process.env.AWS_SECRET_KEY
148+
},
149+
region: process.env.AWS_REGION,
150+
forcePathStyle: true
151+
});
152+
```
153+
154+
**server/migrations/s3UnderUser.js:**
155+
```javascript
156+
const s3Client = new S3Client({
157+
endpoint: process.env.AWS_S3_ENDPOINT || 'http://127.0.0.1:9000',
158+
credentials: {
159+
accessKeyId: process.env.AWS_ACCESS_KEY,
160+
secretAccessKey: process.env.AWS_SECRET_KEY
161+
},
162+
region: process.env.AWS_REGION,
163+
forcePathStyle: true
164+
});
165+
```

package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "p5.js-web-editor",
3-
"version": "2.20.5",
3+
"version": "2.20.7",
44
"description": "The web editor for p5.js.",
55
"scripts": {
66
"clean": "rimraf dist",

0 commit comments

Comments
 (0)