Merge processing/p5.js-website main branch with rt1301/p5.js-website main branch

.github/workflows/test.yml

@@ -0,0 +1,29 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  test:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm ci
+    - run: npm test

Gruntfile.js

@@ -12,6 +12,8 @@ const fse = require('fs-extra');
 const git = require('simple-git');
 const pkg = require('./package.json');
 const update_i18n = require('./updatei18nFiles.js');
+const mozjpeg = require('imagemin-mozjpeg');
+const pngquant = require('imagemin-pngquant');
 
 module.exports = function(grunt) {
   require('time-grunt')(grunt);
@@ -151,7 +153,8 @@ module.exports = function(grunt) {
     imagemin: {
       images: {
         options: {
-          optimizationLevel: 2
+          optimizationLevel: 2,
+          use: [mozjpeg({quality: 70}), pngquant()] //plugins for jpeg & png image compression
         },
         files: [{
           expand: true,
@@ -502,4 +505,4 @@ module.exports = function(grunt) {
 
   // runs with just grunt command
   grunt.registerTask('default', ['build']);
-};
+};

contributor_docs/automated_reference_update.md

@@ -1,4 +1,4 @@
-##Automated Reference update
+## Automated Reference update
 
 The p5.js documentation needs to be updated every time a new p5.js release gets published.
 This process is done by the `update-enJSON` [grunt task](https://github.com/processing/p5.js-website/blob/main/Gruntfile.js). 
@@ -16,6 +16,6 @@ Every time a new p5.js release gets published, the update-p5jswebsite workflow (
 
 When the update-documentation workflow commits the updated Reference files, the commit message will show both the p5.js release tag and the commit's sha.
 
-###Notes:
+### Notes:
 - For the repository_dispatch event of the update-p5jswebsite workflow, [this GitHub action](https://github.com/peter-evans/repository-dispatch) was used.
 - In order for the update-p5jswebsite workflow to trigger the update-documentation workflow, **it requires a repo scoped Personal Access Token created on a user with write access to the p5.js-website repository**. The Personal Access Token needs to be stored as secret in the p5.js repository.

i18n-tracking.yml

@@ -1,5 +1,10 @@
 es:
   src/data/en.yml:
+    line 162: '    library in your html. To learn more visit '
+    line 163: '    library in your html. To learn more visit '
+    line 164: '  your-first-sketch7'
+    line 97: '  get-started-button'
+    line 96: '  get-started7'
     line 114: '  environment15'
     line 113: '  environment14'
     line 115: '  environment16'
@@ -149,7 +154,6 @@ es:
     line 244: '  download-title'
     line 245: '  hosted-title'
     line 50: footerxh1
-    line 97: '  p1xh1'
     line 98: '  p1x1'
     line 99: '    p5.js is a JavaScript library for creative coding, with a focus on making'
     line 100: '    coding accessible and inclusive for artists, designers, educators,'
@@ -161,10 +165,8 @@ es:
     line 134: '  p4xp4'
     line 141: '  project-a-2-5-phuong'
     line 144: '  project-a-2-7-phuong'
-    line 163: '  teach-case1-content1'
     line 64: '  color-p3x3'
     line 70: '  color-rgb-p1x1'
-    line 164: '  teach-case1-content1-1'
     line 87: '  color-custom-ranges-p2x1'
     line 24: footer1
     line 25: footer2
@@ -184,7 +186,6 @@ es:
     line 159: '  processing-transition1'
     line 160: '  processing-transition2'
     line 161: '  processing-transition3'
-    line 162: '  processing-transition4'
     line 357: '  link-2-chung'
     line 358: '  link-3-chung'
     line 359: '  project-a-1-1-chung'
@@ -289,7 +290,6 @@ es:
     line 52: footer2
     line 53: footer3
     line 58: tagline3
-    line 96: '  start-creating'
     line 101: '    beginners, and anyone else! p5.js is free and open-source because we believe'
     line 106: '    think of your whole browser page as your sketch, including HTML5 objects for'
     line 107: '    text, input, video, webcam, and sound.'
@@ -1817,8 +1817,16 @@ es:
     line 2555: '    coding concepts.'
     line 2556: '  teach-case12-content5-1'
     line 2557: '  teach-case12-content5-2'
+    line 598: '  color-custom-ranges-li1x2'
+    line 601: '  color-custom-ranges-li2x2'
+    line 604: '  color-custom-ranges-li3x2'
 ko:
   src/data/en.yml:
+    line 162: '    library in your html. To learn more visit '
+    line 163: '    library in your html. To learn more visit '
+    line 164: '  your-first-sketch7'
+    line 97: '  get-started-button'
+    line 96: '  get-started7'
     line 114: '  environment15'
     line 113: '  environment14'
     line 115: '  environment16'
@@ -1969,7 +1977,6 @@ ko:
     line 244: '  download-title'
     line 245: '  hosted-title'
     line 50: footerxh1
-    line 97: '  p1xh1'
     line 98: '  p1x1'
     line 99: '    p5.js is a JavaScript library for creative coding, with a focus on making'
     line 100: '    coding accessible and inclusive for artists, designers, educators,'
@@ -1981,10 +1988,8 @@ ko:
     line 134: '  p4xp4'
     line 141: '  project-a-2-5-phuong'
     line 144: '  project-a-2-7-phuong'
-    line 163: '  teach-case1-content1'
     line 64: '  color-p3x3'
     line 70: '  color-rgb-p1x1'
-    line 164: '  teach-case1-content1-1'
     line 87: '  color-custom-ranges-p2x1'
     line 24: footer1
     line 25: footer2
@@ -2004,7 +2009,6 @@ ko:
     line 159: '  processing-transition1'
     line 160: '  processing-transition2'
     line 161: '  processing-transition3'
-    line 162: '  processing-transition4'
     line 357: '  link-2-chung'
     line 358: '  link-3-chung'
     line 359: '  project-a-1-1-chung'
@@ -2109,7 +2113,6 @@ ko:
     line 52: footer2
     line 53: footer3
     line 58: tagline3
-    line 96: '  start-creating'
     line 101: '    beginners, and anyone else! p5.js is free and open-source because we believe'
     line 106: '    think of your whole browser page as your sketch, including HTML5 objects for'
     line 107: '    text, input, video, webcam, and sound.'
@@ -3636,8 +3639,16 @@ ko:
     line 2555: '    coding concepts.'
     line 2556: '  teach-case12-content5-1'
     line 2557: '  teach-case12-content5-2'
+    line 598: '  color-custom-ranges-li1x2'
+    line 601: '  color-custom-ranges-li2x2'
+    line 604: '  color-custom-ranges-li3x2'
 zh-Hans:
   src/data/en.yml:
+    line 162: '    library in your html. To learn more visit '
+    line 163: '    library in your html. To learn more visit '
+    line 164: '  your-first-sketch7'
+    line 97: '  get-started-button'
+    line 96: '  get-started7'
     line 114: '  environment15'
     line 113: '  environment14'
     line 115: '  environment16'
@@ -3787,7 +3798,6 @@ zh-Hans:
     line 244: '  download-title'
     line 245: '  hosted-title'
     line 50: footerxh1
-    line 97: '  p1xh1'
     line 98: '  p1x1'
     line 99: '    p5.js is a JavaScript library for creative coding, with a focus on making'
     line 100: '    coding accessible and inclusive for artists, designers, educators,'
@@ -3799,10 +3809,8 @@ zh-Hans:
     line 134: '  p4xp4'
     line 141: '  project-a-2-5-phuong'
     line 144: '  project-a-2-7-phuong'
-    line 163: '  teach-case1-content1'
     line 64: '  color-p3x3'
     line 70: '  color-rgb-p1x1'
-    line 164: '  teach-case1-content1-1'
     line 87: '  color-custom-ranges-p2x1'
     line 24: footer1
     line 25: footer2
@@ -3822,7 +3830,6 @@ zh-Hans:
     line 159: '  processing-transition1'
     line 160: '  processing-transition2'
     line 161: '  processing-transition3'
-    line 162: '  processing-transition4'
     line 357: '  link-2-chung'
     line 358: '  link-3-chung'
     line 359: '  project-a-1-1-chung'
@@ -3927,7 +3934,6 @@ zh-Hans:
     line 52: footer2
     line 53: footer3
     line 58: tagline3
-    line 96: '  start-creating'
     line 101: '    beginners, and anyone else! p5.js is free and open-source because we believe'
     line 106: '    think of your whole browser page as your sketch, including HTML5 objects for'
     line 107: '    text, input, video, webcam, and sound.'
@@ -5455,3 +5461,6 @@ zh-Hans:
     line 2555: '    coding concepts.'
     line 2556: '  teach-case12-content5-1'
     line 2557: '  teach-case12-content5-2'
+    line 598: '  color-custom-ranges-li1x2'
+    line 601: '  color-custom-ranges-li2x2'
+    line 604: '  color-custom-ranges-li3x2'