First version docs playground

docs/css/main.styl

@@ -1,12 +1,14 @@
 @import 'nib'
 @import 'jeet'
 
-@import 'hljs.css'
-@import 'bm.css'
 @import 'https://fonts.googleapis.com/css?family=Raleway:400,500,600,200,100&.css'
 
+global-reset()
 normalize-css()
 
+@import 'hljs.css'
+@import 'bm.css'
+
 $wrapper
   center(960px, pad:20px)
 
@@ -29,6 +31,9 @@ html, body
   font-size 16px
   color #606060
   line-height 1.5
+  height 100%
+  margin 0
+  width 100%
 
 .header
   clearfix()
@@ -332,7 +337,7 @@ $title
   margin-top 0
   padding-top 0
 
-.title
+.page-title
   background: #F9F9F9;
   padding 48px 0
 

docs/css/playground.styl

@@ -0,0 +1,38 @@
+@import 'graphiql.css'
+
+.playground
+  position absolute
+  top 106px
+  left 0
+  right 0
+  bottom 0
+  display flex
+  flex-direction row
+  min-width 960px
+
+.playground-schema
+  min-width 400px
+  width 36%
+  border-right 1px solid #E0E0E0
+  box-shadow 0 0 8px rgba(0, 0, 0, 0.15)
+  position relative
+  z-index 100
+  .CodeMirror
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    font-size: 13px;
+    font-family: 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace;
+    color: #141823;
+
+  .cm-def
+    &.called-function
+      background rgba(219, 89, 76, .2)
+      border-radius 1px
+      box-shadow 0 0 0 3px rgba(219, 89, 76, .2)
+
+.playground-graphiql
+  flex 1
+  height 100%

docs/gatsby.config.js

@@ -3,13 +3,24 @@ var jeet = require("jeet");
 var rupture = require("rupture");
 var path = require("path");
 var ExtractTextPlugin = require("extract-text-webpack-plugin");
+var webpack = require("webpack");
 var CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = function(config, env) {
   var IS_STATIC = env === 'static';
+  var entry = config._config.entry.slice();
+  // var output = config._config.output;
+  // output.filename = "[name].js";
+  config._config.entry = {
+    bundle: entry,
+  };
   config.merge({
-     stylus: {
-        use: [nib(), jeet(), rupture()]
+    stylus: {
+      use: [nib(), jeet(), rupture()]
+    },
+    output: {
+      filename: "[name].js",
+      publicPath: "/",
     },
     resolveLoader: {
       root: path.join(__dirname, "node_modules"),
@@ -23,7 +34,9 @@ module.exports = function(config, env) {
       alias: {
         'original-react': path.join(__dirname, "node_modules", "react"),
         'react/lib': path.join(__dirname, "node_modules", "react", "lib"),
-        'react': path.join(__dirname, 'patched-react.js')
+        'react': path.join(__dirname, 'patched-react.js'),
+        'playground-page': (env != "static")?'../playground/page':'../pages/_empty',
+        'playground-wrapper': (env == "develop")?'../playground/page':'../playground/wrapper',
       },
       modulesDirectories: ['./']
     }
@@ -32,6 +45,10 @@ module.exports = function(config, env) {
     config.plugin('extract-css', ExtractTextPlugin, ["app.css"]);
   }
   config.plugin('static', CopyWebpackPlugin, [[{ from: '../static'}]]);
+  config.plugin('define-env', webpack.DefinePlugin, [{"ENV": JSON.stringify(env)}]);
+  // if (env != "static") {
+  //   config.plugin('commons', webpack.optimize.CommonsChunkPlugin, ["commons.js"]);
+  // }
 
   config.loader('stylus', function(cfg) {
     cfg.test = /\.styl$/;

docs/package.json

@@ -16,6 +16,9 @@
     "copy-webpack-plugin": "^0.2.0",
     "extract-text-webpack-plugin": "^0.9.1",
     "gatsby": "^0.7.2",
+    "graphiql": "^0.4.2",
+    "graphql": "^0.4.13",
+    "codemirror": "5.9.0",
     "jeet": "^6.1.2",
     "lodash": "^3.10.1",
     "nib": "^1.1.0",

docs/pages/_empty.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+class Empty extends React.Component {
+    render() {
+      return <div />;
+    }
+}
+
+module.exports = Empty;

docs/pages/_template.js

@@ -14,7 +14,7 @@ class Template extends React.Component {
     return (
       <div>
         <Menu width={200} right>
-            <span><Link to="/try/">Try it out</Link></span>
+            <span><Link to="/playground/">Try it out</Link></span>
             <span><Link to="/docs/quickstart/" className={path.indexOf('/docs')==0?"active":null}>Docs</Link></span>
             <span><Link to="/community/">Community</Link></span>
             <a href="https://github.com/graphql-python/graphene/">Github</a>
@@ -26,7 +26,7 @@ class Template extends React.Component {
                     Graphene
                 </Link>
                 <nav className="header-nav">
-                    <Link to="/try/">Try it out</Link>
+                    <Link to="/playground/">Try it out</Link>
                     <Link to="/docs/quickstart/" className={path.indexOf('/docs')==0?"active":null}>Docs</Link>
                     <Link to="/community/">Community</Link>
                     <a href="https://github.com/graphql-python/graphene/">Github</a>

docs/pages/docs/_template.js

@@ -33,7 +33,7 @@ class Template extends React.Component {
     var next_page = pages[next_page_index];
     return (
       <div>
-        <div className="title"><h1>Documentation</h1></div>
+        <div className="page-title"><h1>Documentation</h1></div>
         <div className="docs">
           <aside className="docs-aside">
               {aside_links}

docs/pages/playground.js

@@ -0,0 +1 @@
+module.exports = require('playground-wrapper');

docs/playground/page.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { RouteHandler, Link, State } from 'react-router';
+import CodeMirror from 'codemirror';
+import { graphql } from 'graphql';
+import GraphiQL from 'graphiql';
+import schema from './schema';
+
+import 'codemirror/mode/python/python';
+import '../css/playground.styl';
+
+var baseCode = `import graphene
+
+class Query(graphene.ObjectType):
+    hello = graphene.String()
+    ping = graphene.String(to=graphene.String())
+
+    def resolve_hello(self, args, info):
+        return 'World'
+
+    def resolve_ping(self, args, info):
+        return 'Pinging {}'.format(args.get('to'))
+
+schema = graphene.Schema(query=Query)
+`;
+
+// function graphQLFetcher(graphQLParams) {
+//   return fetch('http://swapi.graphene-python.org/graphql', {
+//     method: 'post',
+//     headers: { 'Content-Type': 'application/json' },
+//     body: JSON.stringify(graphQLParams),
+//   }).then(response => response.json());
+// }
+function graphQLFetcher(graphQLParams) {
+  return graphql(schema, graphQLParams.query);
+}
+// var schema = null;
+
+class Playground extends React.Component {
+  componentDidMount() {
+    this.editor = CodeMirror(ReactDOM.findDOMNode(this.refs.schemaCode), {
+      value: baseCode,
+      mode:  "python",
+      lineNumbers: true,
+      tabSize: 4,
+    });
+    this.markLine(6)
+  }
+  markLine(lineNo) {
+    var mark = this.editor.markText({line: lineNo, ch: 0}, {line: lineNo, ch: 30}, {className: "called-function"});
+    setTimeout(() => {
+        mark.clear();
+    }, 2000);
+  }
+  render() {
+    return (
+      <div className="playground">
+        <div className="playground-schema" ref="schemaCode"/>
+        <div className="playground-graphiql">
+            <GraphiQL ref="graphiql" fetcher={graphQLFetcher} schema={schema} />
+        </div>
+      </div>
+    );
+  }
+}
+
+module.exports = Playground;

docs/playground/schema.js

@@ -0,0 +1,59 @@
+/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+import {
+  GraphQLObjectType,
+  GraphQLSchema,
+  GraphQLString,
+} from 'graphql';
+
+
+var GREETINGS = {
+  hello: 'Hello worlasdfasdfasssdfasdfasdasdd',
+};
+
+/**
+ * Objects.
+ * Build up a portrait of your data universe
+ * using the object type. Here, we define a
+ * type of object that has a 'hello' field
+ * that is of the string type.
+ */
+var GreetingsType = new GraphQLObjectType({
+  name: 'Greetings',
+  fields: () => ({
+    hello: {type: GraphQLString},
+  }),
+});
+
+/**
+ * The schema.
+ * Here we export a schema that offers one root
+ * field named 'greetings', and a method to
+ * resolve its data.
+ *
+ * To learn more about writing GraphQL schemas for Relay, visit:
+ *   https://github.com/graphql/graphql-relay-js
+ */
+export default new GraphQLSchema({
+  query: new GraphQLObjectType({
+    name: 'Query',
+    fields: () => ({
+      greetings: {
+        type: GreetingsType,
+        // Here we define a resolver that returns
+        // the data defined above. Were this schema
+        // executing on the server side, you could
+        // write a resolve method that fetches
+        // live data from a database.
+        resolve: () => GREETINGS,
+      },
+    }),
+  }),
+});

docs/playground/wrapper.js

@@ -0,0 +1,22 @@
+// require.ensure([], function(require) {
+//   require.include('../playground/page');
+// });  
+var React = require('react');
+class App extends React.Component {
+  constructor() {
+    super();
+    this.state = { currentComponent: null };
+  }
+  componentDidMount() {
+    require(["playground-page"], (Playground) =>{
+      this.setState({
+        currentComponent: Playground
+      });
+    });
+  }
+  render() {
+    var Current = this.state.currentComponent;
+    return Current?<Current />:null;
+  }
+}
+module.exports = App;

docs/wrappers/md.js

@@ -13,7 +13,7 @@ class Markdown extends React.Component {
     return (
       <DocumentTitle title={`${post.title?post.title+' - ':''}${this.props.config.siteTitle}`}>
         <div>
-          {showTitle?<div className="title">
+          {showTitle?<div className="page-title">
             <h1>{post.title}</h1>
           </div>:null}
           <div className="markdown">