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: "Self-Hosting",
@@ -6,21 +7,6 @@ export const metadata: Metadata = {
"Deploy AgentLens with Docker or from source. Configure database, API keys, and environment variables.",
};
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 SelfHostingPage() {
return (
<div>
@@ -32,7 +18,7 @@ export default function SelfHostingPage() {
<section className="mb-12">
<h2 className="text-2xl font-semibold mb-4">Quick start with Docker</h2>
<CodeBlock title="terminal">{`git clone https://gitea.repi.fun/repi/agentlens
<CodeBlock title="terminal" language="bash">{`git clone https://gitea.repi.fun/repi/agentlens
cd agentlens
docker build -t agentlens .
docker run -p 3000:3000 \\
@@ -57,7 +43,7 @@ docker run -p 3000:3000 \\
<p className="text-neutral-400 leading-relaxed mb-4">
For a complete setup with PostgreSQL included:
</p>
<CodeBlock title="docker-compose.yml">{`version: "3.8"
<CodeBlock title="docker-compose.yml" language="yaml">{`version: "3.8"
services:
db:
@@ -84,7 +70,7 @@ services:
volumes:
pgdata:`}</CodeBlock>
<CodeBlock title="terminal">{`docker compose up -d`}</CodeBlock>
<CodeBlock title="terminal" language="bash">{`docker compose up -d`}</CodeBlock>
</section>
<section className="mb-12">
@@ -92,7 +78,7 @@ volumes:
<p className="text-neutral-400 leading-relaxed mb-4">
For development or when you need to customize AgentLens:
</p>
<CodeBlock title="terminal">{`git clone https://gitea.repi.fun/repi/agentlens
<CodeBlock title="terminal" language="bash">{`git clone https://gitea.repi.fun/repi/agentlens
cd agentlens
# Install dependencies (uses npm workspaces)
@@ -172,7 +158,7 @@ npm run dev --workspace=@agentlens/web`}</CodeBlock>
<h3 className="text-lg font-medium text-neutral-200 mb-2 mt-6">
Running migrations
</h3>
<CodeBlock title="terminal">{`# Push schema to database (development)
<CodeBlock title="terminal" language="bash">{`# Push schema to database (development)
npm run db:push --workspace=@agentlens/web
# Run migrations (production)
@@ -184,10 +170,10 @@ npm run db:migrate --workspace=@agentlens/web`}</CodeBlock>
<p className="text-neutral-400 leading-relaxed mb-4">
For production deployments behind nginx or Caddy:
</p>
<CodeBlock title="Caddyfile">{`agentlens.yourdomain.com {
<CodeBlock title="Caddyfile" language="bash">{`agentlens.yourdomain.com {
reverse_proxy localhost:3000
}`}</CodeBlock>
<CodeBlock title="nginx.conf">{`server {
<CodeBlock title="nginx.conf" language="bash">{`server {
listen 443 ssl;
server_name agentlens.yourdomain.com;
@@ -203,7 +189,7 @@ npm run db:migrate --workspace=@agentlens/web`}</CodeBlock>
<section className="mb-12">
<h2 className="text-2xl font-semibold mb-4">Updating</h2>
<CodeBlock title="terminal">{`# Pull latest changes
<CodeBlock title="terminal" language="bash">{`# Pull latest changes
cd agentlens
git pull origin main