Merge branch 'develop' into refactor/prefer-use-translation

Author: lindapaiste

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

@@ -1,16 +1,16 @@
 ---
-name: New Feature Request
+name: "\U0001F331 New Feature Request"
 about: This template is for requesting a new feature be added.
 title: ''
-labels: feature request
+labels: ''
 assignees: ''
 
 ---
 
 <!--
 Hi there!
 
-Thank you for contributing to the p5.js Editor project
+Thank you for contributing to the p5.js Editor project. 
 
 Until further notice, we will only add new features that increase access.
 

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

@@ -1,6 +1,8 @@
 ---
-name: Found a Bug
-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.
+name: "\U0001F41B Found a Bug"
+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.
 title: ''
 labels: bug
 assignees: ''

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

@@ -1,8 +1,8 @@
 ---
-name: Existing Feature Enhancement
+name: "\U0001F4A1 Existing Feature Enhancement"
 about: This template is for suggesting an improvement for an existing feature.
 title: ''
-labels: enhancement
+labels: ''
 assignees: ''
 
 ---

README.md

@@ -1,10 +1,5 @@
 # [p5.js Editor](https://editor.p5js.org)
 
-
-Documentation is also available in the following languages:
-
-[한국어](https://github.com/processing/p5.js-web-editor/blob/develop/translations/ko)
-
 ## Welcome! 👋👋🏿👋🏽👋🏻👋🏾👋🏼
 
 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

@@ -29,28 +29,28 @@ import CircleInfo from '../images/circle-info.svg';
 // could also give these a default size, color, etc. based on the theme
 // Need to add size to these - like small icon, medium icon, large icon. etc.
 function withLabel(SvgComponent) {
-  const Icon = (props) => {
-    const StyledIcon = styled(SvgComponent)`
-      &&& {
-        color: ${prop('Icon.default')};
+  const StyledIcon = styled(SvgComponent)`
+    &&& {
+      color: ${prop('Icon.default')};
+      & g,
+      & path,
+      & polygon {
+        opacity: 1;
+        fill: ${prop('Icon.default')};
+      }
+      &:hover {
+        color: ${prop('Icon.hover')};
         & g,
         & path,
         & polygon {
           opacity: 1;
-          fill: ${prop('Icon.default')};
-        }
-        &:hover {
-          color: ${prop('Icon.hover')};
-          & g,
-          & path,
-          & polygon {
-            opacity: 1;
-            fill: ${prop('Icon.hover')};
-          }
+          fill: ${prop('Icon.hover')};
         }
       }
-    `;
+    }
+  `;
 
+  const Icon = (props) => {
     const { 'aria-label': ariaLabel } = props;
     if (ariaLabel) {
       return (

client/components/Nav.jsx

@@ -667,6 +667,26 @@ class Nav extends React.PureComponent {
                 हिन्दी
               </button>
             </li>
+            <li className="nav__dropdown-item">
+              <button
+                onFocus={this.handleFocusForLang}
+                onBlur={this.handleBlur}
+                value="ko"
+                onClick={(e) => this.handleLangSelection(e)}
+              >
+                한국어
+              </button>
+            </li>
+            <li className="nav__dropdown-item">
+              <button
+                onFocus={this.handleFocusForLang}
+                onBlur={this.handleBlur}
+                value="it"
+                onClick={(e) => this.handleLangSelection(e)}
+              >
+                Italiano
+              </button>
+            </li>
             <li className="nav__dropdown-item">
               <button
                 onFocus={this.handleFocusForLang}

client/i18n.js

@@ -1,11 +1,14 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import Backend from 'i18next-http-backend';
+
 import {
   enUS,
   es,
   ja,
   hi,
+  it,
+  ko,
   ptBR,
   de,
   frCA,
@@ -22,7 +25,9 @@ const availableLanguages = [
   'es-419',
   'fr-CA',
   'hi',
+  'it',
   'ja',
+  'ko',
   'pt-BR',
   'sv',
   'uk-UA',
@@ -37,7 +42,9 @@ export function languageKeyToLabel(lang) {
     'es-419': 'Español',
     'fr-CA': 'Français',
     hi: 'हिन्दी',
+    it: 'Italiano',
     ja: '日本語',
+    ko: '한국어',
     'pt-BR': 'Português',
     sv: 'Svenska',
     'uk-UA': 'Українська',
@@ -54,7 +61,9 @@ export function languageKeyToDateLocale(lang) {
     'es-419': es,
     'fr-CA': frCA,
     hi,
+    it,
     ja,
+    ko,
     'pt-BR': ptBR,
     sv,
     'uk-UA': uk,

client/modules/IDE/components/About.jsx

@@ -1,13 +1,19 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router';
 import SquareLogoIcon from '../../../images/p5js-square-logo.svg';
 // import PlayIcon from '../../../images/play.svg';
 import AsteriskIcon from '../../../images/p5-asterisk.svg';
+import packageData from '../../../../package.json';
 
 function About(props) {
   const { t } = useTranslation();
+  const p5version = useSelector((state) => {
+    const index = state.files.find((file) => file.name === 'index.html');
+    return index?.content.match(/\/p5\.js\/([\d.]+)\//)?.[1];
+  });
   return (
     <div className="about__content">
       <Helmet>
@@ -20,6 +26,14 @@ function About(props) {
           aria-label={t('Common.p5logoARIA')}
           focusable="false"
         />
+        <div className="about__content-column">
+          <p className="about__version-info">
+            Web Editor: <span>v{packageData?.version}</span>
+          </p>
+          <p className="about__version-info">
+            p5.js: <span>v{p5version}</span>
+          </p>
+        </div>
       </div>
       <div className="about__content-column">
         <h3 className="about__content-column-title">{t('About.NewP5')}</h3>

client/modules/IDE/components/PreviewFrame.jsx

@@ -24,7 +24,7 @@ function PreviewFrame({ fullView }) {
   const frameUrl = previewUrl;
   const sandboxAttributes = `allow-forms allow-modals allow-pointer-lock allow-popups 
     allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads`;
-  const allow = `accelerometer; ambient-light-sensor; autoplay; camera; encrypted-media; geolocation; gyroscope; \
+  const allow = `accelerometer; ambient-light-sensor; autoplay; bluetooth; camera; encrypted-media; geolocation; gyroscope; \
     hid; microphone; magnetometer; midi; payment; usb; serial; vr; xr-spatial-tracking`;
 
   return (

client/modules/IDE/reducers/files.js

@@ -12,8 +12,8 @@ function draw() {
 const defaultHTML = `<!DOCTYPE html>
 <html lang="en">
   <head>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/addons/p5.sound.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script>
     <link rel="stylesheet" type="text/css" href="style.css">
     <meta charset="utf-8" />