feat: syntax highlighting with shiki and copy-to-clipboard for all docs code blocks
This commit is contained in:
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user