updates for learn build page

.gitignore

@@ -24,6 +24,8 @@ node_modules
 .idea/
 
 src/templates/pages/examples/*
+src/templates/pages/learn/index.hbs
+src/templates/pages/libraries/index.hbs
 src/offline-reference
 !src/templates/pages/examples/.gitkeep
 dist/*

Gruntfile.js

@@ -24,7 +24,8 @@ module.exports = function(grunt) {
     },
     exec: {
       build_examples: 'node <%= config.src %>/data/examples/build_examples/build.js <%= config.src %>/templates/pages/examples/',
-      build_libraries: 'node <%= config.src %>/data/libraries/build.js <%= config.src %>/templates/pages/libraries/'
+      build_libraries: 'node <%= config.src %>/data/libraries/build.js <%= config.src %>/templates/pages/libraries/',
+      build_learn: 'node <%= config.src %>/data/learn/build.js <%= config.src %>/templates/pages/learn/'
     },
     watch: {
       assemble: {

i18n-tracking.yml

@@ -1,5 +1,8 @@
 es:
   src/data/en.yml:
+    line 380: '  asciiart'
+    line 373: '  libraries-created-by'
+    line 381: '  p5.ble'
     line 371: '  community-libraries'
     line 34: '  p2xh1'
     line 44: '  your-first-sketch4'
@@ -12,7 +15,6 @@ es:
     line 364: '  p5.createloop'
     line 368: '  p5.experience'
     line 377: '  vida'
-    line 380: '  p5.3D'
     line 363: '  p5.experience'
     line 329: '  coordinate-system-simple-shapes-p2x1'
     line 341: '  coordinate-system-simple-shapes-p9x1'
@@ -95,11 +97,9 @@ es:
     line 386: '  create-your-own4'
     line 359: '  p5.clickable'
     line 362: '  p5.dimensions1'
-    line 373: '  mappa'
     line 374: '  p5.play'
     line 376: '  rita.js'
     line 379: '  p5.serial1'
-    line 381: '  p5.serial3'
     line 382: '  p5.speech'
     line 391: '  p5.3D'
     line 355: '  asciiart'
@@ -143,8 +143,32 @@ es:
     line 67: '  book1'
     line 370: '  core-libraries'
     line 372: '  libraries-core-by'
+    line 399: '  p5.clickable'
+    line 400: '  p5.collide2D'
+    line 401: '  p5.createloop'
+    line 402: '  p5.dimensions'
+    line 403: '  p5.experience'
+    line 404: '  p5.func'
+    line 405: '  p5.geolocation'
+    line 406: '  p5.gibber'
+    line 407: '  grafica.js'
+    line 408: '  p5.gui'
+    line 409: '  mappa'
+    line 410: '  p5.play'
+    line 411: '  p5.particle'
+    line 412: '  rita.js'
+    line 413: '  p5.scenemanager'
+    line 424: '  p5.serial'
+    line 425: '  p5.speech'
+    line 426: '  p5.tiledmap'
+    line 427: '  vida'
+    line 428: '  p5.voronoi'
+    line 429: '  p5.3D'
 zh-Hans:
   src/data/en.yml:
+    line 380: '  asciiart'
+    line 373: '  libraries-created-by'
+    line 381: '  p5.ble'
     line 371: '  community-libraries'
     line 34: '  p2xh1'
     line 44: '  your-first-sketch4'
@@ -157,7 +181,6 @@ zh-Hans:
     line 364: '  p5.createloop'
     line 368: '  p5.experience'
     line 377: '  vida'
-    line 380: '  p5.3D'
     line 363: '  p5.experience'
     line 329: '  coordinate-system-simple-shapes-p2x1'
     line 341: '  coordinate-system-simple-shapes-p9x1'
@@ -167,11 +190,9 @@ zh-Hans:
     line 386: '  create-your-own4'
     line 359: '  p5.clickable'
     line 362: '  p5.dimensions1'
-    line 373: '  mappa'
     line 374: '  p5.play'
     line 376: '  rita.js'
     line 379: '  p5.serial1'
-    line 381: '  p5.serial3'
     line 382: '  p5.speech'
     line 391: '  p5.3D'
     line 355: '  asciiart'
@@ -215,3 +236,24 @@ zh-Hans:
     line 67: '  book1'
     line 370: '  core-libraries'
     line 372: '  libraries-core-by'
+    line 399: '  p5.clickable'
+    line 400: '  p5.collide2D'
+    line 401: '  p5.createloop'
+    line 402: '  p5.dimensions'
+    line 403: '  p5.experience'
+    line 404: '  p5.func'
+    line 405: '  p5.geolocation'
+    line 406: '  p5.gibber'
+    line 407: '  grafica.js'
+    line 408: '  p5.gui'
+    line 409: '  mappa'
+    line 410: '  p5.play'
+    line 411: '  p5.particle'
+    line 412: '  rita.js'
+    line 413: '  p5.scenemanager'
+    line 424: '  p5.serial'
+    line 425: '  p5.speech'
+    line 426: '  p5.tiledmap'
+    line 427: '  vida'
+    line 428: '  p5.voronoi'
+    line 429: '  p5.3D'

src/data/en.yml

@@ -369,40 +369,36 @@ libraries:
   Libraries: "Libraries"
   core-libraries: "Core Libraries"
   community-libraries: "Community Libraries"
-  libraries-core-by: "Created and maintained by "
+  libraries-created-by: "Created by:"
   p5.dom: "p5.dom lets you interact with HTML5 objects beyond the canvas, including video, audio, webcam, input, and text."
   p5.sound: "p5.sound extends p5 with Web Audio functionality including audio input, playback, analysis and synthesis."
   p5.accessibility: "p5.accessibility makes the p5 canvas more accessible to people who are blind and visually impaired."
   Contributed: "Contributed"
-  asciiart: "p5.asciiart is a simple and easy to use image - to - ASCII art converter for p5js. Created by "
-  p5.ble: "A Javascript library that enables communication between BLE devices and p5 sketches. Created by "
+  asciiart: "p5.asciiart is a simple and easy to use image - to - ASCII art converter for p5js."
+  p5.ble: "A Javascript library that enables communication between BLE devices and p5 sketches."
   p5.bots: "With p5.bots you can interact with your Arduino (or other microprocessor) from within the browser. Use sensor data to drive a sketch; use a sketch to drive LEDs, motors, and more! Created by "
-  p5.clickable: "Event driven, easy-to-use button library for p5.js. Created by "
-  p5.collide2D: "p5.collide2D provides tools for calculating collision detection for 2D geometry with p5.js. Created by "
-  p5.createloop: "Create animation loops with noise and GIF exports in one line of code. Created by "
-  p5.dimensions1: "p5.dimensions extends p5.js' vector functions to work in any number of dimensions. Created by "
-  p5.dimensions2: " and "
-  p5.experience: "Extensive library for p5.js that adds additional event-listening functionality for creating canvas-based web applications. Created by "
-  p5.func: "p5.func is a p5 extension that provides new objects and utilities for function generation in the time, frequency, and spatial domains. Created by "
-  p5.geolocation: "p5.geolocation provides techniques for acquiring, watching, calculating, and geofencing user locations for p5.js. Created by "
-  p5.gibber: "p5.gibber provides rapid music sequencing and audio synthesis capabilities. Created by "
-  grafica.js: "grafica.js lets you add simple but highly configurable 2D plots to your p5.js sketches. Created by "
-  p5.gui: "p5.gui generates a graphical user interface for your p5.js sketches. Created by "
-  mappa: "Mappa provides a set of tools for working with static maps, tile maps, and geo-data. Useful when building geolocation-based visual representations. Created by "
-  p5.play: "p5.play provides sprites, animations, input and collision functions for games and gamelike applications. Created by "
-  p5.particle: "The Particle and Fountain objects can be used to create data-driven effects that are defined through user structures or JSON input and user-draw functions. Created by "
-  rita.js: "RiTa.js provides a set of natural language processing objects for generative literature. Created by "
-  p5.scenemanager: "p5.SceneManager helps you create sketches with multiple states / scenes. Each scene is a like a sketch within the main sketch. Created by "
+  p5.clickable: "Event driven, easy-to-use button library for p5.js."
+  p5.collide2D: "p5.collide2D provides tools for calculating collision detection for 2D geometry with p5.js."
+  p5.createloop: "Create animation loops with noise and GIF exports in one line of code."
+  p5.dimensions: "p5.dimensions extends p5.js' vector functions to work in any number of dimensions."
+  p5.experience: "Extensive library for p5.js that adds additional event-listening functionality for creating canvas-based web applications."
+  p5.func: "p5.func is a p5 extension that provides new objects and utilities for function generation in the time, frequency, and spatial domains."
+  p5.geolocation: "p5.geolocation provides techniques for acquiring, watching, calculating, and geofencing user locations for p5.js."
+  p5.gibber: "p5.gibber provides rapid music sequencing and audio synthesis capabilities."
+  grafica.js: "grafica.js lets you add simple but highly configurable 2D plots to your p5.js sketches."
+  p5.gui: "p5.gui generates a graphical user interface for your p5.js sketches."
+  mappa: "Mappa provides a set of tools for working with static maps, tile maps, and geo-data. Useful when building geolocation-based visual representations."
+  p5.play: "p5.play provides sprites, animations, input and collision functions for games and gamelike applications."
+  p5.particle: "The Particle and Fountain objects can be used to create data-driven effects that are defined through user structures or JSON input and user-draw functions."
+  rita.js: "RiTa.js provides a set of natural language processing objects for generative literature."
+  p5.scenemanager: "p5.SceneManager helps you create sketches with multiple states / scenes. Each scene is a like a sketch within the main sketch."
   p5.scribble: "Draw 2D primitives in a sketchy look. Created by Janneck Wullschleger, based on a port of the original Processing library "
-  p5.serial1: "p5.serial enables serial communication between devices that support serial (RS-232) and p5 sketches running in the browser. Created by "
-  p5.serial2: ", with contributions from "
-  p5.serial3: " and "
-  p5.speech: "p5.speech provides simple, clear access to the Web Speech and Speech Recognition APIs, allowing for the easy creation of sketches that can talk and listen. Created by "
-  p5.tiledmap1: "p5.tiledmap provides drawing and helper functions to include maps made with"
-  p5.tiledmap2: "in your sketches. Created by "
-  vida: "Vida is a simple library that adds camera (or video) based motion detection and blob tracking functionality to p5js. Created by "
-  p5.voronoi: "p5.voronoi provides a set of tools to draw and utilize voronoi diagrams in your p5.js sketches. Created by "
-  p5.3D: "3D Text and Images in WebGL. Created by "
+  p5.serial: "p5.serial enables serial communication between devices that support serial (RS-232) and p5 sketches running in the browser."
+  p5.speech: "p5.speech provides simple, clear access to the Web Speech and Speech Recognition APIs, allowing for the easy creation of sketches that can talk and listen."
+  p5.tiledmap: "p5.tiledmap provides drawing and helper functions to include maps in your sketches."
+  vida: "Vida is a simple library that adds camera (or video) based motion detection and blob tracking functionality to p5js."
+  p5.voronoi: "p5.voronoi provides a set of tools to draw and utilize voronoi diagrams in your p5.js sketches."
+  p5.3D: "3D Text and Images in WebGL."
   using-a-library-title: "Using a library"
   using-a-library1: "A p5.js library can be any JavaScript code that extends or adds to the p5.js core functionality. There are two categories of libraries. Core libraries ("
   using-a-library2: " and "

src/data/es.yml

@@ -370,37 +370,33 @@ libraries:
   Libraries: "Bibliotecas"
   core-libraries: "Core Libraries"
   community-libraries: "Community Libraries"
-  libraries-core-by: "Created and maintained by "
+  libraries-created-by: "Created by:"
   p5.dom: "p5.dom te permite interactuar con objetos HTML5 más allá del lienzo, incluyendo video, audio, cámara, entrada y texto."
   p5.sound: "p5.sound extiende p5 con funcionalidad de Web Audio, incluyendo entrada de audio, reproducción, análisis y síntesis."
   p5.accessibility: "p5.accessibility permite que el canvas de p5 sea más accesible a personas con discapacidad visual."
   Contributed: "Bibliotecas contribuidas"
   asciiart: "p5.asciiart is a simple and easy to use image - to - ASCII art converter for p5js. Created by "
   p5.ble: "A Javascript library that enables communication between BLE devices and p5 sketches. Created by "
-  p5.bots: "Con p5.bots puedes interactuar con Arduino (u otro microprocesador) desde el navegador. Usa los datos de los sensores para controlar tu bosquejo, usa un bosquejo para controlar LEDs, motores, y más. Creada por "
+  p5.bots: "Con p5.bots puedes interactuar con Arduino (u otro microprocesador) desde el navegador. Usa los datos de los sensores para controlar tu bosquejo, usa un bosquejo para controlar LEDs, motores, y más."
   p5.clickable: "Event driven, easy-to-use button library for p5.js. Created by "
-  p5.collide2D: "p5.collide2D provee herramientas para calcular detección de colisiones en geometría 2D con p5.js. Creada por "
+  p5.collide2D: "p5.collide2D provee herramientas para calcular detección de colisiones en geometría 2D con p5.js."
   p5.createloop: "Create animation loops with noise and GIF exports in one line of code. Created by "
-  p5.dimensions1: "p5.dimensions extiende las funciones de vector de p5.js para que funcione con cualquier número de dimensiones. Creada por "
-  p5.dimensions2: " y "
+  p5.dimensions: "p5.dimensions extiende las funciones de vector de p5.js para que funcione con cualquier número de dimensiones."
   p5.experience: "Extensive library for p5.js that adds additional event-listening functionality for creating canvas-based web applications. Created by "
-  p5.func: "p5.func es una extensión de p5 que provee nuevos objetos y utilidades para generación de funciones en los dominios de tiempo, frecuencia y espacio. Creada por "
-  p5.geolocation: "p5.geolocation provee técnicas para adquirir, observar, calcular y georeferenciar ubicaciones de usuario para p5.js. Creada por "
-  p5.gibber: "p5.gibber provee capacidades de secuenciamiento de música y de síntesis de audio. Creada por "
-  grafica.js: "grafica.js te permite añadir gráficas 2D simples pero altamente configurables a tus bosquejos de p5.js. Creada por "
-  p5.gui: "p5.gui genera una interfaz gráfica de usuario para tus bosquejos p5. Creada por "
-  mappa: "Mappa es una biblioteca que provee un conjunto de herramientas para trabajar con mapas estáticos y geo-datos, además de otras herramientas útiles para desarrollar representaciones visuales de datos con geolocalización. Creada por "
-  p5.particle: "Los objetos Particle y Fountain pueden ser usados para crear efectos controlados por datos que son definidos a través de estructuras de usuario o entrada JSON y funciones de usuario para dibujar. Creada por "
-  p5.play: "p5.play provee funciones de sprites, animaciones, entrada y colisión para juegos y aplicaciones afines. Creada por "
-  rita.js: "RiTa.js provee un conjunto de objetos de procesamiento de lenguaje natural para literatura generativa. Creada por  "
-  p5.scenemanager: "p5.SceneManager te ayuda a crear bosquejos con múltiples estados / escenas. Cada escena es como un bosquejo dentro del bosquejo principal. Creada por "
-  p5.scribble: "Dibujar primitivas 2D con una apariencia poco acabada. Creada por Janneck Wullschleger, basada en un puerto de la biblioteca original de Processing "
-  p5.serial1: "p5.serial permite la comunicación serial entre dispositivos que soportan serial (RS-232) y bosquejos p5 corriendo en el navegador. Creada por "
-  p5.serial2: ", con contribuciones de "
-  p5.serial3: " y "
-  p5.speech: "p5.speech provee acceso simple y claro a las APIs de Habla Web y Detección de Habla, permitiendo la creación de bosquejos sencillos que pueden hablar y escuchar. Creada por "
-  p5.tiledmap1: "p5.tiledmap provee funciones de dibujo y ayuda para incluir mapas hechos con"
-  p5.tiledmap2: "en tus bosquejos. Creada por "
+  p5.func: "p5.func es una extensión de p5 que provee nuevos objetos y utilidades para generación de funciones en los dominios de tiempo, frecuencia y espacio."
+  p5.geolocation: "p5.geolocation provee técnicas para adquirir, observar, calcular y georeferenciar ubicaciones de usuario para p5.js."
+  p5.gibber: "p5.gibber provee capacidades de secuenciamiento de música y de síntesis de audio."
+  grafica.js: "grafica.js te permite añadir gráficas 2D simples pero altamente configurables a tus bosquejos de p5.js."
+  p5.gui: "p5.gui genera una interfaz gráfica de usuario para tus bosquejos p5."
+  mappa: "Mappa es una biblioteca que provee un conjunto de herramientas para trabajar con mapas estáticos y geo-datos, además de otras herramientas útiles para desarrollar representaciones visuales de datos con geolocalización."
+  p5.particle: "Los objetos Particle y Fountain pueden ser usados para crear efectos controlados por datos que son definidos a través de estructuras de usuario o entrada JSON y funciones de usuario para dibujar."
+  p5.play: "p5.play provee funciones de sprites, animaciones, entrada y colisión para juegos y aplicaciones afines."
+  rita.js: "RiTa.js provee un conjunto de objetos de procesamiento de lenguaje natural para literatura generativa."
+  p5.scenemanager: "p5.SceneManager te ayuda a crear bosquejos con múltiples estados / escenas. Cada escena es como un bosquejo dentro del bosquejo principal."
+  p5.scribble: "Dibujar primitivas 2D con una apariencia poco acabada. Creada por Janneck Wullschleger, basada en un puerto de la biblioteca original de Processing."
+  p5.serial: "p5.serial permite la comunicación serial entre dispositivos que soportan serial (RS-232) y bosquejos p5 corriendo en el navegador."
+  p5.speech: "p5.speech provee acceso simple y claro a las APIs de Habla Web y Detección de Habla, permitiendo la creación de bosquejos sencillos que pueden hablar y escuchar."
+  p5.tiledmap1: "p5.tiledmap provee funciones de dibujo y ayuda para incluir mapas en tus bosquejos"
   vida: "Vida is a simple library that adds camera (or video) based motion detection and blob tracking functionality to p5js."
   p5.voronoi: "p5.voronoi brinda un conjunto de herramientas para dibujar y utilizar diagramas voronoi en tus bosquejos de p5.js. Created by "
   p5.3D: "3D Text and Images in WebGL. Created by "

src/data/learn/build.js

@@ -0,0 +1,29 @@
+let verbose = false;
+
+// now load the modules we need
+let ejs = require('ejs'); // library for turning .ejs templates into .html files
+let fs = require('fs'); // node.js library for reading and writing files
+let path = require('upath'); // platform indepedent file paths
+
+let outputRoot = process.argv.slice(2)[0];
+
+// build the templates
+let learn_template = ejs.compile(
+  fs.readFileSync(
+    path.joinSafe(__dirname, '/learn.ejs'),
+    'utf8'
+  )
+);
+
+let input = path.joinSafe(__dirname, 'learn.json');
+let contents = JSON.parse(fs.readFileSync(input));
+
+// write main page
+fs.writeFile(
+  path.joinSafe(outputRoot, '/index.hbs'),
+  learn_template({ all: contents }),
+  'utf8',
+  function() {
+    console.log('Created ' + outputRoot + '/index.hbs');
+  }
+);

src/data/learn/learn.ejs

@@ -0,0 +1,50 @@
+---
+title: learn
+slug: learn/
+---
+
+<div id="learn-page">
+
+  {{> sidebar}}
+
+  <div class="column-span">
+
+    <main id="content">
+      <h1>{{#i18n "learn-title"}}{{/i18n}}</h1>
+
+      <p>{{#i18n "learn1"}}{{/i18n}}
+        <a href="{{root}}/examples">{{#i18n "learn2"}}{{/i18n}}
+        </a>{{#i18n "learn3"}}{{/i18n}}
+      </p>
+
+      <% for(t in all) { %>
+        <h2 class="tutorial-title">{{#i18n "<%=t%>"}}{{/i18n}}</h2>
+        <% let col=0; for(let c in all[t]) { %>
+          <% if (col == 0) { %>
+            <div class="left-column">
+          <% } else { %>
+            <div class="right-column">
+           <% } %>  
+              <div class="label">
+                <a class="nounderline" href="<%=all[t][c].url%>" target="_blank">
+                  <img alt="" src="{{assets}}/img/learn/lib_placeholder.jpg">
+                  <h3>{{#i18n "<%=all[t][c].name%>-title"}}{{/i18n}}</h3>
+                </a>
+              </div>
+              <p>{{#i18n "<%=all[t][c].name%>"}}{{/i18n}} <% if (all[t][c].authors) { %>{{#i18n "libraries-created-by" }}{{/i18n}} <% for(let i in all[t][c].authors) { %><a href="<%=all[t][c].authors[i].url%>" target="_blank"><%=all[t][c].authors[i].name%></a><% if (i != all[t][c].authors.length - 1) { %>, <% } } } %></p>
+            </div>
+          <% if (col == 1 || c == all[t].length - 1) { %>
+            <div class="spacer"></div>
+           <% } %>  
+          <% col = (col+1)%2; %>
+        <% } %>
+      <% } %>
+
+    </main>
+    {{> footer}}
+
+  </div> <!-- end column-span -->
+
+  {{> asterisk}}
+
+</div><!-- end id="get-started-page"  -->