Teach UI/UX update

.gitattributes

@@ -0,0 +1,24 @@
+# Set default behaviour to automatically normalize line endings.
+* text=auto
+
+# prevents git from converting LF to CRLF, which causes issues
+# when assembling example pages on Windows
+data/examples/**/*.js eol=lf
+
+# Denote all files that are truly binary and should not be modified.
+*.ai binary
+*.gif binary
+*.ico binary
+*.jpg binary
+*.mov binary
+*.mp3 binary
+*.mp4 binary
+*.ogg binary
+*.ogv binary
+*.otf binary
+*.pdf binary
+*.png binary
+*.ttf binary
+*.wav binary
+*.webm binary
+*.zip binary

.github/workflows/update-documentation.yml

@@ -10,7 +10,7 @@ env:
 
 jobs:
   build:
-    name: Update p5.js documentation
+    name: Update p5.js documentation and library files
     runs-on: ubuntu-latest
 
     steps:
@@ -20,28 +20,18 @@ jobs:
         uses: actions/setup-node@v1
         with:
           node-version: 12.x
-      - name: Extract documentation from the p5.js repo
+      - name: Extract documentation and library files from the p5.js repo
         run: |
           npm install
-          npm run grunt update-enJSON
+          npm run grunt update-enJSON --target="${{ steps.p5js.outputs.VERSION }}"
       - name: Get p5.js release info
         id: p5js
         run: |
           echo ::set-output name=VERSION::${P5JS_REF/refs\/tags\//}
           echo ::set-output name=SHA::${P5JS_SHA}
-      - name: Get latest p5.min.js build
-        uses: suisei-cn/actions-download-file@v1
-        with:
-          url: https://github.com/processing/p5.js/releases/download/${{github.event.client_payload.ref}}/p5.min.js
-          target: src/assets/js/
-      - name: Get latest p5.sound.min.js build
-        uses: suisei-cn/actions-download-file@v1
-        with:
-          url: https://github.com/processing/p5.js/releases/download/${{github.event.client_payload.ref}}/p5.sound.min.js
-          target: src/assets/js/
       - name: Commit changes
         uses: EndBug/add-and-commit@v4
         with:
-          message: 'Update Reference files for p5.js ${{ steps.p5js.outputs.VERSION }} release (${{ steps.p5js.outputs.SHA }})'
+          message: 'Update files for p5.js ${{ steps.p5js.outputs.VERSION }} release (${{ steps.p5js.outputs.SHA }})'
         env:
           GITHUB_TOKEN: ${{ secrets.DOCS_COMMIT_TOKEN }}

Gruntfile.js

@@ -342,8 +342,22 @@ module.exports = function(grunt) {
         dest: 'p5-reference/'
       }
     },
-    htmllint: {
-      all: {
+
+    htmlhint: {
+      html1: {
+        options: {
+          'attr-value-double-quotes': false,
+          'alt-require': true,
+          'doctype-first': true,
+          'title-require': true,
+          'attr-no-duplication': true,
+          'input-requires-label': true,
+          'tags-check': true,
+          'tagname-lowercase': true,
+          'tagname-specialchars': true,
+          'empty-tag-not-self-closed': true,
+          'id-unique': true
+        },
         src: [
           '<%= config.dist %>/**/*.html',
           '!<%= config.dist %>/**/CHANGES.html',
@@ -352,20 +366,13 @@ module.exports = function(grunt) {
           '!<%= config.dist %>/**/learn/*.html',
           '!<%= config.dist %>/**/examples/*.html',
           '!<%= config.dist %>/**/reference/assets/index.html'
-        ],
-        options: {
-          ignore: [
-            /^This document appears to be written in English/,
-            /^Bad value “https:/,
-            /^Consider adding a “lang” attribute to the “html”/,
-            /^Attribute “paypalexpress” not allowed on element “script” at this point./
-          ]
-        }
+        ]
       }
     },
+
     shell: {
       generate_dataJSON: {
-        command: 'npm ci && npm run grunt yui',
+        command: `git checkout ${grunt.option('target')} && npm ci && npm run grunt yui build`,
         options: {
           execOptions: {
             cwd: 'tmp/p5.js'
@@ -378,7 +385,7 @@ module.exports = function(grunt) {
   grunt.registerTask('update-version', function() {
     const done = this.async();
 
-    const version = require('./src/templates/pages/reference/data.json').project.version;
+    const version = grunt.option('target').substring(1);
 
     fs.readFile('./src/data/data.yml')
       .then(str => {
@@ -402,7 +409,7 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-file-append');
   grunt.loadNpmTasks('grunt-contrib-compress');
   grunt.loadNpmTasks('grunt-contrib-requirejs');
-  grunt.loadNpmTasks('grunt-html');
+  grunt.loadNpmTasks('grunt-htmlhint');
 
   // i18n tracking task
   grunt.registerTask('i18n', function() {
@@ -436,6 +443,14 @@ module.exports = function(grunt) {
     // move the data.json files from the cloned p5.js repository to the p5.js-website repository
     fse.moveSync(dataJSON_p5js, dataJSON_p5jswebsite, { overwrite: true });
     fse.moveSync(dataJSONmin_p5js, dataJSONmin_p5jswebsite, { overwrite: true });
+
+    const p5min_src = 'tmp/p5.js/lib/p5.min.js';
+    const p5min_dest = 'src/assets/js/p5.min.js';
+    const p5Soundmin_src = 'tmp/p5.js/lib/addons/p5.sound.min.js';
+    const p5Soundmin_dest = 'src/assets/js/p5.sound.min.js';
+    fse.moveSync(p5min_src, p5min_dest, { overwrite: true });
+    fse.moveSync(p5Soundmin_src, p5Soundmin_dest, { overwrite: true });
+
     // delete the tmp folder that contained the p5.js repository
     fse.removeSync('tmp/');
   });
@@ -451,8 +466,8 @@ module.exports = function(grunt) {
     'clone_p5js_repo',
     'generate_dataJSON',
     'move_dataJSON',
-    'generate_enJSON',
-    // 'json-to-fluent'
+    'update-version',
+    'generate_enJSON'
   ]);
 
   // multi-tasks: collections of other tasks
@@ -476,19 +491,18 @@ module.exports = function(grunt) {
 
   // runs tasks in order
   grunt.registerTask('build', [
-    'update-version',
+    // 'update-version',
     'exec',
     'clean',
     'requirejs:yuidoc_theme',
     'requirejs',
-    // 'fluent-to-json',
     'copy',
     'optimize',
     'assemble',
     'file_append',
     'compress',
     'i18n',
-    'htmllint'
+    'htmlhint'
   ]);
 
   // runs with just grunt command

README.md

@@ -36,7 +36,7 @@ Once added, a steward's username will remain in the [stewards section of the rea
 | Language | Steward(s)                |
 | -------- | ------------------------- |
 | Overall  |[@Qianqianye](https://github.com/Qianqianye), [@limzykenneth](https://github.com/limzykenneth) |
-| Spanish  |[@Guirdo](https://github.com/Guirdo), [@Andreu-G](https://github.com/Andreu-G)                |
+| Spanish  |[@Guirdo](https://github.com/Guirdo), [@Andreu-G](https://github.com/Andreu-G), [@dnd-alv](https://github.com/dnd-alv)                  |
 | Chinese  | [@unicar9](https://github.com/unicar9), [@Gracia-zhang](https://github.com/Gracia-zhang), [@pentalei](https://github.com/pentalei)              |
 | Korean   | [@yinhwa](https://github.com/yinhwa), [@almchung](https://github.com/almchung), [@jhongover9000](https://github.com/jhongover9000), [@sssueing](https://github.com/sssueing), [@GeryGeryGery](https://github.com/GeryGeryGery), [@sosunnyproject](https://github.com/sosunnyproject) |
 | Hindi    | [@adarrssh](https://github.com/adarrssh), [@Divyansh013](https://github.com/Divyansh013), [@deepchauhan](https://github.com/deepchauhan), [@SarveshLimaye](https://github.com/SarveshLimaye)|
@@ -46,7 +46,6 @@ Other Language Steward(s):
 
 ## Setup
 
-0. Ensure Java is installed. Not installed?  Head over to [Java](https://www.oracle.com/java/technologies/downloads/) for installation.
 1. Install [node.js](https://nodejs.org/en/download/).
 2. Clone this repo by typing ```git clone https://github.com/processing/p5.js-website/``` in terminal.
 3. Navigate to the `p5.js-website` directory in the terminal and type `npm install`.

contributor_docs/i18n_contribution.md

@@ -211,7 +211,7 @@ The en.json is made up of three sections:
   - p5.js documentation, also extracted from the data.json file. This section contains a key for each p5.js Class (i.e., "p5.Color"), which holds information about the Class itself and its Methods and Fields.
   In this section, you might find HTML Anchor elements. You only need to translate the text between the two tags. For example, in `<a href=\"#/p5.Color\">p5.Color</a>`, you need to translate the second 'p5.Color' and leave the rest as is.
 
-All the translation swaps of the Reference pages happen is [this function](https://github.com/processing/p5.js-website/blob/main/src/templates/pages/reference/index.hbs#L61).
+All the translation swaps of the Reference pages happen in [this function](https://github.com/processing/p5.js-website/blob/main/src/templates/pages/reference/index.hbs#L61).
 Any entries in the JSON object which are not filled in will be left in English when the page is loaded.
 
 The translated versions of the JSON file need to be manually created and updated.

i18n-tracking.yml

@@ -1,5 +1,8 @@
 es:
   src/data/en.yml:
+    line 883: '  p5.utils'
+    line 884: '    A set of utilities and additional features for my creative coding class aiming '
+    line 885: '    to help students.'
     line 1153: '  2022-p5js-access-day-date'
     line 1174: '  2022-p5js-access-day-advisor'
     line 1150: '  p5js-community-event-title'
@@ -30,7 +33,6 @@ es:
     line 1177: '  2022-p5js-access-day-tech-support'
     line 1178: '  2022-p5js-access-day-transcriber'
     line 1179: '  2022-p5js-access-day-asl-support'
-    line 883: '  p5.fab'
     line 875: '    no setup required.'
     line 871: '  p5.input'
     line 872: '  ui'
@@ -650,8 +652,6 @@ es:
     line 868: '    Put your p5 sketches in the /src/assets/learn folder of the site, in a'
     line 869: '    folder labelled with the name of your sketch as shown in the screenshot.'
     line 870: '    This is where all the images and p5 sketches linked by iframe should be'
-    line 884: '    Styling for the iframe (this could directly into the post or in a'
-    line 885: '    stylesheet)'
     line 886: '  writing-a-tutorial-iframe-7'
     line 887: '  writing-a-tutorial-iframe-8'
     line 888: '  writing-a-tutorial-iframe-9'
@@ -1839,8 +1839,8 @@ es:
     line 84: '  copyright1'
 hi:
   src/data/en.yml:
+    line 883: '  p5.utils'
     line 1153: '  2022-p5js-access-day-date'
-    line 883: '  p5.fab'
     line 26: footer6
     line 25: footer2
     line 27: footer4
@@ -1892,8 +1892,13 @@ hi:
     line 1177: '  2022-p5js-access-day-tech-support'
     line 1178: '  2022-p5js-access-day-transcriber'
     line 1179: '  2022-p5js-access-day-asl-support'
+    line 884: '    A set of utilities and additional features for my creative coding class aiming '
+    line 885: '    to help students.'
 ko:
   src/data/en.yml:
+    line 883: '  p5.utils'
+    line 884: '    A set of utilities and additional features for my creative coding class aiming '
+    line 885: '    to help students.'
     line 1153: '  2022-p5js-access-day-date'
     line 1174: '  2022-p5js-access-day-advisor'
     line 1150: '  p5js-community-event-title'
@@ -1924,7 +1929,6 @@ ko:
     line 1177: '  2022-p5js-access-day-tech-support'
     line 1178: '  2022-p5js-access-day-transcriber'
     line 1179: '  2022-p5js-access-day-asl-support'
-    line 883: '  p5.fab'
     line 875: '    no setup required.'
     line 871: '  p5.input'
     line 872: '  ui'
@@ -2544,8 +2548,6 @@ ko:
     line 868: '    Put your p5 sketches in the /src/assets/learn folder of the site, in a'
     line 869: '    folder labelled with the name of your sketch as shown in the screenshot.'
     line 870: '    This is where all the images and p5 sketches linked by iframe should be'
-    line 884: '    Styling for the iframe (this could directly into the post or in a'
-    line 885: '    stylesheet)'
     line 886: '  writing-a-tutorial-iframe-7'
     line 887: '  writing-a-tutorial-iframe-8'
     line 888: '  writing-a-tutorial-iframe-9'
@@ -3733,6 +3735,9 @@ ko:
     line 84: '  copyright1'
 zh-Hans:
   src/data/en.yml:
+    line 883: '  p5.utils'
+    line 884: '    A set of utilities and additional features for my creative coding class aiming '
+    line 885: '    to help students.'
     line 1153: '  2022-p5js-access-day-date'
     line 1174: '  2022-p5js-access-day-advisor'
     line 1150: '  p5js-community-event-title'
@@ -3763,7 +3768,6 @@ zh-Hans:
     line 1177: '  2022-p5js-access-day-tech-support'
     line 1178: '  2022-p5js-access-day-transcriber'
     line 1179: '  2022-p5js-access-day-asl-support'
-    line 883: '  p5.fab'
     line 875: '    no setup required.'
     line 871: '  p5.input'
     line 872: '  ui'
@@ -4383,8 +4387,6 @@ zh-Hans:
     line 868: '    Put your p5 sketches in the /src/assets/learn folder of the site, in a'
     line 869: '    folder labelled with the name of your sketch as shown in the screenshot.'
     line 870: '    This is where all the images and p5 sketches linked by iframe should be'
-    line 884: '    Styling for the iframe (this could directly into the post or in a'
-    line 885: '    stylesheet)'
     line 886: '  writing-a-tutorial-iframe-7'
     line 887: '  writing-a-tutorial-iframe-8'
     line 888: '  writing-a-tutorial-iframe-9'