ruru
Version:
Grafast-flavoured GraphiQL distribution
137 lines (134 loc) • 3.76 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="modulepreload" href="https://unpkg.com/ruru@2.0.0-rc.1/static/ruru.js" />
<title>Ruru - GraphQL/Grafast IDE</title>
<link rel="stylesheet" href="https://unpkg.com/ruru@2.0.0-rc.1/static/ruru.css" />
<style>
body {
margin: 0;
}
#ruru-root {
height: 100vh;
}
</style>
<script>
const RURU_CONFIG = {
"staticPath": "https://unpkg.com/ruru@2.0.0-rc.1/static/",
// Replace this with your own endpoint:
"endpoint": "/graphql",
};
</script>
<!-- DELETE THIS once you have the correct 'endpoint' in RURU_CONFIG above -->
<script type="module">
// Extract 'endpoint=...' from the hash params
const { hash } = window.location;
if (hash.startsWith('#')) {
const params = new URLSearchParams(window.location.hash.slice(1));
const endpoint = params.get('endpoint');
if (endpoint) RURU_CONFIG.endpoint = endpoint;
}
</script>
<!-- /DELETE THIS -->
<script type="module">
const worker = (file) => new Worker(URL.createObjectURL(new Blob(['import "https://unpkg.com/ruru@2.0.0-rc.1/static/' + file + '";'], {type: 'text/javascript'})), { type: "module" });
globalThis.MonacoEnvironment = {
getWorker(_, label) {
switch (label) {
case "json":
return worker("jsonWorker.js");
case "graphql":
return worker("graphqlWorker.js");
default:
return worker("editorWorker.js");
}
},
};
</script>
</head>
<body>
<div id="ruru-root">
<div class="graphiql-container">
<div class="graphiql-sidebar"></div>
<div class="graphiql-main">
<div
class="graphiql-plugin"
style="min-width: 200px; flex: 0.333333 1 0%;"
>
<div>
<div class="graphiql-doc-explorer-header">
<div class="graphiql-doc-explorer-title">Loading...</div>
</div>
<div class="graphiql-doc-explorer-content">
<p>Ruru is loading, this should only take a moment...</p>
</div>
</div>
</div>
<div class="graphiql-horizontal-drag-bar"></div>
<div class="graphiql-sessions" style="flex: 1 1 0%;">
<div class="graphiql-session-header">
<ul role="tablist" class="graphiql-tabs no-scrollbar">
<li class="graphiql-tab graphiql-tab-active">
<button
type="button"
class="graphiql-un-styled graphiql-tab-button"
disabled
>
Loading...
</button>
</li>
</ul>
</div>
<div role="tabpanel" id="graphiql-session">
<div class="graphiql-editors" style="flex: 1 1 0%;">
<section class="graphiql-query-editor" style="flex: 3 1 0%;">
<div class="graphiql-editor"></div>
<div class="graphiql-toolbar"></div>
</section>
<div class="graphiql-editor-tools">
<button type="button" class="graphiql-un-styled" disabled>
</button>
</div>
</div>
<div class="graphiql-horizontal-drag-bar"></div>
<div class="graphiql-response" style="flex: 1 1 0%;">
<section class="result-window"></section>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="module">
const $ = (s) => document.querySelector(s);
if (!localStorage.getItem("graphiql:visiblePlugin")) {
$(".graphiql-plugin").style.display = "none";
$(".graphiql-horizontal-drag-bar").style.display = "none";
}
if (localStorage.getItem("Ruru:condensed") !== "") {
$(".graphiql-container").className += " condensed";
}
const getSystemTheme = () =>
window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
const theme = localStorage.getItem("graphiql:theme") || getSystemTheme();
document.body.className += " graphiql-" + theme;
const flexes = [
["docExplorerFlex", ".graphiql-plugin"],
["editorFlex", ".graphiql-editors"],
];
for (const [key, sel] of flexes) {
const val = localStorage.getItem("graphiql:" + key);
if (val) $(sel).style.flex = val + " 1 0%";
}
</script>
<script type="module">
import { React, createRoot, Ruru } from "https://unpkg.com/ruru@2.0.0-rc.1/static/ruru.js";
createRoot(document.getElementById("ruru-root"))
.render(React.createElement(Ruru, RURU_CONFIG));
</script>
</body>
</html>