New Top Level Menu Item Tutorial, Tutorial ported from @spicyj's Internal Course

docs/_config.yml

@@ -20,6 +20,12 @@ defaults:
     type: pages
   values:
     sectionid: blog
+- scope:
+    path: tutorial
+    type: pages
+  values:
+    layout: tutorial
+    sectionid: tutorial
 - scope:
     path: docs
     type: pages

docs/_data/nav_docs.yml

@@ -1,5 +1,4 @@
-- title: Tutorial
-- title: Basic Guides
+- title: Quick Start
   items:
     - id: installation
       title: Installation

docs/_data/nav_tutorial.yml

@@ -0,0 +1,71 @@
+- title: Tutorial
+  items:
+    - id: tutorial
+      title: Overview
+      subitems:
+        - id: what-were-building 
+          title: What We're Building
+          href: /react/tutorial/tutorial.html#what-were-building
+          forceInternal: true
+        - id: what-is-react
+          title: What is React?
+          href: /react/tutorial/tutorial.html#what-is-react
+          forceInternal: true
+        - id: getting-started
+          title: Getting Started
+          href: /react/tutorial/tutorial.html#getting-started
+          forceInternal: true
+        - id: passing-data-through-props
+          title: Passing Data Through Props
+          href: /react/tutorial/tutorial.html#passing-data-through-props
+          forceInternal: true
+        - id: an-interactive-component
+          title: An Interactive Component
+          href: /react/tutorial/tutorial.html#an-interactive-component
+          forceInternal: true
+        - id: developer-tools 
+          title: Developer Tools
+          href: /react/tutorial/tutorial.html#developer-tools
+          forceInternal: true
+    - id: lifting-state-up
+      title: Lifting State Up
+      href: /react/tutorial/tutorial.html#lifting-state-up
+      forceInternal: true
+      subitems:
+        - id: why-immutability-is-important 
+          title: Why Immutability Is Important
+          href: /react/tutorial/tutorial.html#why-immutability-is-important
+          forceInternal: true
+        - id: functional-components 
+          title: Functional Components
+          href: /react/tutorial/tutorial.html#functional-components
+          forceInternal: true
+        - id: taking-turns
+          title: Taking Turns
+          href: /react/tutorial/tutorial.html#taking-turns
+          forceInternal: true
+        - id: declaring-a-winner
+          title: Declaring a Winner
+          href: /react/tutorial/tutorial.html#declaring-a-winner
+          forceInternal: true
+    - id: storing-a-history
+      title: Storing A History
+      href: /react/tutorial/tutorial.html#storing-a-history
+      forceInternal: true
+      subitems:
+        - id: showing-the-moves
+          title: Showing the Moves
+          href: /react/tutorial/tutorial.html#showing-the-moves
+          forceInternal: true
+        - id: keys
+          title: Keys
+          href: /react/tutorial/tutorial.html#keys
+          forceInternal: true
+        - id: implementing-time-travel 
+          title: Implementing Time Travel
+          href: /react/tutorial/tutorial.html#implementing-time-travel
+          forceInternal: true
+        - id: wrapping-up
+          title: Wrapping Up
+          href: /react/tutorial/tutorial.html#wrapping-up
+          forceInternal: true

docs/_includes/nav_tutorial.html

@@ -0,0 +1,24 @@
+<div class="nav-docs">
+  <!-- Tutorial Nav -->
+  {% for section in site.data.nav_tutorial %}
+    <div class="nav-docs-section">
+      <h3>{{ section.title }}</h3>
+      <ul>
+        {% for item in section.items %}
+          <li>
+            {{ item | tutorial_sidebar_link }}
+            {% if item.subitems %}
+              <ul>
+                {% for subitem in item.subitems %}
+                  <li>
+                    {{ subitem | tutorial_sidebar_link }}
+                  </li>
+                {% endfor %}
+              </ul>
+            {% endif %}
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  {% endfor %}
+</div>

docs/_layouts/default.html

@@ -62,13 +62,13 @@
         <div class="nav-lists">
           <ul class="nav-site nav-site-internal">
             <li><a href="/react/docs/installation.html"{% if page.sectionid == 'docs' or page.sectionid == 'tips' or page.sectionid == 'contributing' %} class="active"{% endif %}>Docs</a></li>
+            <li><a href="/react/tutorial/tutorial.html"{% if page.sectionid == 'tutorial' %} class="active"{% endif %}>Tutorial</a></li>
             <li><a href="/react/community/support.html"{% if page.sectionid == 'community' %} class="active"{% endif %}>Community</a></li>
             <li><a href="/react/blog/"{% if page.sectionid == 'blog' %} class="active"{% endif %}>Blog</a></li>
             <li class="nav-site-search">
               <input id="algolia-doc-search" type="text" placeholder="Search docs..." />
             </li>
           </ul>
-
           <ul class="nav-site nav-site-external">
             <li><a href="https://github.com/facebook/react">GitHub</a></li>
             <li><a href="https://facebook.github.io/react-native/">React Native</a></li>

docs/_layouts/tutorial.html

@@ -0,0 +1,29 @@
+---
+layout: default
+sectionid: tutorial
+---
+
+<section class="content wrap documentationContent">
+  {% include nav_tutorial.html %}
+
+  <div class="inner-content">
+    <a class="edit-page-link"
+    href="https://github.com/facebook/react/tree/master/docs/{{ page.path }}"
+    target="_blank">Edit on GitHub</a>
+    <h1>
+      {{ page.title }}
+    </h1>
+    <div class="subHeader">{{ page.description }}</div>
+
+    {{ content }}
+
+    <div class="docs-prevnext">
+      {% if page.prev %}
+        <a class="docs-prev" href="/react/tutorial/{{ page.prev }}">&larr; Prev</a>
+      {% endif %}
+      {% if page.next %}
+        <a class="docs-next" href="/react/tutorial/{{ page.next }}">Next &rarr;</a>
+      {% endif %}
+    </div>
+  </div>
+</section>

docs/_plugins/sidebar_item.rb

@@ -12,15 +12,21 @@ def community_sidebar_link(item)
       return sidebar_helper(item, 'community')
     end
 
+    def tutorial_sidebar_link(item)
+      return sidebar_helper(item, 'tutorial')
+    end
+
     def sidebar_helper(item, group)
+      forceInternal = item["forceInternal"]
+
       pageID = @context.registers[:page]["id"]
       itemID = item["id"]
       href = item["href"] || "/react/#{group}/#{itemID}.html"
       classes = []
       if pageID == itemID
         classes.push("active")
       end
-      if item["href"]
+      if item["href"] && (forceInternal == nil)
         classes.push("external")
       end
       className = classes.size > 0  ? " class=\"#{classes.join(' ')}\"" : ""