FartLabs · EthanThatOneKid · Mar 27, 2024 · Mar 19, 2024 · Mar 20, 2024 · Mar 20, 2024
diff --git a/client/components/playground/scripts.tsx b/client/components/playground/scripts.tsx
diff --git a/client/nav.tsx b/client/nav.tsx
diff --git a/client/playgrounds.ts b/client/playgrounds.ts
diff --git a/components/doc/doc.tsx 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
@@ -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
@@ -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
@@ -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
@@ -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 → components/playground/playground.tsx b/client/components/playground/playground.tsx → 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
@@ -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
@@ -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
@@ -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
@@ -29,9 +29,18 @@
     "@fartlabs/jsonx": "jsr:@fartlabs/jsonx@^0.0.10",
     "@preact/signals": "https://esm.sh/*@preact/[email protected]",
     "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
+    "@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/[email protected]",
+    "markdown-it": "https://esm.sh/[email protected]",
+    "markdown-it-anchor": "https://esm.sh/[email protected]",
+    "markdown-it-toc-done-right": "https://esm.sh/[email protected]",
     "preact": "https://esm.sh/[email protected]",
     "preact/": "https://esm.sh/[email protected]/"
   },

diff --git a/docs/00_index.md 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.