Skip to content

Commit 6fed9ef

Browse files
aallamaallam
committed
docs: simplify Starlight homepage
1 parent 2722736 commit 6fed9ef

2 files changed

Lines changed: 57 additions & 302 deletions

File tree

‎docs/src/content/docs/index.md‎

Lines changed: 45 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,53 @@
11
---
22
title: execbox
33
description: Portable code execution for MCP tools and wrapped MCP servers.
4-
template: splash
54
next: false
6-
hero:
7-
title: execbox
8-
tagline: Run guest JavaScript against host-defined tools and wrapped MCP servers with one portable execution contract.
9-
actions:
10-
- text: Getting Started
11-
link: /getting-started/
12-
variant: primary
135
---
146

15-
<section class="execbox-start">
16-
<div>
17-
<p class="execbox-eyebrow">Node.js 22+ library for tool-backed JavaScript execution</p>
18-
<h2>Start with one provider and one guest call.</h2>
19-
<p>
20-
Execbox turns host tool catalogs into scoped guest namespaces. Begin with
21-
the QuickJS package, execute a small provider flow, then move into examples
22-
or MCP wrapping when the contract is clear.
23-
</p>
24-
</div>
25-
<div class="execbox-command" aria-label="Install execbox">
26-
<div class="execbox-command__bar">
27-
<span>Install</span>
28-
<code>npm</code>
29-
</div>
30-
<pre><code>npm install @execbox/core @execbox/quickjs</code></pre>
31-
</div>
32-
</section>
7+
Execbox is a Node.js 22+ library for running guest JavaScript against
8+
host-defined tools and wrapped MCP servers. Start with the QuickJS executor,
9+
get one provider call working, then choose a runtime placement that matches your
10+
deployment boundary.
3311

34-
<section class="execbox-paths" aria-labelledby="start-building">
35-
<div class="execbox-section-heading">
36-
<p class="execbox-eyebrow">Start building</p>
37-
<h2 id="start-building">Follow the shortest path into the docs.</h2>
38-
</div>
39-
<div class="execbox-path-grid">
40-
<a class="execbox-path execbox-path--primary" href="/getting-started/">
41-
<span class="execbox-path__step">01</span>
42-
<h3>Run the smallest example</h3>
43-
<p>Install the packages, define one host tool, and call it from guest JavaScript.</p>
44-
<strong>Open Getting Started</strong>
45-
</a>
46-
<a class="execbox-path" href="/examples/">
47-
<span class="execbox-path__step">02</span>
48-
<h3>Try the runnable flows</h3>
49-
<p>Compare the basic, worker, remote, MCP provider, and MCP server examples.</p>
50-
<strong>Browse Examples</strong>
51-
</a>
52-
<a class="execbox-path" href="/architecture/execbox-mcp-and-protocol/">
53-
<span class="execbox-path__step">03</span>
54-
<h3>Wrap MCP tools</h3>
55-
<p>Expose upstream MCP catalogs as callable guest namespaces through the execbox protocol.</p>
56-
<strong>Read MCP Provider</strong>
57-
</a>
58-
</div>
59-
</section>
12+
## Install
6013

61-
<section class="execbox-contract" aria-labelledby="contract">
62-
<div class="execbox-section-heading">
63-
<p class="execbox-eyebrow">What stays consistent</p>
64-
<h2 id="contract">A small contract between host tools and guest code.</h2>
65-
</div>
66-
<div class="execbox-contract-grid">
67-
<div>
68-
<h3>Host-owned capabilities</h3>
69-
<p>Applications decide which tools exist and how each call is executed.</p>
70-
</div>
71-
<div>
72-
<h3>Scoped guest namespaces</h3>
73-
<p>Guest code calls named providers instead of reaching into host internals.</p>
74-
</div>
75-
<div>
76-
<h3>JSON-only transport shape</h3>
77-
<p>Inputs, outputs, logs, and tool calls stay serializable across boundaries.</p>
78-
</div>
79-
</div>
80-
</section>
14+
```bash
15+
npm install @execbox/core @execbox/quickjs
16+
```
17+
18+
## Smallest example
19+
20+
Use [Getting Started](/getting-started/) to define one host tool and call it
21+
from guest JavaScript through `QuickJsExecutor`.
22+
23+
## Packages
24+
25+
| Package | Use it for |
26+
| ------------------ | ------------------------------------------------------------ |
27+
| `@execbox/core` | Provider contracts, MCP adapters, and shared runtime helpers |
28+
| `@execbox/quickjs` | Inline and worker-hosted QuickJS execution |
29+
| `@execbox/remote` | Transport-backed execution with an app-owned remote runtime |
30+
31+
## Read next
32+
33+
### Start
34+
35+
- [Getting Started](/getting-started/) - install execbox and run the smallest
36+
QuickJS flow
37+
- [Runtime Choices](/runtime-choices/) - choose between inline, worker, and
38+
remote execution
39+
40+
### Use
41+
42+
- [Examples](/examples/) - run the main example flows from the repo
43+
- [MCP Provider](/architecture/execbox-mcp-and-protocol/) - wrap upstream MCP
44+
tools as guest-callable namespaces
45+
- [Remote Runner](/architecture/execbox-remote-workflow/) - move guest
46+
execution behind your own transport
47+
48+
### Understand
49+
50+
- [Security & Boundaries](/security/) - understand what execbox does and does
51+
not isolate
52+
- [Architecture](/architecture/) - review the package and runtime model
53+
- [Performance](/performance/) - compare runtime placement and pooling tradeoffs

‎docs/src/styles/custom.css‎

Lines changed: 12 additions & 230 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,16 @@
11
:root {
2-
--sl-color-accent-low: #0f2d4a;
3-
--sl-color-accent: #5cc8ff;
4-
--sl-color-accent-high: #d7efff;
5-
--sl-color-white: #fbfdff;
6-
--sl-color-gray-1: #eef3f8;
7-
--sl-color-gray-2: #d5dee9;
8-
--sl-color-gray-3: #a6b4c4;
9-
--sl-color-gray-4: #728195;
10-
--sl-color-gray-5: #394657;
11-
--sl-color-gray-6: #1d2632;
12-
--sl-color-black: #0c1017;
13-
--execbox-surface: #111821;
14-
--execbox-surface-soft: #171f2b;
15-
--execbox-border: #2b394a;
16-
--execbox-warm: #f2b56b;
17-
--execbox-command-bg: #0c1220;
18-
--execbox-command-bar: #101a2a;
19-
--execbox-command-chip: #233247;
20-
--execbox-command-text: #dce7f5;
2+
--sl-color-accent-low: #162033;
3+
--sl-color-accent: #7aa7ff;
4+
--sl-color-accent-high: #d8e5ff;
5+
--sl-color-white: #f8fafc;
6+
--sl-color-gray-1: #eef2f7;
7+
--sl-color-gray-2: #d4dce8;
8+
--sl-color-gray-3: #a7b3c2;
9+
--sl-color-gray-4: #748197;
10+
--sl-color-gray-5: #3c4658;
11+
--sl-color-gray-6: #202838;
12+
--sl-color-gray-7: #141a26;
13+
--sl-color-black: #0b0f17;
2114
}
2215

2316
:root[data-theme="light"] {
@@ -33,215 +26,4 @@
3326
--sl-color-gray-6: #eef2f7;
3427
--sl-color-gray-7: #f8fafc;
3528
--sl-color-black: #ffffff;
36-
--execbox-surface: #ffffff;
37-
--execbox-surface-soft: #f4f7fb;
38-
--execbox-border: #d8dee8;
39-
--execbox-warm: #b45309;
40-
--execbox-command-bg: #101828;
41-
--execbox-command-bar: #172235;
42-
--execbox-command-chip: #263449;
43-
--execbox-command-text: #e5edf8;
44-
}
45-
46-
.hero {
47-
align-items: center;
48-
padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 3vw, 2rem);
49-
}
50-
51-
.execbox-start,
52-
.execbox-paths,
53-
.execbox-contract {
54-
margin-block: 2rem;
55-
}
56-
57-
.execbox-start {
58-
display: grid;
59-
grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
60-
gap: 1.25rem;
61-
align-items: stretch;
62-
border: 1px solid var(--execbox-border);
63-
border-radius: 0.75rem;
64-
background:
65-
linear-gradient(
66-
135deg,
67-
color-mix(in srgb, var(--sl-color-accent-low) 34%, transparent),
68-
transparent 55%
69-
),
70-
var(--execbox-surface);
71-
padding: clamp(1rem, 3vw, 1.5rem);
72-
}
73-
74-
.execbox-start h2,
75-
.execbox-section-heading h2 {
76-
margin-block: 0 0.6rem;
77-
color: var(--sl-color-white);
78-
font-size: 1.75rem;
79-
letter-spacing: 0;
80-
line-height: 1.12;
81-
}
82-
83-
.execbox-start p,
84-
.execbox-section-heading {
85-
max-width: 46rem;
86-
}
87-
88-
.execbox-start p,
89-
.execbox-path p,
90-
.execbox-contract p {
91-
color: var(--sl-color-gray-2);
92-
}
93-
94-
.execbox-eyebrow {
95-
margin-block: 0 0.65rem;
96-
color: var(--execbox-warm);
97-
font-size: var(--sl-text-sm);
98-
font-weight: 650;
99-
letter-spacing: 0;
100-
}
101-
102-
.execbox-command {
103-
display: grid;
104-
align-content: center;
105-
min-width: 0;
106-
overflow: hidden;
107-
border: 1px solid
108-
color-mix(in srgb, var(--sl-color-accent) 34%, var(--execbox-border));
109-
border-radius: 0.5rem;
110-
background: var(--execbox-command-bg);
111-
box-shadow: 0 1rem 2.4rem
112-
color-mix(in srgb, var(--sl-color-black) 24%, transparent);
113-
}
114-
115-
.execbox-command__bar {
116-
display: flex;
117-
justify-content: space-between;
118-
gap: 1rem;
119-
border-bottom: 1px solid var(--execbox-border);
120-
background: var(--execbox-command-bar);
121-
padding: 0.65rem 0.8rem;
122-
color: var(--execbox-command-text);
123-
font-size: var(--sl-text-sm);
124-
}
125-
126-
.execbox-command__bar code {
127-
background: var(--execbox-command-chip);
128-
color: var(--execbox-command-text);
129-
}
130-
131-
.execbox-command pre {
132-
margin: 0;
133-
overflow-x: auto;
134-
border: 0;
135-
border-radius: 0;
136-
background: transparent;
137-
color: var(--execbox-command-text);
138-
padding: 1rem;
139-
font-size: var(--sl-text-sm);
140-
}
141-
142-
.execbox-command code {
143-
overflow-wrap: normal;
144-
white-space: pre;
145-
}
146-
147-
.execbox-section-heading {
148-
margin-block-end: 1rem;
149-
}
150-
151-
.execbox-path-grid,
152-
.execbox-contract-grid {
153-
display: grid;
154-
grid-template-columns: repeat(3, minmax(0, 1fr));
155-
gap: 1rem;
156-
}
157-
158-
.execbox-path {
159-
display: grid;
160-
min-height: 15rem;
161-
align-content: start;
162-
border: 1px solid var(--execbox-border);
163-
border-radius: 0.625rem;
164-
background: var(--execbox-surface);
165-
padding: 1rem;
166-
text-decoration: none;
167-
transition:
168-
border-color 140ms ease,
169-
background-color 140ms ease,
170-
transform 140ms ease;
171-
}
172-
173-
.execbox-path:hover {
174-
border-color: var(--sl-color-accent);
175-
background: color-mix(
176-
in srgb,
177-
var(--sl-color-accent-low) 24%,
178-
var(--execbox-surface)
179-
);
180-
transform: translateY(-1px);
181-
}
182-
183-
.execbox-path--primary {
184-
background:
185-
linear-gradient(
186-
180deg,
187-
color-mix(in srgb, var(--sl-color-accent-low) 28%, transparent),
188-
transparent
189-
),
190-
var(--execbox-surface);
191-
}
192-
193-
.execbox-path__step {
194-
color: var(--sl-color-accent);
195-
font-size: var(--sl-text-sm);
196-
font-weight: 700;
197-
}
198-
199-
.execbox-path h3,
200-
.execbox-contract h3 {
201-
margin-block: 0.75rem 0.5rem;
202-
color: var(--sl-color-white);
203-
font-size: var(--sl-text-lg);
204-
letter-spacing: 0;
205-
}
206-
207-
.execbox-path p,
208-
.execbox-contract p {
209-
margin-block: 0;
210-
}
211-
212-
.execbox-path strong {
213-
margin-block-start: 1.25rem;
214-
color: var(--sl-color-accent-high);
215-
font-size: var(--sl-text-sm);
216-
}
217-
218-
.execbox-contract-grid > div {
219-
border-left: 2px solid
220-
color-mix(in srgb, var(--sl-color-accent) 45%, var(--execbox-border));
221-
background: color-mix(in srgb, var(--execbox-surface-soft) 80%, transparent);
222-
padding: 0.2rem 0 0.2rem 1rem;
223-
}
224-
225-
@media (max-width: 50rem) {
226-
.execbox-start,
227-
.execbox-path-grid,
228-
.execbox-contract-grid {
229-
grid-template-columns: 1fr;
230-
}
231-
232-
.execbox-command code {
233-
overflow-wrap: anywhere;
234-
white-space: pre-wrap;
235-
}
236-
237-
.execbox-path {
238-
min-height: 0;
239-
}
240-
}
241-
242-
@media (min-width: 50rem) {
243-
.execbox-start h2,
244-
.execbox-section-heading h2 {
245-
font-size: 2rem;
246-
}
24729
}

0 commit comments

Comments
 (0)