From 8b7505dc2f11fb0bb12de5d911273034ecef5ca5 Mon Sep 17 00:00:00 2001
From: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date: Wed, 27 Mar 2024 00:13:43 -0700
Subject: [PATCH] Render markdown as documentation pages (#6)

* add overview docs content

* toc wip

* move nav to components dir

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* file `server/docs/docs.ts` is coming together

* abstract global styles to static file `global.css`

* add `toPath`

* add `components\doc\expression.ts`

* Update deno.jsonc

* wip

* drawer wip

```js
// Note: I do not want to have to build an entire drawer component
// just to show the playground on documentation pages. For now,
// it is much easier to just place the playground at the bottom of
// the documentation page. I will revisit this later when I have
// more time to work on it.
```

* add playground to doc component

* import shared code in 2 route files

* Delete drawer.tsx

* navigation looks good!

Consistent code highlighting is an ongoing challenge. Found <https://github.com/denoland/fresh/blob/main/www/utils/markdown.ts>.

* add alias `p` for route `playgrounds`

Reference: <https://fresh.deno.dev/docs/concepts/routing>.

* add footer (w/ css grid)

* replace gfm with markdown-it

* Update fs.ts

* fix toc component

* fix hljs

* use markdown-it toc in cousin element

* add 'copy code to clipboard' button to code blocks

Source: <https://www.roboleary.net/2022/01/13/copy-code-to-clipboard-blog.html>

* Create 00_index.md

* wip

- add overridable names.
- update `docs/02_playgrounds/00_index.md` documentation file.
- add `<meta name="robots" content="noindex, nofollow" />` to `routes/playgrounds/[id].tsx` route file.
- create `components/playground_aside.tsx` component file.

* wip

- create dedicated md.css for documentation pages.
- update documentation.
- support default and example playgrounds.

* update documentation
---
 client/components/playground/scripts.tsx      |  23 ---
 client/nav.tsx                                |  28 ---
 client/playgrounds.ts                         |  13 --
 components/doc/doc.tsx                        |  37 ++++
 components/doc/doc_content.tsx                |  63 ++++++
 components/foot.tsx                           |  19 ++
 components/hljs.tsx                           |  13 ++
 components/nav.tsx                            |  43 ++++
 .../playground/playground.tsx                 |   6 +-
 components/playground/scripts.tsx             |  22 +++
 components/playground_aside.tsx               |  25 +++
 components/toc.tsx                            |  29 +++
 deno.jsonc                                    |   9 +
 docs/00_index.md                              |   8 +
 docs/01_getting_started/00_index.md           |  81 ++++++++
 docs/02_playgrounds/00_index.md               |  12 ++
 docs/02_playgrounds/01_new.md                 |   4 +
 docs/02_playgrounds/02_handbook.md            |  60 ++++++
 docs/03_jsx/00_index.md                       |  29 +++
 docs/03_jsx/01_theory.md                      |  15 ++
 docs/04_examples/00_index.md                  |  13 ++
 docs/04_examples/01_hello.md                  |  10 +
 docs/98_api_docs.md                           |   4 +
 docs/99_github.md                             |   4 +
 {server/examples => examples}/01_animals.tsx  |   0
 fresh.gen.ts                                  |  14 +-
 lib/docs/fs.ts                                | 185 ++++++++++++++++++
 lib/docs/items.ts                             |   8 +
 lib/docs/md.ts                                |  50 +++++
 lib/docs/mod_client.ts                        |   2 +
 lib/docs/mod_server.ts                        |   2 +
 lib/docs/nodes.ts                             |  19 ++
 lib/examples/examples.ts                      |  24 +++
 {server => lib}/examples/mod.ts               |   0
 {client => lib/meta}/meta.ts                  |   8 +-
 lib/meta/mod.ts                               |   1 +
 .../playgrounds/deno_kv/kv.ts                 |  11 +-
 lib/playgrounds/deno_kv/mod.ts                |   1 +
 lib/playgrounds/expressions/expressions.ts    | 102 ++++++++++
 lib/playgrounds/expressions/mod.ts            |   1 +
 lib/playgrounds/mod.ts                        |   1 +
 lib/playgrounds/playgrounds.ts                |  34 ++++
 lib/resources/docs.ts                         |   6 +
 lib/resources/examples.ts                     |   3 +
 {server => lib/resources}/kv.ts               |   0
 lib/to_path.ts                                |   6 +
 routes/[...path].ts                           |   1 +
 routes/_404.tsx                               |   7 -
 routes/_app.tsx                               |  12 +-
 routes/api/examples/{[id].ts => [name].ts}    |   4 +-
 routes/{ => api}/meta.ts                      |   2 +-
 routes/api/playgrounds/[id].ts                |   4 +-
 routes/api/playgrounds/index.ts               |   6 +-
 routes/index.ts                               |   1 +
 routes/index.tsx                              |  42 ----
 routes/playgrounds/[id].tsx                   |  59 ++++--
 server/examples/examples.ts                   |  18 --
 static/copy.js                                |  35 ++++
 static/global.css                             |  69 +++++++
 static/md.css                                 | 115 +++++++++++
 static/playground.css                         |  61 ------
 static/script.js                              |  21 +-
 62 files changed, 1268 insertions(+), 237 deletions(-)
 delete mode 100644 client/components/playground/scripts.tsx
 delete mode 100644 client/nav.tsx
 delete mode 100644 client/playgrounds.ts
 create mode 100644 components/doc/doc.tsx
 create mode 100644 components/doc/doc_content.tsx
 create mode 100644 components/foot.tsx
 create mode 100644 components/hljs.tsx
 create mode 100644 components/nav.tsx
 rename {client/components => components}/playground/playground.tsx (93%)
 create mode 100644 components/playground/scripts.tsx
 create mode 100644 components/playground_aside.tsx
 create mode 100644 components/toc.tsx
 create mode 100644 docs/00_index.md
 create mode 100644 docs/01_getting_started/00_index.md
 create mode 100644 docs/02_playgrounds/00_index.md
 create mode 100644 docs/02_playgrounds/01_new.md
 create mode 100644 docs/02_playgrounds/02_handbook.md
 create mode 100644 docs/03_jsx/00_index.md
 create mode 100644 docs/03_jsx/01_theory.md
 create mode 100644 docs/04_examples/00_index.md
 create mode 100644 docs/04_examples/01_hello.md
 create mode 100644 docs/98_api_docs.md
 create mode 100644 docs/99_github.md
 rename {server/examples => examples}/01_animals.tsx (100%)
 create mode 100644 lib/docs/fs.ts
 create mode 100644 lib/docs/items.ts
 create mode 100644 lib/docs/md.ts
 create mode 100644 lib/docs/mod_client.ts
 create mode 100644 lib/docs/mod_server.ts
 create mode 100644 lib/docs/nodes.ts
 create mode 100644 lib/examples/examples.ts
 rename {server => lib}/examples/mod.ts (100%)
 rename {client => lib/meta}/meta.ts (73%)
 create mode 100644 lib/meta/mod.ts
 rename server/playgrounds.ts => lib/playgrounds/deno_kv/kv.ts (79%)
 create mode 100644 lib/playgrounds/deno_kv/mod.ts
 create mode 100644 lib/playgrounds/expressions/expressions.ts
 create mode 100644 lib/playgrounds/expressions/mod.ts
 create mode 100644 lib/playgrounds/mod.ts
 create mode 100644 lib/playgrounds/playgrounds.ts
 create mode 100644 lib/resources/docs.ts
 create mode 100644 lib/resources/examples.ts
 rename {server => lib/resources}/kv.ts (100%)
 create mode 100644 lib/to_path.ts
 create mode 100644 routes/[...path].ts
 rename routes/api/examples/{[id].ts => [name].ts} (55%)
 rename routes/{ => api}/meta.ts (80%)
 create mode 100644 routes/index.ts
 delete mode 100644 routes/index.tsx
 delete mode 100644 server/examples/examples.ts
 create mode 100644 static/copy.js
 create mode 100644 static/global.css
 create mode 100644 static/md.css

diff --git a/client/components/playground/scripts.tsx b/client/components/playground/scripts.tsx
deleted file mode 100644
index d07b1ac..0000000
--- a/client/components/playground/scripts.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-export interface PlaygroundScriptsProps {
-  code: string;
-  autoplay?: boolean;
-}
-
-export default function PlaygroundScripts(props: PlaygroundScriptsProps) {
-  return (
-    <div
-      dangerouslySetInnerHTML={{
-        __html: `${
-          initializeData(props)
-        }<script type="module" src="/script.js" defer></script>`,
-      }}
-    >
-    </div>
-  );
-}
-
-function initializeData(props: PlaygroundScriptsProps) {
-  return `<script id="initialJSONData" type="application/json">${
-    JSON.stringify(props)
-  }</script>`;
-}
diff --git a/client/nav.tsx b/client/nav.tsx
deleted file mode 100644
index 7afc393..0000000
--- a/client/nav.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-export default function Nav() {
-  return (
-    <nav>
-      <a href="/">
-        <h1>jsonx</h1>
-      </a>
-
-      <span class="badges">
-        <a href="https://jsr.io/@fartlabs/jsonx">
-          <span>API&nbsp;</span>
-          <img
-            class="jsr-badge"
-            src="https://jsr.io/badges/@fartlabs/jsonx/score"
-            alt="JSR badge"
-          />
-        </a>
-        <a href="https://github.com/FartLabs/jsonx">
-          <span>GitHub&nbsp;</span>
-          <img
-            class="github-badge"
-            src="https://simpleicons.org/icons/github.svg"
-            alt="GitHub badge"
-          />
-        </a>
-      </span>
-    </nav>
-  );
-}
diff --git a/client/playgrounds.ts b/client/playgrounds.ts
deleted file mode 100644
index 2db0a0a..0000000
--- a/client/playgrounds.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Playground is a jsonx playground.
- */
-export interface Playground {
-  id: string;
-  version: string;
-  code: string;
-}
-
-/**
- * AddPlaygroundRequest is the request to add a playground.
- */
-export type AddPlaygroundRequest = Omit<Playground, "id">;
diff --git a/components/doc/doc.tsx b/components/doc/doc.tsx
new file mode 100644
index 0000000..5910c67
--- /dev/null
+++ b/components/doc/doc.tsx
@@ -0,0 +1,37 @@
+import { contents } from "#/lib/resources/docs.ts";
+import { fromExpression } from "#/lib/playgrounds/expressions/mod.ts";
+import { getMeta } from "#/lib/meta/mod.ts";
+import { toPath } from "#/lib/to_path.ts";
+import type { DocContentProps } from "./doc_content.tsx";
+import DocContent from "./doc_content.tsx";
+
+export default async function DocumentationPage(request: Request) {
+  const content = contentOf(request);
+  const playground = await playgroundOf(content.playground);
+  return (
+    <DocContent body={content.body} toc={content.toc} playground={playground} />
+  );
+}
+
+function contentOf(request: Request) {
+  const url = new URL(request.url);
+  const path = toPath(url.pathname).join("/");
+  const content = contents.get(path);
+  if (!content) {
+    throw new Error(`Content not found: ${path}`);
+  }
+
+  return content;
+}
+
+async function playgroundOf(expression?: string) {
+  let playground: DocContentProps["playground"];
+  if (expression) {
+    playground = {
+      data: await fromExpression(expression),
+      meta: await getMeta(),
+    };
+  }
+
+  return playground;
+}
diff --git a/components/doc/doc_content.tsx b/components/doc/doc_content.tsx
new file mode 100644
index 0000000..e1ef9be
--- /dev/null
+++ b/components/doc/doc_content.tsx
@@ -0,0 +1,63 @@
+import type { PlaygroundData } from "#/lib/playgrounds/mod.ts";
+import { Meta } from "#/lib/meta/mod.ts";
+import Playground from "#/components/playground/playground.tsx";
+import { Head } from "$fresh/runtime.ts";
+import Hljs from "#/components/hljs.tsx";
+
+/**
+ * DocContentProps are the properties for the DocContent component.
+ */
+export interface DocContentProps {
+  /**
+   * body is the html content of the documentation page.
+   */
+  body: string;
+
+  /**
+   * toc is the table of contents of the documentation page.
+   */
+  toc?: string;
+
+  /**
+   * playground is the playground data for the documentation page.
+   */
+  playground?: {
+    data: PlaygroundData;
+    meta: Meta;
+  };
+}
+
+/**
+ * DocContent is the content of a jsonx documentation page.
+ */
+export default function DocContent(props: DocContentProps) {
+  return (
+    <>
+      <Head>
+        <Hljs id="github" />
+        <script src="/copy.js" defer></script>
+        <link rel="stylesheet" href="/md.css" />
+      </Head>
+
+      <aside class="aside">
+        <h2>On this page</h2>
+        <div dangerouslySetInnerHTML={{ __html: props.toc ?? "" }}></div>
+      </aside>
+
+      <main class="main">
+        <div
+          className="markdown-body"
+          dangerouslySetInnerHTML={{ __html: props.body }}
+        >
+        </div>
+        {props.playground && (
+          <Playground
+            code={props.playground.data.code}
+            version={props.playground.data.version}
+            meta={props.playground.meta}
+          />
+        )}
+      </main>
+    </>
+  );
+}
diff --git a/components/foot.tsx b/components/foot.tsx
new file mode 100644
index 0000000..bc52d66
--- /dev/null
+++ b/components/foot.tsx
@@ -0,0 +1,19 @@
+/**
+ * Foot is the site footer.
+ */
+export default function Foot(
+  props: { year?: number } = { year: new Date().getFullYear() },
+) {
+  return (
+    <footer class="foot">
+      <hr />
+      <p>
+        © {props.year}{" "}
+        <a href="https://github.com/FartLabs">
+          <strong>@FartLabs</strong>
+        </a>{" "}
+        🧪
+      </p>
+    </footer>
+  );
+}
diff --git a/components/hljs.tsx b/components/hljs.tsx
new file mode 100644
index 0000000..c4411b3
--- /dev/null
+++ b/components/hljs.tsx
@@ -0,0 +1,13 @@
+/**
+ * Hljs is a component that loads the highlight.js styles.
+ */
+export default function Hljs(props: { id: string }) {
+  return (
+    <>
+      <link
+        rel="stylesheet"
+        href={`https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/${props.id}.min.css`}
+      />
+    </>
+  );
+}
diff --git a/components/nav.tsx b/components/nav.tsx
new file mode 100644
index 0000000..85b2aab
--- /dev/null
+++ b/components/nav.tsx
@@ -0,0 +1,43 @@
+import ToC from "#/components/toc.tsx";
+import { nodes } from "#/lib/resources/docs.ts";
+
+/**
+ * NavProps are the properties for the Nav component.
+ */
+export interface NavProps {
+  path: string[];
+}
+
+/**
+ * Nav is the navigation bar for the documentation.
+ */
+export default function Nav(props: NavProps) {
+  return (
+    <nav class="nav">
+      <a href="/">
+        <h1>jsonx</h1>
+      </a>
+
+      <ToC
+        nodes={nodes}
+        filter={(node) =>
+          startsWith(props.path, node.name) &&
+          node.name.length <= props.path.length + 1}
+      />
+    </nav>
+  );
+}
+
+function startsWith(path: string[], prefix: string[]): boolean {
+  if (path.length < prefix.length) {
+    return false;
+  }
+
+  for (let i = 0; i < prefix.length; i++) {
+    if (path[i] !== prefix[i]) {
+      return false;
+    }
+  }
+
+  return true;
+}
diff --git a/client/components/playground/playground.tsx b/components/playground/playground.tsx
similarity index 93%
rename from client/components/playground/playground.tsx
rename to components/playground/playground.tsx
index 4f595a3..6a84991 100644
--- a/client/components/playground/playground.tsx
+++ b/components/playground/playground.tsx
@@ -1,4 +1,5 @@
-import type { Meta } from "#/client/meta.ts";
+import { Head } from "$fresh/runtime.ts";
+import type { Meta } from "#/lib/meta/mod.ts";
 import PlaygroundScripts from "./scripts.tsx";
 
 export interface PlaygroundProps {
@@ -11,6 +12,9 @@ export interface PlaygroundProps {
 export default function Playground(props: PlaygroundProps) {
   return (
     <>
+      <Head>
+        <link rel="stylesheet" href="/playground.css" />
+      </Head>
       <PlaygroundScripts autoplay={props.autoplay ?? true} code={props.code} />
       <details id="codeDetails" open>
         <summary>
diff --git a/components/playground/scripts.tsx b/components/playground/scripts.tsx
new file mode 100644
index 0000000..861c433
--- /dev/null
+++ b/components/playground/scripts.tsx
@@ -0,0 +1,22 @@
+export interface PlaygroundScriptsProps {
+  code: string;
+  autoplay?: boolean;
+}
+
+export default function PlaygroundScripts(props: PlaygroundScriptsProps) {
+  return (
+    <>
+      <script
+        id="initialJSONData"
+        type="application/json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(props) }}
+      >
+      </script>
+      <script
+        type="module"
+        src="/script.js"
+        defer
+      />
+    </>
+  );
+}
diff --git a/components/playground_aside.tsx b/components/playground_aside.tsx
new file mode 100644
index 0000000..97dced3
--- /dev/null
+++ b/components/playground_aside.tsx
@@ -0,0 +1,25 @@
+/**
+ * PlaygroundAside represents the aside content of a playground page.
+ */
+export default function PlaygroundAside(
+  props: { id?: string; version: string },
+) {
+  return (
+    <>
+      <h2>On this page</h2>
+      <p>
+        {props.id
+          ? <a href={`/p/${props.id}`}>p/{props.id}</a>
+          : <em>Unsaved</em>}
+      </p>
+      <p>
+        Using jsonx version{" "}
+        <a href={makeVersionURL(props.version)}>{props.version}</a>
+      </p>
+    </>
+  );
+}
+
+function makeVersionURL(version: string) {
+  return `https://jsr.io/@fartlabs/jsonx@${version}`;
+}
diff --git a/components/toc.tsx b/components/toc.tsx
new file mode 100644
index 0000000..809dd4e
--- /dev/null
+++ b/components/toc.tsx
@@ -0,0 +1,29 @@
+import type { FSItem, Node } from "#/lib/docs/mod_client.ts";
+
+/**
+ * ToCProps are the properties for the ToC component.
+ */
+export interface ToCProps {
+  nodes: Node<FSItem>[];
+  filter?: (node: Node<FSItem>) => boolean;
+}
+
+/**
+ * ToC is a recursive component that renders a table of contents.
+ */
+export default function ToC(props: ToCProps) {
+  return (
+    <ul>
+      {props.nodes.map((node) => (
+        <li>
+          {node.title && (
+            <a href={node.href ?? `/${node.name.join("/")}`}>{node.title}</a>
+          )}
+          {node.children && (props.filter?.(node) ?? true) && (
+            <ToC nodes={node.children} filter={props.filter} />
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+}
diff --git a/deno.jsonc b/deno.jsonc
index a52b813..cd7399a 100644
--- a/deno.jsonc
+++ b/deno.jsonc
@@ -29,9 +29,18 @@
     "@fartlabs/jsonx": "jsr:@fartlabs/jsonx@^0.0.10",
     "@preact/signals": "https://esm.sh/*@preact/signals@1.2.1",
     "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.0",
+    "@std/front-matter": "jsr:@std/front-matter@^0.220.1",
+    "@std/front-matter/any": "jsr:@std/front-matter@^0.220.1/any",
+    "@std/fs": "jsr:@std/fs@^0.220.1",
     "@std/http": "jsr:@std/http@^0.220.1",
+    "@std/path": "jsr:@std/path@^0.220.1",
     "@std/semver": "jsr:@std/semver@^0.220.1",
+    "@std/ulid": "jsr:@std/ulid@^0.220.1",
     "@std/yaml": "jsr:@std/yaml@^0.220.1",
+    "highlight.js": "https://esm.sh/highlight.js@11.9.0",
+    "markdown-it": "https://esm.sh/markdown-it@14.1.0",
+    "markdown-it-anchor": "https://esm.sh/markdown-it-anchor@8.6.7",
+    "markdown-it-toc-done-right": "https://esm.sh/markdown-it-toc-done-right@4.2.0",
     "preact": "https://esm.sh/preact@10.19.2",
     "preact/": "https://esm.sh/preact@10.19.2/"
   },
diff --git a/docs/00_index.md b/docs/00_index.md
new file mode 100644
index 0000000..0d272a1
--- /dev/null
+++ b/docs/00_index.md
@@ -0,0 +1,8 @@
+---
+title: Overview
+playground: 'example:01_animals.tsx'
+---
+
+# Overview
+
+The jsonx library exposes a JSX runtime for composing JSON data.
diff --git a/docs/01_getting_started/00_index.md b/docs/01_getting_started/00_index.md
new file mode 100644
index 0000000..25027f2
--- /dev/null
+++ b/docs/01_getting_started/00_index.md
@@ -0,0 +1,81 @@
+---
+title: Getting started
+---
+
+# Getting Started
+
+Get started with jsonx by following the steps below.
+
+## Install
+
+Install as usual via NPM:
+
+```shell
+npx jsr add @fartlabs/jsonx
+```
+
+Or if you're using Deno:
+
+```shell
+deno add @fartlabs/jsonx
+```
+
+Add the following values to your `deno.json(c)` file.
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxFactory": "@fartlabs/jsonx"
+  }
+}
+```
+
+## Use
+
+Add a file ending in `.[j|t]sx` to your project. For example, `example.tsx`.
+
+```tsx
+function Cat() {
+  return { animals: ["🐈"] };
+}
+
+function Dog() {
+  return { animals: ["🐕"] };
+}
+
+const data = (
+  <>
+    <Cat />
+    <Dog />
+  </>
+);
+
+Deno.writeTextFileSync(
+  "data.json",
+  JSON.stringify(data, null, 2),
+);
+```
+
+Compile your jsonx by running the `.[j|t]sx` file.
+
+```shell
+deno run --allow-write example.tsx
+```
+
+Preview the `data.json` file.
+
+```shell
+cat data.json
+```
+
+Resulting `data.json`:
+
+```json
+{
+  "animals": [
+    "🐈",
+    "🐕"
+  ]
+}
+```
diff --git a/docs/02_playgrounds/00_index.md b/docs/02_playgrounds/00_index.md
new file mode 100644
index 0000000..c264dda
--- /dev/null
+++ b/docs/02_playgrounds/00_index.md
@@ -0,0 +1,12 @@
+---
+title: Playgrounds
+---
+
+# Playgrounds
+
+You may encounter text editors across this site with a "Play" button. These are
+playgrounds. Playgrounds enable visitors to quickly edit and run jsonx code in
+the browser.
+
+- [Create a new playground↩](/playgrounds)
+- [Playgrounds handbook↩](/02_playgrounds/02_handbook)
diff --git a/docs/02_playgrounds/01_new.md b/docs/02_playgrounds/01_new.md
new file mode 100644
index 0000000..b6e90d1
--- /dev/null
+++ b/docs/02_playgrounds/01_new.md
@@ -0,0 +1,4 @@
+---
+title: New playground
+href: /playgrounds
+---
diff --git a/docs/02_playgrounds/02_handbook.md b/docs/02_playgrounds/02_handbook.md
new file mode 100644
index 0000000..e556f95
--- /dev/null
+++ b/docs/02_playgrounds/02_handbook.md
@@ -0,0 +1,60 @@
+---
+title: Playgrounds handbook
+---
+
+# Playgrounds Handbook
+
+Playgrounds are useful for trying out jsonx code snippets, sharing code, and
+learning jsonx.
+
+- Edit, transpile, and play playground code in the browser.
+- Share your playground with others.
+
+## Use
+
+To use a playground, let's take a look at the parts that make up one playground.
+
+> [!NOTE]
+>
+> Screenshots of playground parts are coming soon.
+
+### Code editor
+
+The code editor is where you edit code. It is a TypeScript environment that
+comes with batteries-included for editing jsonx code.
+
+### Version dropdown
+
+The version dropdown allows you to select the version of jsonx you want to use.
+The default version is the latest stable version found on
+[jsr.io](https://jsr.io).
+
+### Play button
+
+The play button transpiles and executes the code in the code editor. Output is
+displayed in the provided console.
+
+### Console
+
+The console displays the output of the code executed in the code editor.
+
+The clear button clears the console.
+
+### Share button
+
+The share button generates a link to the playground and navigates the user to
+the new link. The link is unlisted (not indexed by search engines) and can be
+shared with others.
+
+## Recovery and disposal
+
+> [!NOTE]
+>
+> The "Recovery and Disposal" form will be coming soon.
+
+Since playground links are unlisted, losing the link means losing the
+playground. In case you lose a playground, first check your browser history for
+the link. In case the playground is important and unrecoverable, you can use the
+form to file a ticket with the jsonx team so we can help you recover it.
+Similarly, if you have a playground exposing sensitive information, please file
+a ticket so we can remove it.
diff --git a/docs/03_jsx/00_index.md b/docs/03_jsx/00_index.md
new file mode 100644
index 0000000..ba620d8
--- /dev/null
+++ b/docs/03_jsx/00_index.md
@@ -0,0 +1,29 @@
+---
+title: JSX
+---
+
+# JSX
+
+> [!NOTE]
+>
+> Coming soon.
+
+[Learn why jsonx uses JS](/03_jsx/01_theory.md).
+
+### Why does jsonx use JSX?
+
+> [!NOTE]
+>
+> Coming soon.
+
+## Syntax
+
+> [!NOTE]
+>
+> Coming soon.
+
+## Project setup
+
+> [!NOTE]
+>
+> Coming soon.
diff --git a/docs/03_jsx/01_theory.md b/docs/03_jsx/01_theory.md
new file mode 100644
index 0000000..1cf07b1
--- /dev/null
+++ b/docs/03_jsx/01_theory.md
@@ -0,0 +1,15 @@
+---
+title: Theory
+---
+
+# Theory of JSX
+
+> [!NOTE]
+>
+> Coming soon.
+
+## Why does jsonx use JSX?
+
+> [!NOTE]
+>
+> Coming soon.
diff --git a/docs/04_examples/00_index.md b/docs/04_examples/00_index.md
new file mode 100644
index 0000000..81cf421
--- /dev/null
+++ b/docs/04_examples/00_index.md
@@ -0,0 +1,13 @@
+---
+title: Examples
+---
+
+# Examples
+
+> [!NOTE]
+>
+> More examples coming soon.
+
+Learn how to use jsonx in practical situations.
+
+- [Hello world↩](/04_examples/01_hello)
diff --git a/docs/04_examples/01_hello.md b/docs/04_examples/01_hello.md
new file mode 100644
index 0000000..e96d0b7
--- /dev/null
+++ b/docs/04_examples/01_hello.md
@@ -0,0 +1,10 @@
+---
+title: Hello world
+playground: example:01_animals.tsx
+---
+
+# Hello world
+
+This example demonstrates how to use jsonx to create a simple JSON object.
+
+Press the "Play" button to run the code.
diff --git a/docs/98_api_docs.md b/docs/98_api_docs.md
new file mode 100644
index 0000000..5e05d12
--- /dev/null
+++ b/docs/98_api_docs.md
@@ -0,0 +1,4 @@
+---
+title: View API Docs
+href: https://jsr.io/@fartlabs/jsonx
+---
diff --git a/docs/99_github.md b/docs/99_github.md
new file mode 100644
index 0000000..3c186ed
--- /dev/null
+++ b/docs/99_github.md
@@ -0,0 +1,4 @@
+---
+title: View on GitHub
+href: https://github.com/FartLabs/jsonx
+---
diff --git a/server/examples/01_animals.tsx b/examples/01_animals.tsx
similarity index 100%
rename from server/examples/01_animals.tsx
rename to examples/01_animals.tsx
diff --git a/fresh.gen.ts b/fresh.gen.ts
index 9b2bbd7..0ebbe32 100644
--- a/fresh.gen.ts
+++ b/fresh.gen.ts
@@ -2,26 +2,28 @@
 // This file SHOULD be checked into source version control.
 // This file is automatically updated during development when running `dev.ts`.
 
+import * as $_path_ from "./routes/[...path].ts";
 import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
-import * as $api_examples_id_ from "./routes/api/examples/[id].ts";
+import * as $api_examples_name_ from "./routes/api/examples/[name].ts";
+import * as $api_meta from "./routes/api/meta.ts";
 import * as $api_playgrounds_id_ from "./routes/api/playgrounds/[id].ts";
 import * as $api_playgrounds_index from "./routes/api/playgrounds/index.ts";
-import * as $index from "./routes/index.tsx";
-import * as $meta from "./routes/meta.ts";
+import * as $index from "./routes/index.ts";
 import * as $playgrounds_id_ from "./routes/playgrounds/[id].tsx";
 
 import { type Manifest } from "$fresh/server.ts";
 
 const manifest = {
   routes: {
+    "./routes/[...path].ts": $_path_,
     "./routes/_404.tsx": $_404,
     "./routes/_app.tsx": $_app,
-    "./routes/api/examples/[id].ts": $api_examples_id_,
+    "./routes/api/examples/[name].ts": $api_examples_name_,
+    "./routes/api/meta.ts": $api_meta,
     "./routes/api/playgrounds/[id].ts": $api_playgrounds_id_,
     "./routes/api/playgrounds/index.ts": $api_playgrounds_index,
-    "./routes/index.tsx": $index,
-    "./routes/meta.ts": $meta,
+    "./routes/index.ts": $index,
     "./routes/playgrounds/[id].tsx": $playgrounds_id_,
   },
   islands: {},
diff --git a/lib/docs/fs.ts b/lib/docs/fs.ts
new file mode 100644
index 0000000..39222b7
--- /dev/null
+++ b/lib/docs/fs.ts
@@ -0,0 +1,185 @@
+import { test } from "@std/front-matter";
+import { extract } from "@std/front-matter/any";
+import { walk } from "@std/fs";
+import { fromFileUrl, normalize, parse, SEPARATOR_PATTERN } from "@std/path";
+import type { FSItem } from "./items.ts";
+import type { Node } from "./nodes.ts";
+import { sortChildren } from "./nodes.ts";
+import { renderMd } from "./md.ts";
+
+/**
+ * RenderFSItemsOptions represents the options for rendering file-based items.
+ */
+export interface ReadFSItemsOptions {
+  root: string | URL;
+  isIndex?: (suffix: string, override?: string) => boolean;
+}
+
+/**
+ * Content represents the content of an item.
+ */
+export interface Content {
+  /**
+   * md is the markdown representation of the content.
+   */
+  md: string;
+
+  /**
+   * html is the HTML representation of the content.
+   */
+  body: string;
+
+  /**
+   * toc is the HTML table of contents of the content.
+   */
+  toc?: string;
+
+  /**
+   * playground is a playground expression.
+   */
+  playground?: string;
+}
+
+/**
+ * ReadFSItemsResult represents the result of reading file-based items.
+ */
+export interface ReadFSItemsResult {
+  items: FSItem[];
+  nodes: Node<FSItem>[];
+  contents: Map<string, Content>;
+}
+
+/**
+ * readFSItems reads the file-based items recursively.
+ */
+export async function readFSItems(
+  options: ReadFSItemsOptions,
+): Promise<ReadFSItemsResult> {
+  function nameOf(path: string, override?: string): string[] {
+    // Parse the path.
+    const parsed = parse(path);
+
+    // Remove index suffix from the name.
+    const current = override ?? parsed.name;
+    const name: string[] = [];
+    if (!options.isIndex?.(parsed.name, override)) {
+      name.push(current);
+    }
+
+    // If the path has a directory, add it to the name.
+    if (parsed.dir !== "") {
+      // https://discord.com/channels/684898665143206084/684898665151594506/1217030758686785556
+      const parent = parsed.dir
+        .split(SEPARATOR_PATTERN)
+        .slice(root.length);
+      name.unshift(...parent);
+    }
+
+    return name;
+  }
+
+  // Normalize the root.
+  const root = normalize(
+    options.root instanceof URL
+      ? fromFileUrl(options.root.toString())
+      : options.root,
+  ).split(SEPARATOR_PATTERN);
+  if (root[root.length - 1] === "") {
+    root.pop();
+  }
+
+  // Read the file-based items.
+  const items: FSItem[] = [];
+  const contents = new Map<string, Content>();
+  const walkIt = walk(
+    options.root,
+    { exts: [".md"], includeDirs: false },
+  );
+  for await (const file of walkIt) {
+    let md = await Deno.readTextFile(file.path);
+
+    // Render the FSItem.
+    let nameOverride: string | undefined;
+    let title: string | undefined;
+    let href: string | undefined;
+    let playground: string | undefined;
+    if (test(md)) {
+      const extracted = extract<
+        { name: string; title: string; href: string; playground: string }
+      >(md);
+      nameOverride = extracted.attrs.name ?? nameOverride;
+      title = extracted.attrs.title ?? title;
+      href = extracted.attrs.href ?? href;
+      playground = extracted.attrs.playground ?? playground;
+      md = extracted.body;
+    }
+
+    // Get the name of the item.
+    const name = nameOf(file.path, nameOverride);
+
+    // Store the item contents.
+    const { body, toc } = renderMd(md);
+    contents.set(
+      name.join(NAME_SEPARATOR),
+      { md, body, toc, playground },
+    );
+
+    // Store the item in the items array.
+    const item = { name, title, href };
+    items.push(item);
+  }
+
+  // Return items relative to the root.
+  return { items, contents, nodes: toNodes(items) };
+}
+
+/**
+ * NAME_SEPARATOR is the separator for an FSItem name.
+ */
+export const NAME_SEPARATOR = "/";
+
+/**
+ * toNodes converts an array of FSItems to list of tree nodes.
+ */
+export function toNodes(items: FSItem[]): Node<FSItem>[] {
+  const root: Node<FSItem> = { name: [] };
+  let visitedRoot = false;
+  for (const item of items) {
+    let node = root;
+    if (item.name.length === 0) {
+      visitedRoot = true;
+    }
+
+    for (let i = 0; i < item.name.length; i++) {
+      const part = item.name.slice(0, i + 1).join(NAME_SEPARATOR);
+      let child = node.children?.find((child) =>
+        child.name.join(NAME_SEPARATOR) === part
+      );
+      if (child === undefined) {
+        if (node.children === undefined) {
+          node.children = [];
+        }
+
+        child = { name: item.name.slice(0, i + 1) };
+        node.children.push(child);
+      }
+
+      node = child;
+    }
+    node.title = item.title;
+    node.href = item.href;
+  }
+
+  sortChildren(
+    root,
+    (a, b) =>
+      a.name.join(NAME_SEPARATOR).localeCompare(b.name.join(NAME_SEPARATOR)),
+  );
+
+  const children = root.children ?? [];
+  if (visitedRoot) {
+    children.unshift({ name: [], title: root.title, href: root.href });
+  }
+
+  return children;
+}
diff --git a/lib/docs/items.ts b/lib/docs/items.ts
new file mode 100644
index 0000000..1e7ce19
--- /dev/null
+++ b/lib/docs/items.ts
@@ -0,0 +1,8 @@
+/**
+ * FSItem is an item represented in the file system.
+ */
+export interface FSItem {
+  name: string[];
+  title?: string;
+  href?: string;
+}
diff --git a/lib/docs/md.ts b/lib/docs/md.ts
new file mode 100644
index 0000000..3b48ceb
--- /dev/null
+++ b/lib/docs/md.ts
@@ -0,0 +1,50 @@
+import MarkdownIt from "markdown-it";
+import anchorPlugin from "markdown-it-anchor";
+import tocDoneRightPlugin from "markdown-it-toc-done-right";
+import hljs from "highlight.js";
+
+/**
+ * renderMd renders markdown content.
+ */
+export function renderMd(md: string): RenderMdResult {
+  const rendered = renderer.render(`[[toc]]\n<!-- toc -->\n${md}`);
+  const [toc, body] = rendered.split("<!-- toc -->");
+  return { body, toc };
+}
+
+/**
+ * RenderMdResult represents the result of rendering markdown content.
+ */
+export interface RenderMdResult {
+  body: string;
+  toc: string;
+}
+
+/**
+ * renderer is the markdown renderer used for rendering markdown content.
+ *
+ * @see
+ * https://github.com/markdown-it/markdown-it/blob/0fe7ccb4b7f30236fb05f623be6924961d296d3d/README.md?plain=1#L154
+ */
+const renderer: MarkdownIt = new MarkdownIt({
+  html: true,
+  linkify: true,
+  typographer: true,
+  highlight(content: string, language?: string) {
+    const html = language && hljs.getLanguage(language)
+      ? hljs.highlight(
+        content,
+        { language, ignoreIllegals: true },
+      ).value
+      : renderer.utils.escapeHtml(content);
+    return `<pre data-lang="${language}"><code class="hljs">${html}</code></pre>`;
+  },
+});
+
+renderer.use(anchorPlugin, {
+  permalink: true,
+  permalinkBefore: true,
+  permalinkSymbol: "§",
+});
+
+renderer.use(tocDoneRightPlugin);
diff --git a/lib/docs/mod_client.ts b/lib/docs/mod_client.ts
new file mode 100644
index 0000000..1952f46
--- /dev/null
+++ b/lib/docs/mod_client.ts
@@ -0,0 +1,2 @@
+export * from "./items.ts";
+export * from "./nodes.ts";
diff --git a/lib/docs/mod_server.ts b/lib/docs/mod_server.ts
new file mode 100644
index 0000000..a2d16b6
--- /dev/null
+++ b/lib/docs/mod_server.ts
@@ -0,0 +1,2 @@
+export * from "./mod_client.ts";
+export * from "./fs.ts";
diff --git a/lib/docs/nodes.ts b/lib/docs/nodes.ts
new file mode 100644
index 0000000..fea8ed3
--- /dev/null
+++ b/lib/docs/nodes.ts
@@ -0,0 +1,19 @@
+/**
+ * Node is a node in a tree.
+ */
+export type Node<T> =
+  & T
+  & { children?: Node<T>[] };
+
+/**
+ * sortChildren sorts the children of a node recursively.
+ */
+export function sortChildren<T>(
+  node: Node<T>,
+  fn: (a: Node<T>, b: Node<T>) => number,
+): void {
+  if (node.children !== undefined) {
+    node.children.sort(fn);
+    node.children.forEach((child) => sortChildren(child, fn));
+  }
+}
diff --git a/lib/examples/examples.ts b/lib/examples/examples.ts
new file mode 100644
index 0000000..a8456c6
--- /dev/null
+++ b/lib/examples/examples.ts
@@ -0,0 +1,24 @@
+/**
+ * readExample reads the example file and returns the content.
+ */
+export async function readExample(path: string | URL): Promise<string | null> {
+  try {
+    const text = await Deno.readTextFile(path);
+    return trimJSXImportSource(text);
+  } catch (error) {
+    if (error instanceof Deno.errors.NotFound) {
+      return null;
+    }
+
+    throw error;
+  }
+}
+
+function trimJSXImportSource(code: string): string {
+  const jsxImportSource = "/** @jsxImportSource @fartlabs/jsonx */\n\n";
+  if (code.startsWith(jsxImportSource)) {
+    return code.substring(jsxImportSource.length);
+  }
+
+  return code;
+}
diff --git a/server/examples/mod.ts b/lib/examples/mod.ts
similarity index 100%
rename from server/examples/mod.ts
rename to lib/examples/mod.ts
diff --git a/client/meta.ts b/lib/meta/meta.ts
similarity index 73%
rename from client/meta.ts
rename to lib/meta/meta.ts
index 216f79e..12fba7c 100644
--- a/client/meta.ts
+++ b/lib/meta/meta.ts
@@ -24,9 +24,11 @@ function playgroundMeta({ latest, versions }: {
   // https://github.com/FartLabs/jsonx/issues/13
   const minCompatible = parse("0.0.8");
   return {
-    latest: latest,
+    latest,
     versions: Object.keys(versions)
-      .filter((versionTag) => greaterThan(parse(versionTag), minCompatible))
-      .sort((a, b) => compare(parse(b), parse(a))),
+      .map((versionTag) => ({ versionTag, semver: parse(versionTag) }))
+      .filter(({ semver }) => greaterThan(semver, minCompatible))
+      .sort((a, b) => compare(b.semver, a.semver))
+      .map((v) => v.versionTag),
   };
 }
diff --git a/lib/meta/mod.ts b/lib/meta/mod.ts
new file mode 100644
index 0000000..934df4c
--- /dev/null
+++ b/lib/meta/mod.ts
@@ -0,0 +1 @@
+export * from "./meta.ts";
diff --git a/server/playgrounds.ts b/lib/playgrounds/deno_kv/kv.ts
similarity index 79%
rename from server/playgrounds.ts
rename to lib/playgrounds/deno_kv/kv.ts
index 58a5917..32afaa4 100644
--- a/server/playgrounds.ts
+++ b/lib/playgrounds/deno_kv/kv.ts
@@ -1,6 +1,10 @@
 /// <reference lib="deno.unstable" />
 
-import type { AddPlaygroundRequest, Playground } from "#/client/playgrounds.ts";
+import { ulid } from "@std/ulid";
+import type {
+  AddPlaygroundRequest,
+  Playground,
+} from "#/lib/playgrounds/mod.ts";
 
 /**
  * getPlayground gets a playground by ID.
@@ -20,7 +24,7 @@ export async function addPlayground(
   kv: Deno.Kv,
   request: AddPlaygroundRequest,
 ): Promise<Playground> {
-  const id = crypto.randomUUID();
+  const id = ulid();
   const playground = { ...request, id };
   const result = await kv.set(playgroundKey(id), playground);
   if (!result) {
@@ -43,6 +47,9 @@ export async function setPlayground(
   }
 }
 
+// TODO: Add playground title in playground storage via
+// https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt
+
 function playgroundKey(id: string): Deno.KvKey {
   return ["playgrounds", id];
 }
diff --git a/lib/playgrounds/deno_kv/mod.ts b/lib/playgrounds/deno_kv/mod.ts
new file mode 100644
index 0000000..b076734
--- /dev/null
+++ b/lib/playgrounds/deno_kv/mod.ts
@@ -0,0 +1 @@
+export * from "./kv.ts";
diff --git a/lib/playgrounds/expressions/expressions.ts b/lib/playgrounds/expressions/expressions.ts
new file mode 100644
index 0000000..c0ffe07
--- /dev/null
+++ b/lib/playgrounds/expressions/expressions.ts
@@ -0,0 +1,102 @@
+/**
+ * @fileoverview
+ *
+ * This file contains the helper functions for parsing and evaluating playground
+ * expressions. Playground expressions are a simple syntax for embedding
+ * playgrounds directly into markdown files.
+ */
+
+import type { PlaygroundData } from "#/lib/playgrounds/mod.ts";
+import { getPlayground } from "#/lib/playgrounds/deno_kv/mod.ts";
+import { readExample } from "#/lib/examples/mod.ts";
+import { kv } from "#/lib/resources/kv.ts";
+
+/**
+ * PlaygroundExpression is a playground expression.
+ */
+export type PlaygroundExpression =
+  | { id: string }
+  | { example: string };
+
+/**
+ * parsePlaygroundExpression parses a playground expression.
+ *
+ * Example playground expressions:
+ *
+ * <!-- playground id:abc123 -->
+ * <!-- playground example:hello_world -->
+ */
+export function parsePlaygroundExpression(
+  expression: string,
+): PlaygroundExpression {
+  const id = parsePlaygroundIDExpression(expression);
+  if (id) {
+    return { id };
+  }
+
+  const example = parsePlaygroundExampleExpression(expression);
+  if (example) {
+    return { example };
+  }
+
+  throw new Error(`Invalid playground expression: ${expression}`);
+}
+
+/**
+ * parsePlaygroundIDExpression parses the playground ID from a playground
+ * expression.
+ */
+export function parsePlaygroundIDExpression(
+  expression: string,
+): string | null {
+  return parseExpressionSuffix(expression, "id:");
+}
+
+/**
+ * parsePlaygroundExampleExpression parses the example name from a playground
+ * expression.
+ */
+export function parsePlaygroundExampleExpression(
+  expression: string,
+): string | null {
+  return parseExpressionSuffix(expression, "example:");
+}
+
+function parseExpressionSuffix(
+  expression: string,
+  prefix: string,
+): string | null {
+  if (expression.startsWith(prefix)) {
+    return expression.slice(prefix.length);
+  }
+
+  return null;
+}
+
+/**
+ * fromExpression converts a playground expression to playground data.
+ */
+export async function fromExpression(
+  expression: string,
+): Promise<PlaygroundData> {
+  const expr = parsePlaygroundExpression(expression);
+  if ("id" in expr) {
+    const playground = await getPlayground(kv, expr.id);
+    if (!playground) {
+      throw new Error(`Playground not found: ${expr.id}`);
+    }
+
+    return { code: playground.code, version: playground.version };
+  }
+
+  if ("example" in expr) {
+    const example = await readExample(`./examples/${expr.example}`);
+    if (!example) {
+      throw new Error(`Example not found: ${expr.example}`);
+    }
+
+    return { code: example };
+  }
+
+  throw new Error(`Invalid playground expression: ${expr}`);
+}
diff --git a/lib/playgrounds/expressions/mod.ts b/lib/playgrounds/expressions/mod.ts
new file mode 100644
index 0000000..845c542
--- /dev/null
+++ b/lib/playgrounds/expressions/mod.ts
@@ -0,0 +1 @@
+export * from "./expressions.ts";
diff --git a/lib/playgrounds/mod.ts b/lib/playgrounds/mod.ts
new file mode 100644
index 0000000..8510bd9
--- /dev/null
+++ b/lib/playgrounds/mod.ts
@@ -0,0 +1 @@
+export * from "./playgrounds.ts";
diff --git a/lib/playgrounds/playgrounds.ts b/lib/playgrounds/playgrounds.ts
new file mode 100644
index 0000000..baaf663
--- /dev/null
+++ b/lib/playgrounds/playgrounds.ts
@@ -0,0 +1,34 @@
+/**
+ * Playground is a stored jsonx playground.
+ */
+export interface Playground extends PlaygroundData {
+  /**
+   * id is the playground ID.
+   */
+  id: string;
+
+  /**
+   * version is the playground version.
+   */
+  version: string;
+}
+
+/**
+ * PlaygroundData is the data for a playground.
+ */
+export interface PlaygroundData {
+  /**
+   * code is the playground code.
+   */
+  code: string;
+
+  /**
+   * version is the playground version.
+   */
+  version?: string;
+}
+
+/**
+ * AddPlaygroundRequest is the request to add a playground.
+ */
+export type AddPlaygroundRequest = Omit<Playground, "id">;
diff --git a/lib/resources/docs.ts b/lib/resources/docs.ts
new file mode 100644
index 0000000..4b7096d
--- /dev/null
+++ b/lib/resources/docs.ts
@@ -0,0 +1,6 @@
+import { readFSItems } from "#/lib/docs/mod_server.ts";
+
+export const { items, contents, nodes } = await readFSItems({
+  root: "./docs",
+  isIndex: (suffix) => suffix.startsWith("00_"),
+});
diff --git a/lib/resources/examples.ts b/lib/resources/examples.ts
new file mode 100644
index 0000000..2192601
--- /dev/null
+++ b/lib/resources/examples.ts
@@ -0,0 +1,3 @@
+import { readExample } from "#/lib/examples/examples.ts";
+
+export const defaultExample = (await readExample("./examples/01_animals.tsx"))!;
diff --git a/server/kv.ts b/lib/resources/kv.ts
similarity index 100%
rename from server/kv.ts
rename to lib/resources/kv.ts
diff --git a/lib/to_path.ts b/lib/to_path.ts
new file mode 100644
index 0000000..8473b96
--- /dev/null
+++ b/lib/to_path.ts
@@ -0,0 +1,6 @@
+/**
+ * toPath returns the path from the path string.
+ */
+export function toPath(path: string): string[] {
+  return path.split("/").filter(Boolean);
+}
diff --git a/routes/[...path].ts b/routes/[...path].ts
new file mode 100644
index 0000000..a2e961a
--- /dev/null
+++ b/routes/[...path].ts
@@ -0,0 +1 @@
+export { default as default } from "#/components/doc/doc.tsx";
diff --git a/routes/_404.tsx b/routes/_404.tsx
index c63ae2e..e7a38b5 100644
--- a/routes/_404.tsx
+++ b/routes/_404.tsx
@@ -8,13 +8,6 @@ export default function Error404() {
       </Head>
       <div class="px-4 py-8 mx-auto bg-[#86efac]">
         <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
-          <img
-            class="my-6"
-            src="/logo.svg"
-            width="128"
-            height="128"
-            alt="the Fresh logo: a sliced lemon dripping with juice"
-          />
           <h1 class="text-4xl font-bold">404 - Page not found</h1>
           <p class="my-4">
             The page you were looking for doesn't exist.
diff --git a/routes/_app.tsx b/routes/_app.tsx
index 2748bee..b51a12f 100644
--- a/routes/_app.tsx
+++ b/routes/_app.tsx
@@ -1,15 +1,23 @@
-import { type PageProps } from "$fresh/server.ts";
+import type { PageProps } from "$fresh/server.ts";
+import { toPath } from "#/lib/to_path.ts";
+import Nav from "#/components/nav.tsx";
+import Foot from "#/components/foot.tsx";
 
-export default function App({ Component }: PageProps) {
+export default function App({ Component, url }: PageProps) {
   return (
     <html>
       <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>jsonx | Documentation</title>
+        <link rel="stylesheet" href="/global.css" />
       </head>
       <body>
+        <Nav path={toPath(url.pathname)} />
+
         <Component />
+
+        <Foot />
       </body>
     </html>
   );
diff --git a/routes/api/examples/[id].ts b/routes/api/examples/[name].ts
similarity index 55%
rename from routes/api/examples/[id].ts
rename to routes/api/examples/[name].ts
index 19dfb2c..0073252 100644
--- a/routes/api/examples/[id].ts
+++ b/routes/api/examples/[name].ts
@@ -1,9 +1,9 @@
 import type { Handlers } from "$fresh/server.ts";
-import { getExampleByName } from "#/server/examples/mod.ts";
+import { readExample } from "#/lib/examples/mod.ts";
 
 export const handler: Handlers = {
   async GET(_request, ctx) {
-    const example = await getExampleByName(ctx.params.id);
+    const example = await readExample(`./examples/${ctx.params.name}`);
     return new Response(example);
   },
 };
diff --git a/routes/meta.ts b/routes/api/meta.ts
similarity index 80%
rename from routes/meta.ts
rename to routes/api/meta.ts
index 9f05d69..59ece56 100644
--- a/routes/meta.ts
+++ b/routes/api/meta.ts
@@ -1,5 +1,5 @@
 import type { Handlers } from "$fresh/server.ts";
-import { getMeta } from "#/client/meta.ts";
+import { getMeta } from "#/lib/meta/mod.ts";
 
 export const handler: Handlers = {
   async GET(_request, _ctx) {
diff --git a/routes/api/playgrounds/[id].ts b/routes/api/playgrounds/[id].ts
index e71e8e6..ff74134 100644
--- a/routes/api/playgrounds/[id].ts
+++ b/routes/api/playgrounds/[id].ts
@@ -1,6 +1,6 @@
 import type { Handlers } from "$fresh/server.ts";
-import { getPlayground, setPlayground } from "#/server/playgrounds.ts";
-import { kv } from "#/server/kv.ts";
+import { kv } from "#/lib/resources/kv.ts";
+import { getPlayground, setPlayground } from "#/lib/playgrounds/deno_kv/mod.ts";
 
 export const handler: Handlers = {
   async GET(_request, ctx) {
diff --git a/routes/api/playgrounds/index.ts b/routes/api/playgrounds/index.ts
index 4738796..3bf8d70 100644
--- a/routes/api/playgrounds/index.ts
+++ b/routes/api/playgrounds/index.ts
@@ -1,7 +1,7 @@
 import type { Handlers } from "$fresh/server.ts";
-import type { AddPlaygroundRequest } from "#/client/playgrounds.ts";
-import { addPlayground } from "#/server/playgrounds.ts";
-import { kv } from "#/server/kv.ts";
+import type { AddPlaygroundRequest } from "#/lib/playgrounds/mod.ts";
+import { addPlayground } from "#/lib/playgrounds/deno_kv/mod.ts";
+import { kv } from "#/lib/resources/kv.ts";
 
 export const handler: Handlers = {
   async POST(request, _ctx) {
diff --git a/routes/index.ts b/routes/index.ts
new file mode 100644
index 0000000..a2e961a
--- /dev/null
+++ b/routes/index.ts
@@ -0,0 +1 @@
+export { default as default } from "#/components/doc/doc.tsx";
diff --git a/routes/index.tsx b/routes/index.tsx
deleted file mode 100644
index 8fcb3e8..0000000
--- a/routes/index.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Head } from "$fresh/runtime.ts";
-import Playground from "#/client/components/playground/playground.tsx";
-import Nav from "#/client/nav.tsx";
-import { getMeta } from "#/client/meta.ts";
-import { kv } from "#/server/kv.ts";
-import { getExampleByName } from "#/server/examples/mod.ts";
-import { getPlayground } from "#/server/playgrounds.ts";
-
-export default async function Home(request: Request) {
-  const url = new URL(request.url);
-  const id = url.searchParams.get("id");
-  let code = "";
-  let version: string | undefined = undefined;
-  if (id) {
-    const playground = await getPlayground(kv, id);
-    if (!playground) {
-      throw new Error("Playground not found!");
-    }
-
-    code = playground.code;
-    version = playground.version;
-  } else {
-    code = await getExampleByName("01_animals.tsx");
-  }
-
-  const meta = await getMeta();
-
-  return (
-    <>
-      <Head>
-        <title>jsonx | Documentation</title>
-        <link rel="stylesheet" href="/playground.css" />
-      </Head>
-
-      <Nav />
-
-      <main>
-        <Playground code={code} version={version} meta={meta} />
-      </main>
-    </>
-  );
-}
diff --git a/routes/playgrounds/[id].tsx b/routes/playgrounds/[id].tsx
index d9a8d44..35a70ec 100644
--- a/routes/playgrounds/[id].tsx
+++ b/routes/playgrounds/[id].tsx
@@ -1,36 +1,59 @@
-import type { FreshContext } from "$fresh/server.ts";
+import type { FreshContext, RouteConfig } from "$fresh/server.ts";
 import { Head } from "$fresh/runtime.ts";
-import Nav from "#/client/nav.tsx";
-import Playground from "#/client/components/playground/playground.tsx";
-import { getMeta } from "#/client/meta.ts";
-import { getPlayground } from "#/server/playgrounds.ts";
-import { kv } from "#/server/kv.ts";
+import { getMeta } from "#/lib/meta/meta.ts";
+import { getPlayground } from "#/lib/playgrounds/deno_kv/mod.ts";
+import { kv } from "#/lib/resources/kv.ts";
+import { defaultExample } from "#/lib/resources/examples.ts";
+import PlaygroundAside from "#/components/playground_aside.tsx";
+import Playground from "#/components/playground/playground.tsx";
+import { parse } from "$std/path/parse.ts";
+import { parsePlaygroundExampleExpression } from "#/lib/playgrounds/expressions/mod.ts";
+import { readExample } from "#/lib/examples/mod.ts";
+
+export const config: RouteConfig = {
+  routeOverride: "/(p|playgrounds){/:id}?",
+};
 
 export default async function PlaygroundHandler(
   _request: Request,
   ctx: FreshContext,
 ) {
-  const playground = await getPlayground(kv, ctx.params.id);
-  if (!playground) {
-    return new Response("Not found!", { status: 404 });
+  const meta = await getMeta();
+  let code = defaultExample;
+  let version = meta.latest;
+  if (ctx.params.id) {
+    const exampleName = parsePlaygroundExampleExpression(ctx.params.id);
+    if (exampleName) {
+      const example = await readExample(`./examples/${exampleName}`);
+      if (!example) {
+        return new Response("Not found!", { status: 404 });
+      }
+
+      code = example;
+    } else {
+      const playground = await getPlayground(kv, ctx.params.id);
+      if (!playground) {
+        return new Response("Not found!", { status: 404 });
+      }
+
+      code = playground.code;
+      version = playground.version;
+    }
   }
 
-  const meta = await getMeta();
   return (
     <>
       <Head>
         <title>jsonx | Playground</title>
-        <link rel="stylesheet" href="/playground.css" />
+        <meta name="robots" content="noindex, nofollow" />
       </Head>
 
-      <Nav />
+      <aside class="aside">
+        <PlaygroundAside id={ctx.params.id} version={version} />
+      </aside>
 
-      <main>
-        <Playground
-          code={playground.code}
-          version={playground.version}
-          meta={meta}
-        />
+      <main class="main">
+        <Playground code={code} version={version} meta={meta} />
       </main>
     </>
   );
diff --git a/server/examples/examples.ts b/server/examples/examples.ts
deleted file mode 100644
index 058160f..0000000
--- a/server/examples/examples.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * getExampleByName gets an example by example name.
- */
-export async function getExampleByName(name: string): Promise<string> {
-  const text = await Deno.readTextFile(
-    new URL(import.meta.resolve("./" + name)),
-  );
-  return trimJSXImportSource(text);
-}
-
-function trimJSXImportSource(code: string): string {
-  const jsxImportSource = "/** @jsxImportSource @fartlabs/jsonx */\n\n";
-  if (code.startsWith(jsxImportSource)) {
-    return code.substring(jsxImportSource.length);
-  }
-
-  return code;
-}
diff --git a/static/copy.js b/static/copy.js
new file mode 100644
index 0000000..0f7b640
--- /dev/null
+++ b/static/copy.js
@@ -0,0 +1,35 @@
+// Source: https://www.roboleary.net/2022/01/13/copy-code-to-clipboard-blog.html
+//
+const copyButtonLabel = "Copy Code";
+const copiedButtonLabel = "Code Copied";
+
+// use a class selector if available
+const blocks = document.querySelectorAll("pre");
+
+blocks.forEach((block) => {
+  // only add button if browser supports Clipboard API
+  if (navigator.clipboard) {
+    const button = document.createElement("button");
+
+    button.innerText = copyButtonLabel;
+    block.appendChild(button);
+
+    button.addEventListener("click", async () => {
+      await copyCode(block, button);
+    });
+  }
+});
+
+async function copyCode(block, button) {
+  const code = block.querySelector("code");
+  const text = code.innerText;
+  await navigator.clipboard.writeText(text)
+    .then(() => {
+      // visual feedback that task is completed
+      button.innerText = copiedButtonLabel;
+
+      setTimeout(() => {
+        button.innerText = copyButtonLabel;
+      }, 1e3);
+    });
+}
diff --git a/static/global.css b/static/global.css
new file mode 100644
index 0000000..2916c9c
--- /dev/null
+++ b/static/global.css
@@ -0,0 +1,69 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+::selection {
+  background-color: #f0a8ff;
+}
+
+body {
+  background-color: #bbb;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(auto, 4);
+  grid-template-areas: "nav" "aside" "main" "foot";
+  gap: 0px 0px;
+  font-size: 1.2em;
+}
+
+.nav {
+  grid-area: nav;
+  margin: 0 1em;
+}
+
+.nav h1 {
+  font-size: 1.5em;
+}
+
+.nav ul {
+  padding: 0;
+  margin-left: 1em;
+}
+
+.main {
+  grid-area: main;
+  padding: 0 0.7em;
+  min-height: 95vh;
+}
+
+.aside {
+  grid-area: aside;
+  padding: 1em;
+}
+
+.foot {
+  grid-area: foot;
+}
+
+.foot p {
+  text-align: center;
+  padding: 1em;
+}
+
+.table-of-contents ol {
+  margin-left: 1em;
+}
+
+@media (min-width: 768px) {
+  body {
+    grid-template-columns: 1fr 3fr 1fr;
+    grid-template-rows: 1fr auto;
+    grid-template-areas:
+      "nav main aside"
+      "foot foot foot";
+  }
+}
diff --git a/static/md.css b/static/md.css
new file mode 100644
index 0000000..3e6f6c6
--- /dev/null
+++ b/static/md.css
@@ -0,0 +1,115 @@
+.markdown-body {
+  margin: 0 auto;
+  line-height: 1.5;
+}
+
+@media (min-width: 768px) {
+  .markdown-body {
+    width: min(65ch, 100%);
+  }
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin: 0.6em 0 0.4em 0;
+  font-weight: bold;
+  line-height: 1.5;
+}
+
+.markdown-body h1 {
+  font-size: 2em;
+}
+
+.markdown-body h2 {
+  font-size: 1.5em;
+}
+
+.markdown-body h3 {
+  font-size: 1.25em;
+}
+
+.markdown-body h4 {
+  font-size: 1em;
+}
+
+.markdown-body h5 {
+  font-size: 0.875em;
+}
+
+.markdown-body h6 {
+  font-size: 0.85em;
+}
+
+.markdown-body p {
+  margin: 0.5em 0;
+}
+
+.markdown-body ul,
+.markdown-body ol {
+  margin: 0.5em 2em;
+}
+
+.markdown-body ul ul,
+.markdown-body ul ol,
+.markdown-body ol ul,
+.markdown-body ol ol {
+  margin: 0;
+}
+
+.markdown-body li {
+  margin: 0.25em 0;
+}
+
+.markdown-body blockquote {
+  margin: 0.5em 0;
+  padding: 0.5em 1em;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-left: 0.25em solid #ddd;
+}
+
+.markdown-body pre,
+.markdown-body code {
+  font-family: monospace;
+  background-color: #f8f8f8;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  padding: 0.1em 0.2em;
+}
+
+.markdown-body pre code {
+  display: block;
+  padding: 1em;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.markdown-body pre {
+  position: relative;
+}
+
+.markdown-body pre:before {
+  content: attr(data-lang);
+  font-size: 1.2em;
+  display: block;
+  text-transform: uppercase;
+  text-decoration: underline;
+  text-underline-offset: 0.3em;
+  padding: 0.2em 0.9em;
+}
+
+.markdown-body pre button {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  height: 2em;
+}
+
+.markdown-body img:not(:has([width]), :has([height])) {
+  max-width: 100%;
+  height: auto;
+}
diff --git a/static/playground.css b/static/playground.css
index cfc3ff1..649831e 100644
--- a/static/playground.css
+++ b/static/playground.css
@@ -1,70 +1,9 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-}
-
 body {
-  background-color: #bbb;
   overflow-y: scroll;
   overflow-x: hidden;
   margin: 0 -5px 0 0;
 }
 
-nav {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1em 1em 0 1em;
-}
-
-.badges {
-  display: flex;
-  gap: 0.5em;
-}
-
-.badges a {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  outline: 2px solid #333;
-  color: #333;
-  border-radius: 0.5em;
-  transition: outline 0.2s;
-  padding: 0.5em;
-  text-decoration: none;
-  font-weight: bold;
-}
-
-.badges a:hover {
-  outline: 5px solid #333;
-}
-
-@media (max-width: 400px) {
-  .badges a {
-    outline: none;
-  }
-
-  .badges a:hover {
-    outline: none;
-  }
-
-  .badges a span {
-    display: none;
-  }
-}
-
-.badges img {
-  height: 1.5em;
-  align-self: center;
-}
-
-main {
-  padding: 0 0.7em;
-}
-
 details {
   color: #bbb;
   outline: 2px solid #333;
diff --git a/static/script.js b/static/script.js
index f25be11..4cb2401 100644
--- a/static/script.js
+++ b/static/script.js
@@ -34,15 +34,25 @@ async function transform(options) {
 let cmEditor;
 
 function createEditor(options) {
+  // https://codemirror.net/examples/styling/
+  // https://github.com/codemirror/dev/blob/ccb92f9b09ceec46caceae4fb908a83642271b4d/demo/demo.ts
   cmEditor = new EditorView({
     doc: options.code,
     parent: options.target,
-    extensions: [keymap.of(defaultKeymap), lineNumbers()],
+    extensions: [
+      keymap.of(defaultKeymap),
+      lineNumbers(),
+      EditorView.lineWrapping,
+    ],
   });
 }
 
 function sharePlayground() {
-  if (!confirm("Are you sure you want to share this playground?")) {
+  if (
+    !confirm(
+      "Are you sure you want to share this playground?\nPlaygrounds cannot be searched or deleted at a later time.",
+    )
+  ) {
     return;
   }
 
@@ -76,11 +86,9 @@ function sharePlayground() {
  * setup create a playground.
  */
 async function setup(options) {
-  // Initialize esbuild.
-  await esbuild.initialize({
+  const esbuildInitPromise = esbuild.initialize({
     wasmURL: "https://esm.sh/esbuild-wasm@0.20.1/esbuild.wasm",
   });
-
   await createEditor({
     target: elements.editor,
     code: options.code,
@@ -110,6 +118,9 @@ async function setup(options) {
     }
   });
 
+  // Initialize esbuild.
+  await esbuildInitPromise;
+
   // Enable button interactions.
   play.disabled = false;
   share.disabled = false;