update graphiql style

o-az · Nov 21, 2023 · ffb5f52 · ffb5f52
1 parent 99ad6f7
commit ffb5f52
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 24 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -2,6 +2,8 @@
   "name": "introspect",
   "version": "0.0.2",
   "description": "API to fetch entire schema of any (public) GraphQL API and return it as JSON or SDL.",
+  "author": "Omar (https://github.com/o-az)",
+  "repository": "github:o-az/introspect",
   "module": "./src/index.ts",
   "types": "./src/index.ts",
   "type": "module",
@@ -20,19 +22,10 @@
   "devDependencies": {
     "@biomejs/biome": "^1.3.3",
     "bun-types": "^1.0.13",
-    "typescript": "^5.2.2"
+    "typescript": "^5.3.2"
   },
   "license": "GPL-3.0-or-later",
-  "keywords": [
-    "graphql",
-    "introspection",
-    "introspect",
-    "schema",
-    "sdl",
-    "json"
-  ],
-  "author": "Omar (https://github.com/o-az)",
-  "repository": "github:o-az/introspect",
+  "keywords": ["graphql", "introspection", "introspect", "schema", "sdl", "json"],
   "bugs": "github:o-az/introspect/issues",
   "homepage": "github:o-az/introspect#readme"
 }
diff --git a/src/graphql/graphiql.html.ts b/src/graphql/graphiql.html.ts
@@ -12,39 +12,59 @@ export function htmlPage({
 <!--
  *  Copyright (c) 2021 GraphQL Contributors
  *  All rights reserved.
- *
- *  This source code is licensed under the license found in the
- *  LICENSE file in the root directory of this source tree.
 -->
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>GraphiQL</title>
     <style>
       body {
-        height: 100%;
         margin: 0;
         width: 100%;
+        height: 100%;
         overflow: hidden;
       }
+      *::-webkit-scrollbar {
+        height: 0.3rem;
+        width: 0rem;
+      }
+      *::-webkit-scrollbar-track {
+        -ms-overflow-style: none;
+        overflow: -moz-scrollbars-none;
+      }
+      *::-webkit-scrollbar-thumb {
+        -ms-overflow-style: none;
+        overflow: -moz-scrollbars-none;
+      }
+      @supports (scrollbar-gutter: stable) {
+        html {
+          overflow-y: auto;
+          scrollbar-gutter: stable;
+        }
+      }
       #graphiql {
         height: 100vh;
       }
     </style>
     <script crossorigin src="https://unpkg.com/react/umd/react.development.js"></script>
     <script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
     <script src="https://unpkg.com/graphiql/graphiql.min.js" type="application/javascript"></script>
+    <link
+      rel="shortcut icon"
+      href="https://raw.githubusercontent.com/graphql/graphql-playground/main/packages/graphql-playground-electron/static/icons/icon.ico"
+    />
+    <link
+      rel="favicon"
+      href="https://raw.githubusercontent.com/graphql/graphql-playground/main/packages/graphql-playground-electron/static/icons/icon.ico"
+    />
     <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
-    <script
-      src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js"
-      crossorigin
-    ></script>
+    <script src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js" crossorigin></script>
     <link rel="stylesheet" href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css" />
   </head>
   <body>
-    <div id="graphiql">Loading...</div>
+    <main id="graphiql">Loading...</main>
     <script>
-      const root = ReactDOM.createRoot(document.getElementById('graphiql'))
+      const root = ReactDOM.createRoot(document.querySelector('main#graphiql'))
       const fetcher = GraphiQL.createFetcher({
         url: '${endpoint}',
         headers: ${JSON.stringify(headers)}
@@ -59,6 +79,5 @@ export function htmlPage({
       )
     </script>
   </body>
-</html>
-`
+</html>`
 }