+
+ {props.playground && (
+
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 (
+ <>
+
+
+
+ );
+}
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 (
+ <>
+ On this page
+
+ {props.id
+ ? p/{props.id}
+ : Unsaved}
+
+
+ Using jsonx version{" "}
+ {props.version}
+
+
+ );
+}
+
+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[];
+ filter?: (node: Node) => boolean;
+}
+
+/**
+ * ToC is a recursive component that renders a table of contents.
+ */
+export default function ToC(props: ToCProps) {
+ return (
+
+ {props.nodes.map((node) => (
+ -
+ {node.title && (
+ {node.title}
+ )}
+ {node.children && (props.filter?.(node) ?? true) && (
+
+ ))}
+
+ );
+}
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 = (
+ <>
+ [];
+ contents: Map;
+}
+
+/**
+ * readFSItems reads the file-based items recursively.
+ */
+export async function readFSItems(
+ options: ReadFSItemsOptions,
+): Promise {
+ 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();
+ 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[] {
+ const root: Node = { 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\n${md}`);
+ const [toc, body] = rendered.split("");
+ 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 `${html}
`;
+ },
+});
+
+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
+ & { children?: Node[] };
+
+/**
+ * sortChildren sorts the children of a node recursively.
+ */
+export function sortChildren(
+ node: Node,
+ fn: (a: Node, b: Node) => 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 {
+ 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 @@
/// {
- 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:
+ *
+ *
+ *
+ */
+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 {
+ 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;
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() {
- 
404 - Page not found
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 (
jsonx | Documentation
+
+
+
jsonx | Documentation
-
-
-
-
-
-
-
-
- );
-}
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 (
<>
jsonx | Playground
-
+
-
+
-
-
+
);
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 {
- 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;
-
+ {props.nodes.map((node) => (
+
-
+ {node.title && (
+ {node.title}
+ )}
+ {node.children && (props.filter?.(node) ?? true) && (
+
+ )} +
+ ))}
+
${html}
-
jsonx | Documentation
+
+
+
jsonx | Documentation
-
-
-
-
-
-
-
-
- );
-}
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 (
<>
jsonx | Playground
-
+
-
+
-
-
+
);
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 {
- 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;
404 - Page not found
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 (