Learning sections

public/_helpers.html

@@ -55,6 +55,8 @@
 
 {% includeData 'demos.json' as demos %}
 
+{% includeData 'learning.json' as learning %}
+
 {# includeData '_db/webvr_scenes.json' as sites #}
 {# includeData '_db/bugs.json' as bugs #}
 {# includeData '_db/compat_reports.json' as compat_reports #}
@@ -67,6 +69,28 @@
   people: people
 } #}
 
+{% macro learning_item (slug) %}
+  {% set learn = learning[slug] %}
+  {% set name = learn.name %}
+  {% set description = learn.description %}
+  {% set url = learn.url %}
+  {% set thumb = learn.thumbnail %}
+  {% set author = learn.author %}
+  {% set datePublished = learn.date_published %}
+  <li class="grid-flex-cell-1of2">
+    <div>
+      <div>
+        <a itemprop="url" href="{{ url }}" class="no-underline">
+          <img src="{{ thumb }}"/>
+          <h3>{{ name }}</h3>
+        </a>
+        <time datetime="{{ datePublished }}">{{ datePublished }}</time>
+        <p>{{ description }}</p>
+      </div>
+    </div>
+  </li>
+{% endmacro %}
+
 {% set browsers = {
   chrome: chrome,
   chromium: chromium,

public/_learning.html

@@ -0,0 +1,6 @@
+{% from '_helpers.html' import learning_item %}
+
+{% block learning %}
+  {{ learning_item('progressive-webvr') }}
+  {{ learning_item('tools') }}
+{% endblock %}

public/index.html

@@ -22,14 +22,6 @@
 
     <main id="main" class="main" role="main">
       <div class="container">
-        <section class="notifications" id="notifications">
-          {% for _, browser in browsers %}
-            {% if browser.notifications %}
-              {{ browser_notifications(browser) }}
-            {% endif %}
-          {% endfor %}
-        </section>
-
         <section id="intro" class="section intro" data-section="intro">
           <div class="intro-text">
             <p class="intro-para"><strong>WebVR</strong> is a <a href="https://w3c.github.com/webvr/"><em>JavaScript API</em></a> for creating immersive 3D, <em>Virtual Reality</em> experiences in your <em>browser</em>.</p>
@@ -46,8 +38,25 @@
           </div>
         </section>
 
+        <section id="learn" class="section">
+          <h1>Learn about WebVR</h1>
+
+          <ul class="matrix grid-flex-container">
+            {% include '_learning.html' %}
+          </ul>
+        </section>
+
         <section id="browsers" class="section browsers" data-section="browsers">
-          <h1><a href="#browsers">WebVR Browsers</a></h1>
+          <h1><a href="#browsers">Supported Browsers</a></h1>
+
+          <div class="notifications" id="notifications">
+            {% for _, browser in browsers %}
+              {% if browser.notifications %}
+                {{ browser_notifications(browser) }}
+              {% endif %}
+            {% endfor %}
+          </div>
+
           <ul data-section="browsers" class="matrix grid-flex-container">
             {{ browser_item('microsoft_edge') }}
             {{ browser_item('firefox') }}

public/learning.json

@@ -0,0 +1,20 @@
+{
+  "progressive-webvr": {
+    "name": "Progressive Enhancement with WebVR.",
+    "description": "Arturo Paracuellos, the creator of Puzzle Rain and other notable WebVR experiences, runs us through how he made a WebVR experience for weather.com that progressively enhances from mobile phones all the way up to full VR systems like the HTC VIVE.",
+    "url": "https://unboring.net/workflows/progressive-enhancement/",
+    "author": "Arturo Paracuellos",
+    "author_url": "unboring.net",
+    "thumbnail": "articles/progressive-webvr/thumbnail.png",
+    "date_published": "5-April-2017"
+  },
+  "tools": {
+    "name": "Tools for creating WebVR content.",
+    "description": "See all the options available for creating WebVR content",
+    "url": "tools.html",
+    "author": "Casey Yee",
+    "author_url": "twitter.com/whoyee",
+    "thumbnail": "articles/tools/thumbnail.jpg",
+    "date_published": "9-May-2017"
+  }
+}

public/media/css/main.css

@@ -288,6 +288,7 @@ h1.page-heading {
 .notifications {
   display: flex;
   flex-direction: column-reverse;
+  margin-bottom: 1.5rem;
 }
 
 .notifications .message {
@@ -1618,7 +1619,6 @@ html[data-layout~="headset"][data-layout~="htc_vive"] .edit-page a:hover {
   }
 
   .main h1 {
-    border-top: 1px solid #eee;
     padding-top: 3rem;
   }
 

public/tools.html

@@ -0,0 +1,36 @@
+{% from '_helpers.html' import author_item, browsers, site_title %}
+{% set browser = browsers.servo %}
+{% set page = 'servo.html' %}
+<!doctype html>
+<html lang="en" data-layout="secondary" data-browser="{{ browser.slug }}">
+  <head>
+    {% include '_head.html' %}
+    <title>Tools</title>
+  </head>
+  <body>
+    <header id="header" class="header" role="banner">
+      <div class="container section">
+        {% include '_logo.html' %}
+
+        <a class="page-heading-link" href="{{ browser.about }}">
+          <h1 class="browser-name page-heading">Tools for creating WebVR content</h1>
+        </a>
+      </div>
+    </header>
+
+    <main id="main" class="main" role="main">
+      <div class="container">
+
+        <section class="section">
+          <h2><a href="#setup">Instructions</a></h2>
+          <ul class="bullets-light">
+            <li><span>Three.js</span></li>
+            <li><span>A-Frame</span></li>
+          </ul>
+        </section>
+      </div>
+    </main>
+
+    {% include '_footer.html' %}
+  </body>
+</html>