mirror of
https://github.com/harivansh-afk/sandbox-agent.git
synced 2026-04-17 08:01:03 +00:00
chore(site): fix code block spacing and update feature grid layout
This commit is contained in:
Nicholas Kissel
Nathan Flurry
parent
f155325409
commit
d0291831f2
32 changed files with 262 additions and 103 deletions
1
frontend/packages/website/.astro/data-store.json
Normal file
1
frontend/packages/website/.astro/data-store.json
Normal file
|
|
@ -0,0 +1 @@
|
|||
[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.16.15","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[]},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false,\"svgo\":false},\"legacy\":{\"collections\":false}}"]
|
||||
5
frontend/packages/website/.astro/settings.json
Normal file
5
frontend/packages/website/.astro/settings.json
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"_variables": {
|
||||
"lastUpdateCheck": 1769576078224
|
||||
}
|
||||
}
|
||||
1
frontend/packages/website/.astro/types.d.ts
vendored
1
frontend/packages/website/.astro/types.d.ts
vendored
|
|
@ -1,2 +1 @@
|
|||
/// <reference types="astro/client" />
|
||||
/// <reference path="content.d.ts" />
|
||||
|
|
@ -42,12 +42,11 @@ export function FeatureGrid() {
|
|||
<section id="features" className="relative overflow-hidden border-t border-white/5 py-32">
|
||||
<div className="relative z-10 mx-auto max-w-7xl px-6">
|
||||
<div className="mb-16">
|
||||
<h2 className="mb-6 text-3xl font-medium tracking-tight text-white md:text-5xl">
|
||||
Full feature coverage. <br />
|
||||
<span className="text-zinc-500">Available as an HTTP API or TypeScript SDK.</span>
|
||||
<h2 className="mb-4 text-3xl font-medium tracking-tight text-white md:text-5xl">
|
||||
Full feature coverage.
|
||||
</h2>
|
||||
<p className="text-lg leading-relaxed text-zinc-400">
|
||||
Everything you need to integrate coding agents in record time.
|
||||
Available as an HTTP API or TypeScript SDK.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -122,12 +122,12 @@ export function GetStarted() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<p className="relative z-10 mb-4 text-sm leading-relaxed text-zinc-400">
|
||||
<p className="relative z-10 mb-4 text-sm leading-relaxed text-zinc-400 min-h-[4.5rem]">
|
||||
Import the TypeScript SDK directly into your Node or browser application. Full type safety and streaming support.
|
||||
</p>
|
||||
|
||||
<div className="relative z-10 mt-auto">
|
||||
<div className="overflow-hidden rounded-lg border border-white/5 bg-black/50">
|
||||
<div className="relative z-10 flex-1 flex flex-col">
|
||||
<div className="overflow-hidden rounded-lg border border-white/5 bg-black/50 flex-1 flex flex-col">
|
||||
<div className="flex items-center justify-between border-b border-white/5 bg-white/5 px-3 py-2">
|
||||
<span className="text-[10px] font-medium text-zinc-500">example.ts</span>
|
||||
<CopyButton text={sdkCodeRaw} />
|
||||
|
|
@ -153,26 +153,27 @@ export function GetStarted() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<p className="relative z-10 mb-4 text-sm leading-relaxed text-zinc-400">
|
||||
<p className="relative z-10 mb-4 text-sm leading-relaxed text-zinc-400 min-h-[4.5rem]">
|
||||
Run as an HTTP server and connect from any language. Deploy to E2B, Daytona, Vercel, or your own infrastructure.
|
||||
</p>
|
||||
|
||||
<div className="relative z-10 mt-auto">
|
||||
<div className="overflow-hidden rounded-lg border border-white/5 bg-black/50 p-3">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<pre className="font-mono text-[11px] leading-relaxed overflow-x-auto">
|
||||
<code>
|
||||
<span className="text-zinc-500">$ </span>
|
||||
<span className="text-zinc-300">curl -fsSL \</span>
|
||||
{"\n"}
|
||||
<span className="text-zinc-300">{" "}</span>
|
||||
<span className="text-green-400">https://releases.rivet.dev/sandbox-agent/latest/install.sh</span>
|
||||
<span className="text-zinc-300"> | </span>
|
||||
<span className="text-blue-400">sh</span>
|
||||
</code>
|
||||
</pre>
|
||||
<div className="relative z-10 flex-1 flex flex-col">
|
||||
<div className="overflow-hidden rounded-lg border border-white/5 bg-black/50 flex-1 flex flex-col">
|
||||
<div className="flex items-center justify-between border-b border-white/5 bg-white/5 px-3 py-2">
|
||||
<span className="text-[10px] font-medium text-zinc-500">terminal</span>
|
||||
<CopyButton text={sandboxCommand} />
|
||||
</div>
|
||||
<pre className="overflow-x-auto p-3 font-mono text-[11px] leading-relaxed flex-1">
|
||||
<code>
|
||||
<span className="text-zinc-500">$ </span>
|
||||
<span className="text-zinc-300">curl -fsSL \</span>
|
||||
{"\n"}
|
||||
<span className="text-zinc-300">{" "}</span>
|
||||
<span className="text-green-400">https://releases.rivet.dev/sandbox-agent/latest/install.sh</span>
|
||||
<span className="text-zinc-300"> | </span>
|
||||
<span className="text-blue-400">sh</span>
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -193,31 +194,32 @@ export function GetStarted() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<p className="relative z-10 mb-4 text-sm leading-relaxed text-zinc-400">
|
||||
<p className="relative z-10 mb-4 text-sm leading-relaxed text-zinc-400 min-h-[4.5rem]">
|
||||
Clone the repo and build with Cargo. Customize, contribute, or embed directly in your Rust project.
|
||||
</p>
|
||||
|
||||
<div className="relative z-10 mt-auto">
|
||||
<div className="overflow-hidden rounded-lg border border-white/5 bg-black/50 p-3">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<pre className="font-mono text-[11px] leading-relaxed overflow-x-auto">
|
||||
<code>
|
||||
<span className="text-zinc-500">$ </span>
|
||||
<span className="text-blue-400">git clone</span>
|
||||
<span className="text-zinc-300"> </span>
|
||||
<span className="text-green-400">https://github.com/rivet-dev/sandbox-agent</span>
|
||||
{"\n"}
|
||||
<span className="text-zinc-500">$ </span>
|
||||
<span className="text-blue-400">cd</span>
|
||||
<span className="text-zinc-300"> sandbox-agent</span>
|
||||
{"\n"}
|
||||
<span className="text-zinc-500">$ </span>
|
||||
<span className="text-blue-400">cargo run</span>
|
||||
<span className="text-zinc-300"> -p sandbox-agent --release</span>
|
||||
</code>
|
||||
</pre>
|
||||
<div className="relative z-10 flex-1 flex flex-col">
|
||||
<div className="overflow-hidden rounded-lg border border-white/5 bg-black/50 flex-1 flex flex-col">
|
||||
<div className="flex items-center justify-between border-b border-white/5 bg-white/5 px-3 py-2">
|
||||
<span className="text-[10px] font-medium text-zinc-500">terminal</span>
|
||||
<CopyButton text={sourceCommands} />
|
||||
</div>
|
||||
<pre className="overflow-x-auto p-3 font-mono text-[11px] leading-relaxed flex-1">
|
||||
<code>
|
||||
<span className="text-zinc-500">$ </span>
|
||||
<span className="text-blue-400">git clone</span>
|
||||
<span className="text-zinc-300"> </span>
|
||||
<span className="text-green-400">https://github.com/rivet-dev/sandbox-agent</span>
|
||||
{"\n"}
|
||||
<span className="text-zinc-500">$ </span>
|
||||
<span className="text-blue-400">cd</span>
|
||||
<span className="text-zinc-300"> sandbox-agent</span>
|
||||
{"\n"}
|
||||
<span className="text-zinc-500">$ </span>
|
||||
<span className="text-blue-400">cargo run</span>
|
||||
<span className="text-zinc-300"> -p sandbox-agent --release</span>
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -66,77 +66,65 @@ export function Hero() {
|
|||
</div>
|
||||
<div className="font-mono text-xs text-zinc-500">example_agent.ts</div>
|
||||
</div>
|
||||
<div className="overflow-x-auto p-6 font-mono text-sm leading-relaxed">
|
||||
<CodeLine num="01">
|
||||
<pre className="overflow-x-auto p-6 font-mono text-sm leading-relaxed">
|
||||
<code>
|
||||
<span className="text-purple-400">const</span>
|
||||
<span className="text-white"> agents = </span>
|
||||
<span className="text-zinc-300"> agents = </span>
|
||||
<span className="text-purple-400">await</span>
|
||||
<span className="text-white"> client.</span>
|
||||
<span className="text-zinc-300"> client.</span>
|
||||
<span className="text-blue-400">listAgents</span>
|
||||
<span className="text-white">();</span>
|
||||
</CodeLine>
|
||||
<div className="h-4" />
|
||||
<CodeLine num="02">
|
||||
<span className="text-zinc-300">();</span>
|
||||
{"\n\n"}
|
||||
<span className="text-purple-400">await</span>
|
||||
<span className="text-white"> client.</span>
|
||||
<span className="text-zinc-300"> client.</span>
|
||||
<span className="text-blue-400">createSession</span>
|
||||
<span className="text-white">(</span>
|
||||
<span className="text-zinc-300">(</span>
|
||||
<span className="text-green-400">"demo"</span>
|
||||
<span className="text-white">{", {"}</span>
|
||||
</CodeLine>
|
||||
<CodeLine num="03">
|
||||
<span className="text-white">{" agent: "}</span>
|
||||
<span className="text-zinc-300">{", {"}</span>
|
||||
{"\n"}
|
||||
<span className="text-zinc-300">{" agent: "}</span>
|
||||
<span className="text-green-400">"codex"</span>
|
||||
<span className="text-white">,</span>
|
||||
</CodeLine>
|
||||
<CodeLine num="04">
|
||||
<span className="text-white">{" agentMode: "}</span>
|
||||
<span className="text-zinc-300">,</span>
|
||||
{"\n"}
|
||||
<span className="text-zinc-300">{" agentMode: "}</span>
|
||||
<span className="text-green-400">"default"</span>
|
||||
<span className="text-white">,</span>
|
||||
</CodeLine>
|
||||
<CodeLine num="05">
|
||||
<span className="text-white">{" permissionMode: "}</span>
|
||||
<span className="text-zinc-300">,</span>
|
||||
{"\n"}
|
||||
<span className="text-zinc-300">{" permissionMode: "}</span>
|
||||
<span className="text-green-400">"plan"</span>
|
||||
<span className="text-white">,</span>
|
||||
</CodeLine>
|
||||
<CodeLine num="06">
|
||||
<span className="text-white">{"});"}</span>
|
||||
</CodeLine>
|
||||
<div className="h-4" />
|
||||
<CodeLine num="07">
|
||||
<span className="text-zinc-300">,</span>
|
||||
{"\n"}
|
||||
<span className="text-zinc-300">{"});"}</span>
|
||||
{"\n\n"}
|
||||
<span className="text-purple-400">await</span>
|
||||
<span className="text-white"> client.</span>
|
||||
<span className="text-zinc-300"> client.</span>
|
||||
<span className="text-blue-400">postMessage</span>
|
||||
<span className="text-white">(</span>
|
||||
<span className="text-zinc-300">(</span>
|
||||
<span className="text-green-400">"demo"</span>
|
||||
<span className="text-white">{", { message: "}</span>
|
||||
<span className="text-zinc-300">{", { message: "}</span>
|
||||
<span className="text-green-400">"Hello from the SDK."</span>
|
||||
<span className="text-white">{" });"}</span>
|
||||
</CodeLine>
|
||||
<div className="h-4" />
|
||||
<CodeLine num="08">
|
||||
<span className="text-zinc-300">{" });"}</span>
|
||||
{"\n\n"}
|
||||
<span className="text-purple-400">for await</span>
|
||||
<span className="text-white"> (</span>
|
||||
<span className="text-zinc-300"> (</span>
|
||||
<span className="text-purple-400">const</span>
|
||||
<span className="text-white"> event </span>
|
||||
<span className="text-zinc-300"> event </span>
|
||||
<span className="text-purple-400">of</span>
|
||||
<span className="text-white"> client.</span>
|
||||
<span className="text-zinc-300"> client.</span>
|
||||
<span className="text-blue-400">streamEvents</span>
|
||||
<span className="text-white">(</span>
|
||||
<span className="text-zinc-300">(</span>
|
||||
<span className="text-green-400">"demo"</span>
|
||||
<span className="text-white">{", { offset: "}</span>
|
||||
<span className="text-zinc-300">{", { offset: "}</span>
|
||||
<span className="text-amber-400">0</span>
|
||||
<span className="text-white">{" })) {"}</span>
|
||||
</CodeLine>
|
||||
<CodeLine num="09">
|
||||
<span className="text-white">{" console."}</span>
|
||||
<span className="text-zinc-300">{" })) {"}</span>
|
||||
{"\n"}
|
||||
<span className="text-zinc-300">{" console."}</span>
|
||||
<span className="text-blue-400">log</span>
|
||||
<span className="text-white">(event.type, event.data);</span>
|
||||
</CodeLine>
|
||||
<CodeLine num="10">
|
||||
<span className="text-white">{"}"}</span>
|
||||
</CodeLine>
|
||||
</div>
|
||||
<span className="text-zinc-300">(event.type, event.data);</span>
|
||||
{"\n"}
|
||||
<span className="text-zinc-300">{"}"}</span>
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -146,12 +134,3 @@ export function Hero() {
|
|||
);
|
||||
}
|
||||
|
||||
function CodeLine({ num, children }: { num: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex gap-4 whitespace-nowrap">
|
||||
<span className="text-zinc-600 select-none">{num}</span>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue