merge main into teach

Author: lmccart

.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

.github/workflows/update-documentation.yml

@@ -0,0 +1,37 @@
+name: Update p5.js documentation
+
+on:
+  # This workflow is triggered by the p5.js repo on every new release.
+  repository_dispatch
+env:
+  # These are the tag name and the commit sha of the p5.js release.
+  P5JS_REF: ${{github.event.client_payload.ref}}
+  P5JS_SHA: ${{github.event.client_payload.sha}}
+
+jobs:
+  build:
+    name: Update p5.js documentation
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v1
+      - name: Install Node.JS 12.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+      - name: Extract documentation from the p5.js repo
+        run: |
+          npm install
+          npm run grunt update-enJSON
+      - 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: 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 }})'
+        env:
+          GITHUB_TOKEN: ${{ secrets.DOCS_COMMIT_TOKEN }}

.github/workflows/update-translation-files.yml

@@ -0,0 +1,34 @@
+name: Update i18n files
+
+on:
+  push:
+    paths:
+    - 'src/data/reference/*.json'
+    - 'src/data/*.yml'
+
+jobs:
+  build:
+    name: Update i18n files
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v1
+      - name: Install Node.JS 12.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+      - name: npm install
+        run: npm install
+      - name: Update json files
+        run: |
+          npm run grunt update-json-i18n-files
+      - name: Update yaml files
+        run: |
+          npm run grunt update-yaml-i18n-files
+      - name: Commit changes
+        uses: EndBug/add-and-commit@v4
+        with:
+          message: 'Automatic update of translation files (${{ github.sha }})'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 

Gruntfile.js

@@ -8,7 +8,12 @@
 
 const yaml = require('js-yaml');
 const fs = require('fs').promises;
+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);
@@ -148,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,
@@ -167,8 +173,8 @@ module.exports = function(grunt) {
       dist: {
         src: [
           '<%= config.src %>/assets/css/normalize.css',
-          '<%= config.src %>/assets/css/main.css',
-          '<%= config.src %>/assets/css/prism.css'
+          '<%= config.src %>/assets/css/prism.css',
+          '<%= config.src %>/assets/css/main.css'
         ],
         dest: '<%= config.dist %>/assets/css/all.css'
       }
@@ -347,10 +353,21 @@ module.exports = function(grunt) {
           ignore: [
             /^This document appears to be written in English/,
             /^Bad value “https:/,
-            /^Consider adding a “lang” attribute to the “html”/
+            /^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',
+        options: {
+          execOptions: {
+            cwd: 'tmp/p5.js'
+          }
+        }
+      }
     }
   });
 
@@ -371,13 +388,80 @@ module.exports = function(grunt) {
     });
   });
 
+  // runs the updateJSON() function from update18nFiles.js
+  // is run by the update-translation-files workflow every time one of them is modified
+  grunt.registerTask('update-json-i18n-files', function() {
+    const JSONfiles_URL = 'src/data/reference/';
+    const lang = pkg.languages.filter(v => v !== 'en');
+    lang.forEach(langCode => {
+      update_i18n.updateJSON(
+        JSONfiles_URL + 'en.json',
+        JSONfiles_URL + langCode + '.json'
+      );
+    });
+  });
+
+  // runs the updateYAML() function from update18nFiles.js
+  // is run by the update-translation-files workflow every time one of them is modified
+  grunt.registerTask('update-yaml-i18n-files', function() {
+    const YAMLfiles_URL = 'src/data/';
+    const lang = pkg.languages.filter(v => v !== 'en');
+    lang.forEach(langCode => {
+      update_i18n.updateYAML(
+        YAMLfiles_URL + 'en.yml',
+        YAMLfiles_URL + langCode + '.yml'
+      );
+    });
+  });
+
   grunt.loadNpmTasks('grunt-exec');
   grunt.loadNpmTasks('grunt-assemble');
   grunt.loadNpmTasks('grunt-file-append');
   grunt.loadNpmTasks('grunt-contrib-compress');
   grunt.loadNpmTasks('grunt-contrib-requirejs');
   grunt.loadNpmTasks('grunt-html');
 
+  grunt.registerTask('make_tmp_dir', function() {
+    const tmp_path = 'tmp/p5.js';
+    fse.mkdirpSync(tmp_path);
+  });
+
+  grunt.registerTask('clone_p5js_repo', async function() {
+    const done = this.async();
+    try {
+      await git().clone('https://github.com/processing/p5.js', 'tmp/p5.js');
+      done();
+    } catch (err) {
+      console.log('Failed to clone p5.js repository.');
+      throw new Error(err);
+    }
+  });
+
+  grunt.registerTask('generate_dataJSON', ['shell:generate_dataJSON']);
+
+  grunt.registerTask('move_dataJSON', function() {
+    const dataJSON_p5js = 'tmp/p5.js/docs/reference/data.json';
+    const dataJSON_p5jswebsite = 'src/templates/pages/reference/data.json';
+    // move the data.json from the cloned p5.js repository to the p5.js-website repository
+    fse.moveSync(dataJSON_p5js, dataJSON_p5jswebsite, { overwrite: true });
+    // delete the tmp folder that contained the p5.js repository
+    fse.removeSync('tmp/');
+  });
+
+  grunt.registerTask('generate_enJSON', function() {
+    const getenJSON = require('./getenJSON.js');
+    // generate and save the en.json
+    getenJSON();
+  });
+
+  grunt.registerTask('update-enJSON', [
+    'make_tmp_dir',
+    'clone_p5js_repo',
+    'generate_dataJSON',
+    'move_dataJSON',
+    'generate_enJSON'
+  ]);
+
   // multi-tasks: collections of other tasks
   grunt.registerTask('server', [
     'build',
@@ -421,4 +505,4 @@ module.exports = function(grunt) {
 
   // runs with just grunt command
   grunt.registerTask('default', ['build']);
-};
+};

README.md

@@ -4,7 +4,7 @@
 
 ## How To Contribute
 
-Known bugs and intended new features are tracked using [GitHub issues](https://github.com/processing/p5.js-website/issues). If you'd like to start working on an existing issue, comment on the issue that you plan to work on it so other contributors know it's being handled and can offer help. Once you have completed your work on this issue, [submit a pull request (PR)](https://github.com/processing/p5.js/blob/main/contributor_docs/preparing_a_pull_request.md) against the p5.js master branch. In the description field of the PR, include "resolves #XXXX" tagging the issue you are fixing. If the PR addresses the issue but doesn't completely resolve it (ie the issue should remain open after your PR is merged), write "addresses #XXXX".
+Known bugs and intended new features are tracked using [GitHub issues](https://github.com/processing/p5.js-website/issues). If you'd like to start working on an existing issue, comment on the issue that you plan to work on it so other contributors know it's being handled and can offer help. Once you have completed your work on this issue, [submit a pull request (PR)](https://github.com/processing/p5.js/blob/main/contributor_docs/preparing_a_pull_request.md) against the p5.js main branch. In the description field of the PR, include "resolves #XXXX" tagging the issue you are fixing. If the PR addresses the issue but doesn't completely resolve it (ie the issue should remain open after your PR is merged), write "addresses #XXXX".
 
 If you discover a bug or have an idea for a new feature you'd like to add, begin by submitting an issue. Please do not simply submit a pull request containing the fix or new feature without making an issue first, we will probably not be able to accept it. Once you have gotten some feedback on the issue and a go ahead to address it, you can follow the process above to add the fix or feature.
 
@@ -24,14 +24,14 @@ 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.
   * `data/` – translation files
   * `templates/`
     * `layouts/` – default.hbs is main page template
-    * `pages/` – Contains each of the pages of the p5 site, these get inserted in `{{> body }}` tag of default layout.
+    * `pages/` – Contains each of the pages of the p5 site, these get inserted in `{{> body }}` tag of default layout. Note that for some pages (ex: learn, teach, and libraries) the hbs files are built from ejs files in the `data/` folder. When this is the case, you will find a README file inside that page's folder with notes about how this works.
     * `partials/` – These are reusable pieces that can get added to any page or layout, they correspond to other `{{> filename }}` tags in the pages or default layout.
 * `dist/` – Where the rendered files are stored, this gets generated via `grunt server` but does not get added to pull requests as it is auto-built online.
 * `Gruntfile.js` – This file contains all the tasks for using assemble and YAML to generate the final, static site. It uses the taskrunner [grunt](http://gruntjs.com/).

contributor_docs/automated_reference_update.md

@@ -0,0 +1,21 @@
+## 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). 
+The task: 
+- clones the p5.js repository in a tmp folder
+- generates the updated data.json file with the command `npm run grunt yui`
+- commits the data.json in the p5.js-website repository
+- generates the updated en.json with the getenJSON() function
+- commits the en.json in the p5.js-website repository
+- deletes the tmp folder
+
+This task is run by a GitHub workflow in the p5.js-website repository that [gets triggered by another workflow](https://docs.github.com/en/actions/reference/events-that-trigger-workflows#repository_dispatch) in the p5.js repository.
+
+Every time a new p5.js release gets published, the update-p5jswebsite workflow (in the p5.js repository) gets triggered and in turn triggers the update-documentation workflow (in the p5.js-website repository) that runs the `update-enJSON` task.
+
+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:
+- 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.