Skip to content

Commit c2f80c2

Browse files
raclimraclim
authored
Merge branch 'develop' into syntax-highlighting-instance-backup
2 parents 788e256 + 3f56555 commit c2f80c2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+1095
-407
lines changed

‎.github/ISSUE_TEMPLATE/feature-request.md‎ renamed to ‎.github/ISSUE_TEMPLATE/🌱-new-feature-request.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
---
2-
name: New Feature Request
2+
name: "\U0001F331 New Feature Request"
33
about: This template is for requesting a new feature be added.
44
title: ''
5-
labels: feature request
5+
labels: ''
66
assignees: ''
77

88
---
99

1010
<!--
1111
Hi there!
1212

13-
Thank you for contributing to the p5.js Editor project
13+
Thank you for contributing to the p5.js Editor project.
1414

1515
Until further notice, we will only add new features that increase access.
1616

‎.github/ISSUE_TEMPLATE/found-a-bug.md‎ renamed to ‎.github/ISSUE_TEMPLATE/🐛-found-a-bug.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
---
2-
name: Found a Bug
3-
about: This template is for reporting bugs (broken or incorrect behavior). If you have questions about your own code, please visit our forum discourse.processing.org instead.
2+
name: "\U0001F41B Found a Bug"
3+
about: This template is for reporting bugs (broken or incorrect behavior). If you
4+
have questions about your own code, please visit our forum discourse.processing.org
5+
instead.
46
title: ''
57
labels: bug
68
assignees: ''

‎.github/ISSUE_TEMPLATE/existing-feature-enhancement.md‎ renamed to ‎.github/ISSUE_TEMPLATE/💡-existing-feature-enhancement.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
name: Existing Feature Enhancement
2+
name: "\U0001F4A1 Existing Feature Enhancement"
33
about: This template is for suggesting an improvement for an existing feature.
44
title: ''
5-
labels: enhancement
5+
labels: ''
66
assignees: ''
77

88
---

‎README.md‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
# [p5.js Editor](https://editor.p5js.org)
22

3-
4-
Documentation is also available in the following languages:
5-
6-
[한국어](https://github.com/processing/p5.js-web-editor/blob/develop/translations/ko)
7-
83
## Welcome! 👋👋🏿👋🏽👋🏻👋🏾👋🏼
94

105
The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything. It is designed with beginners in mind, limiting features and frills. The editor is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone.

‎client/common/icons.jsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -29,28 +29,28 @@ import CircleInfo from '../images/circle-info.svg';
2929
// could also give these a default size, color, etc. based on the theme
3030
// Need to add size to these - like small icon, medium icon, large icon. etc.
3131
function withLabel(SvgComponent) {
32-
const Icon = (props) => {
33-
const StyledIcon = styled(SvgComponent)`
34-
&&& {
35-
color: ${prop('Icon.default')};
32+
const StyledIcon = styled(SvgComponent)`
33+
&&& {
34+
color: ${prop('Icon.default')};
35+
& g,
36+
& path,
37+
& polygon {
38+
opacity: 1;
39+
fill: ${prop('Icon.default')};
40+
}
41+
&:hover {
42+
color: ${prop('Icon.hover')};
3643
& g,
3744
& path,
3845
& polygon {
3946
opacity: 1;
40-
fill: ${prop('Icon.default')};
41-
}
42-
&:hover {
43-
color: ${prop('Icon.hover')};
44-
& g,
45-
& path,
46-
& polygon {
47-
opacity: 1;
48-
fill: ${prop('Icon.hover')};
49-
}
47+
fill: ${prop('Icon.hover')};
5048
}
5149
}
52-
`;
50+
}
51+
`;
5352

53+
const Icon = (props) => {
5454
const { 'aria-label': ariaLabel } = props;
5555
if (ariaLabel) {
5656
return (

‎client/components/AddRemoveButton.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { withTranslation } from 'react-i18next';
3+
import { useTranslation } from 'react-i18next';
44

55
import AddIcon from '../images/plus.svg';
66
import RemoveIcon from '../images/minus.svg';
77

8-
const AddRemoveButton = ({ type, onClick, t }) => {
8+
const AddRemoveButton = ({ type, onClick }) => {
9+
const { t } = useTranslation();
910
const alt =
1011
type === 'add'
1112
? t('AddRemoveButton.AltAddARIA')
@@ -25,8 +26,7 @@ const AddRemoveButton = ({ type, onClick, t }) => {
2526

2627
AddRemoveButton.propTypes = {
2728
type: PropTypes.oneOf(['add', 'remove']).isRequired,
28-
onClick: PropTypes.func.isRequired,
29-
t: PropTypes.func.isRequired
29+
onClick: PropTypes.func.isRequired
3030
};
3131

32-
export default withTranslation()(AddRemoveButton);
32+
export default AddRemoveButton;

‎client/components/Nav.jsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -677,6 +677,16 @@ class Nav extends React.PureComponent {
677677
한국어
678678
</button>
679679
</li>
680+
<li className="nav__dropdown-item">
681+
<button
682+
onFocus={this.handleFocusForLang}
683+
onBlur={this.handleBlur}
684+
value="it"
685+
onClick={(e) => this.handleLangSelection(e)}
686+
>
687+
Italiano
688+
</button>
689+
</li>
680690
<li className="nav__dropdown-item">
681691
<button
682692
onFocus={this.handleFocusForLang}

‎client/components/PreviewNav.jsx‎

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,50 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
33
import { Link } from 'react-router';
4-
import { withTranslation } from 'react-i18next';
4+
import { useTranslation } from 'react-i18next';
55

66
import LogoIcon from '../images/p5js-logo-small.svg';
77
import CodeIcon from '../images/code.svg';
88

9-
const PreviewNav = ({ owner, project, t }) => (
10-
<nav className="nav preview-nav">
11-
<div className="nav__items-left">
12-
<div className="nav__item-logo">
13-
<LogoIcon
14-
role="img"
15-
aria-label={t('Common.p5logoARIA')}
16-
focusable="false"
17-
className="svg__logo"
18-
/>
9+
const PreviewNav = ({ owner, project }) => {
10+
const { t } = useTranslation();
11+
return (
12+
<nav className="nav preview-nav">
13+
<div className="nav__items-left">
14+
<div className="nav__item-logo">
15+
<LogoIcon
16+
role="img"
17+
aria-label={t('Common.p5logoARIA')}
18+
focusable="false"
19+
className="svg__logo"
20+
/>
21+
</div>
22+
<Link
23+
className="nav__item"
24+
to={`/${owner.username}/sketches/${project.id}`}
25+
>
26+
{project.name}
27+
</Link>
28+
<p className="toolbar__project-owner">{t('PreviewNav.ByUser')}</p>
29+
<Link className="nav__item" to={`/${owner.username}/sketches/`}>
30+
{owner.username}
31+
</Link>
1932
</div>
20-
<Link
21-
className="nav__item"
22-
to={`/${owner.username}/sketches/${project.id}`}
23-
>
24-
{project.name}
25-
</Link>
26-
<p className="toolbar__project-owner">{t('PreviewNav.ByUser')}</p>
27-
<Link className="nav__item" to={`/${owner.username}/sketches/`}>
28-
{owner.username}
29-
</Link>
30-
</div>
31-
<div className="nav__items-right">
32-
<Link
33-
to={`/${owner.username}/sketches/${project.id}`}
34-
aria-label={t('PreviewNav.EditSketchARIA')}
35-
>
36-
<CodeIcon
37-
className="preview-nav__editor-svg"
38-
focusable="false"
39-
aria-hidden="true"
40-
/>
41-
</Link>
42-
</div>
43-
</nav>
44-
);
33+
<div className="nav__items-right">
34+
<Link
35+
to={`/${owner.username}/sketches/${project.id}`}
36+
aria-label={t('PreviewNav.EditSketchARIA')}
37+
>
38+
<CodeIcon
39+
className="preview-nav__editor-svg"
40+
focusable="false"
41+
aria-hidden="true"
42+
/>
43+
</Link>
44+
</div>
45+
</nav>
46+
);
47+
};
4548

4649
PreviewNav.propTypes = {
4750
owner: PropTypes.shape({
@@ -50,8 +53,7 @@ PreviewNav.propTypes = {
5053
project: PropTypes.shape({
5154
name: PropTypes.string.isRequired,
5255
id: PropTypes.string.isRequired
53-
}).isRequired,
54-
t: PropTypes.func.isRequired
56+
}).isRequired
5557
};
5658

57-
export default withTranslation()(PreviewNav);
59+
export default PreviewNav;

‎client/i18n.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
es,
88
ja,
99
hi,
10+
it,
1011
ko,
1112
ptBR,
1213
de,
@@ -24,6 +25,7 @@ const availableLanguages = [
2425
'es-419',
2526
'fr-CA',
2627
'hi',
28+
'it',
2729
'ja',
2830
'ko',
2931
'pt-BR',
@@ -40,6 +42,7 @@ export function languageKeyToLabel(lang) {
4042
'es-419': 'Español',
4143
'fr-CA': 'Français',
4244
hi: 'हिन्दी',
45+
it: 'Italiano',
4346
ja: '日本語',
4447
ko: '한국어',
4548
'pt-BR': 'Português',
@@ -58,6 +61,7 @@ export function languageKeyToDateLocale(lang) {
5861
'es-419': es,
5962
'fr-CA': frCA,
6063
hi,
64+
it,
6165
ja,
6266
ko,
6367
'pt-BR': ptBR,

‎client/modules/IDE/components/About.jsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
11
import React from 'react';
2+
import { useSelector } from 'react-redux';
23
import { Helmet } from 'react-helmet';
34
import { useTranslation } from 'react-i18next';
45
import { Link } from 'react-router';
56
import SquareLogoIcon from '../../../images/p5js-square-logo.svg';
67
// import PlayIcon from '../../../images/play.svg';
78
import AsteriskIcon from '../../../images/p5-asterisk.svg';
9+
import packageData from '../../../../package.json';
810

911
function About(props) {
1012
const { t } = useTranslation();
13+
const p5version = useSelector((state) => {
14+
const index = state.files.find((file) => file.name === 'index.html');
15+
return index?.content.match(/\/p5\.js\/([\d.]+)\//)?.[1];
16+
});
1117
return (
1218
<div className="about__content">
1319
<Helmet>
@@ -20,6 +26,14 @@ function About(props) {
2026
aria-label={t('Common.p5logoARIA')}
2127
focusable="false"
2228
/>
29+
<div className="about__content-column">
30+
<p className="about__version-info">
31+
Web Editor: <span>v{packageData?.version}</span>
32+
</p>
33+
<p className="about__version-info">
34+
p5.js: <span>v{p5version}</span>
35+
</p>
36+
</div>
2337
</div>
2438
<div className="about__content-column">
2539
<h3 className="about__content-column-title">{t('About.NewP5')}</h3>

0 commit comments

Comments
 (0)