---
import { Github, RefreshCw, Upload, Copy, Check } from 'lucide-react';
const codeContent = `# Your existing docs build workflow
name: Build Docs
on:
push:
paths:
- 'docs/**'
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
# Your existing docs build steps...
# ✨ Add libragen in one step
- name: Build RAG library
run: |
npx -y @libragen/cli build ./docs \\
--name my-project \\
--content-version \${{ github.sha }}
- name: Upload library artifact
uses: actions/upload-artifact@v4
with:
name: rag-library
path: my-project-*.libragen`;
---
<section class="bg-gray-50 py-24 dark:bg-gray-900/50">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Section header -->
<div class="text-center">
<p class="text-sm font-semibold uppercase tracking-wide text-indigo-600 dark:text-indigo-400">
Automate It
</p>
<h2 class="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
Keep libraries updated with CI
</h2>
<p class="mx-auto mt-4 max-w-2xl text-lg text-gray-600 dark:text-gray-400">
Add one step to your docs build pipeline. Every time docs change, your RAG library stays in sync.
</p>
</div>
<!-- CI Example -->
<div class="mx-auto mt-12 max-w-4xl">
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800">
<!-- Header -->
<div class="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-900">
<div class="flex items-center gap-3">
<Github className="h-5 w-5 text-gray-600 dark:text-gray-400" />
<span class="font-mono text-sm text-gray-600 dark:text-gray-400">.github/workflows/docs.yml</span>
</div>
<button
id="ci-copy-btn"
class="rounded p-1.5 text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-600 dark:hover:bg-gray-700 dark:hover:text-white"
aria-label="Copy code"
>
<Copy className="h-4 w-4" />
</button>
</div>
<!-- Code -->
<div class="overflow-x-auto">
<pre class="p-6 text-sm leading-relaxed"><code class="language-yaml"><span class="text-gray-500"># Your existing docs build workflow</span>
<span class="text-purple-400">name</span>: Build Docs
<span class="text-purple-400">on</span>:
<span class="text-purple-400">push</span>:
<span class="text-purple-400">paths</span>:
- <span class="text-green-400">'docs/**'</span>
<span class="text-purple-400">jobs</span>:
<span class="text-purple-400">build</span>:
<span class="text-purple-400">runs-on</span>: ubuntu-latest
<span class="text-purple-400">steps</span>:
- <span class="text-purple-400">uses</span>: actions/checkout@v4
<span class="text-gray-500"># Your existing docs build steps...</span>
<span class="text-cyan-400"># ✨ Add libragen in one step</span>
- <span class="text-purple-400">name</span>: Build RAG library
<span class="text-purple-400">run</span>: |
npx -y @libragen/cli build ./docs \
--name my-project \
--content-version ${{ github.sha }}
- <span class="text-purple-400">name</span>: Upload library artifact
<span class="text-purple-400">uses</span>: actions/upload-artifact@v4
<span class="text-purple-400">with</span>:
<span class="text-purple-400">name</span>: rag-library
<span class="text-purple-400">path</span>: my-project-*.libragen</code></pre>
</div>
</div>
<!-- Benefits -->
<div class="mt-8 grid gap-6 sm:grid-cols-3">
<div class="flex items-start gap-3">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-green-100 dark:bg-green-900/30">
<RefreshCw className="h-4 w-4 text-green-600 dark:text-green-400" />
</div>
<div>
<p class="font-medium text-gray-900 dark:text-white">Auto-updates</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Library rebuilds on every docs change</p>
</div>
</div>
<div class="flex items-start gap-3">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900/30">
<Github className="h-4 w-4 text-blue-600 dark:text-blue-400" />
</div>
<div>
<p class="font-medium text-gray-900 dark:text-white">Version tracked</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Library versions match your commits</p>
</div>
</div>
<div class="flex items-start gap-3">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-purple-100 dark:bg-purple-900/30">
<Upload className="h-4 w-4 text-purple-600 dark:text-purple-400" />
</div>
<div>
<p class="font-medium text-gray-900 dark:text-white">Easy distribution</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Publish to releases, S3, or collections</p>
</div>
</div>
</div>
<!-- Extra hint -->
<p class="mt-8 text-center text-sm text-gray-500 dark:text-gray-500">
Works with any CI: GitHub Actions, GitLab CI, CircleCI, Jenkins, or local scripts.
</p>
</div>
</div>
</section>
<script define:vars={{ codeContent }}>
const btn = document.getElementById('ci-copy-btn');
if (btn) {
btn.addEventListener('click', async () => {
await navigator.clipboard.writeText(codeContent);
btn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"/></svg>`;
setTimeout(() => {
btn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
}, 2000);
});
}
</script>
