Merge pull request #1 from processing/master

sync my fork with upstream repo

Author: montoyamoraga

.eslintrc

@@ -42,7 +42,7 @@
         "allowAfterThis": true,
         "allowAfterSuper": true
       }
-    ]
+    ],
     "no-unused-vars": ["error", { "args": "none" }],
     "no-empty": ["error", { "allowEmptyCatch": true }],
     "no-console": "off"

.github/issue_template.md

@@ -0,0 +1,19 @@
+**Actual Behaviour**
+
+ <!--Please state here what is currently happening.-->
+
+ **Expected Behaviour**
+
+ <!--State here what the feature should enable the user to do.-->
+
+ **Steps to reproduce it**
+
+ <!--Add steps to reproduce bugs or add information on the place where the feature should be implemented. Add links to a sample deployment or code.-->
+
+ **Screenshots of the issue**
+
+ <!--Where-ever possible attach a screenshot of the issue.-->
+
+ **Would you like to work on the issue?**
+
+ <!--Please let us know if you can work on it or the issue should be assigned to someone else.-->

.github/pull_request_template.md

@@ -0,0 +1,8 @@
+Fixes #[Add issue number here]
+
+ Changes: 
+<!-- Add here what changes were made in this pull request and if possible provide links showcasing the changes. -->
+
+
+ Screenshots of the change: 
+<!-- Add screenshots depicting the changes. -->

.gitignore

@@ -29,3 +29,5 @@ src/offline-reference
 dist/*
 !dist/git-pull.php
 !dist/download/release.php
+!dist/books/media.zip
+!dist/learn/books/media.zip

Gruntfile.js

@@ -6,6 +6,8 @@
 // use this if you want to match all subfolders:
 // '<%= config.src %>/templates/pages/**/*.hbs'
 
+const yaml = require('js-yaml');
+const fs = require('fs').promises;
 const pkg = require('./package.json');
 
 module.exports = function(grunt) {
@@ -286,6 +288,8 @@ module.exports = function(grunt) {
         '<%= config.dist %>/**/*.*',
         '!<%= config.dist %>/download/release.php',
         '!<%= config.dist %>/git-pull.php',
+        '!<%= config.dist %>/books/media.zip',
+        '!<%= config.dist %>/learn/books/media.zip',
         '<%= config.src %>/offline-reference/**/*.*'
       ]
     },
@@ -315,6 +319,23 @@ module.exports = function(grunt) {
     }
   });
 
+  grunt.registerTask('update-version', function(){
+    const done = this.async();
+
+    const version = require('./src/templates/pages/reference/data.json').project.version;
+
+    fs.readFile('./src/data/data.yml').then((str) => {
+      const data = yaml.safeLoad(str);
+      data.version = version;
+
+      const dump = yaml.safeDump(data);
+
+      return fs.writeFile('./src/data/data.yml', dump);
+    }).then(() => {
+      done();
+    });
+  });
+
   grunt.loadNpmTasks('grunt-exec');
   grunt.loadNpmTasks('grunt-assemble');
   grunt.loadNpmTasks('grunt-file-append');
@@ -349,6 +370,7 @@ module.exports = function(grunt) {
 
   // runs three tasks in order
   grunt.registerTask('build', [
+    'update-version',
     'exec',
     'clean',
     'requirejs',

README.md

@@ -15,7 +15,6 @@ We recognize all types of contributions. This project follows the [all-contribut
 0. Install [node.js](https://nodejs.org/en/download/).
 1. Download this repo as a [zip file](https://github.com/processing/p5.js-website/archive/master.zip) or [clone this repository](https://help.github.com/articles/cloning-a-repository/). 
 2. Navigate to the `p5.js-website` directory in the terminal and type `npm install`.
-3. Copy `dist\download\version-sample.json` to `dist\download\version.json`.
 
 ## Running
 
@@ -32,7 +31,7 @@ Once you've setup the site, type `npm run watch` to run the website. This should
     * `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.
     * `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 can be placed directly online.
+* `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/).
 
 ## Tools

contributor_docs/Adding_examples.md

@@ -0,0 +1,81 @@
+# Adding examples
+
+Examples help demonstrate different programming concepts and functionality of the library. They can be found on the [p5.js examples page](http://p5js.org/examples/), and run on the page, allowing people to edit and play with them. We are in the process of porting [examples](https://processing.org/examples/) from the Processing site, as well as creating new ones, and would love your help. Below are the steps below to add examples to p5js.org.
+
+## Getting started
+
+0. If you are not yet familiar with GitHub we recommend checking out this [tutorial](https://guides.github.com/activities/hello-world/).
+1. Install [node.js](https://nodejs.org/en/), which also automatically installs the npm package manager.
+2. [Fork](https://help.github.com/articles/fork-a-repo/) the [p5.js-website](https://github.com/processing/p5.js-website) repository into your own GitHub account.
+3. [Clone](https://help.github.com/articles/cloning-a-repository/) your new fork of the repository from GitHub onto your local computer.
+4. Using the command line, navigate to the `src/data/examples/build_examples` folder, and install all its necessary dependencies with npm.
+
+    ```bash
+    cd src/data/examples/build_examples
+    npm install
+    ```
+
+## Make an issue
+
+1. Open a new issue on the [p5.js-website repository](https://github.com/processing/p5.js-website/issues) listing the examples you are creating with your name, so efforts aren't duplicated.
+
+
+## Create your example
+
+1. First, build and test the example code using your own HTML file, linking to the most recent version of p5.js. You can find examples to port here.
+    * Please use two spaces tabs and see this code style guide.
+    * Examples should typically be 710px wide, and a recommended height is 400px. You can modify these dimensions (especially the height) as appropriate.
+
+2. At the top of the JS file you create, add a heading using the template below.
+    * The @name field determines the title of the example and the text of it's corresponding link on the examples page.
+    * The @frame field determines the dimensions of the example frame on the page. If you leave this field out, your running example will default to the size you set with createCanvas(). If you'd like to specify an alternate size (maybe because you have elements outside the canvas, for example), include the @frame line with dimensions separated by comma.
+
+   ```jsdoc
+   /*
+    * @name Your Example Name Here (This shows up on the examples page as well.)
+    * @frame 710,400 (optional)
+    * @description Write a description of your example here. This gets displayed
+    * on the page underneath your example. You can use <br><br> to add a line
+    * break. Please limit lines to 80 columns (total characters) long.
+    */
+   ```
+
+## Add your example to p5js.org
+
+1. Place the JS file with your code and heading (do not include the HTML or p5.js files) in `src/data/examples/en/` of your local repository.
+    * The subfolder the file is placed in determines the topic heading the examples displays under on [p5js.org/examples](https://p5js.org/examples/). Add your file into the appropriate folder, or create a new one if necessary.
+    * If you create a new folder, you will also need to add the folder name to the `examples` section in the `src/data/en.yml`, `src/data/es.yml`, and `src/data/zh-Hans.yml` files in order for the headings to show up properly.
+    * The filename should follow the format: `XX_name_of_your_example.js`. The XX_ prefix (starting with 00) indicates the order that the files will show up on the page.
+
+2. Place duplicate copies of the file in the corresponding folders in `src/data/examples/es/`, and `src/data/examples/zh-Hans/`. This allows us to build the Spanish and Chinese versions of the example. If you know either of these languages, feel free to translate the heading text and comments.
+
+3. If you have any extra files that need to be included (images, JSON, etc), place them in the `src/data/examples/assets` folder. Try to keep these files small.
+
+4. [Grunt](https://gruntjs.com/) should now be installed, and you can use it to build the website by navigating to the top level directory and typing:
+
+    ```bash
+    grunt server
+    ```
+
+5. A local build of the p5js.org site should open in your web browser and you can navigate to the examples page to see your changes.
+
+6. Once everything is ready, submit your changes as a [pull request](https://help.github.com/articles/creating-a-pull-request/).
+
+## Notes about translating examples
+
+* The [p5js.org/examples](https://p5js.org/examples/) page is built from the data in [src/data/](https://github.com/processing/p5.js-website/tree/master/src/data).
+* Within the examples folder, there is a folder for each of the three languages we currently support: `en/`, `es/`, and `zh-Hans/`.
+* Translations for the topic headers on the example index page are done in the YML files `src/data/*.yml`.
+
+## To add examples
+
+1. Locate the JS file within `src/data/examples` that corresponds to the example you want to add a translation for.
+2. Translate the heading and comments. Do not change variable or function names. Do not change the filename.
+3. To update a category heading on [p5js.org/examples](https://p5js.org/examples/), edit the YML files at `src/data/*.yml`.
+
+## When adding a new example
+
+1. First add an English version of the file to the `en/` folder, then make sure it is duplicated in the same place in all other languages, then translate for whichever languages you can.
+2. The folder, file, and numbering structure should match exactly between the different languages. Do not change the filenames. The text for the example name, description, and source code are all in the `.js` files in the folders.
+3. If you have created a new folder, add entries to the "Examples" section of each of the YML files `src/data/*.yml` with the foldername as the key.
+

contributor_docs/Chinese_translation_glossary_links.md

@@ -0,0 +1,19 @@
+# Chinese Translation Glossary Links
+
+## Below are compiled glossary links to be followed when translating anything on the website into Chinese
+
+## Simplified Chinese
+  * Main Glossary - [https://docs.google.com/spreadsheets/d/1yowXBskrVbCCrKtCRel3LTta_t3oXJN_RkK4AOchLGM/edit?usp=sharing](https://docs.google.com/spreadsheets/d/1yowXBskrVbCCrKtCRel3LTta_t3oXJN_RkK4AOchLGM/edit#gid=0)
+  * Secondary Glossaries:
+    * [http://www.runoob.com/w3cnote/common-english-terminology-in-programming.html](http://www.runoob.com/w3cnote/common-english-terminology-in-programming.html)
+    * [https://wenku.baidu.com/view/6f2fca22bcd126fff7050ba5.html](https://wenku.baidu.com/view/6f2fca22bcd126fff7050ba5.html)
+    * [https://www.kancloud.cn/haixu926611/study-english/112097](https://www.kancloud.cn/haixu926611/study-english/112097)
+  * Secondary source (MDN Simplified Chinese documentation) - [https://developer.mozilla.org/zh-CN/](https://developer.mozilla.org/zh-CN/)
+
+Any terms relating to programming concepts or technical concepts must be referenced first with the Main Glossary to find the preferred translation for said term. If a term cannot be found in the Main Glossary and is a HTML/CSS/Javascript related term, it should be looked up on MDN Simplified Chinese documentation. Any other terms can be looked up from the secondary glossaries or by search engine, prioritizing commonly used translation in Simplified Chinese.
+
+Open a new issue if the Main Glossary should be changed or added to.
+
+## Traditional Chinese
+
+Pending