Improved documentation pages.

Author: syrusakbary

.travis.yml

@@ -32,7 +32,7 @@ install:
 script:
 - |
   if [ "$TEST_TYPE" = build_website ]; then
-    if [ "$TRAVIS_BRANCH" = "docs" ] && [ "$TRAVIS_PULL_REQUEST" = false ]; then
+    if [ "$TRAVIS_BRANCH" = "master" ] && [ "$TRAVIS_PULL_REQUEST" = false ]; then
       echo "Building the web."
       nvm install 4.0
 

docs/css/main.styl

@@ -19,6 +19,9 @@ a, a:hover
 a
   color rgb(42,93,173)
 
+p
+  margin-bottom 1em
+
 html, body
   font-family "Helvetica Neue", Helvetica, Arial, sans-serif
   font-weight 300
@@ -283,6 +286,10 @@ $title
     border-radius 2px
     border 1px solid #CCC
     color #000
+  p + p, p + ul
+    margin-top -.4em
+  p + ul
+    margin-top -.6em
   code
     font-size 14px
     line-height 20px
@@ -295,16 +302,16 @@ $title
 
 .title
   background: #F9F9F9;
-  padding 54px 0
+  padding 48px 0
 
   h1
     margin 0 auto
     @extend $wrapper
     font-family: 'Raleway';
-    font-size: 42px;
+    font-size: 40px;
     font-weight 200
     color: #585858;
-    line-height: 49px;
+    line-height: 50px;
 
 .docs
   @extend $wrapper
@@ -356,6 +363,7 @@ $title
 .docs-content
   col(3/4)
   margin-top 60px
+  margin-bottom 20px
   +below(600px)
     margin-top 10px
     col(1)
@@ -364,3 +372,8 @@ $title
     margin 0
     @extend $title
     font-size 32px
+    
+  .docs-next
+    float right
+    color #e05b49
+    font-weight 400

docs/pages/community.md

@@ -5,7 +5,7 @@ active_tab: community
 description: The biggest GraphQL Community in Python
 ---
 
-Graphene is constantly developing thanks to an active volunteer community, There are many different places where you discuss Graphene, share your experiences or ask for help. Your feedback and participation are very welcome!
+Graphene is constantly developing thanks to an active volunteer community, There are many different places where you discuss Graphene, share your experiences or ask for help. **Your feedback and participation are very welcome**!
 
 If you think working with Graphene is fun, there are many ways you can contribute to it. Please join us in the Slack community and help us shape the next generation API’s.
 
@@ -21,6 +21,11 @@ Django integration:
 -   **graphql-django-view**: [Source Code][5] - [PyPI package][6]
 -   **django-graphiql**: [Source Code][7] - [PyPI package][8]
 
+## Other related projects
+
+- [Flask GraphQL Demo](https://github.com/amitsaha/flask-graphql-demo) by [@echorand](https://twitter.com/echorand)
+
+
   [Source Code]: https://github.com/graphql-python/graphql-core
   [PyPI package]: https://pypi.python.org/pypi/graphql-core
   [1]: https://github.com/graphql-python/graphql-relay

docs/pages/docs/_template.js

@@ -10,31 +10,41 @@ class Template extends React.Component {
   render() {
     var docs = this.props.config.docs;
     var docs_index = _.indexBy(this.props.pages, 'path');
-    return (
-      <div className="docs">
-        <aside className="docs-aside">
-            {Object.keys(docs).map((key) => {
-                let group = docs[key];
-                return <div className="docs-aside-group" key={key}>
-                    <h3>{group.name}</h3>
-                    {group.pages.map((page) => {
-                        return <Link key={page} to={page}>{docs_index[page].data.title}</Link>
-                    })}
-                </div>;
+    var pages = [];
+    var aside_links = Object.keys(docs).map((key) => {
+        let group = docs[key];
+        return <div className="docs-aside-group" key={key}>
+            <h3>{group.name}</h3>
+            {group.pages.map((page) => {
+                pages.push(page)
+                return <Link key={page} to={page}>{docs_index[page].data.title}</Link>
+            })}
+        </div>;
+    });
+    var aside_options = Object.keys(docs).map((key) => {
+        let group = docs[key];
+        return <optgroup key={key} label={group.name}>
+            {group.pages.map((page) => {
+                return <option key={page} value={page}>{docs_index[page].data.title}</option>
             })}
-            <select className="docs-aside-navselect" onChange={this.goToPage.bind(this)}>
-                {Object.keys(docs).map((key) => {
-                    let group = docs[key];
-                    return <optgroup key={key} label={group.name}>
-                        {group.pages.map((page) => {
-                            return <option key={page} value={page}>{docs_index[page].data.title}</option>
-                        })}
-                    </optgroup>;
-                })}
-            </select>
-        </aside>
-        <div className="docs-content">
-            <RouteHandler {...this.props} docs={true}/>
+        </optgroup>;
+    });
+    var next_page_index = pages.indexOf(this.props.page.path)+1;
+    var next_page = pages[next_page_index];
+    return (
+      <div>
+        <div className="title"><h1>Documentation</h1></div>
+        <div className="docs">
+          <aside className="docs-aside">
+              {aside_links}
+              <select className="docs-aside-navselect" onChange={this.goToPage.bind(this)}>
+                  {aside_options}
+              </select>
+          </aside>
+          <div className="docs-content">
+              <RouteHandler {...this.props} docs={true}/>
+              {next_page?<Link className="docs-next" to={next_page}>Next - {docs_index[next_page].data.title} →</Link>:null}
+          </div>
         </div>
       </div>
     );

docs/pages/docs/basic-types.md

@@ -62,29 +62,23 @@ class DateTime(Scalar):
 
 This types if are mounted in a `ObjectType`, `Interface` or `Mutation`,
  would act as `Field`s.
-So, the following examples will behave exactly the same:
 
 ```python
 class Person(graphene.ObjectType):
     name = graphene.String()
-```
-and
 
-```python
+# Is equivalent to:
 class Person(graphene.ObjectType):
     name = graphene.Field(graphene.String())
 ```
 
 ## Mounting in Fields
 
-If this types are mounted in a `Field`, would act as `Argument`s.
-So, the following examples will behave exactly the same:
+If the types are mounted in a `Field`, would act as `Argument`s.
 
 ```python
 graphene.Field(graphene.String(), to=graphene.String())
-```
-and
 
-```python
+# Is equivalent to:
 graphene.Field(graphene.String(), to=graphene.Argument(graphene.String()))
 ```

docs/pages/docs/interfaces.md

@@ -8,7 +8,7 @@ description: Walkthrough Interfaces
 An Interface contains the essential fields that will be shared among multiple ObjectTypes.
 
 The basics:
-- Each Interface is a Python class that inherits from graphene.Interface.
+- Each Interface is a Python class that inherits from `graphene.Interface`.
 - Each attribute of the Interface represents a GraphQL field.
 
 ## Quick example

docs/pages/docs/objecttypes.md

@@ -8,7 +8,7 @@ description: Walkthrough ObjectTypes
 An ObjectType is the single, definitive source of information about your data. It contains the essential fields and behaviors of the data you’re querying.
 
 The basics:
-- Each ObjectType is a Python class that inherits graphene.ObjectType or inherits an implemented [Interface](/docs/interfaces/).
+- Each ObjectType is a Python class that inherits `graphene.ObjectType` or inherits an implemented [Interface](/docs/interfaces/).
 - Each attribute of the ObjectType represents a GraphQL field.
 
 ## Quick example

docs/pages/docs/quickstart-django.md

@@ -1,10 +1,14 @@
 ---
-title: Guide to Django
+title: Django Tutorial
 description: A Quick guide to Graphene in Django
 ---
 
+# Django Tutorial
+
 In our previous quickstart page we created a very simple schema.
-Now we will adapt the schema to map automatically some Django models.
+
+Now we will adapt the schema to map automatically some Django models, 
+and expose this schema in a `/graphql` API endpoint.
 
 ## Project setup
 
@@ -54,7 +58,7 @@ from graphene.contrib.django import DjangoObjectType
 
 from django.contrib.auth.models import User, Group
 
-# Graphene will map automaticall the User model to UserType with
+# Graphene will map automatically the User model to UserType with
 # the specified fields
 class UserType(DjangoObjectType):
     class Meta:

docs/pages/docs/quickstart.md

@@ -3,6 +3,8 @@ title: Getting started
 description: A Quick guide to Graphene
 ---
 
+# Getting started
+
 Let's build a basic GraphQL schema from scratch.
 
 
@@ -15,15 +17,6 @@ Let's build a basic GraphQL schema from scratch.
 ## Project setup
 
 ```bash
-# Create the project directory
-mkdir tutorial
-cd tutorial
-
-# Create a virtualenv to isolate our package dependencies locally
-virtualenv env
-source env/bin/activate  # On Windows use `env\Scripts\activate`
-
-# Install Graphene
 pip install graphene
 ```
 

docs/pages/index.md

@@ -3,12 +3,8 @@ path: /
 ---
 <div><a class="starwars-example" href="http://swapi.graphene-python.org/">Check our Django Starwars API example!</a></div>
 
-## About Graphene
+## Meet Graphene
 
 Graphene is a Python library for building GraphQL schemas/types fast and easily.
 
-**What is GraphQL?** A GraphQL query is a string interpreted by a server that returns data in a specified format.
-
-- **Easy to use:** Graphene helps you use GraphQL in Python without effort.
-- **Relay:** Graphene has builtin support for Relay
-- **Django:** Automatic *Django model* mapping to Graphene Types.
+**But, what is GraphQL?** A GraphQL query is a string interpreted by a server that returns data in a specified format. We believe *GraphQL* is the next big thing after peanut butter and *REST*.