Merge pull request #480 from limzykenneth/master

Include p5.js version on p5-widgets used in tutorials

Author: lmccart

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) {
@@ -317,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');
@@ -351,6 +370,7 @@ module.exports = function(grunt) {
 
   // runs three tasks in order
   grunt.registerTask('build', [
+    'update-version',
     'exec',
     'clean',
     'requirejs',

src/data/data.yml

@@ -1 +1,2 @@
-title: p5.js
+title: p5.js
+version: 0.9.0

src/templates/pages/learn/basics.hbs

@@ -29,7 +29,7 @@ img {
       When you open p5, your first sketch will look like this. There are two parts: setup and draw. Inside the curly brackets after setup and draw we will add code to create a drawing.
       </p>
 
-      <script type="text/p5" data-height="400" data-preview-width="300">
+      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="{{ version }}">
 function setup() {
 
 }
@@ -45,7 +45,7 @@ function draw() {
       <span class='try'>Try changing the numbers inside the parentheses to see what happens.</span>
       </p>
 
-      <script type="text/p5" data-height="400" data-preview-width="300">
+      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="{{ version }}">
 function setup() {
 
 }
@@ -62,7 +62,7 @@ function draw() {
       <span class='try'>Try making your canvas different sizes by changing the width and height.</span>
       </p>
 
-      <script type="text/p5" data-height="400" data-preview-width="300">
+      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="{{ version }}">
 function setup() {
   createCanvas(100, 100)
 }
@@ -78,7 +78,7 @@ function draw() {
       <img src='{{assets}}/learn/basics/line.svg'>
       </p>
 
-      <script type="text/p5" data-height="400" data-preview-width="300">
+      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="{{ version }}">
 function setup() {
   createCanvas(300, 300)
 }
@@ -95,7 +95,7 @@ function draw() {
       <img src='{{assets}}/learn/basics/rect.svg'>
       </p>
 
-      <script type="text/p5" data-height="400" data-preview-width="300">
+      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="{{ version }}">
 function setup() {
   createCanvas(300, 300)
 }
@@ -115,7 +115,7 @@ function draw() {
       <img src='{{assets}}/learn/basics/ellipse.svg'>
       </p>
 
-      <script type="text/p5" data-height="400" data-preview-width="300">
+      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="{{ version }}">
 function setup() {
   createCanvas(300, 300)
 }
@@ -129,7 +129,7 @@ function draw() {
       <h2>fill(red, green, blue)</h2>
       <p>You can set the color of your shapes by using fill(). You give it three numbers – the red, green, and blue mixture you want, just like background.
       </p>
-      <script type="text/p5" data-height="400" data-preview-width="300">
+      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="{{ version }}">
 function setup() {
   createCanvas(300, 300)
 }
@@ -139,12 +139,12 @@ function draw() {
   fill(255, 0, 0)
   ellipse(150, 150, 50, 50)
 }
-      </script>  
+      </script>
 
       <h2>stroke(red, green, blue)</h2>
       <p>You can set the outline color of your shapes by using stroke(). You give it three numbers – the red, green, and blue mixture you want, just like fill() and background().
       </p>
-      <script type="text/p5" data-height="400" data-preview-width="300">
+      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="{{ version }}">
 function setup() {
   createCanvas(300, 300)
 }
@@ -160,7 +160,7 @@ function draw() {
       <h2>strokeWeight(weight)</h2>
       <p>You can set the thickness of the outline for your shapes by using strokeWeight(). The default stroke weight is 1.
       </p>
-      <script type="text/p5" data-height="400" data-preview-width="300">
+      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="{{ version }}">
 function setup() {
   createCanvas(300, 300)
 }
@@ -176,7 +176,7 @@ function draw() {
       <p>mouseX and mouseY can be used to get the current position of your mouse. They are called <b>variables</b>. You can replace a number in your code with mouseX or mouseY and that number will change as you move your mouse.
       </p>
 
-      <script type="text/p5" data-height="400" data-preview-width="300">
+      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="{{ version }}">
 function setup() {
   createCanvas(300, 300)
 }
@@ -190,7 +190,7 @@ function draw() {
       <h2>random(max)</h2>
       <p>random() will choose a random number for you, anywhere from 0 - max.</p>
 
-      <script type="text/p5" data-height="400" data-preview-width="300">
+      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="{{ version }}">
 function setup() {
   createCanvas(300, 300)
 }

src/templates/pages/learn/color.hbs

@@ -39,7 +39,7 @@ slug: learn/
 
       <!-- this script only needs to get added once even if there are multiple widget instances -->
       <script src="//toolness.github.io/p5.js-widget/p5-widget.js"></script>
-      <script type="text/p5" data-autoplay>
+      <script type="text/p5" data-autoplay data-p5-version="{{ version }}">
         function draw() {
   background(150);
   stroke(0);
@@ -69,7 +69,7 @@ slug: learn/
 
       <p>{{#i18n "color-rgb-p2x1"}}{{/i18n}}</p>
 
-      <script type="text/p5"  data-autoplay>
+      <script type="text/p5" data-autoplay data-p5-version="{{ version }}">
 function draw() {
   background(255);
   noStroke();
@@ -97,7 +97,7 @@ function draw() {
 
       <p>{{#i18n "color-transparency-p3x1"}}{{/i18n}}</p>
 
-      <script type="text/p5"  data-autoplay>
+      <script type="text/p5" data-autoplay  data-p5-version="{{ version }}">
   createCanvas(100, 100);
   fill(0,0,255);
   rect(0,0,50,100);

src/templates/pages/learn/coordinate-system-and-shapes.hbs

@@ -40,7 +40,7 @@ slug: learn/
       <p>{{#i18n "coordinate-system-simple-shapes-p3x1"}}{{/i18n}}<a href="/reference/#/p5/point">point()</a>{{#i18n "coordinate-system-simple-shapes-p3x2"}}{{/i18n}}</p>
       <!-- this script only needs to get added once even if there are multiple widget instances -->
       <script src="//toolness.github.io/p5.js-widget/p5-widget.js"></script>
-<script type="text/p5" data-autoplay>
+<script type="text/p5" data-autoplay data-p5-version="{{ version }}">
 function setup(){
   createCanvas(100, 100);
 }
@@ -50,7 +50,7 @@ function draw(){
 </script>
 
       <p>{{#i18n "coordinate-system-simple-shapes-p4x1"}}{{/i18n}}<a href="/reference/#/p5/line">line()</a>{{#i18n "coordinate-system-simple-shapes-p4x2"}}{{/i18n}}</p>
-<script type="text/p5" data-autoplay>
+<script type="text/p5" data-autoplay data-p5-version="{{ version }}">
 function setup(){
   createCanvas(100, 100);
 }
@@ -60,7 +60,7 @@ function draw(){
 </script>
 
       <p>{{#i18n "coordinate-system-simple-shapes-p5x1"}}{{/i18n}}<a href="/reference/#/p5/rect">rect()</a>{{#i18n "coordinate-system-simple-shapes-p5x2"}}{{/i18n}}</p>
-<script type="text/p5" data-autoplay>
+<script type="text/p5" data-autoplay data-p5-version="{{ version }}">
 function setup(){
   createCanvas(100, 100);
 }
@@ -70,7 +70,7 @@ function draw(){
 </script>
 
       <p>{{#i18n "coordinate-system-simple-shapes-p6x1"}}{{/i18n}}<a href="/reference/#/p5/CENTER">CENTER</a>{{#i18n "coordinate-system-simple-shapes-p6x2"}}{{/i18n}}</p>
-<script type="text/p5" data-autoplay>
+<script type="text/p5" data-autoplay data-p5-version="{{ version }}">
 function setup(){
   createCanvas(100, 100);
   rectMode(CENTER);
@@ -81,7 +81,7 @@ function draw(){
 </script>
 
       <p>{{#i18n "coordinate-system-simple-shapes-p7x1"}}{{/i18n}}<a href="/reference/#/p5/CORNERS">CORNERS</a>{{#i18n "coordinate-system-simple-shapes-p7x2"}}{{/i18n}}</p>
-<script type="text/p5" data-autoplay>
+<script type="text/p5" data-autoplay data-p5-version="{{ version }}">
 function setup(){
   createCanvas(100, 100);
   rectMode(CORNERS);
@@ -92,7 +92,7 @@ function draw(){
 </script>
 
       <p>{{#i18n "coordinate-system-simple-shapes-p8x1"}}{{/i18n}}<a href="/reference/#/p5/ellipse">ellipse()</a>{{#i18n "coordinate-system-simple-shapes-p8x2"}}{{/i18n}}<a href="/reference/#/p5/rect">rect()</a>{{#i18n "coordinate-system-simple-shapes-p8x3"}}{{/i18n}}<a href="/reference/#/p5/ellipse">ellipse()</a>{{#i18n "coordinate-system-simple-shapes-p8x4"}}{{/i18n}}<a href="/reference/#/p5/CENTER">CENTER</a>{{#i18n "coordinate-system-simple-shapes-p8x5"}}{{/i18n}}<a href="/reference/#/p5/CORNER">CORNER</a>{{#i18n "coordinate-system-simple-shapes-p8x6"}}{{/i18n}}</p>
-<script type="text/p5" data-autoplay>
+<script type="text/p5" data-autoplay data-p5-version="{{ version }}">
 function setup(){
   createCanvas(100, 100);
   ellipseMode(CENTER);
@@ -102,7 +102,7 @@ function draw(){
 }
 </script>
 
-<script type="text/p5" data-autoplay>
+<script type="text/p5" data-autoplay data-p5-version="{{ version }}">
 function setup(){
   createCanvas(100, 100);
   ellipseMode(CORNER);
@@ -112,7 +112,7 @@ function draw(){
 }
 </script>
 
-<script type="text/p5" data-autoplay>
+<script type="text/p5" data-autoplay data-p5-version="{{ version }}">
 function setup(){
   createCanvas(100, 100);
   ellipseMode(CORNERS);
@@ -124,7 +124,7 @@ function draw(){
 
       <p>{{#i18n "coordinate-system-simple-shapes-p9x1"}}{{/i18n}}</p>
 
-<script type="text/p5" data-autoplay>
+<script type="text/p5" data-autoplay data-p5-version="{{ version }}">
 function setup(){
   createCanvas(200, 200);
   rectMode(CENTER);

src/templates/pages/learn/curves.hbs

@@ -40,7 +40,7 @@ slug: learn/
 
       <!-- this script only needs to get added once even if there are multiple widget instances -->
       <script src="//toolness.github.io/p5.js-widget/p5-widget.js"></script>
-      <script type="text/p5" data-autoplay>
+      <script type="text/p5" data-autoplay data-p5-version="{{ version }}">
         function draw() {
           createCanvas(150,200);
           background(150);
@@ -92,7 +92,7 @@ slug: learn/
       </p>
 
 
-      <script type="text/p5"  data-autoplay>
+      <script type="text/p5" data-autoplay data-p5-version="{{ version }}">
       let coords = [40, 40, 80, 60, 100, 100, 60, 120, 50, 150];
 
       function setup() {
@@ -158,7 +158,7 @@ slug: learn/
       the last point of A, and the first control point of B have to be on a straight line.
       </P>
 
-      <script type="text/p5"  data-autoplay>
+      <script type="text/p5" data-autoplay data-p5-version="{{ version }}">
       function setup() {
         createCanvas(150,200);
       }