The library for web and native user interfaces.
Autogen the docs nav
This is still the same amount of duplication, except way easier to parse. Docs nav now lives in `_config.yml` and you must restart jekyll to see changes to that list (since config is only read at jekyll launch)
Paul O’Shannessy committed
Jul 16, 2013 at 17:24 UTC
3be6083ea4da2765d647ef3a18b08fc13c8e6766
3 files changed
+64
-22
docs/_config.yml
+36
@@ -16,3 +16,39 @@ markdown: redcarpet
16
react_version: 0.4.0a
17
description: A JavaScript library for building user interfaces
18
relative_permalinks: true
19
+
20
+nav_docs_sections:
21
+- title: Quick Start
22
+ items:
23
+ - id: getting-started
24
+ title: Getting Started
25
+ - id: tutorial
26
+ title: Tutorial
27
+- title: Guides
28
+ items:
29
+ - id: why-react
30
+ title: Why React?
31
+ - id: displaying-data
32
+ title: Displaying Data
33
+ subitems:
34
+ - id: jsx-in-depth
35
+ title: JSX in Depth
36
+ - id: jsx-gotchas
37
+ title: JSX Gotchas
38
+ - id: interactivity-and-dynamic-uis
39
+ title: Interactivity and Dynamic UIs
40
+ - id: multiple-components
41
+ title: Multiple Components
42
+ - id: reusable-components
43
+ title: Reusable Components
44
+ - id: forms
45
+ title: Forms
46
+ - id: working-with-the-browser
47
+ title: Working With the Browser
48
+ subitems:
49
+ - id: more-about-refs
50
+ title: More About Refs
51
+ - id: tooling-integration
52
+ title: Tooling integration
53
+ - id: reference
54
+ title: Reference
docs/_css/react.scss
+3
@@ -206,6 +206,9 @@ li {
206
list-style: none;
207
margin: 0;
208
}
209
+ ul ul {
210
+ margin-left: 20px;
211
+ }
212
li {
213
margin: 0;
214
}
docs/_includes/nav_docs.html
+25
-22
@@ -1,24 +1,27 @@
1
<div class="nav-docs">
2
- <div class="nav-docs-section">
3
- <h3>Quick start</h3>
4
- <ul>
5
- <li><a href="/react/docs/getting-started.html"{% if page.id == 'getting-started' %} class="active"{% endif %}>Getting Started</a></li>
6
- <li><a href="/react/docs/tutorial.html"{% if page.id == 'tutorial' %} class="active"{% endif %}>Tutorial</a></li>
7
- </ul>
8
- </div>
9
- <div class="nav-docs-section">
10
- <h3>Guides</h3>
11
- <ul>
12
- <li><a href="/react/docs/01-why-react.html"{% if page.id == '01-why-react' %} class="active"{% endif %}>Why React?</a></li>
13
- <li><a href="/react/docs/02-displaying-data.html"{% if page.id == '02-displaying-data' %} class="active"{% endif %}>Displaying Data</a></li>
14
- <li><a href="/react/docs/03-interactivity-and-dynamic-uis.html"{% if page.id == '03-interactivity-and-dynamic-uis' %} class="active"{% endif %}>Interactivity and Dynamic UIs</a></li>
15
- <li><a href="/react/docs/04-multiple-components.html"{% if page.id == '04-multiple-components' %} class="active"{% endif %}>Multiple Components</a></li>
16
- <li><a href="/react/docs/05-reusable-components.html"{% if page.id == '05-reusable-components' %} class="active"{% endif %}>Reusable Components</a></li>
17
- <li><a href="/react/docs/06-forms.html"{% if page.id == '06-forms' %} class="active"{% endif %}>Forms</a></li>
18
- <li><a href="/react/docs/07-working-with-the-browser.html"{% if page.id == '07-working-with-the-browser' %} class="active"{% endif %}>Working With the Browser</a></li>
19
- <li><a href="/react/docs/08-tooling-integration.html"{% if page.id == '08-tooling-integration' %} class="active"{% endif %}>Tooling Integration</a></li>
20
- <li><a href="/react/docs/09-reference.html"{% if page.id == '09-reference' %} class="active"{% endif %}>Reference</a></li>
21
-
22
- </ul>
23
- </div>
2
+ {% for section in site.nav_docs_sections %}
3
+ <div class="nav-docs-section">
4
+ <h3>{{ section.title }}</h3>
5
+ <ul>
6
+ {% for item in section.items %}
7
+ <li>
8
+ <a href="/react/docs/{{ item.id }}.html"{% if page.id == item.id %} class="active"{% endif %}>
9
+ {{ item.title }}
10
+ </a>
11
+ {% if item.subitems %}
12
+ <ul>
13
+ {% for subitem in item.subitems %}
14
+ <li>
15
+ <a href="/react/docs/{{ subitem.id }}.html"{% if page.id == subitem.id %} class="active"{% endif %}>
16
+ {{ subitem.title }}
17
+ </a>
18
+ </li>
19
+ {% endfor %}
20
+ </ul>
21
+ {% endif %}
22
+ </li>
23
+ {% endfor %}
24
+ </ul>
25
+ </div>
26
+ {% endfor %}
27
</div>