feat: syntax highlighting with shiki and copy-to-clipboard for all docs code blocks

This commit is contained in:
Vectry
2026-02-10 04:01:59 +00:00
parent 42b5379ce1
commit 5b388484f8
14 changed files with 642 additions and 200 deletions

View File

@@ -1,4 +1,5 @@
import type { Metadata } from "next";
import { CodeBlock } from "@/components/code-block";
export const metadata: Metadata = {
title: "Getting Started",
@@ -6,21 +7,6 @@ export const metadata: Metadata = {
"Install AgentLens, initialize the SDK, and send your first trace in under five minutes.",
};
function CodeBlock({ children, title }: { children: string; title?: string }) {
return (
<div className="rounded-xl overflow-hidden border border-neutral-800 bg-neutral-900/50 my-4">
{title && (
<div className="px-4 py-2.5 border-b border-neutral-800 text-xs text-neutral-500 font-mono">
{title}
</div>
)}
<pre className="p-4 overflow-x-auto text-sm leading-relaxed">
<code className="text-neutral-300">{children}</code>
</pre>
</div>
);
}
export default function GettingStartedPage() {
return (
<div>
@@ -64,12 +50,12 @@ export default function GettingStartedPage() {
</h2>
<h3 className="text-lg font-medium text-neutral-200 mb-2">Python</h3>
<CodeBlock title="terminal">pip install vectry-agentlens</CodeBlock>
<CodeBlock title="terminal" language="bash">pip install vectry-agentlens</CodeBlock>
<h3 className="text-lg font-medium text-neutral-200 mb-2 mt-6">
TypeScript / Node.js
</h3>
<CodeBlock title="terminal">npm install agentlens-sdk</CodeBlock>
<CodeBlock title="terminal" language="bash">npm install agentlens-sdk</CodeBlock>
</section>
<section className="mb-12">
@@ -78,7 +64,7 @@ export default function GettingStartedPage() {
</h2>
<h3 className="text-lg font-medium text-neutral-200 mb-2">Python</h3>
<CodeBlock title="main.py">{`import agentlens
<CodeBlock title="main.py" language="python">{`import agentlens
agentlens.init(
api_key="your-api-key",
@@ -88,7 +74,7 @@ agentlens.init(
<h3 className="text-lg font-medium text-neutral-200 mb-2 mt-6">
TypeScript
</h3>
<CodeBlock title="index.ts">{`import { init } from "agentlens-sdk";
<CodeBlock title="index.ts" language="typescript">{`import { init } from "agentlens-sdk";
init({
apiKey: "your-api-key",
@@ -102,7 +88,7 @@ init({
</h2>
<h3 className="text-lg font-medium text-neutral-200 mb-2">Python</h3>
<CodeBlock title="agent.py">{`import agentlens
<CodeBlock title="agent.py" language="python">{`import agentlens
from agentlens import trace
agentlens.init(
@@ -122,7 +108,7 @@ result = my_agent("What is the capital of France?")`}</CodeBlock>
<h3 className="text-lg font-medium text-neutral-200 mb-2 mt-6">
TypeScript
</h3>
<CodeBlock title="agent.ts">{`import { init, TraceBuilder } from "agentlens-sdk";
<CodeBlock title="agent.ts" language="typescript">{`import { init, TraceBuilder } from "agentlens-sdk";
init({
apiKey: "your-api-key",