Skip to content

Commit 7f03db5

Browse files
ericnakagawaericnakagawa
authored
Merge pull request #7875 from ericnakagawa/new-docs
New Top Level Menu Item Tutorial, Tutorial ported from @spicyj's Internal Course
2 parents b8a7163 + 445badf commit 7f03db5

11 files changed

Lines changed: 648 additions & 4 deletions

File tree

‎docs/_config.yml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,12 @@ defaults:
2020
type: pages
2121
values:
2222
sectionid: blog
23+
- scope:
24+
path: tutorial
25+
type: pages
26+
values:
27+
layout: tutorial
28+
sectionid: tutorial
2329
- scope:
2430
path: docs
2531
type: pages

‎docs/_data/nav_docs.yml‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
- title: Tutorial
2-
- title: Basic Guides
1+
- title: Quick Start
32
items:
43
- id: installation
54
title: Installation

‎docs/_data/nav_tutorial.yml‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
- title: Tutorial
2+
items:
3+
- id: tutorial
4+
title: Overview
5+
subitems:
6+
- id: what-were-building
7+
title: What We're Building
8+
href: /react/tutorial/tutorial.html#what-were-building
9+
forceInternal: true
10+
- id: what-is-react
11+
title: What is React?
12+
href: /react/tutorial/tutorial.html#what-is-react
13+
forceInternal: true
14+
- id: getting-started
15+
title: Getting Started
16+
href: /react/tutorial/tutorial.html#getting-started
17+
forceInternal: true
18+
- id: passing-data-through-props
19+
title: Passing Data Through Props
20+
href: /react/tutorial/tutorial.html#passing-data-through-props
21+
forceInternal: true
22+
- id: an-interactive-component
23+
title: An Interactive Component
24+
href: /react/tutorial/tutorial.html#an-interactive-component
25+
forceInternal: true
26+
- id: developer-tools
27+
title: Developer Tools
28+
href: /react/tutorial/tutorial.html#developer-tools
29+
forceInternal: true
30+
- id: lifting-state-up
31+
title: Lifting State Up
32+
href: /react/tutorial/tutorial.html#lifting-state-up
33+
forceInternal: true
34+
subitems:
35+
- id: why-immutability-is-important
36+
title: Why Immutability Is Important
37+
href: /react/tutorial/tutorial.html#why-immutability-is-important
38+
forceInternal: true
39+
- id: functional-components
40+
title: Functional Components
41+
href: /react/tutorial/tutorial.html#functional-components
42+
forceInternal: true
43+
- id: taking-turns
44+
title: Taking Turns
45+
href: /react/tutorial/tutorial.html#taking-turns
46+
forceInternal: true
47+
- id: declaring-a-winner
48+
title: Declaring a Winner
49+
href: /react/tutorial/tutorial.html#declaring-a-winner
50+
forceInternal: true
51+
- id: storing-a-history
52+
title: Storing A History
53+
href: /react/tutorial/tutorial.html#storing-a-history
54+
forceInternal: true
55+
subitems:
56+
- id: showing-the-moves
57+
title: Showing the Moves
58+
href: /react/tutorial/tutorial.html#showing-the-moves
59+
forceInternal: true
60+
- id: keys
61+
title: Keys
62+
href: /react/tutorial/tutorial.html#keys
63+
forceInternal: true
64+
- id: implementing-time-travel
65+
title: Implementing Time Travel
66+
href: /react/tutorial/tutorial.html#implementing-time-travel
67+
forceInternal: true
68+
- id: wrapping-up
69+
title: Wrapping Up
70+
href: /react/tutorial/tutorial.html#wrapping-up
71+
forceInternal: true

‎docs/_includes/nav_tutorial.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<div class="nav-docs">
2+
<!-- Tutorial Nav -->
3+
{% for section in site.data.nav_tutorial %}
4+
<div class="nav-docs-section">
5+
<h3>{{ section.title }}</h3>
6+
<ul>
7+
{% for item in section.items %}
8+
<li>
9+
{{ item | tutorial_sidebar_link }}
10+
{% if item.subitems %}
11+
<ul>
12+
{% for subitem in item.subitems %}
13+
<li>
14+
{{ subitem | tutorial_sidebar_link }}
15+
</li>
16+
{% endfor %}
17+
</ul>
18+
{% endif %}
19+
</li>
20+
{% endfor %}
21+
</ul>
22+
</div>
23+
{% endfor %}
24+
</div>

‎docs/_layouts/default.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,13 +62,13 @@
6262
<div class="nav-lists">
6363
<ul class="nav-site nav-site-internal">
6464
<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>
65+
<li><a href="/react/tutorial/tutorial.html"{% if page.sectionid == 'tutorial' %} class="active"{% endif %}>Tutorial</a></li>
6566
<li><a href="/react/community/support.html"{% if page.sectionid == 'community' %} class="active"{% endif %}>Community</a></li>
6667
<li><a href="/react/blog/"{% if page.sectionid == 'blog' %} class="active"{% endif %}>Blog</a></li>
6768
<li class="nav-site-search">
6869
<input id="algolia-doc-search" type="text" placeholder="Search docs..." />
6970
</li>
7071
</ul>
71-
7272
<ul class="nav-site nav-site-external">
7373
<li><a href="https://github.com/facebook/react">GitHub</a></li>
7474
<li><a href="https://facebook.github.io/react-native/">React Native</a></li>

‎docs/_layouts/tutorial.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
layout: default
3+
sectionid: tutorial
4+
---
5+
6+
<section class="content wrap documentationContent">
7+
{% include nav_tutorial.html %}
8+
9+
<div class="inner-content">
10+
<a class="edit-page-link"
11+
href="https://github.com/facebook/react/tree/master/docs/{{ page.path }}"
12+
target="_blank">Edit on GitHub</a>
13+
<h1>
14+
{{ page.title }}
15+
</h1>
16+
<div class="subHeader">{{ page.description }}</div>
17+
18+
{{ content }}
19+
20+
<div class="docs-prevnext">
21+
{% if page.prev %}
22+
<a class="docs-prev" href="/react/tutorial/{{ page.prev }}">&larr; Prev</a>
23+
{% endif %}
24+
{% if page.next %}
25+
<a class="docs-next" href="/react/tutorial/{{ page.next }}">Next &rarr;</a>
26+
{% endif %}
27+
</div>
28+
</div>
29+
</section>

‎docs/_plugins/sidebar_item.rb‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,21 @@ def community_sidebar_link(item)
1212
return sidebar_helper(item, 'community')
1313
end
1414

15+
def tutorial_sidebar_link(item)
16+
return sidebar_helper(item, 'tutorial')
17+
end
18+
1519
def sidebar_helper(item, group)
20+
forceInternal = item["forceInternal"]
21+
1622
pageID = @context.registers[:page]["id"]
1723
itemID = item["id"]
1824
href = item["href"] || "/react/#{group}/#{itemID}.html"
1925
classes = []
2026
if pageID == itemID
2127
classes.push("active")
2228
end
23-
if item["href"]
29+
if item["href"] && (forceInternal == nil)
2430
classes.push("external")
2531
end
2632
className = classes.size > 0 ? " class=\"#{classes.join(' ')}\"" : ""

‎docs/img/tutorial/devtools.png‎

50.2 KB
Loading

‎docs/img/tutorial/tictac-empty.png‎

10.9 KB
Loading

‎docs/img/tutorial/tictac-numbers.png‎

16.4 KB
Loading

0 commit comments

Comments
 (0)