Add top level API link to header nav

content/docs/reference-dom-elements.md → content/api/dom-elements.md

@@ -3,8 +3,9 @@ id: dom-elements
 title: DOM Elements
 layout: docs
 category: Reference
-permalink: docs/dom-elements.html
+permalink: api/dom-elements.html
 redirect_from:
+  - "docs/dom-elements.html"
   - "docs/tags-and-attributes.html"
   - "docs/dom-differences.html"
   - "docs/special-non-dom-attributes.html"

content/docs/reference-events.md → content/api/events.md

@@ -1,9 +1,11 @@
 ---
 id: events
 title: SyntheticEvent
-permalink: docs/events.html
+permalink: api/events.html
 layout: docs
 category: Reference
+redirect_from:
+  - "docs/events.html"
 ---
 
 This reference guide documents the `SyntheticEvent` wrapper that forms part of React's Event System. See the [Handling Events](/docs/handling-events.html) guide to learn more.

content/docs/reference-glossary.md → content/api/glossary.md

@@ -3,8 +3,9 @@ id: glossary
 title: Glossary of React Terms
 layout: docs
 category: Reference
-permalink: docs/glossary.html
-
+permalink: api/glossary.html
+redirect_from:
+  - "docs/glossary.html"
 ---
 
 ## Single-page Application

content/docs/reference-javascript-environment-requirements.md → content/api/javascript-environment-requirements.md

@@ -3,7 +3,9 @@ id: javascript-environment-requirements
 title: JavaScript Environment Requirements
 layout: docs
 category: Reference
-permalink: docs/javascript-environment-requirements.html
+permalink: api/javascript-environment-requirements.html
+redirect_from:
+  - "docs/javascript-environment-requirements.html"
 ---
 
 React 16 depends on the collection types [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set). If you support older browsers and devices which may not yet provide these natively (e.g. IE < 11), consider including a global polyfill in your bundled application, such as [core-js](https://github.com/zloirock/core-js) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/).

content/api/nav.yml

@@ -0,0 +1,25 @@
+- title: Reference
+  items:
+    - id: react-api
+      title: React
+      subitems:
+        - id: react-component
+          title: React.Component
+    - id: react-dom
+      title: ReactDOM
+    - id: react-dom-server
+      title: ReactDOMServer
+    - id: dom-elements
+      title: DOM Elements
+    - id: events
+      title: SyntheticEvent
+    - id: test-utils
+      title: Test Utilities
+    - id: shallow-renderer
+      title: Shallow Renderer
+    - id: test-renderer
+      title: Test Renderer
+    - id: javascript-environment-requirements
+      title: JS Environment Requirements
+    - id: glossary
+      title: Glossary

content/docs/reference-pure-render-mixin.md → content/api/pure-render-mixin.md

@@ -3,7 +3,9 @@ id: pure-render-mixin
 title: PureRenderMixin
 layout: docs
 category: Reference
-permalink: docs/pure-render-mixin.html
+permalink: api/pure-render-mixin.html
+redirect_from:
+  - "docs/pure-render-mixin.html"
 ---
 
 > Note

content/docs/reference-react-component.md → content/api/react-component.md

@@ -3,8 +3,9 @@ id: react-component
 title: React.Component
 layout: docs
 category: Reference
-permalink: docs/react-component.html
+permalink: api/react-component.html
 redirect_from:
+  - "docs/react-component.html"
   - "docs/component-api.html"
   - "docs/component-specs.html"
   - "docs/component-specs-ko-KR.html"

content/docs/reference-react-dom-server.md → content/api/react-dom-server.md

@@ -3,7 +3,9 @@ id: react-dom-server
 title: ReactDOMServer
 layout: docs
 category: Reference
-permalink: docs/react-dom-server.html
+permalink: api/react-dom-server.html
+redirect_from:
+  - "docs/react-dom-server.html"
 ---
 
 The `ReactDOMServer` object enables you to render components to static markup. Typically, it's used on a Node server:

content/docs/reference-react-dom.md → content/api/react-dom.md

@@ -3,7 +3,9 @@ id: react-dom
 title: ReactDOM
 layout: docs
 category: Reference
-permalink: docs/react-dom.html
+permalink: api/react-dom.html
+redirect_from:
+  - "docs/react-dom.html"
 ---
 
 If you load React from a `<script>` tag, these top-level APIs are available on the `ReactDOM` global. If you use ES6 with npm, you can write `import ReactDOM from 'react-dom'`. If you use ES5 with npm, you can write `var ReactDOM = require('react-dom')`.

content/docs/reference-react.md → content/api/react.md

@@ -3,8 +3,9 @@ id: react-api
 title: React Top-Level API
 layout: docs
 category: Reference
-permalink: docs/react-api.html
+permalink: api/react-api.html
 redirect_from:
+  - "docs/react-api.html"
   - "docs/reference.html"
   - "docs/clone-with-props.html"
   - "docs/top-level-api.html"

content/docs/addons-shallow-renderer.md → content/api/shallow-renderer.md

@@ -1,9 +1,11 @@
 ---
 id: shallow-renderer
 title: Shallow Renderer
-permalink: docs/shallow-renderer.html
+permalink: api/shallow-renderer.html
 layout: docs
 category: Reference
+redirect_from:
+  - "docs/shallow-renderer.html"
 ---
 
 **Importing**

content/docs/reference-test-renderer.md → content/api/test-renderer.md

@@ -1,9 +1,11 @@
 ---
 id: test-renderer
 title: Test Renderer
-permalink: docs/test-renderer.html
+permalink: api/test-renderer.html
 layout: docs
 category: Reference
+redirect_from:
+  - "docs/test-renderer.html"
 ---
 
 **Importing**

content/docs/addons-test-utils.md → content/api/test-utils.md

@@ -1,9 +1,11 @@
 ---
 id: test-utils
 title: Test Utilities
-permalink: docs/test-utils.html
+permalink: api/test-utils.html
 layout: docs
 category: Reference
+redirect_from:
+  - "docs/test-utils.html"
 ---
 
 **Importing**

content/docs/nav.yml

@@ -58,31 +58,6 @@
       title: Integrating with Other Libraries
     - id: accessibility
       title: Accessibility
-- title: Reference
-  items:
-    - id: react-api
-      title: React
-      subitems:
-        - id: react-component
-          title: React.Component
-    - id: react-dom
-      title: ReactDOM
-    - id: react-dom-server
-      title: ReactDOMServer
-    - id: dom-elements
-      title: DOM Elements
-    - id: events
-      title: SyntheticEvent
-    - id: test-utils
-      title: Test Utilities
-    - id: shallow-renderer
-      title: Shallow Renderer
-    - id: test-renderer
-      title: Test Renderer
-    - id: javascript-environment-requirements
-      title: JS Environment Requirements
-    - id: glossary
-      title: Glossary
 - title: Contributing
   items:
   - id: how-to-contribute

gatsby-node.js

@@ -31,6 +31,7 @@ exports.createPages = async ({graphql, boundActionCreators}) => {
   const blogTemplate = resolve('./src/templates/blog.js');
   const communityTemplate = resolve('./src/templates/community.js');
   const docsTemplate = resolve('./src/templates/docs.js');
+  const apiTemplate = resolve('./src/templates/api.js');
   const tutorialTemplate = resolve('./src/templates/tutorial.js');
   const homeTemplate = resolve('./src/templates/home.js');
 
@@ -77,6 +78,7 @@ exports.createPages = async ({graphql, boundActionCreators}) => {
       slug.includes('community/') ||
       slug.includes('contributing/') ||
       slug.includes('docs/') ||
+      slug.includes('api/') ||
       slug.includes('tutorial/') ||
       slug.includes('warnings/')
     ) {
@@ -85,6 +87,8 @@ exports.createPages = async ({graphql, boundActionCreators}) => {
         template = blogTemplate;
       } else if (slug.includes('community/')) {
         template = communityTemplate;
+      } else if (slug.includes('api/')) {
+        template = apiTemplate;
       } else if (
         slug.includes('contributing/') ||
         slug.includes('docs/') ||

src/components/LayoutHeader/Header.js

@@ -118,6 +118,11 @@ const Header = ({location}) => (
             title="Docs"
             to="/docs/hello-world.html"
           />
+          <HeaderLink
+            isActive={location.pathname.includes('/api/')}
+            title="API"
+            to="/api/react-api.html"
+          />
           <HeaderLink
             isActive={location.pathname.includes('/tutorial/')}
             title="Tutorial"

src/layouts/index.js

@@ -42,7 +42,7 @@ class Template extends Component {
     let layoutHasSidebar = false;
     if (
       location.pathname.match(
-        /^\/(docs|tutorial|community|blog|contributing|warnings)/,
+        /^\/(docs|api|tutorial|community|blog|contributing|warnings)/,
       )
     ) {
       layoutHasSidebar = true;

src/templates/api.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import MarkdownPage from 'components/MarkdownPage';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {createLinkDocs} from 'utils/createLink';
+import {sectionListAPI} from 'utils/sectionList';
+
+const Api = ({data, location}) => (
+  <MarkdownPage
+    createLink={createLinkDocs}
+    location={location}
+    markdownRemark={data.markdownRemark}
+    sectionList={sectionListAPI}
+    titlePostfix=" - React"
+  />
+);
+
+Api.propTypes = {
+  data: PropTypes.object.isRequired,
+};
+
+// eslint-disable-next-line no-undef
+export const pageQuery = graphql`
+  query TemplateApiMarkdown($slug: String!) {
+    markdownRemark(fields: {slug: {eq: $slug}}) {
+      html
+      frontmatter {
+        title
+        next
+        prev
+      }
+      fields {
+        path
+        slug
+      }
+    }
+  }
+`;
+
+export default Api;

src/utils/sectionList.js

@@ -9,6 +9,7 @@
 import navCommunity from '../../content/community/nav.yml';
 import navDocs from '../../content/docs/nav.yml';
 import navTutorial from '../../content/tutorial/nav.yml';
+import navAPI from '../../content/api/nav.yml';
 
 const sectionListDocs = navDocs.map(item => ({
   ...item,
@@ -20,8 +21,14 @@ const sectionListCommunity = navCommunity.map(item => ({
   directory: 'community',
 }));
 
+const sectionListAPI = navAPI.map(item => ({
+  ...item,
+  directory: 'api',
+}));
+
 export {
   sectionListCommunity,
   sectionListDocs,
+  sectionListAPI,
   navTutorial as sectionListTutorial,
 };