repi/agentlens
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/web/src/app/docs/opencode-plugin/page.tsx
View File

@@ -1,4 +1,5 @@
import type { Metadata } from "next";
import { CodeBlock } from "@/components/code-block";
export const metadata: Metadata = {
title: "OpenCode Plugin",
@@ -6,21 +7,6 @@ export const metadata: Metadata = {
"Capture OpenCode sessions including tool calls, LLM calls, file edits, and git diffs with the AgentLens OpenCode plugin.",
};
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 OpenCodePluginPage() {
return (
<div>
@@ -35,7 +21,7 @@ export default function OpenCodePluginPage() {
<section className="mb-12">
<h2 className="text-2xl font-semibold mb-4">Installation</h2>
<CodeBlock title="terminal">{`npm install opencode-agentlens`}</CodeBlock>
<CodeBlock title="terminal" language="bash">{`npm install opencode-agentlens`}</CodeBlock>
</section>
<section className="mb-12">
@@ -43,13 +29,13 @@ export default function OpenCodePluginPage() {
<p className="text-neutral-400 leading-relaxed mb-4">
Add the plugin to your <code className="text-emerald-400 font-mono text-xs bg-emerald-500/5 px-1.5 py-0.5 rounded">opencode.json</code> configuration file:
</p>
<CodeBlock title="opencode.json">{`{
<CodeBlock title="opencode.json" language="json">{`{
"plugin": ["opencode-agentlens"]
}`}</CodeBlock>
<p className="text-neutral-400 leading-relaxed mt-4 mb-4">
Set the required environment variables:
</p>
<CodeBlock title="terminal">{`export AGENTLENS_API_KEY="your-api-key"
<CodeBlock title="terminal" language="bash">{`export AGENTLENS_API_KEY="your-api-key"
export AGENTLENS_ENDPOINT="https://agentlens.vectry.tech"`}</CodeBlock>
<p className="text-neutral-400 leading-relaxed mt-4">
@@ -219,7 +205,7 @@ export AGENTLENS_ENDPOINT="https://agentlens.vectry.tech"`}</CodeBlock>
By default, the plugin captures full file contents and command outputs.
To filter sensitive data, set the <code className="text-emerald-400 font-mono text-xs bg-emerald-500/5 px-1.5 py-0.5 rounded">AGENTLENS_REDACT_PATTERNS</code> environment variable with a comma-separated list of regex patterns:
</p>
<CodeBlock title="terminal">{`export AGENTLENS_REDACT_PATTERNS="password=.*,API_KEY=.*,Bearer .*"`}</CodeBlock>
<CodeBlock title="terminal" language="bash">{`export AGENTLENS_REDACT_PATTERNS="password=.*,API_KEY=.*,Bearer .*"`}</CodeBlock>
<p className="text-neutral-400 leading-relaxed mt-4">
Matched content is replaced with <code className="text-emerald-400 font-mono text-xs bg-emerald-500/5 px-1.5 py-0.5 rounded">[REDACTED]</code> before
being sent to the server.