diff options
| author | netop://ウィビ <paul@webb.page> | 2026-04-26 20:18:30 -0700 |
|---|---|---|
| committer | netop://ウィビ <paul@webb.page> | 2026-04-26 20:18:30 -0700 |
| commit | 3c06c95f396b6e911076bc3291d5855ed01b5caa (patch) | |
| tree | 17cd218339c52fbeee93d931303b04a3ff294f8b /playground | |
| parent | f059d97ab7f6d74d61139ac698cb871be7cb632e (diff) | |
| download | graphiql-3c06c95f396b6e911076bc3291d5855ed01b5caa.tar.gz graphiql-3c06c95f396b6e911076bc3291d5855ed01b5caa.zip | |
cleanup and ready for launch
Diffstat (limited to 'playground')
| -rw-r--r-- | playground/index.html | 26 | ||||
| -rw-r--r-- | playground/src/App.svelte | 31 | ||||
| -rw-r--r-- | playground/src/favicon.svg | 15 | ||||
| -rw-r--r-- | playground/src/main.ts | 10 |
4 files changed, 68 insertions, 14 deletions
diff --git a/playground/index.html b/playground/index.html index 7487569..53015ed 100644 --- a/playground/index.html +++ b/playground/index.html @@ -3,12 +3,32 @@ <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> - <title>@eeeooolll/graphiql · playground</title> + + <title>@eeeooolll/graphiql • playground</title> + <link rel="icon" href="./src/favicon.svg"/> + <style> - html, body, #app { height: 100%; margin: 0; } - body { background: #1e1e1e; color: #d4d4d4; font-family: ui-monospace, SFMono-Regular, monospace; } + *, + *::before, + *::after { + margin: 0; padding: 0; + box-sizing: inherit; + } + + html { + width: 100%; height: 100%; + + box-sizing: border-box; + overscroll-behavior: none; + } + + body, + #app { + width: inherit; height: inherit; + } </style> </head> + <body> <div id="app"></div> <script type="module" src="./src/main.ts"></script> diff --git a/playground/src/App.svelte b/playground/src/App.svelte index dc4f0a5..350f956 100644 --- a/playground/src/App.svelte +++ b/playground/src/App.svelte @@ -1,24 +1,33 @@ <script lang="ts"> /*** IMPORT ------------------------------------------- ***/ - import { createHttpFetcher } from "../../source/library/index.ts"; + import { createHttpFetcher, lightTheme } from "../../source/library/index.ts"; import GraphiQL from "../../source/library/GraphiQL.svelte"; /*** UTILITY ------------------------------------------ ***/ const fetcher = createHttpFetcher({ url: "https://graphql.pokeapi.co/v1beta2" - // url: "https://countries.trevorblades.com/" }); - const initialQuery = `query Countries { - countries { - code - name - emoji - } -} -`; + const initialQuery = ` + query best_grass_poison_pokemons { + pokemon: pokemon( + where: {_and: [{pokemontypes: {type: {name: {_eq: "grass"}}}}, {pokemontypes: {type: {name: {_eq: "poison"}}}}]} + order_by: {pokemonstats_aggregate: {sum: {base_stat: desc}}} + limit: 3 + ) { + name + stats: pokemonstats_aggregate(order_by: {}) { + aggregate { + sum { + base_stat + } + } + } + } + } + `; </script> -<GraphiQL {fetcher} {initialQuery}/> +<GraphiQL {fetcher} {initialQuery} theme={lightTheme}/> diff --git a/playground/src/favicon.svg b/playground/src/favicon.svg new file mode 100644 index 0000000..80a7a21 --- /dev/null +++ b/playground/src/favicon.svg @@ -0,0 +1,15 @@ +<svg fill="#e10098" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <style> + svg { + fill: color(display-p3 0.8824 0 0.5961); + } + </style> + + <path clip-rule="evenodd" d="M50 6.90308L87.323 28.4515V71.5484L50 93.0968L12.677 71.5484V28.4515L50 6.90308ZM16.8647 30.8693V62.5251L44.2795 15.0414L16.8647 30.8693ZM50 13.5086L18.3975 68.2457H81.6025L50 13.5086ZM77.4148 72.4334H22.5852L50 88.2613L77.4148 72.4334ZM83.1353 62.5251L55.7205 15.0414L83.1353 30.8693V62.5251Z" fill-rule="evenodd"/> + <circle cx="50" cy="9.3209" r="8.82"/> + <circle cx="85.2292" cy="29.6605" r="8.82"/> + <circle cx="85.2292" cy="70.3396" r="8.82"/> + <circle cx="50" cy="90.6791" r="8.82"/> + <circle cx="14.7659" cy="70.3396" r="8.82"/> + <circle cx="14.7659" cy="29.6605" r="8.82"/> +</svg> diff --git a/playground/src/main.ts b/playground/src/main.ts index bf39df9..03a4c37 100644 --- a/playground/src/main.ts +++ b/playground/src/main.ts @@ -1,8 +1,18 @@ + + + +/*** IMPORT ------------------------------------------- ***/ + import { mount } from "svelte"; + +/*** UTILITY ------------------------------------------ ***/ + import App from "./App.svelte"; const target = document.getElementById("app"); +/*** RUNTIME ------------------------------------------ ***/ + if (!target) throw new Error("missing #app target"); |
