Merge pull request #50 from lacker/graphqljs

robzhu · web-flow · commit a6d8947ab188 · 2016-09-08T20:50:30.000-04:00
Add a sidebar for the graphql.js docs
diff --git a/site/_core/CodeLayout.js b/site/_core/CodeLayout.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2016, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var path = require('path');
+var React = require('react');
+var Site = require('./Site');
+var Marked = require('./Marked');
+var DocsSidebar = require('./DocsSidebar');
+
+var CodeLayout = React.createClass({
+  render: function() {
+    var page = this.props.page;
+    var site = this.props.site;
+    var firstURL = '/graphql-js/getting-started/';
+    return (
+      <Site section="docs" title={page.title}>
+        <section className="content documentationContent">
+          <DocsSidebar site={site} page={page} firstURL={firstURL}/>
+          <div className="inner-content">
+            <h1>{page.title}</h1>
+            <Marked>{page.content}</Marked>
+            <div className="docs-prevnext">
+              {page.previous && <a className="docs-prev" href={path.resolve(page.url, page.previous)}>&larr; Prev</a>}
+              {page.next && <a className="docs-next" href={path.resolve(page.url, page.next)}>Next &rarr;</a>}
+            </div>
+          </div>
+        </section>
+      </Site>
+    );
+  }
+});
+
+module.exports = CodeLayout;
diff --git a/site/_core/DocsSidebar.js b/site/_core/DocsSidebar.js
@@ -11,7 +11,7 @@ var React = require('react');
 var DocsSidebar = React.createClass({
   render: function() {
     return <div className="nav-docs">
-      {getCategories(this.props.site).map((category) =>
+      {getCategories(this.props.site, this.props.firstURL).map((category) =>
         <div className="nav-docs-section" key={category.name}>
           <h3>{category.name}</h3>
           <ul>
@@ -22,7 +22,7 @@ var DocsSidebar = React.createClass({
                   style={{marginLeft: page.indent ? 20 : 0}}
                   className={page.id === this.props.page.id ? 'active' : ''}
                   href={page.url}>
-                  {page.title}
+                  {page.sidebarTitle || page.title}
                 </a>
               </li>
             )}
@@ -33,7 +33,9 @@ var DocsSidebar = React.createClass({
   }
 });
 
-function getCategories(site) {
+// If firstURL is provided, it's the URL (starting with /) of the
+// first page to put on the sidebar.
+function getCategories(site, firstURL) {
   var pages = site.files.docs.filter(file => file.content);
 
   // Build a hashmap of url -> page
@@ -61,11 +63,14 @@ function getCategories(site) {
   var first = null;
   for (var i = 0; i < pages.length; ++i) {
     var page = pages[i];
-    if (!previous[page.url]) {
+    if (firstURL ? (firstURL === page.url) : !previous[page.url]) {
       first = page;
       break;
     }
   }
+  if (!first) {
+    throw new Error('first not found');
+  }
 
   var categories = [];
   var currentCategory = null;
diff --git a/site/code/index.html.js b/site/code/index.html.js
@@ -9,13 +9,18 @@
 var React = require('react');
 var Site = require('../_core/Site');
 var Marked = require('../_core/Marked');
+var DocsSidebar = require('../_core/DocsSidebar');
 
 var Code = React.createClass({
   render: function() {
+    var page = this.props.page;
+    var site = this.props.site;
+    var firstURL = '/graphql-js/getting-started/';
     return (
       <Site section="code" title="Code">
 
-        <section className="content documentationContent nosidebar">
+        <section className="content documentationContent">
+          <DocsSidebar site={site} page={page} firstURL={firstURL}/>
           <div className="inner-content">
             <h1>Code</h1>
             <Marked>{`
@@ -24,8 +29,8 @@ Many different programming languages support GraphQL. This list contains some of
 
 ## GraphQL Server Libraries
 
-  - [GraphQL.js](/graphql-js/) ([github](https://github.com/graphql/graphql-js)) ([npm](https://www.npmjs.com/package/graphql)): The reference implementation of the GraphQL specification, designed for running a GraphQL server in a Node.js environment.
-  - [express-graphql](/graphql-js/) ([github](https://github.com/graphql/express-graphql)) ([npm](https://www.npmjs.com/package/express-graphql)): The reference implementation of a GraphQL API server over an Express webserver. You can use this to run GraphQL in conjunction with a regular Express webserver, or as a standalone GraphQL server.
+  - [GraphQL.js](/graphql-js/getting-started/) ([github](https://github.com/graphql/graphql-js/)) ([npm](https://www.npmjs.com/package/graphql)): The reference implementation of the GraphQL specification, designed for running a GraphQL server in a Node.js environment.
+  - [express-graphql](/graphql-js/getting-started/) ([github](https://github.com/graphql/express-graphql)) ([npm](https://www.npmjs.com/package/express-graphql)): The reference implementation of a GraphQL API server over an Express webserver. You can use this to run GraphQL in conjunction with a regular Express webserver, or as a standalone GraphQL server.
   - [Graphene](http://graphene-python.org/) ([github](https://github.com/graphql-python/graphene)): A Python library for building GraphQL APIs. Built-in support for [Relay](https://facebook.github.io/relay/), Django, SQLAlchemy, and Google App Engine.
   - [graphql-ruby](https://github.com/rmosolgo/graphql-ruby): A Ruby library for building GraphQL APIs. Built-in support for Relay and Rails.
   - [graphql-java](https://github.com/graphql-java/graphql-java): A Java library for building GraphQL APIs.
diff --git a/site/docs/APIReference-Errors.md b/site/docs/APIReference-Errors.md
@@ -1,6 +1,6 @@
 ---
 title: Errors
-layout: ../_core/DocsLayout
+layout: ../_core/CodeLayout
 category: API Reference
 permalink: /docs/api-reference-errors/
 next: /docs/api-reference-utilities/
diff --git a/site/docs/APIReference-Execution.md b/site/docs/APIReference-Execution.md
@@ -1,6 +1,6 @@
 ---
 title: Execution
-layout: ../_core/DocsLayout
+layout: ../_core/CodeLayout
 category: API Reference
 permalink: /docs/api-reference-execution/
 next: /docs/api-reference-errors/
diff --git a/site/docs/APIReference-GraphQL.md b/site/docs/APIReference-GraphQL.md
@@ -1,6 +1,6 @@
 ---
 title: GraphQL
-layout: ../_core/DocsLayout
+layout: ../_core/CodeLayout
 category: API Reference
 permalink: /docs/api-reference-graphql/
 next: /docs/api-reference-language/
diff --git a/site/docs/APIReference-Language.md b/site/docs/APIReference-Language.md
@@ -1,6 +1,6 @@
 ---
 title: Language
-layout: ../_core/DocsLayout
+layout: ../_core/CodeLayout
 category: API Reference
 permalink: /docs/api-reference-language/
 next: /docs/api-reference-type-system/
diff --git a/site/docs/APIReference-TypeSystem.md b/site/docs/APIReference-TypeSystem.md
@@ -1,6 +1,6 @@
 ---
 title: Type System
-layout: ../_core/DocsLayout
+layout: ../_core/CodeLayout
 category: API Reference
 permalink: /docs/api-reference-type-system/
 next: /docs/api-reference-validation/
diff --git a/site/docs/APIReference-Utilities.md b/site/docs/APIReference-Utilities.md
@@ -1,6 +1,6 @@
 ---
 title: Utilities
-layout: ../_core/DocsLayout
+layout: ../_core/CodeLayout
 category: API Reference
 permalink: /docs/api-reference-utilities/
 ---
@@ -117,7 +117,7 @@ function buildClientSchema(
 Build a GraphQLSchema for use by client tools.
 
 Given the result of a client running the introspection query, creates and
-returns a GraphQLSchema instance which can be then used with all graphql-js
+returns a GraphQLSchema instance which can be then used with all GraphQL.js
 tools, but cannot be used to execute a query, as introspection does not
 represent the "resolver", "parse" or "serialize" functions or any other
 server-internal mechanisms.
@@ -152,7 +152,7 @@ function buildASTSchema(
 
 This takes the ast of a schema document produced by `parseSchemaIntoAST` in
 `graphql/language/schema` and constructs a GraphQLSchema instance which can be
-then used with all graphql-js tools, but cannot be used to execute a query, as
+then used with all GraphQL.js tools, but cannot be used to execute a query, as
 introspection does not represent the "resolver", "parse" or "serialize"
 functions or any other server-internal mechanisms.
 
diff --git a/site/docs/APIReference-Validation.md b/site/docs/APIReference-Validation.md
@@ -1,6 +1,6 @@
 ---
 title: Validation
-layout: ../_core/DocsLayout
+layout: ../_core/CodeLayout
 category: API Reference
 permalink: /docs/api-reference-validation/
 next: /docs/api-reference-execution/
diff --git a/site/docs/Guides-ConstructingTypes.md b/site/docs/Guides-ConstructingTypes.md
@@ -1,8 +1,9 @@
 ---
 title: Constructing Types
-layout: ../_core/DocsLayout
-category: Guides
+layout: ../_core/CodeLayout
+category: Advanced Guides
 permalink: /graphql-js/constructing-types/
+next: /docs/api-reference-graphql/
 ---
 
 For many apps, you can define a fixed schema when the application starts, and define it using GraphQL schema language. In some cases, it's useful to construct a schema programmatically. You can do this using the `GraphQLSchema` constructor.
diff --git a/site/docs/QuickStart-Videos.md b/site/docs/QuickStart-Videos.md
@@ -41,7 +41,7 @@ GraphiQL, an in-browser GraphQL IDE.
 
 *Nick Schrock – August 24, 2015*
 
-Nick expands on Lee's talk, explaining how to use graphql-js to build a server.
+Nick expands on Lee's talk, explaining how to use GraphQL.js to build a server.
 Then introduces how wrapping an existing REST server can be an effective way to
 get started with GraphQL and announces the public release of "swapi-graphql" a
 wrapper of the Star Wars REST API to illustrate. Many live demos of "swapi-graphql"
@@ -54,15 +54,15 @@ using GraphiQL.
 *Lee Byron – July 2, 2015*
 
 Lee introduces GraphQL and its origin and announces the public release of the
-GraphQL working draft specification and "graphql-js" a reference implementation.
+GraphQL working draft specification and "GraphQL.js" a reference implementation.
 
 <iframe width="760" height="426" src="https://www.youtube-nocookie.com/embed/WQLzZf34FJ8?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
 
 ## Creating a GraphQL Server – React Europe
 
 *Nick Schrock, Dan Schafer – July 3, 2015*
 
-Nick and Dan expands on Lee's talk, explaining how to use graphql-js to build a
+Nick and Dan expands on Lee's talk, explaining how to use GraphQL.js to build a
 server and explain the merits of a strong type system.
 
 <iframe width="760" height="426" src="https://www.youtube-nocookie.com/embed/gY48GW87Feo?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
diff --git a/site/docs/Tutorial-Authentication.md b/site/docs/Tutorial-Authentication.md
@@ -1,7 +1,8 @@
 ---
 title: Authentication and Express Middleware
-layout: ../_core/DocsLayout
-category: Tutorial
+sidebarTitle: Authentication & Middleware
+layout: ../_core/CodeLayout
+category: GraphQL.js Tutorial
 permalink: /graphql-js/authentication-and-express-middleware/
 next: /graphql-js/constructing-types/
 ---
diff --git a/site/docs/Tutorial-BasicTypes.md b/site/docs/Tutorial-BasicTypes.md
@@ -1,7 +1,7 @@
 ---
 title: Basic Types
-layout: ../_core/DocsLayout
-category: Tutorial
+layout: ../_core/CodeLayout
+category: GraphQL.js Tutorial
 permalink: /graphql-js/basic-types/
 next: /graphql-js/passing-arguments/
 ---
diff --git a/site/docs/Tutorial-ExpressGraphQL.md b/site/docs/Tutorial-ExpressGraphQL.md
@@ -1,7 +1,8 @@
 ---
 title: Running an Express GraphQL Server
-layout: ../_core/DocsLayout
-category: Tutorial
+sidebarTitle: Running Express + GraphQL
+layout: ../_core/CodeLayout
+category: GraphQL.js Tutorial
 permalink: /graphql-js/running-an-express-graphql-server/
 next: /graphql-js/graphql-clients/
 ---
diff --git a/site/docs/Tutorial-GettingStarted.md b/site/docs/Tutorial-GettingStarted.md
@@ -1,18 +1,15 @@
 ---
-title: Getting Started
-layout: ../_core/DocsLayout
-category: Tutorial
+title: Getting Started With GraphQL.js
+sidebarTitle: Getting Started
+layout: ../_core/CodeLayout
+category: GraphQL.js Tutorial
 permalink: /graphql-js/getting-started/
 next: /graphql-js/running-an-express-graphql-server/
 ---
 
 ## Prerequisites
 
-Before getting started, you should have Node v6 installed, although the examples should mostly work in previous versions of Node as well. For this guide, we won't use any language features that require transpilation, but we will use some ES6 features like Promises, classes, and fat arrow functions, so if you aren't familiar with them you might want to read up on them first.
-
-* Promises: http://www.html5rocks.com/en/tutorials/es6/promises/
-* Classes: http://javascriptplayground.com/blog/2014/07/introduction-to-es6-classes-tutorial/
-* Fat arrow functions: https://strongloop.com/strongblog/an-introduction-to-javascript-es6-arrow-functions/
+Before getting started, you should have Node v6 installed, although the examples should mostly work in previous versions of Node as well. For this guide, we won't use any language features that require transpilation, but we will use some ES6 features like [Promises](http://www.html5rocks.com/en/tutorials/es6/promises/), [classes](http://javascriptplayground.com/blog/2014/07/introduction-to-es6-classes-tutorial/), and [fat arrow functions](https://strongloop.com/strongblog/an-introduction-to-javascript-es6-arrow-functions/), so if you aren't familiar with them you might want to read up on them first.
 
 To create a new project and install GraphQL.js in your current directory:
 
@@ -62,4 +59,4 @@ You should see the GraphQL response printed out:
 
 Congratulations - you just executed a GraphQL query!
 
-For practical applications, you'll probably want to run GraphQL queries from an API server, rather than executing GraphQL with a command line tool. To use GraphQL for an API server over HTTP, check out [Running an Express-GraphQL Server](/graphql-js/running-an-express-graphql-server/).
+For practical applications, you'll probably want to run GraphQL queries from an API server, rather than executing GraphQL with a command line tool. To use GraphQL for an API server over HTTP, check out [Running an Express GraphQL Server](/graphql-js/running-an-express-graphql-server/).
diff --git a/site/docs/Tutorial-GraphQLClients.md b/site/docs/Tutorial-GraphQLClients.md
@@ -1,7 +1,7 @@
 ---
 title: GraphQL Clients
-layout: ../_core/DocsLayout
-category: Tutorial
+layout: ../_core/CodeLayout
+category: GraphQL.js Tutorial
 permalink: /graphql-js/graphql-clients/
 next: /graphql-js/basic-types/
 ---
diff --git a/site/docs/Tutorial-Mutations.md b/site/docs/Tutorial-Mutations.md
@@ -1,7 +1,7 @@
 ---
 title: Mutations and Input Types
-layout: ../_core/DocsLayout
-category: Tutorial
+layout: ../_core/CodeLayout
+category: GraphQL.js Tutorial
 permalink: /graphql-js/mutations-and-input-types/
 next: /graphql-js/authentication-and-express-middleware/
 ---
diff --git a/site/docs/Tutorial-ObjectTypes.md b/site/docs/Tutorial-ObjectTypes.md
@@ -1,7 +1,7 @@
 ---
 title: Object Types
-layout: ../_core/DocsLayout
-category: Tutorial
+layout: ../_core/CodeLayout
+category: GraphQL.js Tutorial
 permalink: /graphql-js/object-types/
 next: /graphql-js/mutations-and-input-types/
 ---
diff --git a/site/docs/Tutorial-PassingArguments.md b/site/docs/Tutorial-PassingArguments.md
@@ -1,7 +1,7 @@
 ---
 title: Passing Arguments
-layout: ../_core/DocsLayout
-category: Tutorial
+layout: ../_core/CodeLayout
+category: GraphQL.js Tutorial
 permalink: /graphql-js/passing-arguments/
 next: /graphql-js/object-types/
 ---
