From 4c2f804c353622c3d0794416d0332028ef7e37ea Mon Sep 17 00:00:00 2001 From: Mouaad Aallam Date: Sat, 2 May 2026 14:48:45 +0200 Subject: [PATCH] docs: redesign docs homepage --- docs/src/content/docs/index.md | 100 +++++++++----- docs/src/styles/custom.css | 234 +++++++++++++++++++++++++++++---- 2 files changed, 273 insertions(+), 61 deletions(-) diff --git a/docs/src/content/docs/index.md b/docs/src/content/docs/index.md index afd9672..7c004db 100644 --- a/docs/src/content/docs/index.md +++ b/docs/src/content/docs/index.md @@ -5,46 +5,76 @@ template: splash next: false hero: title: execbox - tagline: Portable code execution for MCP tools and wrapped MCP servers, with runtime boundaries you choose. + tagline: Run guest JavaScript against host-defined tools and wrapped MCP servers with one portable execution contract. actions: - text: Getting Started link: /getting-started/ variant: primary --- -## What execbox does +
+
+

Node.js 22+ library for tool-backed JavaScript execution

+

Start with one provider and one guest call.

+

+ Execbox turns host tool catalogs into scoped guest namespaces. Begin with + the QuickJS package, execute a small provider flow, then move into examples + or MCP wrapping when the contract is clear. +

+
+
+
+ Install + npm +
+ 
npm install @execbox/core @execbox/quickjs
+
+
-Execbox is a Node.js library for running guest JavaScript against host-defined tools and wrapped MCP servers. It separates: +
+
+

Start building

+

Follow the shortest path into the docs.

+
+
+ + 01 +

Run the smallest example

+

Install the packages, define one host tool, and call it from guest JavaScript.

+ Open Getting Started + + + 02 +

Try the runnable flows

+

Compare the basic, worker, remote, MCP provider, and MCP server examples.

+ Browse Examples + + + 03 +

Wrap MCP tools

+

Expose upstream MCP catalogs as callable guest namespaces through the execbox protocol.

+ Read MCP Provider + +
+
-- what tools are available -- where guest code runs -- how calls cross boundaries - -That split gives you one execution contract across inline QuickJS, worker-hosted QuickJS, and remote transport-backed execution. - -
- -

Install and run

-

Start with the smallest QuickJS example and one provider flow.

- - -

Choose a runtime

-

Pick inline QuickJS, worker-hosted QuickJS, or a remote runner.

- - -

Wrap MCP tools

-

Expose upstream MCP catalogs as callable guest namespaces.

- - -

Review boundaries

-

Understand the provider capability surface before production use.

- -
- -## Runtime packages - -| Backend | Package | Start here when | -| --------------------- | ------------------ | ------------------------------------------------------------------------------------ | -| In-process QuickJS | `@execbox/quickjs` | You want the easiest install and the default development path. | -| Worker-backed QuickJS | `@execbox/quickjs` | You want the runtime off the main thread with pooled worker reuse. | -| Remote transport | `@execbox/remote` | Your application owns the process, container, VM, or network boundary for a runtime. | +
+
+

What stays consistent

+

A small contract between host tools and guest code.

+
+
+
+

Host-owned capabilities

+

Applications decide which tools exist and how each call is executed.

+
+
+

Scoped guest namespaces

+

Guest code calls named providers instead of reaching into host internals.

+
+
+

JSON-only transport shape

+

Inputs, outputs, logs, and tool calls stay serializable across boundaries.

+
+
+
diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css index 9881d1c..a4d6b1e 100644 --- a/docs/src/styles/custom.css +++ b/docs/src/styles/custom.css @@ -1,15 +1,23 @@ :root { - --sl-color-accent-low: #082f49; - --sl-color-accent: #38bdf8; - --sl-color-accent-high: #bae6fd; - --sl-color-white: #f8fafc; - --sl-color-gray-1: #e5e7eb; - --sl-color-gray-2: #cbd5e1; - --sl-color-gray-3: #94a3b8; - --sl-color-gray-4: #64748b; - --sl-color-gray-5: #334155; - --sl-color-gray-6: #1e293b; - --sl-color-black: #0b1120; + --sl-color-accent-low: #0f2d4a; + --sl-color-accent: #5cc8ff; + --sl-color-accent-high: #d7efff; + --sl-color-white: #fbfdff; + --sl-color-gray-1: #eef3f8; + --sl-color-gray-2: #d5dee9; + --sl-color-gray-3: #a6b4c4; + --sl-color-gray-4: #728195; + --sl-color-gray-5: #394657; + --sl-color-gray-6: #1d2632; + --sl-color-black: #0c1017; + --execbox-surface: #111821; + --execbox-surface-soft: #171f2b; + --execbox-border: #2b394a; + --execbox-warm: #f2b56b; + --execbox-command-bg: #0c1220; + --execbox-command-bar: #101a2a; + --execbox-command-chip: #233247; + --execbox-command-text: #dce7f5; } :root[data-theme="light"] { @@ -25,41 +33,215 @@ --sl-color-gray-6: #eef2f7; --sl-color-gray-7: #f8fafc; --sl-color-black: #ffffff; + --execbox-surface: #ffffff; + --execbox-surface-soft: #f4f7fb; + --execbox-border: #d8dee8; + --execbox-warm: #b45309; + --execbox-command-bg: #101828; + --execbox-command-bar: #172235; + --execbox-command-chip: #263449; + --execbox-command-text: #e5edf8; } .hero { align-items: center; + padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 3vw, 2rem); } -.execbox-card-grid { +.execbox-start, +.execbox-paths, +.execbox-contract { + margin-block: 2rem; +} + +.execbox-start { display: grid; - grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); - gap: 1rem; - margin-block: 1.5rem 2rem; + grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr); + gap: 1.25rem; + align-items: stretch; + border: 1px solid var(--execbox-border); + border-radius: 0.75rem; + background: + linear-gradient( + 135deg, + color-mix(in srgb, var(--sl-color-accent-low) 34%, transparent), + transparent 55% + ), + var(--execbox-surface); + padding: clamp(1rem, 3vw, 1.5rem); +} + +.execbox-start h2, +.execbox-section-heading h2 { + margin-block: 0 0.6rem; + color: var(--sl-color-white); + font-size: 1.75rem; + letter-spacing: 0; + line-height: 1.12; +} + +.execbox-start p, +.execbox-section-heading { + max-width: 46rem; } -.execbox-card { - border: 1px solid var(--sl-color-gray-5); +.execbox-start p, +.execbox-path p, +.execbox-contract p { + color: var(--sl-color-gray-2); +} + +.execbox-eyebrow { + margin-block: 0 0.65rem; + color: var(--execbox-warm); + font-size: var(--sl-text-sm); + font-weight: 650; + letter-spacing: 0; +} + +.execbox-command { + display: grid; + align-content: center; + min-width: 0; + overflow: hidden; + border: 1px solid + color-mix(in srgb, var(--sl-color-accent) 34%, var(--execbox-border)); border-radius: 0.5rem; - background: color-mix(in srgb, var(--sl-color-gray-6) 72%, transparent); + background: var(--execbox-command-bg); + box-shadow: 0 1rem 2.4rem + color-mix(in srgb, var(--sl-color-black) 24%, transparent); +} + +.execbox-command__bar { + display: flex; + justify-content: space-between; + gap: 1rem; + border-bottom: 1px solid var(--execbox-border); + background: var(--execbox-command-bar); + padding: 0.65rem 0.8rem; + color: var(--execbox-command-text); + font-size: var(--sl-text-sm); +} + +.execbox-command__bar code { + background: var(--execbox-command-chip); + color: var(--execbox-command-text); +} + +.execbox-command pre { + margin: 0; + overflow-x: auto; + border: 0; + border-radius: 0; + background: transparent; + color: var(--execbox-command-text); + padding: 1rem; + font-size: var(--sl-text-sm); +} + +.execbox-command code { + overflow-wrap: normal; + white-space: pre; +} + +.execbox-section-heading { + margin-block-end: 1rem; +} + +.execbox-path-grid, +.execbox-contract-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 1rem; +} + +.execbox-path { + display: grid; + min-height: 15rem; + align-content: start; + border: 1px solid var(--execbox-border); + border-radius: 0.625rem; + background: var(--execbox-surface); padding: 1rem; text-decoration: none; transition: border-color 140ms ease, - background-color 140ms ease; + background-color 140ms ease, + transform 140ms ease; } -.execbox-card:hover { +.execbox-path:hover { border-color: var(--sl-color-accent); - background: color-mix(in srgb, var(--sl-color-accent-low) 36%, transparent); + background: color-mix( + in srgb, + var(--sl-color-accent-low) 24%, + var(--execbox-surface) + ); + transform: translateY(-1px); +} + +.execbox-path--primary { + background: + linear-gradient( + 180deg, + color-mix(in srgb, var(--sl-color-accent-low) 28%, transparent), + transparent + ), + var(--execbox-surface); +} + +.execbox-path__step { + color: var(--sl-color-accent); + font-size: var(--sl-text-sm); + font-weight: 700; } -.execbox-card h3 { - margin-block: 0 0.5rem; +.execbox-path h3, +.execbox-contract h3 { + margin-block: 0.75rem 0.5rem; + color: var(--sl-color-white); font-size: var(--sl-text-lg); + letter-spacing: 0; } -.execbox-card p { - margin: 0; - color: var(--sl-color-gray-2); +.execbox-path p, +.execbox-contract p { + margin-block: 0; +} + +.execbox-path strong { + margin-block-start: 1.25rem; + color: var(--sl-color-accent-high); + font-size: var(--sl-text-sm); +} + +.execbox-contract-grid > div { + border-left: 2px solid + color-mix(in srgb, var(--sl-color-accent) 45%, var(--execbox-border)); + background: color-mix(in srgb, var(--execbox-surface-soft) 80%, transparent); + padding: 0.2rem 0 0.2rem 1rem; +} + +@media (max-width: 50rem) { + .execbox-start, + .execbox-path-grid, + .execbox-contract-grid { + grid-template-columns: 1fr; + } + + .execbox-command code { + overflow-wrap: anywhere; + white-space: pre-wrap; + } + + .execbox-path { + min-height: 0; + } +} + +@media (min-width: 50rem) { + .execbox-start h2, + .execbox-section-heading h2 { + font-size: 2rem; + } }