feat: add preview pages, real content factory, and fix api sorting
This commit is contained in:
cawcenter
33
god-mode/src/pages/admin/content-factory.astro
Normal file
33
god-mode/src/pages/admin/content-factory.astro
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
---
|
||||||
|
import Layout from '@/layouts/AdminLayout.astro';
|
||||||
|
import KanbanBoard from '@/components/admin/factory/KanbanBoard';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Plus } from 'lucide-react';
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout title="Content Factory | Spark Intelligence">
|
||||||
|
<div class="h-screen flex flex-col overflow-hidden">
|
||||||
|
<div className="flex-none p-6 pb-2 flex justify-between items-center border-b border-zinc-800/50 bg-zinc-950/50 backdrop-blur-sm z-10">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-white tracking-tight flex items-center gap-2">
|
||||||
|
🏭 Content Factory
|
||||||
|
<span className="text-xs font-normal text-zinc-500 bg-zinc-900 border border-zinc-800 px-2 py-0.5 rounded-full">Pro</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-zinc-400 text-sm mt-1">
|
||||||
|
Drag and drop articles to move them through the production pipeline.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<a href="/admin/jumpstart/wizard">
|
||||||
|
<Button className="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 border-0">
|
||||||
|
<Plus className="mr-2 h-4 w-4" /> New Article
|
||||||
|
</Button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 overflow-hidden p-6 bg-zinc-950">
|
||||||
|
<KanbanBoard client:only="react" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
217
god-mode/src/pages/api/collections/[table].ts
Normal file
217
god-mode/src/pages/api/collections/[table].ts
Normal file
@@ -0,0 +1,217 @@
|
|||||||
|
/**
|
||||||
|
* Generic Collections API - CRUD for all God Mode tables
|
||||||
|
* GET /api/collections/avatars - List items
|
||||||
|
* GET /api/collections/avatars/[id] - Get single item
|
||||||
|
* POST /api/collections/avatars - Create item
|
||||||
|
* PATCH /api/collections/avatars/[id] - Update item
|
||||||
|
* DELETE /api/collections/avatars/[id] - Delete item
|
||||||
|
*/
|
||||||
|
|
||||||
|
import type { APIRoute } from 'astro';
|
||||||
|
import pkg from 'pg';
|
||||||
|
const { Pool } = pkg;
|
||||||
|
|
||||||
|
const pool = new Pool({
|
||||||
|
connectionString: process.env.DATABASE_URL
|
||||||
|
});
|
||||||
|
|
||||||
|
// God Mode Token validation
|
||||||
|
function validateGodToken(request: Request): boolean {
|
||||||
|
const token = request.headers.get('X-God-Token') ||
|
||||||
|
request.headers.get('Authorization')?.replace('Bearer ', '') ||
|
||||||
|
new URL(request.url).searchParams.get('token');
|
||||||
|
|
||||||
|
const godToken = process.env.GOD_MODE_TOKEN || import.meta.env.GOD_MODE_TOKEN;
|
||||||
|
|
||||||
|
if (!godToken) {
|
||||||
|
console.warn('⚠️ GOD_MODE_TOKEN not set - backdoor is open!');
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return token === godToken;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Allowed tables (whitelist for security)
|
||||||
|
const ALLOWED_TABLES = [
|
||||||
|
'sites',
|
||||||
|
'posts',
|
||||||
|
'pages',
|
||||||
|
'avatars',
|
||||||
|
'content_blocks',
|
||||||
|
'campaign_masters',
|
||||||
|
'spintax_dictionaries',
|
||||||
|
'spintax_patterns',
|
||||||
|
'generation_jobs',
|
||||||
|
'geo_clusters',
|
||||||
|
'geo_locations'
|
||||||
|
];
|
||||||
|
|
||||||
|
function json(data: any, status = 200) {
|
||||||
|
return new Response(JSON.stringify(data, null, 2), {
|
||||||
|
status,
|
||||||
|
headers: { 'Content-Type': 'application/json' }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export const GET: APIRoute = async ({ params, request, url }) => {
|
||||||
|
if (!validateGodToken(request)) {
|
||||||
|
return json({ error: 'Unauthorized' }, 401);
|
||||||
|
}
|
||||||
|
|
||||||
|
const table = params.table;
|
||||||
|
|
||||||
|
if (!table || !ALLOWED_TABLES.includes(table)) {
|
||||||
|
return json({ error: 'Invalid table name' }, 400);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Pagination
|
||||||
|
const limit = parseInt(url.searchParams.get('limit') || '50');
|
||||||
|
const offset = parseInt(url.searchParams.get('offset') || '0');
|
||||||
|
|
||||||
|
// Sorting
|
||||||
|
const sort = url.searchParams.get('sort') || 'date_created';
|
||||||
|
const order = url.searchParams.get('order') || 'DESC';
|
||||||
|
|
||||||
|
// Search
|
||||||
|
const search = url.searchParams.get('search');
|
||||||
|
|
||||||
|
let query = `SELECT * FROM ${table}`;
|
||||||
|
const queryParams: any[] = [];
|
||||||
|
|
||||||
|
// Add search if provided
|
||||||
|
if (search) {
|
||||||
|
query += ` WHERE name ILIKE $1`;
|
||||||
|
queryParams.push(`%${search}%`);
|
||||||
|
}
|
||||||
|
|
||||||
|
query += ` ORDER BY ${sort} ${order} LIMIT $${queryParams.length + 1} OFFSET $${queryParams.length + 2}`;
|
||||||
|
queryParams.push(limit, offset);
|
||||||
|
|
||||||
|
const result = await pool.query(query, queryParams);
|
||||||
|
|
||||||
|
// Get total count
|
||||||
|
const countQuery = search
|
||||||
|
? `SELECT COUNT(*) FROM ${table} WHERE name ILIKE $1`
|
||||||
|
: `SELECT COUNT(*) FROM ${table}`;
|
||||||
|
const countParams = search ? [`%${search}%`] : [];
|
||||||
|
const countResult = await pool.query(countQuery, countParams);
|
||||||
|
|
||||||
|
return json({
|
||||||
|
data: result.rows,
|
||||||
|
meta: {
|
||||||
|
total: parseInt(countResult.rows[0].count),
|
||||||
|
limit,
|
||||||
|
offset
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} catch (error: any) {
|
||||||
|
return json({ error: error.message }, 500);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const POST: APIRoute = async ({ params, request }) => {
|
||||||
|
if (!validateGodToken(request)) {
|
||||||
|
return json({ error: 'Unauthorized' }, 401);
|
||||||
|
}
|
||||||
|
|
||||||
|
const table = params.table;
|
||||||
|
|
||||||
|
if (!table || !ALLOWED_TABLES.includes(table)) {
|
||||||
|
return json({ error: 'Invalid table name' }, 400);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const body = await request.json();
|
||||||
|
|
||||||
|
// Build INSERT query
|
||||||
|
const columns = Object.keys(body);
|
||||||
|
const values = Object.values(body);
|
||||||
|
const placeholders = values.map((_, i) => `$${i + 1}`).join(', ');
|
||||||
|
|
||||||
|
const query = `
|
||||||
|
INSERT INTO ${table} (${columns.join(', ')})
|
||||||
|
VALUES (${placeholders})
|
||||||
|
RETURNING *
|
||||||
|
`;
|
||||||
|
|
||||||
|
const result = await pool.query(query, values);
|
||||||
|
|
||||||
|
return json({ data: result.rows[0] }, 201);
|
||||||
|
} catch (error: any) {
|
||||||
|
return json({ error: error.message }, 500);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const PATCH: APIRoute = async ({ params, request, url }) => {
|
||||||
|
if (!validateGodToken(request)) {
|
||||||
|
return json({ error: 'Unauthorized' }, 401);
|
||||||
|
}
|
||||||
|
|
||||||
|
const table = params.table;
|
||||||
|
const id = url.searchParams.get('id');
|
||||||
|
|
||||||
|
if (!table || !ALLOWED_TABLES.includes(table)) {
|
||||||
|
return json({ error: 'Invalid table name' }, 400);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!id) {
|
||||||
|
return json({ error: 'ID required' }, 400);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const body = await request.json();
|
||||||
|
|
||||||
|
// Build UPDATE query
|
||||||
|
const columns = Object.keys(body);
|
||||||
|
const values = Object.values(body);
|
||||||
|
const setClause = columns.map((col, i) => `${col} = $${i + 1}`).join(', ');
|
||||||
|
|
||||||
|
const query = `
|
||||||
|
UPDATE ${table}
|
||||||
|
SET ${setClause}
|
||||||
|
WHERE id = $${values.length + 1}
|
||||||
|
RETURNING *
|
||||||
|
`;
|
||||||
|
|
||||||
|
const result = await pool.query(query, [...values, id]);
|
||||||
|
|
||||||
|
if (result.rows.length === 0) {
|
||||||
|
return json({ error: 'Not found' }, 404);
|
||||||
|
}
|
||||||
|
|
||||||
|
return json({ data: result.rows[0] });
|
||||||
|
} catch (error: any) {
|
||||||
|
return json({ error: error.message }, 500);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const DELETE: APIRoute = async ({ params, request, url }) => {
|
||||||
|
if (!validateGodToken(request)) {
|
||||||
|
return json({ error: 'Unauthorized' }, 401);
|
||||||
|
}
|
||||||
|
|
||||||
|
const table = params.table;
|
||||||
|
const id = url.searchParams.get('id');
|
||||||
|
|
||||||
|
if (!table || !ALLOWED_TABLES.includes(table)) {
|
||||||
|
return json({ error: 'Invalid table name' }, 400);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!id) {
|
||||||
|
return json({ error: 'ID required' }, 400);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const query = `DELETE FROM ${table} WHERE id = $1 RETURNING id`;
|
||||||
|
const result = await pool.query(query, [id]);
|
||||||
|
|
||||||
|
if (result.rows.length === 0) {
|
||||||
|
return json({ error: 'Not found' }, 404);
|
||||||
|
}
|
||||||
|
|
||||||
|
return json({ success: true });
|
||||||
|
} catch (error: any) {
|
||||||
|
return json({ error: error.message }, 500);
|
||||||
|
}
|
||||||
|
};
|
||||||
287
god-mode/src/pages/preview/article/[articleId].astro
Normal file
287
god-mode/src/pages/preview/article/[articleId].astro
Normal file
@@ -0,0 +1,287 @@
|
|||||||
|
---
|
||||||
|
import { getDirectusClient, readItems } from '@/lib/directus/client';
|
||||||
|
|
||||||
|
const { articleId } = Astro.params;
|
||||||
|
|
||||||
|
if (!articleId) {
|
||||||
|
return Astro.redirect('/404');
|
||||||
|
}
|
||||||
|
|
||||||
|
const client = getDirectusClient();
|
||||||
|
|
||||||
|
let article;
|
||||||
|
try {
|
||||||
|
// @ts-ignore
|
||||||
|
const articles = await client.request(readItems('generated_articles', {
|
||||||
|
filter: { id: { _eq: articleId } },
|
||||||
|
limit: 1
|
||||||
|
}));
|
||||||
|
|
||||||
|
article = articles[0];
|
||||||
|
|
||||||
|
if (!article) {
|
||||||
|
return Astro.redirect('/404');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching article:', error);
|
||||||
|
return Astro.redirect('/404');
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>{article.title} - Preview</title>
|
||||||
|
<meta name="description" content={article.metadata?.description || article.title}>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #333;
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-banner {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 2rem auto;
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-header {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-header h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-meta {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
opacity: 0.9;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-content {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-content h2 {
|
||||||
|
color: #667eea;
|
||||||
|
margin-top: 2rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-content h3 {
|
||||||
|
color: #764ba2;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-content p {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-content ul,
|
||||||
|
.article-content ol {
|
||||||
|
margin-left: 2rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-content li {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-content strong {
|
||||||
|
color: #667eea;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-footer {
|
||||||
|
background: #f8f9fa;
|
||||||
|
padding: 2rem;
|
||||||
|
border-top: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata-item {
|
||||||
|
background: white;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-left: 3px solid #667eea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata-label {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #666;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata-value {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.2s;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: white;
|
||||||
|
color: #667eea;
|
||||||
|
border: 2px solid #667eea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: #667eea;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="preview-banner">
|
||||||
|
🔍 PREVIEW MODE - This is how your article will appear
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="article-card">
|
||||||
|
<div class="article-header">
|
||||||
|
<h1>{article.title}</h1>
|
||||||
|
<div class="article-meta">
|
||||||
|
<div class="meta-item">
|
||||||
|
📅 {new Date(article.date_created).toLocaleDateString()}
|
||||||
|
</div>
|
||||||
|
<div class="meta-item">
|
||||||
|
🔗 {article.slug}
|
||||||
|
</div>
|
||||||
|
{article.metadata?.word_count && (
|
||||||
|
<div class="meta-item">
|
||||||
|
📝 {article.metadata.word_count} words
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{article.metadata?.seo_score && (
|
||||||
|
<div class="meta-item">
|
||||||
|
⭐ SEO Score: {article.metadata.seo_score}/100
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="article-content">
|
||||||
|
<Fragment set:html={article.html_content} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="article-footer">
|
||||||
|
<h3>Article Metadata</h3>
|
||||||
|
<div class="metadata-grid">
|
||||||
|
<div class="metadata-item">
|
||||||
|
<div class="metadata-label">Article ID</div>
|
||||||
|
<div class="metadata-value">{article.id}</div>
|
||||||
|
</div>
|
||||||
|
<div class="metadata-item">
|
||||||
|
<div class="metadata-label">Status</div>
|
||||||
|
<div class="metadata-value">{article.status || 'Draft'}</div>
|
||||||
|
</div>
|
||||||
|
{article.metadata?.template && (
|
||||||
|
<div class="metadata-item">
|
||||||
|
<div class="metadata-label">Template</div>
|
||||||
|
<div class="metadata-value">{article.metadata.template}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{article.metadata?.location && (
|
||||||
|
<div class="metadata-item">
|
||||||
|
<div class="metadata-label">Target Location</div>
|
||||||
|
<div class="metadata-value">{article.metadata.location}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{article.generation_hash && (
|
||||||
|
<div class="metadata-item">
|
||||||
|
<div class="metadata-label">Generation Hash</div>
|
||||||
|
<div class="metadata-value" style="font-size: 0.8rem; word-break: break-all;">
|
||||||
|
{article.generation_hash}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions">
|
||||||
|
<a href={`/admin/content/generated-articles`} class="btn btn-primary">
|
||||||
|
← Back to Articles
|
||||||
|
</a>
|
||||||
|
<a href={`https://spark.jumpstartscaling.com/items/generated_articles/${article.id}`} class="btn btn-secondary" target="_blank">
|
||||||
|
Edit in Directus
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
135
god-mode/src/pages/preview/page/[pageId].astro
Normal file
135
god-mode/src/pages/preview/page/[pageId].astro
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
---
|
||||||
|
/**
|
||||||
|
* Preview Page Route
|
||||||
|
* Shows a single page in preview mode
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { getDirectusClient, readItem } from '@/lib/directus/client';
|
||||||
|
import BlockRenderer from '@/components/engine/BlockRenderer';
|
||||||
|
|
||||||
|
const { pageId } = Astro.params;
|
||||||
|
|
||||||
|
if (!pageId) {
|
||||||
|
return Astro.redirect('/admin/pages');
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Page {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
content: string;
|
||||||
|
blocks: any[];
|
||||||
|
status: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
let page: Page | null = null;
|
||||||
|
let error: string | null = null;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const client = getDirectusClient();
|
||||||
|
const result = await client.request(readItem('pages', pageId));
|
||||||
|
page = result as Page;
|
||||||
|
} catch (err) {
|
||||||
|
error = err instanceof Error ? err.message : 'Failed to load page';
|
||||||
|
console.error('Preview error:', err);
|
||||||
|
}
|
||||||
|
|
||||||
|
import '@/styles/global.css';
|
||||||
|
|
||||||
|
if (!page && !error) {
|
||||||
|
return Astro.redirect('/admin/pages');
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Preview: {page?.title || 'Page'}</title>
|
||||||
|
<style>
|
||||||
|
.preview-banner {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 12px 20px;
|
||||||
|
z-index: 9999;
|
||||||
|
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-content {
|
||||||
|
margin-top: 60px;
|
||||||
|
padding: 20px;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-badge {
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-preview {
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-preview:hover {
|
||||||
|
background: rgba(255,255,255,0.3);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Preview Mode Banner -->
|
||||||
|
<div class="preview-banner">
|
||||||
|
<div style="display: flex; align-items: center; gap: 12px;">
|
||||||
|
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
||||||
|
</svg>
|
||||||
|
<span style="font-weight: 600; font-size: 14px;">PREVIEW MODE</span>
|
||||||
|
{page && <span class="preview-badge">{page.status || 'Draft'}</span>}
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; gap: 12px; align-items: center;">
|
||||||
|
<span style="font-size: 13px; opacity: 0.9;">{page?.title}</span>
|
||||||
|
<button class="close-preview" onclick="window.close()">Close Preview</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Page Content -->
|
||||||
|
<div class="preview-content">
|
||||||
|
{error ? (
|
||||||
|
<div style="background: #fee; border: 1px solid #fcc; color: #c00; padding: 20px; border-radius: 8px;">
|
||||||
|
<h2>Error Loading Preview</h2>
|
||||||
|
<p>{error}</p>
|
||||||
|
</div>
|
||||||
|
) : page ? (
|
||||||
|
<>
|
||||||
|
<BlockRenderer blocks={page.blocks} client:load />
|
||||||
|
{(!page.blocks || page.blocks.length === 0) && page.content && (
|
||||||
|
// Fallback for content
|
||||||
|
<div style="line-height: 1.8; color: #333;" set:html={page.content}>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
282
god-mode/src/pages/preview/site/[siteId].astro
Normal file
282
god-mode/src/pages/preview/site/[siteId].astro
Normal file
@@ -0,0 +1,282 @@
|
|||||||
|
---
|
||||||
|
/**
|
||||||
|
* Preview Site Route
|
||||||
|
* Shows all pages for a site in preview mode
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { getDirectusClient, readItems } from '@/lib/directus/client';
|
||||||
|
|
||||||
|
const { siteId } = Astro.params;
|
||||||
|
|
||||||
|
if (!siteId) {
|
||||||
|
return Astro.redirect('/admin/sites');
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Site {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
domain: string;
|
||||||
|
status: string;
|
||||||
|
date_created: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Page {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
status: string;
|
||||||
|
permalink: string;
|
||||||
|
slug: string;
|
||||||
|
seo_description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
let site: Site | null = null;
|
||||||
|
let pages: Page[] = [];
|
||||||
|
let error: string | null = null;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const client = getDirectusClient();
|
||||||
|
|
||||||
|
// Fetch site
|
||||||
|
const siteResult = await client.request(readItems('sites', {
|
||||||
|
filter: { id: { _eq: siteId } },
|
||||||
|
limit: 1
|
||||||
|
}));
|
||||||
|
site = siteResult[0] as Site;
|
||||||
|
|
||||||
|
// Fetch pages for this site
|
||||||
|
// Note: directus-shim buildWhere supports _eq
|
||||||
|
const pagesResult = await client.request(readItems('pages', {
|
||||||
|
filter: { site: { _eq: siteId } },
|
||||||
|
limit: -1
|
||||||
|
}));
|
||||||
|
pages = pagesResult as Page[];
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
error = err instanceof Error ? err.message : 'Failed to load site';
|
||||||
|
console.error('Preview error:', err);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!site && !error) {
|
||||||
|
return Astro.redirect('/admin/sites');
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Preview: {site?.name || 'Site'}</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
background: #0a0a0a;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-banner {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
background: rgba(255,255,255,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 2rem auto;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header {
|
||||||
|
background: #111;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
border: 1px solid #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-meta {
|
||||||
|
color: #888;
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pages-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-card {
|
||||||
|
background: #111;
|
||||||
|
border: 1px solid #222;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
transition: all 0.2s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-card:hover {
|
||||||
|
border-color: #667eea;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-card h3 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-card p {
|
||||||
|
color: #888;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-status {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-published {
|
||||||
|
background: #10b981;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-draft {
|
||||||
|
background: #6b7280;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
text-align: center;
|
||||||
|
padding: 4rem 2rem;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state svg {
|
||||||
|
width: 4rem;
|
||||||
|
height: 4rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Preview Banner -->
|
||||||
|
<div class="preview-banner">
|
||||||
|
<div class="banner-left">
|
||||||
|
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
||||||
|
</svg>
|
||||||
|
<span style="font-weight: 600;">SITE PREVIEW</span>
|
||||||
|
{site && <span class="badge">{site.status || 'Active'}</span>}
|
||||||
|
</div>
|
||||||
|
<button class="btn" onclick="window.close()">Close Preview</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Site Content -->
|
||||||
|
<div class="container">
|
||||||
|
{error ? (
|
||||||
|
<div style="background: #fee; border: 1px solid #fcc; color: #c00; padding: 20px; border-radius: 8px;">
|
||||||
|
<h2>Error Loading Site</h2>
|
||||||
|
<p>{error}</p>
|
||||||
|
</div>
|
||||||
|
) : site ? (
|
||||||
|
<>
|
||||||
|
<div class="site-header">
|
||||||
|
<h1>{site.name}</h1>
|
||||||
|
<div class="site-meta">
|
||||||
|
<span>🌐 {site.domain}</span>
|
||||||
|
<span>📄 {pages.length} pages</span>
|
||||||
|
{site.date_created && (
|
||||||
|
<span>📅 Created {new Date(site.date_created).toLocaleDateString()}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 style="margin-bottom: 1.5rem; font-size: 1.5rem;">Pages</h2>
|
||||||
|
|
||||||
|
{pages.length > 0 ? (
|
||||||
|
<div class="pages-grid">
|
||||||
|
{pages.map((page) => (
|
||||||
|
<div class="page-card" onclick={`window.open('/preview/page/${page.id}', '_blank')`}>
|
||||||
|
<h3>{page.title}</h3>
|
||||||
|
<p>{page.seo_description || 'No description'}</p>
|
||||||
|
<div style="display: flex; justify-between; align-items: center;">
|
||||||
|
<span class={`page-status ${page.status === 'published' ? 'status-published' : 'status-draft'}`}>
|
||||||
|
{page.status || 'draft'}
|
||||||
|
</span>
|
||||||
|
<span style="color: #666; font-size: 0.75rem;">
|
||||||
|
/{page.permalink || page.slug}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div class="empty-state">
|
||||||
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||||
|
</svg>
|
||||||
|
<p>No pages created yet for this site.</p>
|
||||||
|
<p style="margin-top: 0.5rem; font-size: 0.875rem;">
|
||||||
|
<a href={`/admin/sites/${site.id}`} style="color: #667eea;">Create your first page →</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user