Add GraphQL Playground Static Files (#256)

* Added static files for custom graphql explorer build * Add .nojekyll empty file that tells github pages to not build with jekyll * Enabling github pages after in order to ensure playground graphql files are served with correct content-type headers.
bigcommerce · Dec 15, 2019 · 7b51ad4 · 7b51ad4
1 parent fcdf8be
commit 7b51ad4
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 0 deletions.
diff --git a/.nojekyll b/.nojekyll
diff --git a/assets/css/graphql/index.css b/assets/css/graphql/index.css
diff --git a/assets/html/graphql/playground.html b/assets/html/graphql/playground.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset=utf-8/>
+  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
+  <title>GraphQL Playground</title>
+  <link rel="stylesheet" href="index.css" />
+  <link rel="shortcut icon" href="favicon.png" />
+  <script src="middleware.js"></script>
+</head>
+
+<body>
+  <div id="root">
+    <style>
+      body {
+        background-color: rgb(23, 42, 58);
+        font-family: Open Sans, sans-serif;
+        height: 90vh;
+      }
+
+      #root {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .loading {
+        font-size: 32px;
+        font-weight: 200;
+        color: rgba(255, 255, 255, .6);
+        margin-left: 20px;
+      }
+
+      img {
+        width: 78px;
+        height: 78px;
+      }
+
+      .title {
+        font-weight: 400;
+      }
+    </style>
+    <img src='logo.png' alt=''>
+    <div class="loading"> Loading
+      <span class="title">GraphQL Playground</span>
+    </div>
+  </div>
+  <script>window.addEventListener('load', function (event) {
+      GraphQLPlayground.init(document.getElementById('root'), {
+        endpoint: 'https://api.graph.cool/simple/v1/swapi'
+      })
+    })</script>
+</body>
+
+</html>
diff --git a/assets/images/graphql/favicon.png b/assets/images/graphql/favicon.png
diff --git a/assets/images/graphql/logo.png b/assets/images/graphql/logo.png
diff --git a/assets/js/graphql/middleware.js b/assets/js/graphql/middleware.js