adds awesome new GraphiQL renderer and an example

1 files changed, 27 insertions, 20 deletions

diff --git a/README.md b/README.md
index 76412a1..e2e8f18 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # @eol/gq
 
-A batteries-included GraphQL toolkit for Deno, wrapping `graphql-js` and `@graphql-tools/schema` with the bits most APIs end up reaching for anyway: a Fetch-compatible HTTP handler, a cached `gql` tag, a `.graphql` file loader, and a cleaned-up GraphQL Playground.
+A batteries-included GraphQL toolkit for Deno, wrapping `graphql-js` and `@graphql-tools/schema` with the bits most APIs end up reaching for anyway: a Fetch-compatible HTTP handler, a cached `gql` tag, a `.graphql` file loader, and an embedded GraphiQL UI powered by [`@eeeooolll/graphiql`](https://www.npmjs.com/package/@eeeooolll/graphiql).
 
 ## Install
 
@@ -40,7 +40,7 @@ Deno.serve(
 );
 ```
 
-Visit `http://localhost:8000` in a browser for the Playground, or `POST` a query to the same URL.
+Visit `http://localhost:8000` in a browser for GraphiQL, or `POST` a query to the same URL.
 
 ## Loading schemas from `.graphql` files
 
@@ -89,13 +89,13 @@ Returns a `(request) => Promise<Response>` handler. Pluggable into `Deno.serve`,
 
 Options:
 
-| Option              | Type                                  | Description                                          |
-| ------------------- | ------------------------------------- | ---------------------------------------------------- |
-| `schema`            | `GraphQLSchema`                       | Required. Executable schema.                         |
-| `context`           | `(req) => Ctx \| Promise<Ctx>`        | Builds the resolver context per request.             |
-| `graphiql`          | `boolean`                             | Serve the Playground on `GET` + `Accept: text/html`. |
-| `headers`           | `HeadersInit`                         | Extra headers merged into every response.            |
-| `playgroundOptions` | `Omit<RenderPageOptions, "endpoint">` | Passthrough options for the Playground renderer.     |
+| Option              | Type                                  | Description                                    |
+| ------------------- | ------------------------------------- | ---------------------------------------------- |
+| `schema`            | `GraphQLSchema`                       | Required. Executable schema.                   |
+| `context`           | `(req) => Ctx \| Promise<Ctx>`        | Builds the resolver context per request.       |
+| `graphiql`          | `boolean`                             | Serve GraphiQL on `GET` + `Accept: text/html`. |
+| `headers`           | `HeadersInit`                         | Extra headers merged into every response.      |
+| `playgroundOptions` | `Omit<RenderPageOptions, "endpoint">` | Passthrough options for the GraphiQL renderer. |
 
 ### `executeSchema(config)`
 
@@ -114,28 +114,35 @@ Companion knobs:
 
 ### `importQL(path)`
 
-Reads a `.graphql` file and resolves its imports. See [Loading schemas from `.graphql` files](#loading-schemas-from-graphql-files).
+Reads a `.graphql` file and resolves its imports. See [Loading schemas from `.graphql` files](#loading-schemas-from-graphql-files).
 
 ### `runHttpQuery(params, options, request)`
 
-Low-level executor that `GraphQLHTTP` delegates to. Use it if you’re rolling your own transport but still want the context wiring.
+Low-level executor that `GraphQLHTTP` delegates to. Use it if you’re rolling your own transport but still want the context wiring.
 
 ### Types
 
-`GQLOptions`, `GQLRequest`, `GraphQLParams`, `GraphQLHandler`, plus the Playground types (`RenderPageOptions`, `MiddlewareOptions`, `ISettings`, `EditorColours`, `Tab`, `Theme`, `CursorShape`, `IntrospectionResult`).
+`GQLOptions`, `GQLRequest`, `GraphQLParams`, `GraphQLHandler`, plus `RenderPageOptions` for the GraphiQL shell.
 
 ## Features
 
-- Import `*.graphql` files — explicit and dynamic — via `importQL`.
-- GraphiQL/Playground code cleaned up; SVGs redrawn so they actually make sense.
-- Ships typed; passes `deno check entry.ts` with no fuss.
-- Zero build step — it’s Deno, you just import it.
+- Import `*.graphql` files — explicit and dynamic — via `importQL`.
+- Embedded GraphiQL via [`@eeeooolll/graphiql`](https://www.npmjs.com/package/@eeeooolll/graphiql) — Svelte 5, CodeMirror 6, served as a prebuilt IIFE bundle from jsDelivr.
+- Ships typed; passes `deno check entry.ts` with no fuss.
+- Zero build step — it’s Deno, you just import it.
 
-## TODO
+## GraphiQL renderer options
 
-- Add a runnable example.
-- Replace React Playground with Svelte/SvelteKit.
-- Take over the world (real world, metaverse, or [yggdrasil](https://yggdrasil-network.github.io), whichever comes first).
+`playgroundOptions` is forwarded to the HTML shell builder. All fields are optional:
+
+| Field        | Type             | Description                                                              |
+| ------------ | ---------------- | ------------------------------------------------------------------------ |
+| `cdnUrl`     | `string`         | CDN base. Defaults to `//cdn.jsdelivr.net/npm`.                          |
+| `faviconUrl` | `string \| null` | `null` skips the favicon; `undefined` uses the bundle's default.         |
+| `title`      | `string`         | Document `<title>`. Defaults to `"GraphiQL"`.                            |
+| `version`    | `string`         | Pin `@eeeooolll/graphiql` to a specific version on the CDN. Recommended. |
+
+Pinning `version` is recommended — without it the shell hits jsDelivr's `@latest` cache, which can lag behind new releases by ~12h.
 
 ## License