diff --git a/.gitignore b/.gitignore index 57bee153..e6447ce7 100644 --- a/.gitignore +++ b/.gitignore @@ -61,3 +61,14 @@ target/ /tests/django.sqlite + +/graphene/index.json +/graphene/meta.json + +/meta.json +/index.json + +/docs/playground/graphene-js/pypyjs-release-nojit/ +/docs/static/playground/lib + +/docs/static/playground diff --git a/.travis.yml b/.travis.yml index 6e25621b..ac80f4b0 100644 --- a/.travis.yml +++ b/.travis.yml @@ -6,13 +6,79 @@ python: - 3.4 - 3.5 - pypy -cache: pip +cache: + directories: + - .cache/pip/ + - $HOME/.cache/pip + - docs/node_modules/ + - $HOME/docs/node_modules +before_install: +- | + if [ "$TEST_TYPE" != build_website ] && \ + ! git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)|(^(docs))/' + then + echo "Only docs were updated, stopping build process." + exit + fi install: -- pip install --cache-dir $HOME/.cache/pip pytest pytest-cov coveralls flake8 six blinker pytest-django -- pip install --cache-dir $HOME/.cache/pip -e .[django] -- python setup.py develop +- | + if [ "$TEST_TYPE" = build ]; then + pip install --download-cache $HOME/.cache/pip/ pytest pytest-cov coveralls six pytest-django + pip install --download-cache $HOME/.cache/pip/ -e .[django] + python setup.py develop + elif [ "$TEST_TYPE" = build_website ]; then + pip install --download-cache $HOME/.cache/pip/ -e . + python setup.py develop + elif [ "$TEST_TYPE" = lint ]; then + pip install --download-cache $HOME/.cache/pip/ flake8 + fi script: -- py.test --cov=graphene -- flake8 +- | + if [ "$TEST_TYPE" = build_website ]; then + if [ "$TRAVIS_BRANCH" = "master" ] && [ "$TRAVIS_PULL_REQUEST" = false ]; then + echo "Building the web." + nvm install 4.0 + + GH_PAGES_DIR="$TRAVIS_BUILD_DIR"/docs/public + git config --global user.name "Travis CI" + git config --global user.email "travis@graphene-python.org" + git clone --branch gh-pages --depth=50 \ + https://graphql-python-bot@github.com/graphql-python/graphene.git \ + $GH_PAGES_DIR + cd docs + ./playground/graphene-js/build.sh + npm run deploy + cd $GH_PAGES_DIR + git status + git add --intent-to-add . + if ! git diff-index --quiet HEAD --; then + git add -A . + git commit -m "Rebuild website" + git push "https://${GITHUB_TOKEN}@github.com/graphql-python/graphene.git" gh-pages + fi + exit + fi + elif [ "$TEST_TYPE" = lint ]; then + echo "Checking Python code lint." + flake8 + exit + elif [ "$TEST_TYPE" = build ]; then + py.test --cov=graphene + fi after_success: -- coveralls +- | + if [ "$TEST_TYPE" = build ]; then + coveralls + fi +env: + matrix: + - TEST_TYPE=build + global: + secure: SQC0eCWCWw8bZxbLE8vQn+UjJOp3Z1m779s9SMK3lCLwJxro/VCLBZ7hj4xsrq1MtcFO2U2Kqf068symw4Hr/0amYI3HFTCFiwXAC3PAKXeURca03eNO2heku+FtnQcOjBanExTsIBQRLDXMOaUkf3MIztpLJ4LHqMfUupKmw9YSB0v40jDbSN8khBnndFykmOnVVHznFp8USoN5F0CiPpnfEvHnJkaX76lNf7Kc9XNShBTTtJsnsHMhuYQeInt0vg9HSjoIYC38Tv2hmMj1myNdzyrHF+LgRjI6ceGi50ApAnGepXC/DNRhXROfECKez+LON/ZSqBGdJhUILqC8A4WmWmIjNcwitVFp3JGBqO7LULS0BI96EtSLe8rD1rkkdTbjivajkbykM1Q0Tnmg1adzGwLxRUbTq9tJQlTTkHBCuXIkpKb1mAtb/TY7A6BqfnPi2xTc/++qEawUG7ePhscdTj0IBrUfZsUNUYZqD8E8XbSWKIuS3SHE+cZ+s/kdAsm4q+FFAlpZKOYGxIkwvgyfu4/Plfol4b7X6iAP9J3r1Kv0DgBVFst5CXEwzZs19/g0CgokQbCXf1N+xeNnUELl6/fImaR3RKP22EaABoil4z8vzl4EqxqVoH1nfhE+WlpryXsuSaF/1R+WklR7aQ1FwoCk8V8HxM2zrj4tI8k= +matrix: + fast_finish: true + include: + - python: '2.7' + env: TEST_TYPE=build_website + - python: '2.7' + env: TEST_TYPE=lint diff --git a/README.md b/README.md index 115d4a14..e36ac257 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # ![Graphene Logo](http://graphene-python.org/favicon.png) [Graphene](http://graphene-python.org) [![Build Status](https://travis-ci.org/graphql-python/graphene.svg?branch=master)](https://travis-ci.org/graphql-python/graphene) [![PyPI version](https://badge.fury.io/py/graphene.svg)](https://badge.fury.io/py/graphene) [![Coverage Status](https://coveralls.io/repos/graphql-python/graphene/badge.svg?branch=master&service=github)](https://coveralls.io/github/graphql-python/graphene?branch=master) -Graphene is a Python library for building GraphQL schemas/types fast and easily. +[Graphene](http://graphene-python.org) is a Python library for building GraphQL schemas/types fast and easily. - **Easy to use:** Graphene helps you use GraphQL in Python without effort. - **Relay:** Graphene has builtin support for Relay @@ -10,6 +10,7 @@ Graphene is a Python library for building GraphQL schemas/types fast and easily. *What is supported in this Python version?* **Everything**: Interfaces, ObjectTypes, Scalars, Unions and Relay (Nodes, Connections), in addition to queries, mutations and subscriptions. +**NEW**!: [Try graphene online](http://graphene-python.org/playground/) ## Installation diff --git a/README.rst b/README.rst index ea5e2635..1d427010 100644 --- a/README.rst +++ b/README.rst @@ -1,8 +1,8 @@ |Graphene Logo| `Graphene `__ |Build Status| |PyPI version| |Coverage Status| ========================================================================================================= -Graphene is a Python library for building GraphQL schemas/types fast and -easily. +`Graphene `__ is a Python library for +building GraphQL schemas/types fast and easily. - **Easy to use:** Graphene helps you use GraphQL in Python without effort. @@ -16,6 +16,9 @@ easily. ObjectTypes, Scalars, Unions and Relay (Nodes, Connections), in addition to queries, mutations and subscriptions. +**NEW**!: `Try graphene +online `__ + Installation ------------ diff --git a/docs/.babelrc b/docs/.babelrc new file mode 100644 index 00000000..ce840ab8 --- /dev/null +++ b/docs/.babelrc @@ -0,0 +1,3 @@ +{ + "stage": 0 +} \ No newline at end of file diff --git a/docs/.gitignore b/docs/.gitignore new file mode 100644 index 00000000..548fd2f1 --- /dev/null +++ b/docs/.gitignore @@ -0,0 +1,29 @@ +# Logs +logs +*.log + +# Runtime data +pids +*.pid +*.seed + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directory +# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git +node_modules + +public/ diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 00000000..7ecaea8e --- /dev/null +++ b/docs/README.md @@ -0,0 +1,43 @@ +# Graphene Docs + +Graphene docs are powered by [gatsby](https://github.com/gatsbyjs/gatsby). + + +## Installation + +For running locally this docs. You have to execute +```bash +npm install -g gatsby && npm install +``` + +And then + +```bash +gatsby develop +``` + +## Playground + +If you want to have the playground running too, just execute + +``` +./playground/graphene-js/build.sh +``` + +This command will clone the [pypyjs-release-nojit](https://github.com/pypyjs/pypyjs-release-nojit) repo, update it with the latest graphene, graphql-core and graphql-relay code, and make it available for the `/playground` view in the docs. + + +## Build + +For building the docs into the `public` dir, just run: + +```bash +npm run build +``` + + +## Automation + +Thanks to [Travis](https://github.com/graphql-python/graphene/blob/master/.travis.yml#L39-L58), we automated the way documentation is updated in the `gh-pages` branch. + +Each time we modify the docs in the `master` branch the travis job runs and updates the `gh-pages` branch with the latest code, so [Graphene's website](http://graphene-python.org) have always the latest docs. diff --git a/docs/app.js b/docs/app.js new file mode 100644 index 00000000..593ec9fe --- /dev/null +++ b/docs/app.js @@ -0,0 +1,19 @@ +exports.loadContext = function(callback) { + var context; + context = require.context('./pages', true); + if (module.hot) { + module.hot.accept(context.id, function() { + context = require.context('./pages', true); + return callback(context); + }); + } + return callback(context); +}; + +exports.onRouteChange = function(state) { + if (typeof window !== "undefined" && window.ga) { + window.ga('send', 'pageview', { + page: state.pathname + }); + } +} diff --git a/docs/assets/icon.js b/docs/assets/icon.js new file mode 100644 index 00000000..1d0b3c61 --- /dev/null +++ b/docs/assets/icon.js @@ -0,0 +1,7 @@ +import React from 'react'; + +export default class Icon extends React.Component { + render() { + return + } +} diff --git a/docs/assets/logo.svg b/docs/assets/logo.svg new file mode 100644 index 00000000..297830fe --- /dev/null +++ b/docs/assets/logo.svg @@ -0,0 +1,10 @@ + diff --git a/docs/config.toml b/docs/config.toml new file mode 100644 index 00000000..569605d9 --- /dev/null +++ b/docs/config.toml @@ -0,0 +1,19 @@ +siteTitle = "Graphene" +ga = "UA-12613282-7" + +[docs.quickstart] + name = "Quickstart" + pages = [ + "/docs/quickstart/", + "/docs/quickstart-django/", + ] + +[docs.walkthrough] + name = "Walkthrough" + pages = [ + "/docs/interfaces/", + "/docs/objecttypes/", + "/docs/mutations/", + "/docs/basic-types/", + "/docs/relay/", + ] diff --git a/docs/css/bm.css b/docs/css/bm.css new file mode 100644 index 00000000..dad8480f --- /dev/null +++ b/docs/css/bm.css @@ -0,0 +1,41 @@ +/* Position and sizing of burger button */ +.bm-burger-button { + position: absolute; + width: 24px; + height: 20px; + right: 36px; + top: 42px; +} + +/* Color/shape of burger icon bars */ +.bm-burger-bars { + background: white; +} + +/* Color of close button cross */ +.bm-cross { + background: #bdc3c7; + margin-top: -1px; + width: 1px!important; + height: 18px!important; +} + +/* Background color of sidebar */ +.bm-menu { + background: #3c3c3c; + box-shadow: -1px 0 5px rgba(0,0,0,.15); +} + +/* Morph shape necessary with bubble or elastic */ +.bm-morph-shape { + fill: white; +} + +.bm-menu-wrap { + z-index: 10000!important; +} +/* General menu styles */ +.bm-menu { + padding: 2.5em 1.5em 0; + font-size: 1.15em; +} diff --git a/docs/css/graphiql.css b/docs/css/graphiql.css new file mode 100644 index 00000000..5cc95b66 --- /dev/null +++ b/docs/css/graphiql.css @@ -0,0 +1,1079 @@ +#graphiql-container { + color: #141823; + width: 100%; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: row; + flex-direction: row; + height: 100%; + font-family: system, -apple-system, 'San Francisco', '.SFNSDisplay-Regular', 'Segoe UI', Segoe, 'Segoe WP', 'Helvetica Neue', helvetica, 'Lucida Grande', arial, sans-serif; + font-size: 14px; +} + +#graphiql-container .editorWrap { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + -webkit-flex: 1; + flex: 1; +} + +#graphiql-container .title { + display: none; + font-size: 18px; +} + +#graphiql-container .title em { + font-family: georgia; + font-size: 19px; +} + +#graphiql-container .topBarWrap { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: row; + flex-direction: row; + background: #F9F9F9; + height: 48px; +} + +#graphiql-container .topBar { + border-bottom: solid 1px #d0d0d0; + cursor: default; + -webkit-user-select: none; + user-select: none; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: row; + flex-direction: row; + -webkit-flex: 1; + flex: 1; + -webkit-align-items: center; + align-items: center; +} + +#graphiql-container .docExplorerShow { + background: transparent; + border: none; + border-bottom: solid 1px #d0d0d0; + border-left: solid 1px rgba(0, 0, 0, 0.2); + color: #3B5998; + cursor: pointer; + font-size: 14px; + outline: 0; + padding: 2px 20px 0 18px; +} + +#graphiql-container .docExplorerShow:before { + border-left: 2px solid #3B5998; + border-top: 2px solid #3B5998; + content: ''; + display: inline-block; + height: 9px; + margin: 0 3px -1px 0; + position: relative; + width: 9px; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +#graphiql-container .editorBar { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: row; + flex-direction: row; + -webkit-flex: 1; + flex: 1; +} + +#graphiql-container .queryWrap { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + -webkit-flex: 1; + flex: 1; +} + +#graphiql-container .resultWrap { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + -webkit-flex: 1; + flex: 1; + border-left: solid 1px #e0e0e0; +} + +#graphiql-container .docExplorerWrap { + box-shadow: 0 0 8px rgba(0, 0, 0, 0.15); + z-index: 3; + position: relative; + background: white; +} + +#graphiql-container .docExplorerResizer { + cursor: col-resize; + height: 100%; + left: -5px; + position: absolute; + top: 0; + width: 10px; + z-index: 10; +} + +#graphiql-container .docExplorerHide { + cursor: pointer; + font-size: 18px; + margin: -7px -8px -6px 0; + padding: 18px 16px 15px 12px; +} + +#graphiql-container .query-editor { + -webkit-flex: 1; + flex: 1; + position: relative; +} + +#graphiql-container .variable-editor { + height: 30px; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + position: relative; +} + +#graphiql-container .variable-editor-title { + background: #eeeeee; + border-bottom: solid 1px #d6d6d6; + border-top: solid 1px #e0e0e0; + color: #777; + font-variant: small-caps; + font-weight: bold; + letter-spacing: 1px; + line-height: 14px; + padding: 6px 0 8px 43px; + text-transform: lowercase; + -webkit-user-select: none; + user-select: none; +} + +#graphiql-container .codemirrorWrap { + -webkit-flex: 1; + flex: 1; + position: relative; +} + +#graphiql-container .result-window { + -webkit-flex: 1; + flex: 1; + position: relative; +} + +#graphiql-container .footer { + background: #f6f7f8; + border-left: solid 1px #e0e0e0; + border-top: solid 1px #e0e0e0; + margin-left: 12px; + position: relative; +} + +#graphiql-container .footer:before { + background: #eeeeee; + bottom: 0; + content: " "; + left: -13px; + position: absolute; + top: -1px; + width: 12px; +} + +#graphiql-container .result-window .CodeMirror { + background: #f6f7f8; +} + +#graphiql-container .result-window .CodeMirror-gutters { + background-color: #eeeeee; + border-color: #e0e0e0; + cursor: col-resize; +} + +#graphiql-container .result-window .CodeMirror-foldgutter, +#graphiql-container .result-window .CodeMirror-foldgutter-open:after, +#graphiql-container .result-window .CodeMirror-foldgutter-folded:after { + padding-left: 3px; +} + +#graphiql-container .execute-button { + background: transparent; + border: solid 1px #777; + border-radius: 17px; + cursor: pointer; + fill: #444; + height: 34px; + margin: 0 14px 0 14px; + padding: 0; + width: 34px; +} +#graphiql-container .execute-button path { + fill: #777; +} +#graphiql-container .execute-button:hover { + border-color: #333; +} +#graphiql-container .execute-button:hover path { + fill: #333; +} + +#graphiql-container .execute-button:active { + background: white; + border-color: #db594c; +} +#graphiql-container .execute-button:active path { + fill: #db594c; +} + +#graphiql-container .execute-button:focus { + outline: 0; +} + +#graphiql-container .CodeMirror-scroll { + -webkit-overflow-scrolling: touch; +} + +#graphiql-container .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; +} + +#graphiql-container .CodeMirror-lines { + padding: 20px 0; +} + +.CodeMirror-hint-information .content { + -webkit-box-orient: vertical; + color: #141823; + display: -webkit-box; + font-family: system, -apple-system, 'San Francisco', '.SFNSDisplay-Regular', 'Segoe UI', Segoe, 'Segoe WP', 'Helvetica Neue', helvetica, 'Lucida Grande', arial, sans-serif; + font-size: 13px; + -webkit-line-clamp: 3; + line-height: 16px; + max-height: 48px; + overflow: hidden; + text-overflow: -o-ellipsis-lastline; +} + +.CodeMirror-hint-information .content p:first-child { + margin-top: 0; +} + +.CodeMirror-hint-information .content p:last-child { + margin-bottom: 0; +} + +.CodeMirror-hint-information .infoType { + color: #30a; + margin-right: 0.5em; + display: inline; + cursor: pointer; +} + +.autoInsertedLeaf.cm-property { + padding: 2px 4px 1px; + margin: -2px -4px -1px; + border-radius: 2px; + border-bottom: solid 2px rgba(255, 255, 255, 0); + -webkit-animation-duration: 6s; + -moz-animation-duration: 6s; + animation-duration: 6s; + -webkit-animation-name: insertionFade; + -moz-animation-name: insertionFade; + animation-name: insertionFade; +} + +@-moz-keyframes insertionFade { + from, to { + background: rgba(255, 255, 255, 0); + border-color: rgba(255, 255, 255, 0); + } + + 15%, 85% { + background: #fbffc9; + border-color: #f0f3c0; + } +} + +@-webkit-keyframes insertionFade { + from, to { + background: rgba(255, 255, 255, 0); + border-color: rgba(255, 255, 255, 0); + } + + 15%, 85% { + background: #fbffc9; + border-color: #f0f3c0; + } +} + +@keyframes insertionFade { + from, to { + background: rgba(255, 255, 255, 0); + border-color: rgba(255, 255, 255, 0); + } + + 15%, 85% { + background: #fbffc9; + border-color: #f0f3c0; + } +} + +div.CodeMirror-lint-tooltip { + background-color: white; + color: #141823; + border: 0; + border-radius: 2px; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); + font-family: system, -apple-system, 'San Francisco', '.SFNSDisplay-Regular', 'Segoe UI', Segoe, 'Segoe WP', 'Helvetica Neue', helvetica, 'Lucida Grande', arial, sans-serif; + font-size: 13px; + line-height: 16px; + padding: 6px 10px; + opacity: 0; + transition: opacity 0.15s; + -moz-transition: opacity 0.15s; + -webkit-transition: opacity 0.15s; + -o-transition: opacity 0.15s; + -ms-transition: opacity 0.15s; +} + +div.CodeMirror-lint-message-error, div.CodeMirror-lint-message-warning { + padding-left: 23px; +} + +/* COLORS */ + +#graphiql-container .CodeMirror-foldmarker { + border-radius: 4px; + background: #08f; + background: -webkit-linear-gradient(#43A8FF, #0F83E8); + background: linear-gradient(#43A8FF, #0F83E8); + + color: white; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1); + font-family: arial; + line-height: 0; + padding: 0px 4px 1px; + font-size: 12px; + margin: 0 3px; + text-shadow: 0 -1px rgba(0, 0, 0, 0.1); +} + +#graphiql-container div.CodeMirror span.CodeMirror-matchingbracket { + color: #555; + text-decoration: underline; +} + +#graphiql-container div.CodeMirror span.CodeMirror-nonmatchingbracket { + color: #f00; +} + +/* Comment */ +#graphiql-container .cm-comment { + color: #999; +} + +/* Punctuation */ +#graphiql-container .cm-punctuation { + color: #555; +} + +/* Keyword */ +#graphiql-container .cm-keyword { + color: #B11A04; +} + +/* OperationName, FragmentName */ +#graphiql-container .cm-def { + color: #D2054E; +} + +/* FieldName */ +#graphiql-container .cm-property { + color: #1F61A0; +} + +/* FieldAlias */ +#graphiql-container .cm-qualifier { + color: #1C92A9; +} + +/* ArgumentName and ObjectFieldName */ +#graphiql-container .cm-attribute { + color: #8B2BB9; +} + +/* Number */ +#graphiql-container .cm-number { + color: #2882F9; +} + +/* String */ +#graphiql-container .cm-string { + color: #D64292; +} + +/* Boolean */ +#graphiql-container .cm-builtin { + color: #D47509; +} + +/* EnumValue */ +#graphiql-container .cm-string-2 { + color: #0B7FC7; +} + +/* Variable */ +#graphiql-container .cm-variable { + color: #397D13; +} + +/* Directive */ +#graphiql-container .cm-meta { + color: #B33086; +} + +/* Type */ +#graphiql-container .cm-atom { + color: #CA9800; +} +/* BASICS */ + +.CodeMirror { + /* Set height, width, borders, and global font properties here */ + font-family: monospace; + height: 300px; + color: black; +} + +/* PADDING */ + +.CodeMirror-lines { + padding: 4px 0; /* Vertical padding around content */ +} +.CodeMirror pre { + padding: 0 4px; /* Horizontal padding of content */ +} + +.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { + background-color: white; /* The little square between H and V scrollbars */ +} + +/* GUTTER */ + +.CodeMirror-gutters { + border-right: 1px solid #ddd; + background-color: #f7f7f7; + white-space: nowrap; +} +.CodeMirror-linenumbers {} +.CodeMirror-linenumber { + padding: 0 3px 0 5px; + min-width: 20px; + text-align: right; + color: #999; + white-space: nowrap; +} + +.CodeMirror-guttermarker { color: black; } +.CodeMirror-guttermarker-subtle { color: #999; } + +/* CURSOR */ + +.CodeMirror div.CodeMirror-cursor { + border-left: 1px solid black; +} +/* Shown when moving in bi-directional text */ +.CodeMirror div.CodeMirror-secondarycursor { + border-left: 1px solid silver; +} +.CodeMirror.cm-fat-cursor div.CodeMirror-cursor { + width: auto; + border: 0; + background: #7e7; +} +.CodeMirror.cm-fat-cursor div.CodeMirror-cursors { + z-index: 1; +} + +.cm-animate-fat-cursor { + width: auto; + border: 0; + -webkit-animation: blink 1.06s steps(1) infinite; + -moz-animation: blink 1.06s steps(1) infinite; + animation: blink 1.06s steps(1) infinite; +} +@-moz-keyframes blink { + 0% { background: #7e7; } + 50% { background: none; } + 100% { background: #7e7; } +} +@-webkit-keyframes blink { + 0% { background: #7e7; } + 50% { background: none; } + 100% { background: #7e7; } +} +@keyframes blink { + 0% { background: #7e7; } + 50% { background: none; } + 100% { background: #7e7; } +} + +/* Can style cursor different in overwrite (non-insert) mode */ +div.CodeMirror-overwrite div.CodeMirror-cursor {} + +.cm-tab { display: inline-block; text-decoration: inherit; } + +.CodeMirror-ruler { + border-left: 1px solid #ccc; + position: absolute; +} + +/* DEFAULT THEME */ + +.cm-s-default .cm-keyword {color: #708;} +.cm-s-default .cm-atom {color: #219;} +.cm-s-default .cm-number {color: #164;} +.cm-s-default .cm-def {color: #00f;} +.cm-s-default .cm-variable, +.cm-s-default .cm-punctuation, +.cm-s-default .cm-property, +.cm-s-default .cm-operator {} +.cm-s-default .cm-variable-2 {color: #05a;} +.cm-s-default .cm-variable-3 {color: #085;} +.cm-s-default .cm-comment {color: #a50;} +.cm-s-default .cm-string {color: #a11;} +.cm-s-default .cm-string-2 {color: #f50;} +.cm-s-default .cm-meta {color: #555;} +.cm-s-default .cm-qualifier {color: #555;} +.cm-s-default .cm-builtin {color: #30a;} +.cm-s-default .cm-bracket {color: #997;} +.cm-s-default .cm-tag {color: #170;} +.cm-s-default .cm-attribute {color: #00c;} +.cm-s-default .cm-header {color: blue;} +.cm-s-default .cm-quote {color: #090;} +.cm-s-default .cm-hr {color: #999;} +.cm-s-default .cm-link {color: #00c;} + +.cm-negative {color: #d44;} +.cm-positive {color: #292;} +.cm-header, .cm-strong {font-weight: bold;} +.cm-em {font-style: italic;} +.cm-link {text-decoration: underline;} +.cm-strikethrough {text-decoration: line-through;} + +.cm-s-default .cm-error {color: #f00;} +.cm-invalidchar {color: #f00;} + +.CodeMirror-composing { border-bottom: 2px solid; } + +/* Default styles for common addons */ + +div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;} +div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} +.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); } +.CodeMirror-activeline-background {background: #e8f2ff;} + +/* STOP */ + +/* The rest of this file contains styles related to the mechanics of + the editor. You probably shouldn't touch them. */ + +.CodeMirror { + position: relative; + overflow: hidden; + background: white; +} + +.CodeMirror-scroll { + overflow: scroll !important; /* Things will break if this is overridden */ + /* 30px is the magic margin used to hide the element's real scrollbars */ + /* See overflow: hidden in .CodeMirror */ + margin-bottom: -30px; margin-right: -30px; + padding-bottom: 30px; + height: 100%; + outline: none; /* Prevent dragging from highlighting the element */ + position: relative; +} +.CodeMirror-sizer { + position: relative; + border-right: 30px solid transparent; +} + +/* The fake, visible scrollbars. Used to force redraw during scrolling + before actuall scrolling happens, thus preventing shaking and + flickering artifacts. */ +.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { + position: absolute; + z-index: 6; + display: none; +} +.CodeMirror-vscrollbar { + right: 0; top: 0; + overflow-x: hidden; + overflow-y: scroll; +} +.CodeMirror-hscrollbar { + bottom: 0; left: 0; + overflow-y: hidden; + overflow-x: scroll; +} +.CodeMirror-scrollbar-filler { + right: 0; bottom: 0; +} +.CodeMirror-gutter-filler { + left: 0; bottom: 0; +} + +.CodeMirror-gutters { + position: absolute; left: 0; top: 0; + z-index: 3; +} +.CodeMirror-gutter { + white-space: normal; + height: 100%; + display: inline-block; + margin-bottom: -30px; + /* Hack to make IE7 behave */ + *zoom:1; + *display:inline; +} +.CodeMirror-gutter-wrapper { + position: absolute; + z-index: 4; + height: 100%; +} +.CodeMirror-gutter-elt { + position: absolute; + cursor: default; + z-index: 4; +} +.CodeMirror-gutter-wrapper { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.CodeMirror-lines { + cursor: text; + min-height: 1px; /* prevents collapsing before first draw */ +} +.CodeMirror pre { + /* Reset some styles that the rest of the page might have set */ + -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; + border-width: 0; + background: transparent; + font-family: inherit; + font-size: inherit; + margin: 0; + white-space: pre; + word-wrap: normal; + line-height: inherit; + color: inherit; + z-index: 2; + position: relative; + overflow: visible; + -webkit-tap-highlight-color: transparent; +} +.CodeMirror-wrap pre { + word-wrap: break-word; + white-space: pre-wrap; + word-break: normal; +} + +.CodeMirror-linebackground { + position: absolute; + left: 0; right: 0; top: 0; bottom: 0; + z-index: 0; +} + +.CodeMirror-linewidget { + position: relative; + z-index: 2; + overflow: auto; +} + +.CodeMirror-widget {} + +.CodeMirror-code { + outline: none; +} + +/* Force content-box sizing for the elements where we expect it */ +.CodeMirror-scroll, +.CodeMirror-sizer, +.CodeMirror-gutter, +.CodeMirror-gutters, +.CodeMirror-linenumber { + -moz-box-sizing: content-box; + box-sizing: content-box; +} + +.CodeMirror-measure { + position: absolute; + width: 100%; + height: 0; + overflow: hidden; + visibility: hidden; +} +.CodeMirror-measure pre { position: static; } + +.CodeMirror div.CodeMirror-cursor { + position: absolute; + border-right: none; + width: 0; +} + +div.CodeMirror-cursors { + visibility: hidden; + position: relative; + z-index: 3; +} +.CodeMirror-focused div.CodeMirror-cursors { + visibility: visible; +} + +.CodeMirror-selected { background: #d9d9d9; } +.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } +.CodeMirror-crosshair { cursor: crosshair; } +.CodeMirror ::selection { background: #d7d4f0; } +.CodeMirror ::-moz-selection { background: #d7d4f0; } + +.cm-searching { + background: #ffa; + background: rgba(255, 255, 0, .4); +} + +/* IE7 hack to prevent it from returning funny offsetTops on the spans */ +.CodeMirror span { *vertical-align: text-bottom; } + +/* Used to force a border model for a node */ +.cm-force-border { padding-right: .1px; } + +@media print { + /* Hide the cursor when printing */ + .CodeMirror div.CodeMirror-cursors { + visibility: hidden; + } +} + +/* See issue #2901 */ +.cm-tab-wrap-hack:after { content: ''; } + +/* Help users use markselection to safely style text background */ +span.CodeMirror-selectedtext { background: none; } +#graphiql-container .doc-explorer { + background: white; +} + +#graphiql-container .doc-explorer-title-bar { + cursor: default; + display: -webkit-flex; + display: flex; + height: 34px; + line-height: 14px; + padding: 8px 8px 5px; + position: relative; + -webkit-user-select: none; + user-select: none; +} + +#graphiql-container .doc-explorer-title { + padding: 10px 0 10px 10px; + font-weight: bold; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + overflow-x: hidden; + -webkit-flex: 1; + flex: 1; +} + +#graphiql-container .doc-explorer-back { + color: #3B5998; + cursor: pointer; + margin: -7px 0 -6px -8px; + overflow-x: hidden; + padding: 17px 12px 16px 16px; + text-overflow: ellipsis; + white-space: nowrap; +} + +#graphiql-container .doc-explorer-back:before { + border-left: 2px solid #3B5998; + border-top: 2px solid #3B5998; + content: ''; + display: inline-block; + height: 9px; + margin: 0 3px -1px 0; + position: relative; + width: 9px; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +#graphiql-container .doc-explorer-rhs { + position: relative; +} + +#graphiql-container .doc-explorer-contents { + background-color: #ffffff; + border-top: 1px solid #d6d6d6; + bottom: 0; + left: 0; + min-width: 300px; + overflow-y: auto; + padding: 20px 15px; + position: absolute; + right: 0; + top: 47px; +} + +#graphiql-container .doc-type-description p:first-child , +#graphiql-container .doc-type-description blockquote:first-child { + margin-top: 0; +} + +#graphiql-container .doc-explorer-contents a { + cursor: pointer; + text-decoration: none; +} + +#graphiql-container .doc-explorer-contents a:hover { + text-decoration: underline; +} + +#graphiql-container .doc-value-description { + padding: 4px 0 8px 12px; +} + +#graphiql-container .doc-category { + margin: 20px 0; +} + +#graphiql-container .doc-category-title { + border-bottom: 1px solid #e0e0e0; + color: #777; + cursor: default; + font-size: 14px; + font-variant: small-caps; + font-weight: bold; + letter-spacing: 1px; + margin: 0 -15px 10px 0; + padding: 10px 0; + -webkit-user-select: none; + user-select: none; +} + +#graphiql-container .doc-category-item { + margin: 12px 0; + color: #555; +} + +#graphiql-container .keyword { + color: #B11A04; +} + +#graphiql-container .type-name { + color: #CA9800; +} + +#graphiql-container .field-name { + color: #1F61A0; +} + +#graphiql-container .value-name { + color: #0B7FC7; +} + +#graphiql-container .arg-name { + color: #8B2BB9; +} + +#graphiql-container .arg:after { + content: ', '; +} + +#graphiql-container .arg:last-child:after { + content: ''; +} +.CodeMirror-foldmarker { + color: blue; + text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px; + font-family: arial; + line-height: .3; + cursor: pointer; +} +.CodeMirror-foldgutter { + width: .7em; +} +.CodeMirror-foldgutter-open, +.CodeMirror-foldgutter-folded { + cursor: pointer; +} +.CodeMirror-foldgutter-open:after { + content: "\25BE"; +} +.CodeMirror-foldgutter-folded:after { + content: "\25B8"; +} +/* The lint marker gutter */ +.CodeMirror-lint-markers { + width: 16px; +} + +.CodeMirror-lint-tooltip { + background-color: infobackground; + border: 1px solid black; + border-radius: 4px 4px 4px 4px; + color: infotext; + font-family: monospace; + font-size: 10pt; + overflow: hidden; + padding: 2px 5px; + position: fixed; + white-space: pre; + white-space: pre-wrap; + z-index: 100; + max-width: 600px; + opacity: 0; + transition: opacity .4s; + -moz-transition: opacity .4s; + -webkit-transition: opacity .4s; + -o-transition: opacity .4s; + -ms-transition: opacity .4s; +} + +.CodeMirror-lint-mark-error, .CodeMirror-lint-mark-warning { + background-position: left bottom; + background-repeat: repeat-x; +} + +.CodeMirror-lint-mark-error { + background-image: + url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==") + ; +} + +.CodeMirror-lint-mark-warning { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII="); +} + +.CodeMirror-lint-marker-error, .CodeMirror-lint-marker-warning { + background-position: center center; + background-repeat: no-repeat; + cursor: pointer; + display: inline-block; + height: 16px; + width: 16px; + vertical-align: middle; + position: relative; +} + +.CodeMirror-lint-message-error, .CodeMirror-lint-message-warning { + padding-left: 18px; + background-position: top left; + background-repeat: no-repeat; +} + +.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII="); +} + +.CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII="); +} + +.CodeMirror-lint-marker-multiple { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC"); + background-repeat: no-repeat; + background-position: right bottom; + width: 100%; height: 100%; +} +.CodeMirror-hints { + background: white; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); + font-family: 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace; + font-size: 13px; + list-style: none; + margin: 0; + margin-left: -6px; + max-height: 14.5em; + overflow-y: auto; + overflow: hidden; + padding: 0; + position: absolute; + z-index: 10; +} + +.CodeMirror-hints-wrapper { + background: white; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); + margin-left: -6px; + position: absolute; + z-index: 10; +} + +.CodeMirror-hints-wrapper .CodeMirror-hints { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + position: relative; + margin-left: 0; + z-index: 0; +} + +.CodeMirror-hint { + border-top: solid 1px #f7f7f7; + color: #141823; + cursor: pointer; + margin: 0; + max-width: 300px; + overflow: hidden; + padding: 2px 6px; + white-space: pre; +} + +li.CodeMirror-hint-active { + background-color: #08f; + border-top-color: white; + color: white; +} + +.CodeMirror-hint-information { + border-top: solid 1px #c0c0c0; + max-width: 300px; + padding: 4px 6px; + position: relative; + z-index: 1; +} + +.CodeMirror-hint-information:first-child { + border-bottom: solid 1px #c0c0c0; + border-top: none; + margin-bottom: -1px; +} diff --git a/docs/css/hljs.css b/docs/css/hljs.css new file mode 100644 index 00000000..10019598 --- /dev/null +++ b/docs/css/hljs.css @@ -0,0 +1,70 @@ +/** + * GitHub Gist Theme + * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro + */ + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} diff --git a/docs/css/images/edit.png b/docs/css/images/edit.png new file mode 100644 index 00000000..80646b2f Binary files /dev/null and b/docs/css/images/edit.png differ diff --git a/docs/css/images/edit@2x.png b/docs/css/images/edit@2x.png new file mode 100644 index 00000000..faa87483 Binary files /dev/null and b/docs/css/images/edit@2x.png differ diff --git a/docs/css/images/starwars-icon.png b/docs/css/images/starwars-icon.png new file mode 100644 index 00000000..b99a2a0a Binary files /dev/null and b/docs/css/images/starwars-icon.png differ diff --git a/docs/css/images/starwars-icon@2x.png b/docs/css/images/starwars-icon@2x.png new file mode 100644 index 00000000..7f2239c3 Binary files /dev/null and b/docs/css/images/starwars-icon@2x.png differ diff --git a/docs/css/main.styl b/docs/css/main.styl new file mode 100644 index 00000000..059fffff --- /dev/null +++ b/docs/css/main.styl @@ -0,0 +1,426 @@ +@import 'nib' +@import 'jeet' + +@import 'https://fonts.googleapis.com/css?family=Raleway:400,500,600,200,100&.css' + +normalize-css() + +@import 'hljs.css' +@import 'bm.css' + +$wrapper + center(960px, pad:20px) + +.wrapper + @extend $wrapper + position relative + +a, a:hover + text-decoration none + +a + color rgb(42,93,173) + +p + margin-bottom 1em + +html, body + font-family "Helvetica Neue", Helvetica, Arial, sans-serif + font-weight 300 + font-size 16px + color #606060 + line-height 1.5 + height 100% + margin 0 + width 100% + +.header + clearfix() + position relative + text-align center + background: #DB594C; + background-image: radial-gradient(95% 101%, #E46643 5%, rgba(226,91,72,0.00) 100%) + .logo + width 42px + height @width + vertical-align middle + + h1 + max-width 380px + font-family 'Raleway', sans-serif + font-weight 200 + font-size 42px + color #FFFFFF + line-height 49px + margin 80px auto 40px + z-index 110 + + .get-started + font-family 'Raleway' + display inline-block + margin 0 auto + font-size 13px + color #FFFFFF + padding 0 18px + text-transform uppercase + font-weight 600 + line-height 15px + border 1px solid #FFFFFF + border-radius 2px + padding 12px 18px + z-index 111 + position relative + &:hover + background white + color #E05B49 + text-decoration none + +.header-wrapper + @extend $wrapper + text-align left + padding-top 32px + padding-bottom 32px + position relative + z-index 100 + +.header-extended + padding-bottom 100px + +.header-nav + margin-top 8px + a + font-family 'Raleway' + font-size 13px + color #FFFFFF + margin 0 16px + padding 0 2px + text-transform uppercase + font-weight 600 + line-height 15px + position relative + &.active:before + content: '' + width 5px + height 5px + border-radius 3px + display block + position absolute + background white + left 50% + margin-left -3px + bottom -24px + + +below(600px) + display none + +.bm-burger-button, .bm-menu-wrap, .bm-overlay + display none + +below(600px) + display block + +.bm-burger-button + z-index 300!important + +.bm-overlay + z-index 1000!important + +.bm-item-list + a + font-family 'Raleway' + display block + font-size 15px + color #CCC + margin 6px 0 + padding 10px 6px + text-transform uppercase + font-weight 500 + line-height 20px + position relative + &:hover + color white + +.header-logo + font-family 'Raleway' + font-size 22px + color #FFFFFF + float left + font-weight 500 + text-transform uppercase + text-decoration none + +.header-nav + float right + +.logo + path + stroke-dasharray 250 + stroke-dashoffset 250 + animation logo-dash .9s ease-in-out forwards + animation-delay .12s + g + ellipse + animation logo-dot .3s ease forwards + animation-fill-mode both + transform-origin 50% 50% + &:nth-child(2) + ellipse + animation-delay .1s + &:nth-child(3) + ellipse + animation-delay .2s + &:nth-child(4) + ellipse + animation-delay .3s + &:nth-child(5) + ellipse + animation-delay .4s + &:nth-child(6) + ellipse + animation-delay .5s + &:nth-child(7) + ellipse + animation-delay .6s + &:nth-child(8) + ellipse + animation-delay .7s + +@keyframes logo-dash + to + stroke-dashoffset 0 + +@keyframes logo-dot + from + opacity 0.5 + transform scale(0) + to + opacity 1 + transform scale(1) + +#header-background + z-index 0 + display block + position absolute + width 100% + top 0 + bottom 0 + right 0 + left 0 + +.particles-js-canvas-el + display block + opacity 0 + position absolute + +.starwars-example-wrapper + +below(600px) + margin-bottom 30px + +.starwars-example + background: #3C3C3C + display inline-block + position absolute + right 20px + top -100px + box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25); + border-radius: 100px + font-size 13px + padding 17px 17px 17px 71px + width 236px + box-sizing border-box + color white + font-family 'Raleway' + font-weight 500 + transition all .2s ease-in-out + &:before + content: '' + display block + position absolute + left 20px + top 20px + height 32px + width 32px + image './images/starwars-icon.png' 32px 32px + + &:hover + transform translateY(-3px) + box-shadow 0px 4px 8px 0px rgba(0,0,0,0.32) + + +below(600px) + top -70px + +.improve-document-link + position fixed + right 0 + bottom 70px + transform-origin 100% 100% + background: #999; + border: 1px solid #919191; + border-radius: 3px 3px 0 0; + border-bottom 0 + padding 9px 12px 12px 34px + transform: rotate(270deg) translateX(100%) translateY(3px); + font-size: 11px; + font-weight: 500; + text-transform uppercase + color: #FFFFFF; + letter-spacing: 0.3px; + line-height: 11px; + transition all .2s ease-in-out + &:before + content: '' + display block + position absolute + left 10px + top 8px + height 16px + width 16px + image './images/edit.png' 16px 16px + &:hover + transform: rotate(270deg) translateX(100%) + background #666 + border-color #555 + +below(600px) + display none + +$title + display block + font-family: 'Raleway'; + font-weight 500 + line-height 1.2em + padding-top .3em + margin-bottom .5em + padding-bottom .5em + color #4A4A4A + +.markdown + .wrapper + margin-top 60px + +below(600px) + margin-top 30px + + h1, h2, h3, h4, h5, h6 + @extend $title + + h1 + font-size 32px + h2 + font-size 26px + h3 + font-size 24px + h4 + font-size 21px + h5 + font-size 18px + h6 + font-size 16px + strong + font-weight 500 + pre + line-height 20px + background #FAFAFA + padding 20px + white-space: pre + display: block; + color: #333333; + overflow-x: auto; + p code, ul code + background #FAFAFA + padding 2px 4px + 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 + overflow-x: auto; + margin-bottom 40px + +.markdown h1:first-child + margin-top 0 + padding-top 0 + +.page-title + background: #F9F9F9; + padding 48px 0 + + h1 + margin 0 auto + @extend $wrapper + font-family: 'Raleway'; + font-size: 40px; + font-weight 200 + color: #585858; + line-height: 50px; + + +below(600px) + padding 30px 0 + +.docs + @extend $wrapper + +.docs-aside + col(1/4) + margin-top 60px + +below(600px) + padding 20px + width 100% + box-sizing content-box + margin 0 -20px + margin-bottom 30px + background #F9F9F9 + +.docs-aside-group + display block + margin-bottom 40px + h3 + font-family: 'Raleway'; + font-weight 500 + font-size 12px + text-transform uppercase + line-height 1.2em + margin-bottom 1em + color #AAA + a + display block + font-size 15px + font-weight 400 + line-height 22px + height 28px + padding 3px 0 + color #4A4A4A + &.active + font-weight 500 + line-height 21px + color #E05B49 + + +below(600px) + display none + +.docs-aside-navselect + margin-top -18px + display none + width 100% + +below(600px) + display block + +.docs-content + col(3/4) + margin-top 60px + margin-bottom 20px + +below(600px) + margin-top 10px + col(1) + + >h1 + margin 0 + @extend $title + font-size 32px + + .docs-next + float right + color #e05b49 + font-weight 400 diff --git a/docs/css/playground.styl b/docs/css/playground.styl new file mode 100644 index 00000000..f496d57a --- /dev/null +++ b/docs/css/playground.styl @@ -0,0 +1,148 @@ +@import 'nib' +@import 'graphiql.css' + +.playground + position absolute + top 106px + left 0 + right 0 + bottom 0 + display flex + flex-direction row + min-width 960px + .loading + position absolute + display block + left 0 + right 0 + bottom 0 + top 0 + z-index 10000 + background rgba(255,255,255,.6) + +.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 + display flex + flex-direction: column + + .cm-def + .cm-variable + .cm-keyword // lambda + &:not(.CodeMirror-lint-mark-error) + transition all .3s ease-in-out + background transparent + + .activeline + .cm-def + .cm-variable + .cm-keyword // lambda + $color = #D7D3F1 + // $color = rgba(219, 89, 76, .2) + background $color + border-radius 1px + box-shadow 0 0 0 2px $color + +.playground-schema-editor + flex 1 + position relative + .CodeMirror + font-size: 13px; + position absolute + height 100% + width 100% + top 0 + left 0 + right 0 + bottom 0 + font-family: 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace; + color: #141823; + .CodeMirror-lines + padding 20px 0 + +.playground-schema-header + // height 48px + // font-family 'Raleway', sans-serif + // font-weight 300 + // line-height 48px + // padding 0 10px + // border-bottom solid 1px #d0d0d0 + height: 48px; + box-sizing border-box + font-family: 'Raleway', sans-serif; + color: #999; + font-weight: 600; + font-size: 12px; + text-transform: uppercase; + line-height: 52px; + padding: 0 12px; + border-bottom: solid 1px #d0d0d0; + background: #F9F9F9; + +.playground-graphiql + flex 1 + height 100% + + +.cm-s-graphene + +/* Comment */ +.cm-s-graphene .cm-comment + color: #999; + +/* Punctuation */ +.cm-s-graphene .cm-punctuation + color: #555; + +/* Keyword */ +.cm-s-graphene .cm-keyword + // color: #B11A04; + // color #D2054E + color #a71d5d + +/* OperationName, FragmentName */ +.cm-s-graphene .cm-def + // color: #D2054E; + color: #1F61A0; + +/* FieldName */ +.cm-s-graphene .cm-property + color: #333; + +/* FieldAlias */ +.cm-s-graphene .cm-qualifier + color: #1C92A9; + +/* ArgumentName and ObjectFieldName */ +.cm-s-graphene .cm-attribute + color: #8B2BB9; + +/* Number */ +.cm-s-graphene .cm-number + color: #2882F9; + +/* String */ +.cm-s-graphene .cm-string + color: #D64292; + +/* Boolean */ +.cm-s-graphene .cm-builtin + color: #D47509; + +/* EnumValue */ +.cm-s-graphene .cm-string-2 + color: #0B7FC7; + +/* Variable */ +.cm-s-graphene .cm-variable + color: #333; + +/* Directive */ +.cm-s-graphene .cm-meta + color: #B33086; + +/* Type */ +.cm-s-graphene .cm-atom + color: #CA9800; diff --git a/docs/gatsby.config.js b/docs/gatsby.config.js new file mode 100644 index 00000000..32ed0052 --- /dev/null +++ b/docs/gatsby.config.js @@ -0,0 +1,72 @@ +var nib = require("nib"); +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 publicPath = config._config.output.publicPath; + // var output = config._config.output; + // output.filename = "[name].js"; + config._config.entry = { + bundle: entry, + }; + config.merge({ + stylus: { + use: [nib(), jeet(), rupture()] + }, + output: { + filename: "[name].js", + publicPath: "/", + }, + resolveLoader: { + root: path.join(__dirname, "node_modules"), + modulesDirectories: ['./'], + }, + resolve: { + root: path.join(__dirname, "node_modules"), + 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'), + 'pypyjs': '../playground/graphene-js/pypyjs', + 'playground-page': (env != "static")?'../playground/page':'../pages/_empty', + 'playground-wrapper': (env == "develop")?'../playground/page':'../playground/wrapper', + }, + modulesDirectories: ['./'] + } + }); + if (IS_STATIC) { + config.plugin('extract-css', ExtractTextPlugin, ["app.css"]); + } + config.plugin('static', CopyWebpackPlugin, [[{ from: '../static'}]]); + config.plugin('define-env', webpack.DefinePlugin, [{ + "ENV": JSON.stringify(env), + "PUBLIC_PATH": JSON.stringify(publicPath), + }]); + // if (env != "static") { + // config.plugin('commons', webpack.optimize.CommonsChunkPlugin, ["commons.js"]); + // } + + config.loader('stylus', function(cfg) { + cfg.test = /\.styl$/; + if (IS_STATIC) { + cfg.loader = ExtractTextPlugin.extract('style-loader', 'css-loader!stylus-loader', { allChunks: true }); + } + else { + cfg.loader = 'style-loader!css-loader!stylus-loader'; + } + return cfg + }); + config.removeLoader('png'); + config.loader('png', function(cfg) { + cfg.test = /\.png$/; + cfg.loader = 'url-loader' + return cfg + }) + return config; +}; diff --git a/docs/html.js b/docs/html.js new file mode 100644 index 00000000..f126f69e --- /dev/null +++ b/docs/html.js @@ -0,0 +1,35 @@ +import React from 'react'; +import DocumentTitle from 'react-document-title'; + +export default class Html extends React.Component { + render() { + var title = this.props.title || DocumentTitle.rewind(); + return ( + + + + + + {title} + + + + + +
+