Create docs sync dashboard page
cgen-ffd232cf0771424da111c91512345b0c
This commit is contained in:
Builder.io
parent
c63c119245
commit
3f49783b87
1 changed files with 218 additions and 0 deletions
218
client/pages/DocsSync.tsx
Normal file
218
client/pages/DocsSync.tsx
Normal file
|
|
@ -0,0 +1,218 @@
|
|||
import { useState } from 'react';
|
||||
import Layout from '@/components/Layout';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { CheckCircle2, AlertCircle, Loader2, GitBook } from 'lucide-react';
|
||||
|
||||
interface SyncResult {
|
||||
page: string;
|
||||
status: 'success' | 'failed';
|
||||
error?: string;
|
||||
}
|
||||
|
||||
interface SyncResponse {
|
||||
message: string;
|
||||
successful: number;
|
||||
failed: number;
|
||||
results: SyncResult[];
|
||||
}
|
||||
|
||||
export default function DocsSync() {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [result, setResult] = useState<SyncResponse | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleSync = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/sync-docs-gitbook', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`API error: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data: SyncResponse = await response.json();
|
||||
setResult(data);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Unknown error');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
|
||||
<div className="container mx-auto px-4 py-16">
|
||||
{/* Header */}
|
||||
<div className="mb-12">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<GitBook className="h-8 w-8 text-purple-400" />
|
||||
<h1 className="text-4xl font-bold text-white">Documentation Sync</h1>
|
||||
</div>
|
||||
<p className="text-gray-300 text-lg max-w-2xl">
|
||||
Sync your AeThex documentation to Gitbook. Click the button below to push all 9 documentation pages to your Gitbook workspace.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Sync Card */}
|
||||
<Card className="bg-slate-800/50 border-slate-700 mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Sync Documentation to Gitbook</CardTitle>
|
||||
<CardDescription className="text-gray-400">
|
||||
This will push all 9 documentation pages to your Gitbook workspace
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Status Info */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="bg-slate-900/50 rounded-lg p-4">
|
||||
<p className="text-sm text-gray-400 mb-1">Pages to Sync</p>
|
||||
<p className="text-2xl font-bold text-white">9</p>
|
||||
</div>
|
||||
<div className="bg-slate-900/50 rounded-lg p-4">
|
||||
<p className="text-sm text-gray-400 mb-1">Workspace</p>
|
||||
<p className="text-2xl font-bold text-white">AeThex Docs</p>
|
||||
</div>
|
||||
<div className="bg-slate-900/50 rounded-lg p-4">
|
||||
<p className="text-sm text-gray-400 mb-1">Target</p>
|
||||
<p className="text-2xl font-bold text-white">Gitbook</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sync Button */}
|
||||
<Button
|
||||
onClick={handleSync}
|
||||
disabled={loading}
|
||||
size="lg"
|
||||
className="w-full bg-purple-600 hover:bg-purple-700 text-white"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="h-5 w-5 mr-2 animate-spin" />
|
||||
Syncing...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<GitBook className="h-5 w-5 mr-2" />
|
||||
Sync to Gitbook
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Error Message */}
|
||||
{error && (
|
||||
<Card className="bg-red-900/20 border-red-500/40 mb-8">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertCircle className="h-5 w-5 text-red-400 flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-red-200 font-semibold">Sync Failed</p>
|
||||
<p className="text-red-300 text-sm mt-1">{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Results */}
|
||||
{result && (
|
||||
<Card className={`${result.failed === 0 ? 'bg-emerald-900/20 border-emerald-500/40' : 'bg-slate-800/50 border-slate-700'} mb-8`}>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-white">Sync Results</CardTitle>
|
||||
<div className="flex gap-4">
|
||||
<div className="text-right">
|
||||
<p className="text-sm text-gray-400">Successful</p>
|
||||
<p className="text-2xl font-bold text-emerald-400">{result.successful}</p>
|
||||
</div>
|
||||
{result.failed > 0 && (
|
||||
<div className="text-right">
|
||||
<p className="text-sm text-gray-400">Failed</p>
|
||||
<p className="text-2xl font-bold text-red-400">{result.failed}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
{result.results.map((item, index) => (
|
||||
<div key={index} className="flex items-center justify-between p-3 bg-slate-900/50 rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
{item.status === 'success' ? (
|
||||
<CheckCircle2 className="h-5 w-5 text-emerald-400" />
|
||||
) : (
|
||||
<AlertCircle className="h-5 w-5 text-red-400" />
|
||||
)}
|
||||
<span className="text-white">{item.page}</span>
|
||||
</div>
|
||||
<Badge
|
||||
className={
|
||||
item.status === 'success'
|
||||
? 'bg-emerald-500/20 text-emerald-200'
|
||||
: 'bg-red-500/20 text-red-200'
|
||||
}
|
||||
>
|
||||
{item.status}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{result.failed === 0 && (
|
||||
<div className="mt-6 p-4 bg-emerald-500/10 border border-emerald-500/40 rounded-lg">
|
||||
<p className="text-emerald-200 text-sm">
|
||||
✅ All documentation successfully synced to Gitbook! Your docs are now available at https://docs.aethex.tech
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Instructions */}
|
||||
<Card className="bg-slate-800/50 border-slate-700">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Setup Instructions</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4 text-gray-300">
|
||||
<div>
|
||||
<p className="font-semibold text-white mb-2">Before syncing:</p>
|
||||
<ol className="list-decimal list-inside space-y-1 text-sm">
|
||||
<li>Verify Vercel environment variables are set:
|
||||
<code className="bg-black/40 px-2 py-1 rounded text-purple-200 ml-2">GITBOOK_API_TOKEN</code>
|
||||
and
|
||||
<code className="bg-black/40 px-2 py-1 rounded text-purple-200 ml-2">GITBOOK_SPACE_ID</code>
|
||||
</li>
|
||||
<li>Ensure your Gitbook workspace "AeThex Docs" is ready</li>
|
||||
<li>Have pages created in Gitbook (Overview, Getting Started, etc.)</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="font-semibold text-white mb-2">After syncing:</p>
|
||||
<ol className="list-decimal list-inside space-y-1 text-sm">
|
||||
<li>Verify content appears in Gitbook</li>
|
||||
<li>Update internal links to point to Gitbook URLs</li>
|
||||
<li>Keep local /docs routes as fallback during transition</li>
|
||||
<li>Monitor analytics to track usage migration</li>
|
||||
</ol>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue