update documentation

docs/01_getting_started/00_index.md

@@ -1,5 +1,81 @@
 ---
-title: Getting Started
+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": [
+    "🐈",
+    "🐕"
+  ]
+}
+```

docs/02_playgrounds/01_new.md

@@ -1,4 +1,4 @@
 ---
 title: New playground
 href: /playgrounds
----
+---

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.

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.

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)

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.

lib/playgrounds/deno_kv/kv.ts

@@ -47,7 +47,6 @@ export async function setPlayground(
   }
 }
 
-// TODO: Add list recent playgrounds.
 // TODO: Add playground title in playground storage via
 // https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt
 

static/md.css

@@ -15,8 +15,7 @@
 .markdown-body h4,
 .markdown-body h5,
 .markdown-body h6 {
-  margin-top: 1em;
-  margin-bottom: 0.5em;
+  margin: 0.6em 0 0.4em 0;
   font-weight: bold;
   line-height: 1.5;
 }
@@ -100,7 +99,7 @@
   text-transform: uppercase;
   text-decoration: underline;
   text-underline-offset: 0.3em;
-  padding: 0.6em 1em;
+  padding: 0.2em 0.9em;
 }
 
 .markdown-body pre button {

static/script.js

@@ -39,7 +39,11 @@ function createEditor(options) {
   cmEditor = new EditorView({
     doc: options.code,
     parent: options.target,
-    extensions: [keymap.of(defaultKeymap), lineNumbers()],
+    extensions: [
+      keymap.of(defaultKeymap),
+      lineNumbers(),
+      EditorView.lineWrapping,
+    ],
   });
 }