Update proxy guide documentation to enhance tab organization and clarity

goldflag · goldflag · commit aab29e6aa51c · 2026-06-02T19:58:41.000-07:00
- Refactor tab structure across multiple proxy guide files to improve user navigation.
- Consolidate tab titles for Caddy, Cloudflare Workers, Express, Get Started, Next.js, and Nginx sections, ensuring consistency and clarity in the documentation.
- Each section now features updated tab items reflecting the recommended configurations and setups.
diff --git a/docs/content/docs/proxy-guide/caddy.mdx b/docs/content/docs/proxy-guide/caddy.mdx
@@ -40,8 +40,8 @@ Caddy automatically obtains and renews SSL certificates from Let's Encrypt. No m
 
 Add or update your Caddyfile with the analytics proxy configuration:
 
-<Tabs>
-<Tab value="full-proxy-recommended" title="Full Proxy (Recommended)">
+<Tabs items={['Full Proxy (Recommended)', 'Minimal Proxy', 'Simplified with Handle Path']}>
+<Tab>
 
 ```txt
 # /etc/caddy/Caddyfile
@@ -132,7 +132,7 @@ Replace `app.rybbit.io` with your self-hosted Rybbit instance URL if you're not
 </Callout>
 
 </Tab>
-<Tab value="minimal-proxy" title="Minimal Proxy">
+<Tab>
 
 ```txt
 # /etc/caddy/Caddyfile
@@ -161,7 +161,7 @@ yourdomain.com {
 ```
 
 </Tab>
-<Tab value="simplified-with-handle-path" title="Simplified with Handle Path">
+<Tab>
 
 Caddy 2.4+ supports a cleaner syntax with `handle_path`:
 
diff --git a/docs/content/docs/proxy-guide/cloudflare-workers.mdx b/docs/content/docs/proxy-guide/cloudflare-workers.mdx
@@ -44,8 +44,8 @@ Log in to Cloudflare Dashboard and create a new Worker:
 
 Replace the default code with the proxy implementation:
 
-<Tabs>
-<Tab value="full-proxy-recommended" title="Full Proxy (Recommended)">
+<Tabs items={['Full Proxy (Recommended)', 'Minimal Proxy', 'With Environment Variables']}>
+<Tab>
 
 ```javascript
 // Cloudflare Worker for Rybbit Analytics Proxy
@@ -143,7 +143,7 @@ async function proxyToRybbit(request, url) {
 ```
 
 </Tab>
-<Tab value="minimal-proxy" title="Minimal Proxy">
+<Tab>
 
 ```javascript
 // Minimal Cloudflare Worker for Rybbit
@@ -181,7 +181,7 @@ async function handleRequest(request) {
 ```
 
 </Tab>
-<Tab value="with-environment-variables" title="With Environment Variables">
+<Tab>
 
 Using Workers secrets for configuration:
 
diff --git a/docs/content/docs/proxy-guide/express.mdx b/docs/content/docs/proxy-guide/express.mdx
@@ -62,8 +62,8 @@ Install `dotenv` if not already: `npm install dotenv`
 
 ### Add Proxy Middleware to Express
 
-<Tabs>
-<Tab value="full-proxy-recommended" title="Full Proxy (Recommended)">
+<Tabs items={['Full Proxy (Recommended)', 'Minimal Proxy', 'TypeScript']}>
+<Tab>
 
 Add to your Express server file (e.g., `server.js` or `app.js`):
 
@@ -119,7 +119,7 @@ app.listen(PORT, () => {
 ```
 
 </Tab>
-<Tab value="minimal-proxy" title="Minimal Proxy">
+<Tab>
 
 Minimal setup with basic tracking:
 
@@ -153,7 +153,7 @@ app.listen(PORT, () => {
 ```
 
 </Tab>
-<Tab value="typescript" title="TypeScript">
+<Tab>
 
 For TypeScript projects:
 
diff --git a/docs/content/docs/proxy-guide/get-started.mdx b/docs/content/docs/proxy-guide/get-started.mdx
@@ -25,8 +25,8 @@ Before setting up the proxy, ensure you have:
 
 Rybbit uses several endpoints for tracking. You can choose between a minimal setup or full proxy:
 
-<Tabs>
-<Tab value="minimal" title="Minimal Setup">
+<Tabs items={['Minimal Setup', 'Full Setup (Recommended)']}>
+<Tab>
 
 **Required endpoints for basic tracking:**
 
@@ -38,7 +38,7 @@ Rybbit uses several endpoints for tracking. You can choose between a minimal set
 This minimal setup enables basic pageview and event tracking, but won't support session replay or some advanced features.
 
 </Tab>
-<Tab value="full-setup-recommended" title="Full Setup (Recommended)">
+<Tab>
 
 **All endpoints for complete functionality:**
 
@@ -239,8 +239,8 @@ Configure your proxy to maintain persistent connections to Rybbit's backend to r
 
 ## Common Proxy Patterns
 
-<Tabs>
-<Tab value="subdomain-proxy" title="Subdomain Proxy">
+<Tabs items={['Subdomain Proxy', 'Path-Based Proxy']}>
+<Tab>
 
 Use a dedicated subdomain for analytics:
 
@@ -259,7 +259,7 @@ https://analytics.yourdomain.com/track      →  https://app.rybbit.io/api/track
 - Need to manage subdomain DNS
 
 </Tab>
-<Tab value="path-based-proxy" title="Path-Based Proxy">
+<Tab>
 
 Use a path on your main domain:
 
diff --git a/docs/content/docs/proxy-guide/next-js.mdx b/docs/content/docs/proxy-guide/next-js.mdx
@@ -35,16 +35,16 @@ Next.js rewrites allow you to map incoming request paths to different destinatio
 
 Create or update your `.env` or `.env.local` file with your Rybbit instance URL:
 
-<Tabs>
-<Tab value="cloud-hosted" title="Cloud Hosted">
+<Tabs items={['Cloud Hosted', 'Self-Hosted']}>
+<Tab>
 
 ```bash
 # .env.local
 NEXT_PUBLIC_RYBBIT_HOST=https://app.rybbit.io
 ```
 
 </Tab>
-<Tab value="self-hosted" title="Self-Hosted">
+<Tab>
 
 ```bash
 # .env.local
@@ -64,8 +64,8 @@ The `NEXT_PUBLIC_` prefix makes this environment variable available in both serv
 
 Add or update the `rewrites` function in your `next.config.js` (or `next.config.mjs` for ESM):
 
-<Tabs>
-<Tab value="full-proxy-recommended" title="Full Proxy (Recommended)">
+<Tabs items={['Full Proxy (Recommended)', 'Minimal Proxy', 'ESM (next.config.mjs)']}>
+<Tab>
 
 This configuration proxies all Rybbit endpoints including session replay and Web Vitals:
 
@@ -120,7 +120,7 @@ module.exports = nextConfig;
 ```
 
 </Tab>
-<Tab value="minimal-proxy" title="Minimal Proxy">
+<Tab>
 
 Minimal setup with just script loading and basic event tracking:
 
@@ -157,7 +157,7 @@ This minimal setup won't support session replay or Web Vitals. Use the full prox
 </Callout>
 
 </Tab>
-<Tab value="esm-nextconfigmjs" title="ESM (next.config.mjs)">
+<Tab>
 
 If you're using ES modules:
 
@@ -220,8 +220,8 @@ export default nextConfig;
 
 Update your script tag to load from the proxied path instead of directly from Rybbit:
 
-<Tabs>
-<Tab value="app-router-nextjs-13" title="App Router (Next.js 13+)">
+<Tabs items={['App Router (Next.js 13+)', 'Pages Router', 'JavaScript (No TypeScript)']}>
+<Tab>
 
 Update your root layout file:
 
@@ -252,7 +252,7 @@ export default function RootLayout({
 Replace `YOUR_SITE_ID` with your actual site ID from the Rybbit dashboard.
 
 </Tab>
-<Tab value="pages-router" title="Pages Router">
+<Tab>
 
 Update your `_app.tsx` or `_app.jsx` file:
 
@@ -280,7 +280,7 @@ export default MyApp;
 Replace `YOUR_SITE_ID` with your actual site ID from the Rybbit dashboard.
 
 </Tab>
-<Tab value="javascript-no-typescript" title="JavaScript (No TypeScript)">
+<Tab>
 
 ```jsx
 // app/layout.js or pages/_app.js
diff --git a/docs/content/docs/proxy-guide/nginx.mdx b/docs/content/docs/proxy-guide/nginx.mdx
@@ -36,8 +36,8 @@ Nginx's `proxy_pass` directive lets you forward requests from your domain to Ryb
 
 Add a new location block (or update existing configuration) in your Nginx site configuration:
 
-<Tabs>
-<Tab value="full-proxy-recommended" title="Full Proxy (Recommended)">
+<Tabs items={['Full Proxy (Recommended)', 'Minimal Proxy', 'With Cache Zone']}>
+<Tab>
 
 ```nginx
 # /etc/nginx/sites-available/yourdomain.com
@@ -150,7 +150,7 @@ Replace `app.rybbit.io` with your self-hosted Rybbit instance URL if you're not
 </Callout>
 
 </Tab>
-<Tab value="minimal-proxy" title="Minimal Proxy">
+<Tab>
 
 Minimal configuration for basic tracking:
 
@@ -187,7 +187,7 @@ server {
 ```
 
 </Tab>
-<Tab value="with-cache-zone" title="With Cache Zone">
+<Tab>
 
 For better performance with caching, define a cache zone:
 
