Merge commits from main repo to the forked repo

README.md

@@ -24,7 +24,7 @@ Once you've setup the site, type `npm run watch` to run the website. This should
 
 ## File structure
 
-* __See note about what to include in pull requests [here](https://github.com/processing/p5.js-website/wiki/Pull-requests).__
+* __See note about what to include in pull requests [here](https://github.com/processing/p5.js/blob/main/contributor_docs/preparing_a_pull_request.md).__
 * `src/` – All the pieces for generating the built site. __Edits should be made here.__
   * `assets/` – All static files (imgs, css, fonts, js, p5_featured homepage sketches)
     * Note: if you make edits here you must restart the server to see your changes. To see changes immediately, you can edit the assets files in the dist directory, but need to copy and paste your updated work here for it to be saved.

i18n-tracking.yml

@@ -1,5 +1,12 @@
 es:
   src/data/en.yml:
+    line 114: '  environment15'
+    line 113: '  environment14'
+    line 115: '  environment16'
+    line 102: '  download8'
+    line 103: '  download9'
+    line 104: '  download10'
+    line 105: '  download11'
     line 256: '    , the organization that supports p5.js.'
     line 251: '    We need your help! p5.js is free, open-source software. We want to make our community as open'
     line 269: '    Your donation supports software development for p5.js, education resources'
@@ -12,7 +19,6 @@ es:
     line 277: '  support-5'
     line 37: Editor
     line 55: footer5
-    line 114: '    acknowledge that not everyone has the time, financial means, or capacity to'
     line 123: '  p3xh2'
     line 41: Reference
     line 118: '  p2x3'
@@ -35,8 +41,6 @@ es:
     line 61: tagline6
     line 111: '    identity and expression, sexual orientation, race, ethnicity, language,'
     line 112: '    neuro-type, size, disability, class, religion, culture, subculture,'
-    line 113: '    political opinion, age, skill level, occupation, and background. We'
-    line 115: '    actively participate, but we recognize and encourage involvement of all'
     line 116: '    kinds. We facilitate and foster access and empowerment. We are all learners.'
     line 117: '  p2x2'
     line 119: '  p2x4'
@@ -153,10 +157,6 @@ es:
     line 129: '  p3xp6'
     line 148: '    The p5.js library is free software; you can redistribute it and/or modify it'
     line 46: Community
-    line 102: '    software, and the tools to learn it, should be accessible to everyone.'
-    line 103: '  p1x2'
-    line 104: '    Using the metaphor of a sketch, p5.js has a full set of drawing'
-    line 105: '    functionality. However, you’re not limited to your drawing canvas. You can'
     line 133: '  p4xp3'
     line 134: '  p4xp4'
     line 141: '  project-a-2-5-phuong'
@@ -1819,6 +1819,13 @@ es:
     line 2557: '  teach-case12-content5-2'
 ko:
   src/data/en.yml:
+    line 114: '  environment15'
+    line 113: '  environment14'
+    line 115: '  environment16'
+    line 102: '  download8'
+    line 103: '  download9'
+    line 104: '  download10'
+    line 105: '  download11'
     line 251: '    We need your help! p5.js is free, open-source software. We want to make our community as open'
     line 256: '    , the organization that supports p5.js.'
     line 269: '    Your donation supports software development for p5.js, education resources'
@@ -1831,7 +1838,6 @@ ko:
     line 277: '  support-5'
     line 37: Editor
     line 55: footer5
-    line 114: '    acknowledge that not everyone has the time, financial means, or capacity to'
     line 123: '  p3xh2'
     line 41: Reference
     line 118: '  p2x3'
@@ -1854,8 +1860,6 @@ ko:
     line 61: tagline6
     line 111: '    identity and expression, sexual orientation, race, ethnicity, language,'
     line 112: '    neuro-type, size, disability, class, religion, culture, subculture,'
-    line 113: '    political opinion, age, skill level, occupation, and background. We'
-    line 115: '    actively participate, but we recognize and encourage involvement of all'
     line 116: '    kinds. We facilitate and foster access and empowerment. We are all learners.'
     line 117: '  p2x2'
     line 119: '  p2x4'
@@ -1973,10 +1977,6 @@ ko:
     line 129: '  p3xp6'
     line 148: '    The p5.js library is free software; you can redistribute it and/or modify it'
     line 46: Community
-    line 102: '    software, and the tools to learn it, should be accessible to everyone.'
-    line 103: '  p1x2'
-    line 104: '    Using the metaphor of a sketch, p5.js has a full set of drawing'
-    line 105: '    functionality. However, you’re not limited to your drawing canvas. You can'
     line 133: '  p4xp3'
     line 134: '  p4xp4'
     line 141: '  project-a-2-5-phuong'
@@ -3638,6 +3638,13 @@ ko:
     line 2557: '  teach-case12-content5-2'
 zh-Hans:
   src/data/en.yml:
+    line 114: '  environment15'
+    line 113: '  environment14'
+    line 115: '  environment16'
+    line 102: '  download8'
+    line 103: '  download9'
+    line 104: '  download10'
+    line 105: '  download11'
     line 251: '    We need your help! p5.js is free, open-source software. We want to make our community as open'
     line 256: '    , the organization that supports p5.js.'
     line 269: '    Your donation supports software development for p5.js, education resources'
@@ -3650,7 +3657,6 @@ zh-Hans:
     line 277: '  support-5'
     line 37: Editor
     line 55: footer5
-    line 114: '    acknowledge that not everyone has the time, financial means, or capacity to'
     line 123: '  p3xh2'
     line 41: Reference
     line 118: '  p2x3'
@@ -3672,8 +3678,6 @@ zh-Hans:
     line 61: tagline6
     line 111: '    identity and expression, sexual orientation, race, ethnicity, language,'
     line 112: '    neuro-type, size, disability, class, religion, culture, subculture,'
-    line 113: '    political opinion, age, skill level, occupation, and background. We'
-    line 115: '    actively participate, but we recognize and encourage involvement of all'
     line 116: '    kinds. We facilitate and foster access and empowerment. We are all learners.'
     line 117: '  p2x2'
     line 119: '  p2x4'
@@ -3791,10 +3795,6 @@ zh-Hans:
     line 129: '  p3xp6'
     line 148: '    The p5.js library is free software; you can redistribute it and/or modify it'
     line 46: Community
-    line 102: '    software, and the tools to learn it, should be accessible to everyone.'
-    line 103: '  p1x2'
-    line 104: '    Using the metaphor of a sketch, p5.js has a full set of drawing'
-    line 105: '    functionality. However, you’re not limited to your drawing canvas. You can'
     line 133: '  p4xp3'
     line 134: '  p4xp4'
     line 141: '  project-a-2-5-phuong'

src/assets/css/main.css

@@ -294,7 +294,7 @@ textarea {
 #skip-to-content {
   position: absolute;
   left: 0px;
-  top: 0px;
+  top: 40px;
   z-index: 5;
   background-color: #ed225d;
   color: white;
@@ -582,7 +582,7 @@ div.reference-subgroup {
   position: relative;
   left: 1em;
   padding-top: 0;
-  margin-top: 0;
+  margin-top: 1rem;
   border: none;
   width: 30.5em;
   max-width: 100%;
@@ -634,6 +634,7 @@ div.reference-subgroup {
   top: 0.5em;
   left: 120px;
   width: 30.5em;
+  padding-top: 1.5rem;
   display: none;
 }
 
@@ -666,7 +667,8 @@ div.reference-subgroup {
 /*to make ref example responsive*/
 @media (max-width: 600px) {
   .example-content .example_code {
-    left: 0;
+    margin-top: 0.2rem;
+    left: 0.5rem;
   }
 
   .example-content .example_container {
@@ -833,7 +835,7 @@ a.code.addon {
   height: 100px;
   position: relative;
   background: white;
-  /* margin-top: 1.5em; temp promo */
+  margin-top: 1.5em; /* temp promo */
 }
 
 #navi,
@@ -1597,15 +1599,13 @@ h2.featuring {
 
 #teach-page .case span {
   color: #ed225d;
-  font-color: #ed225d;
   font: 900 1.4rem "Montserrat", sans-serif;
 }
 
 
 #teach-page .case p.lead-name{
   font: 900 Italic 1.2rem "Montserrat", sans-serif;
   color: #ed225d;
-  font-color: #ed225d;
   line-height: 1.4em;
   border-bottom: 1.4em;
 }
@@ -1643,7 +1643,6 @@ h2.featuring {
 
   font: 400 1rem "Montserrat", sans-serif;
   color: #ed225d;
-  font-color: #ffe8e8;
   line-height: 1.4em;
   border-bottom: 0.1em dashed rgba(237, 34, 93, 0.15);
 }
@@ -2266,7 +2265,7 @@ footer {
 @media (min-width: 780px) {
   .container {
     width: 49em !important;
-    margin: 10em auto; /* temp promo, 11.5em */
+    margin: 11.5em auto; /* temp promo, 10.0em */
   }
   main {
     width: 36em;
@@ -2279,7 +2278,7 @@ footer {
 
 @media (min-width: 780px) {
   .container {
-    margin: 10em auto; /* temp promo, 11.5em */
+    margin: 11.5em auto; /* temp promo, 10.0em */
     width: 100%;
     padding: 0.8em 0 0 0;
     height: auto;
@@ -2304,7 +2303,7 @@ footer {
   }
   #i18n-btn {
     position: absolute;
-    top: 2.5em; /* temp promo, 4.0em */
+    top: 4.0em; /* temp promo, 2.5em */
     right: 1em;
   }
   #i18n-btn a {
@@ -2331,14 +2330,14 @@ footer {
     margin: 0 0 1em 0;
     text-align: right;
   }
-  #menu li:last-child {
-    /*    margin: 0;*/
-  }
-  #menu .other-link::after {
-    /* content:"\2192";
-      margin-right: -0.98em; */
-    /*content:" »";*/
-  }
+  /* #menu li:last-child {
+     margin: 0;
+  } */
+  /* #menu .other-link::after {
+    content:"\2192";
+     margin-right: -0.98em;
+    content:" »";
+  } */
   #menu li:nth-child(11) {
     margin-top: 3em;
     padding-top: 0.5em;

src/assets/js/init.js

@@ -88,7 +88,7 @@ window.onload = function() {
     var tmp = w.navigator.languages && w.navigator.languages[0]
       || w.navigator.language || w.navigator.userLanguage;
     tmp = tmp.split('-')[0];
-    for (var i=0, l=langs; i < l; i++) {
+    for (var i = 0; i < langs.length; i++) {
       if (tmp == langs[i]) {
         return langs[i];
       }
@@ -99,7 +99,7 @@ window.onload = function() {
 
   var get_loc_lang = function(w) {
     if ((w.location.pathname == '/') === false) {
-      for (var i=0, l=langs.length; i < l; i++) {
+      for (var i = 0; i < langs.length; i++) {
         if (w.location.pathname.indexOf('/' + langs[i] + '/') !== -1) {
           if (can_store) {
             window.localStorage.setItem('lang', langs[i]);
@@ -149,7 +149,7 @@ window.onload = function() {
   var els = document.getElementsByClassName('js-lang');
   var el = null;
   if (window.lang != 'en') {
-    for (var i=0, l=els.length; i < l; i++) {
+    for (var i = 0; i < els.length; i++) {
       el = els[i];
       el.innerHTML = el.getAttribute('data-' + window.lang);
     }
@@ -163,14 +163,18 @@ window.onload = function() {
   var evt_type = typeof document.addEventListener !== 'undefined' ? 'click' : 'onclick';
   var click_action = function(e) {
     var new_lang = this.getAttribute('data-lang');
+    //loc is defined second time below because while navigating from /reference/ to /reference/#/p5/displayWidth
+    //the page is not refreshing, so even if the page navigates properly to /reference/#/p5/displayWidth
+    //the window.location.hash remains empty
+    loc = String(window.location.pathname + window.location.hash);
     if (new_lang == 'en') {
-      for (var j=0, l=langs.length; j < l; j++) {
+      for (var j = 0; j < langs.length; j++) {
         if (langs[j] != 'en') {
           loc = loc.replace('\/' + langs[j] + '\/', '/');
         }
       }
     } else {
-      for (var j=0, l=langs.length; j < l; j++) {
+      for (var j = 0; j < langs.length; j++) {
         loc = loc.replace('\/' + langs[j] + '\/', '/');
       }
       loc = '/' + new_lang + loc;
@@ -180,7 +184,7 @@ window.onload = function() {
     }
     window.location = loc;
   };
-  for (var i=0, l=btns.length; i < l; i++) {
+  for (var i = 0; i < btns.length; i++) {
     var btn_lang = btns[i].getAttribute('data-lang');
     if (loc_lang == btn_lang) {
       $(btns[i]).addClass('disabled');

src/assets/js/reference.js

@@ -4404,7 +4404,7 @@ define('menuView',[
 });
 
 
-define('text!tpl/library.html',[],function () { return '<h3><%= module.name %> library</h3>\n\n<p><%= module.description %></p>\n\n<div id="library-page" class="reference-group clearfix">  \n\n<% var t = 0; col = 0; %>\n\n<% _.each(groups, function(group){ %>\n  <% if (t == 0) { %> \n    <div class="column_<%=col%>">\n  <% } %>\n  <% if (group.name !== module.name && group.name !== \'p5\') { %>\n    <% if (group.hash) { %> <a href="<%=group.hash%>" <% if (group.module !== module.name) { %>class="core"<% } %>><% } %>  \n    <h4 class="group-name <% if (t == 0) { %> first<%}%>"><%=group.name%></h4>\n    <% if (group.hash) { %> </a><br> <% } %>\n  <% } %>\n  <% _.each(group.items.filter(function(item) {return item.access !== \'private\'}), function(item) { %>\n    <a href="<%=item.hash%>" <% if (item.module !== module.name) { %>class="core"<% } %>><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%></a><br>\n    <% t++; %>\n  <% }); %>\n  <% if (t >= Math.floor(totalItems/4)) { col++; t = 0; %>\n    </div>\n  <% } %>\n<% }); %>\n</div>\n';});
+define('text!tpl/library.html',[],function () { return '<h3><%= module.name %> library</h3>\n\n<p><%= module.description %></p>\n\n<div id="library-page" class="reference-group clearfix">  \n\n<% var t = 0; col = 0; %>\n\n<% _.each(groups, function(group){ %>\n  <% if (t == 0) { %> \n    <div class="column_<%=col%>">\n  <% } %>\n  <% if (group.name !== module.name && group.name !== \'p5\') { %>\n    <% if (group.hash) { %> <a href="<%=group.hash%>" <% if (group.module !== module.name) { %>class="core"<% } %>><% } %>  \n    <h2 class="group-name <% if (t == 0) { %> first<%}%>"><%=group.name%></h2>\n    <% if (group.hash) { %> </a><br> <% } %>\n  <% } %>\n  <% _.each(group.items.filter(function(item) {return item.access !== \'private\'}), function(item) { %>\n    <a href="<%=item.hash%>" <% if (item.module !== module.name) { %>class="core"<% } %>><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%></a><br>\n    <% t++; %>\n  <% }); %>\n  <% if (t >= Math.floor(totalItems/4)) { col++; t = 0; %>\n    </div>\n  <% } %>\n<% }); %>\n</div>\n';});
 
 define(
   'libraryView',[

src/data/en.yml

@@ -99,6 +99,10 @@ get started:
   download1: 'The easiest way to start is by using the empty example that comes with the '
   download2: p5.js complete
   download3: ' download.'
+  download8: 'After download, you need to set up a local server. See instructions '
+  download9: here
+  download10: '. Run your local server within the downloaded folder and on your browser, go to '
+  download11: 'http://localhost:{your-port-num}/empty-example'
   download4: >-
     If you look in index.html, you'll notice that it links to the file p5.js. If
     you would like to use the minified version (compressed for faster page
@@ -133,6 +137,9 @@ get started:
     Open the index.html file in your browser by double clicking on it in your
     file manager or type:
   environment12: 'file:///the/file/path/to/your/html'
+  environment14: ' (or '
+  environment15: 'http://localhost:{your-port-num}/empty-example'
+  environment16: ' if you are using a local server)'
   environment13: ' in the address bar to view your sketch.'
   your-first-sketch-title: Your First Sketch
   your-first-sketch-intro1: 'In the '

src/data/es.yml

@@ -100,6 +100,12 @@ get started:
   download1: La manera más simple de empezar es usando el ejemplo en blanco incluido en
   download2: p5.js completo
   download3: disponible en el sitio.
+  download8: 'After download, you need to set up a local server. See instructions '
+  download9: here
+  download10: >-
+    . Run your local server within the downloaded folder and on your browser, go
+    to 
+  download11: 'http://localhost:{your-port-num}/empty-example'
   download4: >-
     Si revisas el archivo index.html, te darás cuenta que tiene un enlace al
     archivo p5.js. Si estás buscando usar la versión reducida (comprimida para
@@ -135,6 +141,9 @@ get started:
     Abre el archivo index.html en tu navegador haciendo doble click en él o
     escribiendo:
   environment12: 'file:///la/ubicacion/de/tu/archivo/html'
+  environment14: ' (or '
+  environment15: 'http://localhost:{your-port-num}/empty-example'
+  environment16: ' if you are using a local server)'
   environment13: ' en la barra de direcciones de tu navegador para ver tu bosquejo.'
   your-first-sketch-title: Tu primer bosquejo
   your-first-sketch-intro1: 'En el '

src/data/examples/build_examples/build.js

@@ -3,7 +3,7 @@ var verbose = false;
 // now load the modules we need
 var ejs = require('ejs'); // library for turning .ejs templates into .html files
 var fs = require('fs'); // node.js library for reading and writing files
-var path = require('upath'); // platform indepedent file paths
+var path = require('upath'); // platform independent file paths
 
 // make sure EJS is configured to use curly braces for templates
 // ejs.open = '<%';