Skip to content

Commit a0866fa

Browse files
raclimraclim
committed
add in translations and logo
1 parent 6745519 commit a0866fa

File tree

3 files changed

+140
-56
lines changed

3 files changed

+140
-56
lines changed

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

Lines changed: 82 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Link } from 'react-router-dom';
66
import AsteriskIcon from '../../../images/p5-asterisk.svg';
77
import Nav from '../components/Header/Nav';
88
import packageData from '../../../../package.json';
9+
import LogoIcon from '../../../images/p5js-square-logo.svg';
910

1011
function About(props) {
1112
const { t } = useTranslation();
@@ -22,28 +23,36 @@ function About(props) {
2223
<Nav layout="dashboard" />
2324
<div className="about__content">
2425
<div className="about__content-section">
25-
<h3 className="about__content-column-title">{t('Header')}</h3>
26-
<div className="about__content-row">
27-
<p className="about__content-column-list">
28-
<a
29-
href="https://p5js.org/"
30-
target="_blank"
31-
rel="noopener noreferrer"
32-
>
33-
<AsteriskIcon
34-
className="about__content-column-asterisk"
35-
aria-hidden="true"
36-
focusable="false"
37-
/>
38-
{t('About.Home')}
39-
</a>
40-
</p>
26+
<h3 className="about__content-column-title">{t('About.Title')}</h3>
27+
<div className="about__content-header">
28+
<div className="about__content-intro">
29+
<LogoIcon
30+
role="img"
31+
aria-label={t('Common.p5logoARIA')}
32+
focusable="false"
33+
className="about__logo"
34+
/>
35+
<div className="big-description">
36+
<p>{t('About.OneLine')}</p>
37+
</div>
38+
</div>
39+
<div className="about__content-description">
40+
<p>{t('About.Description1')}</p>
41+
<p>{t('About.Description2')}</p>
42+
</div>
43+
<a
44+
href="https://p5js.org/examples/"
45+
target="_blank"
46+
rel="noopener noreferrer"
47+
>
48+
{t('About.Donate')}
49+
</a>
4150
</div>
4251
</div>
4352
<div className="about__content-section">
4453
<h3 className="about__content-column-title">{t('About.NewP5')}</h3>
4554
<div className="about__content-row">
46-
<p className="about__content-column-list">
55+
<div className="about__content-column-list">
4756
<a
4857
href="https://p5js.org/"
4958
target="_blank"
@@ -56,8 +65,9 @@ function About(props) {
5665
/>
5766
{t('About.Home')}
5867
</a>
59-
</p>
60-
<p className="about__content-column-list">
68+
<p>{t('About.LinkDescriptions.Home')}</p>
69+
</div>
70+
<div className="about__content-column-list">
6171
<a
6272
href="https://p5js.org/examples/"
6373
target="_blank"
@@ -70,8 +80,9 @@ function About(props) {
7080
/>
7181
{t('About.Examples')}
7282
</a>
73-
</p>
74-
<p className="about__content-column-list">
83+
<p>{t('About.LinkDescriptions.Examples')}</p>
84+
</div>
85+
<div className="about__content-column-list">
7586
<Link to="/code-of-conduct">
7687
<AsteriskIcon
7788
className="about__content-column-asterisk"
@@ -80,15 +91,16 @@ function About(props) {
8091
/>
8192
{t('About.CodeOfConduct')}
8293
</Link>
83-
</p>
94+
<p>{t('About.LinkDescriptions.CodeOfConduct')}</p>
95+
</div>
8496
</div>
8597
</div>
8698
<div className="about__content-section">
8799
<h3 className="about__content-column-title">
88100
{t('About.Resources')}
89101
</h3>
90102
<div className="about__content-row">
91-
<p className="about__content-column-list">
103+
<div className="about__content-column-list">
92104
<a
93105
href="https://p5js.org/libraries/"
94106
target="_blank"
@@ -101,8 +113,9 @@ function About(props) {
101113
/>
102114
{t('About.Libraries')}
103115
</a>
104-
</p>
105-
<p className="about__content-column-list">
116+
<p>{t('About.LinkDescriptions.Libraries')}</p>
117+
</div>
118+
<div className="about__content-column-list">
106119
<a
107120
href="https://p5js.org/reference/"
108121
target="_blank"
@@ -115,13 +128,14 @@ function About(props) {
115128
/>
116129
{t('About.Reference')}
117130
</a>
118-
</p>
131+
<p>{t('About.LinkDescriptions.Reference')}</p>
132+
</div>
119133
</div>
120134
</div>
121135
<div className="about__content-section">
122136
<h3 className="about__content-column-title">{t('Get Involved')}</h3>
123137
<div className="about__content-row">
124-
<p className="about__content-column-list">
138+
<div className="about__content-column-list">
125139
<a
126140
href="https://p5js.org/donate/"
127141
target="_blank"
@@ -132,28 +146,41 @@ function About(props) {
132146
aria-hidden="true"
133147
focusable="false"
134148
/>
135-
Donate
149+
{t('About.Donate')}
136150
</a>
137-
</p>
138-
<p className="about__footer-list">
151+
<p>{t('About.LinkDescriptions.Donate')}</p>
152+
</div>
153+
<div className="about__footer-list">
139154
<a
140155
href="https://github.com/processing/p5.js-web-editor"
141156
target="_blank"
142157
rel="noopener noreferrer"
143158
>
159+
<AsteriskIcon
160+
className="about__content-column-asterisk"
161+
aria-hidden="true"
162+
focusable="false"
163+
/>
144164
{t('About.Contribute')}
145165
</a>
146-
</p>
147-
<p className="about__footer-list">
166+
<p>{t('About.LinkDescriptions.Contribute')}</p>
167+
</div>
168+
<div className="about__footer-list">
148169
<a
149170
href="https://github.com/processing/p5.js-web-editor/issues/new"
150171
target="_blank"
151172
rel="noopener noreferrer"
152173
>
174+
<AsteriskIcon
175+
className="about__content-column-asterisk"
176+
aria-hidden="true"
177+
focusable="false"
178+
/>
153179
{t('About.Report')}
154180
</a>
155-
</p>
156-
<p className="about__content-column-list">
181+
<p>{t('About.LinkDescriptions.Report')}</p>
182+
</div>
183+
<div className="about__content-column-list">
157184
<a
158185
href="https://discourse.processing.org/"
159186
target="_blank"
@@ -164,10 +191,11 @@ function About(props) {
164191
aria-hidden="true"
165192
focusable="false"
166193
/>
167-
{t('About.Forum')}
194+
{t('About.ForumCTA')}
168195
</a>
169-
</p>
170-
<p className="about__content-column-list">
196+
<p>{t('About.LinkDescriptions.Forum')}</p>
197+
</div>
198+
<div className="about__content-column-list">
171199
<a
172200
href="https://discord.com/invite/SHQ8dH25r9"
173201
target="_blank"
@@ -178,13 +206,28 @@ function About(props) {
178206
aria-hidden="true"
179207
focusable="false"
180208
/>
181-
{t('About.Discord')}
209+
{t('About.DiscordCTA')}
182210
</a>
183-
</p>
211+
<p>{t('About.LinkDescriptions.Discord')}</p>
212+
</div>
184213
</div>
185214
</div>
186215
<div className="about__content-section">
187216
<h3 className="about__content-column-title">{t('Contact')}</h3>
217+
<div className="contact-container">
218+
<div className="contact-row">
219+
<p>{t('About.Email')}</p>
220+
<p>{t('About.EmailAddress')}</p>
221+
</div>
222+
<div className="contact-row">
223+
<p>{t('About.Socials')}</p>
224+
<p>
225+
{t('About.Github')}, {t('About.Instagram')},{' '}
226+
{t('About.Youtube')}, {t('About.X')}, {t('About.Discord')},{' '}
227+
{t('About.Forum')},{' '}
228+
</p>
229+
</div>
230+
</div>
188231
</div>
189232
<div className="about__footer">
190233
<div className="about__footer-list-container">

‎client/styles/components/_about.scss‎

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,34 @@
88
}
99
}
1010

11+
.about__content-intro {
12+
display: flex;
13+
}
14+
15+
.about__content-description {
16+
line-height: 1.8;
17+
margin: 1.5rem 0;
18+
}
19+
20+
.big-description {
21+
display: flex;
22+
height: 100%;
23+
align-items: center;
24+
}
25+
26+
.contact-row {
27+
display: flex;
28+
justify-content: space-between;
29+
}
30+
1131
.about__content {
1232
margin: 3rem 17rem;
1333
}
1434

35+
.about__content-row {
36+
display: flex;
37+
}
38+
1539
.about__content-column {
1640
display: flex;
1741
flex-direction: column;
@@ -36,12 +60,15 @@
3660
}
3761

3862
.about__content-column-title {
39-
font-size: #{math.div(21, $base-font-size)}rem;
40-
padding-left: #{math.div(17, $base-font-size)}rem;
63+
font-size: #{math.div(18, $base-font-size)}rem;
64+
font-weight: 600;
65+
// padding-left: #{math.div(17, $base-font-size)}rem;
4166
}
4267

4368
.about__content-column-asterisk {
44-
padding-right: #{math.div(5, $base-font-size)}rem;
69+
padding-right: #{math.div(8, $base-font-size)}rem;
70+
width: #{math.div(20, $base-font-size)}rem;
71+
height: #{math.div(20, $base-font-size)}rem;
4572
@include themify() {
4673
& path {
4774
fill: getThemifyVariable('logo-color');
@@ -68,11 +95,6 @@
6895
padding-top: #{math.div(30, $base-font-size)}rem;
6996
}
7097
}
71-
// span {
72-
// @include themify() {
73-
// fill: getThemifyVariable('logo-color');
74-
// }
75-
// }
7698
}
7799

78100
.about__footer {

‎translations/locales/en-US/translations.json‎

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -89,27 +89,46 @@
8989
"About": {
9090
"Title": "About",
9191
"TitleHelmet": "p5.js Web Editor | About",
92-
"Contribute": "Github",
92+
"OneLine": "Create, share, and remix p5.js sketches with the p5.js Editor.",
93+
"Contribute": "Contribute",
94+
"Description1": "p5.js is a free, open-source JavaScript library for learning to code and make art. Using the p5.js Editor, you can create, share, and remix p5.js sketches without needing to download or configure anything.",
95+
"Description2": "We believe software the tools to learn it, should be as open and inclusive as possible. You can support this work by making a donation to the Processing Foundation, the organization that supports p5.js. Your donation supports sofware development for p5.js, education resources like code examples and tutorials, fellowships, and community events.",
96+
"Donate": "Donate",
9397
"NewP5": "New to p5.js?",
94-
"Report": "Report a bug",
98+
"Report": "Report a Bug",
9599
"Learn": "Learn",
96-
"Twitter": "Twitter",
97-
"Home": "Home",
100+
"X": "X",
101+
"Home": "p5.js Home",
98102
"Instagram": "Instagram",
99103
"Discord": "Discord",
104+
"DiscordCTA": "Join the Discord",
105+
"Youtube": "Youtube",
106+
"Github": "Github",
100107
"WebEditor": "Web Editor",
101108
"Resources": "Resources",
109+
"Reference": "Reference",
102110
"Libraries": "Libraries",
103111
"Forum": "Forum",
112+
"ForumCTA": "Join the Forum",
104113
"Examples": "Examples",
105-
"Home": "Home",
106-
"Twitter": "Twitter",
107-
"Instagram": "Instagram",
108-
"Discord": "Discord",
109114
"PrivacyPolicy": "Privacy Policy",
110115
"TermsOfUse": "Terms of Use",
111116
"CodeOfConduct": "Code of Conduct",
112-
"WebEditor": "Web Editor"
117+
"Email": "Email",
118+
"EmailAddress": "[email protected]",
119+
"Socials": "Socials",
120+
"LinkDescriptions": {
121+
"Home": "Learn more about p5.js and our community.",
122+
"Examples": "Explore the possibilities of p5.js with short examples.",
123+
"CodeOfConduct": "Read our Community State and Code of Conduct.",
124+
"Libraries": "Expand the possibilities of p5.js with community-created libraries.",
125+
"Reference": "Find easy expalantions for every piece of p5.js code.",
126+
"Donate": "Support this work with a donation to the Processing Foundation.",
127+
"Contribute": "Contribute to the open-source p5.js Editor on Github.",
128+
"Report": "Report broken or incorrect behavior with the p5.js Editor.",
129+
"Forum": "Expand the possibilities of p5.js with community-created libraries.",
130+
"Discord": "Expand the possibilties of p5.js with community-created libraries."
131+
}
113132
},
114133
"Toast": {
115134
"OpenedNewSketch": "Opened new sketch.",

0 commit comments

Comments
 (0)