Merge branch 'master' of github.com:processing/p5.js-website

Author: lmccart

contributor_docs/i18n_contribution.md

@@ -136,7 +136,8 @@ p5.js-website/
     ```
 4. Duplicate `en.yml` - stored under `src/data/` - and name it `language_abbreviation.yml`. For example, when the Spanish version was created it was named `es.yml`. Check [How the website works](#how-the-website-works) and [File Structure](#file-structure) for further information.
 5. Duplicate `es.json` - stored under `src/data/reference/` - and name it `[language_abbreviation].json`.
-6. Add a new menu entry in [`src/templates/partials/i18n.hbs`](https://github.com/processing/p5.js-website/blob/master/src/templates/partials/i18n.hbs#L8) like so `<li><a href='#' lang='[language_abbreviation]' data-lang='[language_abbreviation]'>[language_name]</a></li>`.
+6. Duplicate `en` folder - stored under `src/data/examples` - and name it `language_abbreviation`.
+7. Add a new menu entry in [`src/templates/partials/i18n.hbs`](https://github.com/processing/p5.js-website/blob/master/src/templates/partials/i18n.hbs#L8) like so `<li><a href='#' lang='[language_abbreviation]' data-lang='[language_abbreviation]'>[language_name]</a></li>`.
 
 ## Working on existing translations
 

src/assets/css/main.css

@@ -87,6 +87,8 @@
   .sidebar-menu a {
     display: block;
     text-align: center;
+    padding-bottom: 0.11em;
+    border-bottom: 0.11em dashed transparent;
   }
 
   .sidebar-menu-icon {
@@ -469,6 +471,14 @@ div.reference-subgroup {
   vertical-align: top;
 }
 
+#library-page .group-name{
+  display: inline-block;
+}
+
+#library-page .group-name:hover  {
+  color: #ED225D;
+}
+
 
 /* EXAMPLES IN REF */
 
@@ -909,6 +919,10 @@ h3.contribute-title {
   position: relative;
 }
 
+.label .nounderline img{
+  margin: .5em 0 0 0
+}
+
 .label h3 {
   color: white;
   position: absolute;
@@ -1711,6 +1725,10 @@ ul {
   list-style: none;
 }
 
+ol {
+  font-size: 1.2em;
+}
+
 li {
   margin: 0;
   padding: 0;
@@ -1724,6 +1742,10 @@ ul.list_view {
   font-size: 1.2em;
 }
 
+ol ul.list_view {
+  font-size: 1em;
+}
+
 ul.inside {
   margin: 0 0 0 2em;
   padding: 0;
@@ -2108,9 +2130,7 @@ footer {
   .column.group-name {
     margin-bottom: 1em;
   }
-  #library-page .group-name:hover {
-    color: #ED225D;
-  }
+
   #library-page .group-name {
     margin: 2em 0 0.5em 0;
   }

src/templates/layouts/default.hbs

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width">
     <meta name="description" content="p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.">
     <title tabindex="1">{{title}} | p5.js</title>
-    <link rel="stylesheet" href="/{{assets}}/css/all.css?v=1.0.0">
+    <link rel="stylesheet" href="/{{assets}}/css/all.css?v=1.0.1">
     <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
 
     <link rel="shortcut icon" href="/{{assets}}/img/favicon.ico">
@@ -17,7 +17,7 @@
     <script src="/{{assets}}/js/vendor/ace-nc/ace.js"></script>
     <script src="/{{assets}}/js/vendor/ace-nc/mode-javascript.js"></script>
     <script src="/{{assets}}/js/vendor/prism.js"></script>
-    <script src="/{{assets}}/js/init.js?v=1.0.0"></script>
+    <script src="/{{assets}}/js/init.js?v=1.0.1"></script>
 
     {{#ifLowerCaseEquals language "zh-Hans"}}
     <script src="/{{assets}}/js/vendor/pangu.min.js"></script>

src/templates/pages/index.hbs

@@ -18,7 +18,7 @@ slug: /
       <h1>{{#i18n "p1xh1"}}{{/i18n}}</h1>
       <p style="margin-top:1em">{{#i18n "p1x1"}}{{/i18n}}</p>
       <p>{{#i18n "p1x2"}}{{/i18n}}</p>
-      <span class='button_box'><a href="https://editor.p5js.org">{{#i18n "start-creating"}}{{/i18n}}</a></span>
+      <a href="https://editor.p5js.org"><span class='button_box'>{{#i18n "start-creating"}}{{/i18n}}</span></a>
 
       <h2>{{#i18n "p2xh2"}}{{/i18n}}</h2>
       <p>{{#i18n "p2x1"}}{{/i18n}}</p>

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

@@ -87,7 +87,7 @@ function setup(){
   rectMode(CORNERS);
 }
 function draw(){
-  rect(10, 10, 50, 30); // rect(x, y, width, height)
+  rect(10, 10, 50, 30); // rect(x1, y1, x2, y2)
 }
 </script>
 
@@ -118,7 +118,7 @@ function setup(){
   ellipseMode(CORNERS);
 }
 function draw(){
-  ellipse(10, 10, 40, 50); // ellipse(x, y, width, height)
+  ellipse(10, 10, 40, 50); // ellipse(x1, y1, x2, y2)
 }
 </script>
 

src/templates/pages/reference/assets/js/reference.js

@@ -13,7 +13,7 @@ <h3><%= module.name %> library</h3>
   <% if (group.name !== module.name && group.name !== 'p5') { %>
     <% if (group.hash) { %> <a href="<%=group.hash%>" <% if (group.module !== module.name) { %>class="core"<% } %>><% } %>  
     <h4 class="group-name <% if (t == 0) { %> first<%}%>"><%=group.name%></h4>
-    <% if (group.hash) { %> </a> <% } %>
+    <% if (group.hash) { %> </a><br> <% } %>
   <% } %>
   <% _.each(group.items.filter(function(item) {return item.access !== 'private'}), function(item) { %>
     <a href="<%=item.hash%>" <% if (item.module !== module.name) { %>class="core"<% } %>><%=item.name%><% if (item.itemtype === 'method') { %>()<%}%></a><br>

src/templates/pages/reference/assets/js/reference.js.map

@@ -41,6 +41,9 @@ define([
             }
             var hash = App.router.getHash(item);
 
+            // fixes broken links for #/p5/> and #/p5/>=
+            item.hash = item.hash.replace('>', '>');
+
             // Create a group list
             if (!self.groups[group]) {
               self.groups[group] = {