gatekeeper/mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add complete database schema documentation + real content sales page generator

Browse Source
This commit is contained in:
cawcenter
2025-12-16 12:30:26 -05:00
parent eebeb1a575
commit b8d638a945
2 changed files with 465 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

364
src/pages/admin/pages/demo-generator.astro
View File

@@ -1,5 +1,5 @@
---
// Demo Page Generator - Uses Real Database Content
// Real Content Demo Generator - Uses actual content fragments from database
import AdminLayout from '@/layouts/AdminLayout.astro';
import { pool } from '@/lib/db';
@@ -11,125 +11,165 @@ if (!site) {
return Astro.redirect('/admin/sites');
}
// Get content fragments if they exist
const { rows: fragments } = await pool.query<{fragment_type: string; content: any}>(
'SELECT fragment_type, content FROM content_fragments LIMIT 10'
// Get ALL content fragments
const { rows: fragments } = await pool.query<{fragment_type: string; content_body: string; word_count: number}>(
'SELECT fragment_type, content_body, word_count FROM content_fragments ORDER BY date_created'
);
// Get article templates if they exist
const { rows: templates } = await pool.query<{name: string; template: any}>(
'SELECT name, template FROM article_templates ORDER BY created_at DESC LIMIT 5'
// Get article template
const { rows: templates } = await pool.query<{name: string; structure_json: string[]}>(
'SELECT name, structure_json FROM article_templates LIMIT 1'
);
// Build demo page HTML
let demoHTML = `
<div style="font-family: system-ui, -apple-system, sans-serif; max-width: 1200px; margin: 0 auto; padding: 40px 20px;">
<header style="text-align: center; margin-bottom: 60px;">
<h1 style="font-size: 3rem; font-weight: 800; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 20px;">
Welcome to ${site.domain}
</h1>
<p style="font-size: 1.25rem; color: #64748b; max-width: 600px; margin: 0 auto;">
This page was auto-generated using content from your database
</p>
</header>
const template = templates[0];
<section style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 60px 40px; border-radius: 20px; color: white; margin-bottom: 40px;">
<h2 style="font-size: 2rem; margin-bottom: 20px;">About Your Platform</h2>
<p style="font-size: 1.1rem; line-height: 1.8; opacity: 0.95;">
You have <strong>${fragments.length} content fragments</strong> and <strong>${templates.length} article templates</strong> in your database.
This demonstrates the direct database integration working perfectly!
</p>
</section>
`;
// Build complete sales page from fragments
let salesPageHTML = '';
// Add content fragments section if exist
if (fragments.length > 0) {
demoHTML += `
<section style="margin-bottom: 60px;">
<h2 style="font-size: 2rem; margin-bottom: 30px; color: #1e293b;">📦 Your Content Fragments</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
`;
fragments.slice(0, 6).forEach(frag => {
demoHTML += `
<div style="background: #f8fafc; padding: 30px; border-radius: 12px; border: 2px solid #e2e8f0;">
<h3 style="color: #475569; font-size: 1.1rem; margin-bottom: 10px;">
${frag.fragment_type || 'Content Block'}
</h3>
<p style="color: #64748b; font-size: 0.9rem;">
${JSON.stringify(frag.content).substring(0, 100)}...
</p>
</div>
`;
if (template && fragments.length > 0) {
// Create a map of fragments by type
const fragmentMap = new Map();
fragments.forEach(frag => {
fragmentMap.set(frag.fragment_type, frag.content_body);
});
demoHTML += `
</div>
</section>
`;
}
// Add templates section if exist
if (templates.length > 0) {
demoHTML += `
<section style="margin-bottom: 60px;">
<h2 style="font-size: 2rem; margin-bottom: 30px; color: #1e293b;">📄 Your Article Templates</h2>
<div style="display: grid; gap: 20px;">
`;
templates.forEach(tmpl => {
demoHTML += `
<div style="background: white; padding: 30px; border-radius: 12px; border: 2px solid #e2e8f0; box-shadow: 0 4px 6px rgba(0,0,0,0.05);">
<h3 style="color: #1e293b; font-size: 1.25rem; margin-bottom: 15px;">
✨ ${tmpl.name}
</h3>
<div style="background: #f1f5f9; padding: 20px; border-radius: 8px; font-family: monospace; font-size: 0.85rem; color: #475569; overflow-x: auto;">
${JSON.stringify(tmpl.template, null, 2).substring(0, 300)}...
</div>
</div>
`;
});
demoHTML += `
</div>
</section>
`;
}
demoHTML += `
<section style="background: #f8fafc; padding: 40px; border-radius: 12px; text-align: center;">
<h2 style="font-size: 1.75rem; color: #1e293b; margin-bottom: 20px;">🚀 Ready to Build More?</h2>
<p style="color: #64748b; margin-bottom: 30px; font-size: 1.1rem;">
This page demonstrates that your database content is accessible and renders perfectly.
</p>
<div style="display: flex; gap: 15px; justify-content: center;">
<a href="/admin/pages/new" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px 30px; border-radius: 8px; text-decoration: none; font-weight: 600;">
Create Custom Page
</a>
<a href="/admin/posts/new" style="background: #64748b; color: white; padding: 15px 30px; border-radius: 8px; text-decoration: none; font-weight: 600;">
Create Blog Post
</a>
</div>
</section>
<footer style="margin-top: 80px; padding-top: 40px; border-top: 2px solid #e2e8f0; text-align: center; color: #94a3b8; font-size: 0.9rem;">
<p>✨ Auto-generated from ${site.domain} database | God Mode Direct PostgreSQL Integration</p>
</footer>
</div>
// Build page following template structure
salesPageHTML = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aesthetic Practice CEO Report - Stop Wasting $50,000 on Google Ads</title>
<meta name="description" content="Essential report for aesthetic practice CEOs in Alabama. Learn the critical flaw in standard agency funnels and discover the Conversion Architecture system.">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
color: #1a1a1a;
background: #ffffff;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 40px 20px;
}
h1 {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 1.5rem;
line-height: 1.2;
color: #111;
}
h2 {
font-size: 1.75rem;
font-weight: 700;
margin-top: 3rem;
margin-bottom: 1rem;
color: #222;
}
p {
margin-bottom: 1.25rem;
font-size: 1.125rem;
color: #333;
}
ul, ol {
margin-bottom: 1.5rem;
margin-left: 2rem;
font-size: 1.125rem;
}
li {
margin-bottom: 0.75rem;
color: #333;
}
a {
display: inline-block;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 15px 40px;
margin: 10px 10px 10px 0;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
font-size: 1.1rem;
transition: transform 0.2s, box-shadow 0.2s;
}
a:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}
.section {
margin-bottom: 3rem;
padding-bottom: 2rem;
border-bottom: 1px solid #eee;
}
.section:last-child {
border-bottom: none;
}
.cta-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 3rem 2rem;
border-radius: 12px;
text-align: center;
margin-top: 4rem;
}
.cta-section h1,
.cta-section h2,
.cta-section p {
color: white;
}
.cta-section a {
background: white;
color: #667eea;
margin-top: 1rem;
}
</style>
</head>
<body>
<div class="container">
`;
// Create the page using the API
// Add each section from template
template.structure_json.forEach((fragmentType: string) => {
const content = fragmentMap.get(fragmentType);
if (content) {
// Wrap offer_stack in special styling
if (fragmentType === 'offer_stack') {
salesPageHTML += `<div class="cta-section">${content}</div>`;
} else {
salesPageHTML += `<div class="section">${content}</div>`;
}
}
});
salesPageHTML += `
</div>
<!-- Generated by God Mode from ${fragments.length} content fragments -->
<div style="text-align: center; padding: 40px 20px; color: #999; font-size: 0.875rem;">
<p>✨ Auto-generated from database content | ${site.domain}</p>
</div>
</body>
</html>
`;
}
// Create the page
const pageData = {
site_id: site.id,
name: "Database Demo Page",
route: "/demo",
html_content: demoHTML,
meta_title: `${site.domain} - Database Integration Demo`,
meta_description: "Auto-generated demo page showing content from the database",
name: "Aesthetic Practice CEO Sales Letter",
route: "/aesthetic-practice-report",
html_content: salesPageHTML,
meta_title: "Stop Wasting $50,000 on Google Ads | Aesthetic Practice CEO Report",
meta_description: "Essential report for aesthetic practice CEOs. Discover the critical flaw in standard agency funnels and the Conversion Architecture system that delivers results.",
status: "published"
};
let createdPage = null;
let error = null;
try {
const response = await fetch(`${Astro.url.origin}/api/shim/pages/create`, {
method: 'POST',
@@ -142,77 +182,121 @@ try {
if (response.ok) {
createdPage = await response.json();
} else {
const err = await response.json();
error = err.message || 'Failed to create page';
}
} catch (error) {
console.error('Failed to create demo page:', error);
} catch (err: any) {
error = err.message;
console.error('Failed to create page:', err);
}
---
<AdminLayout title="Demo Page Generator">
<AdminLayout title="Real Content Demo">
<div class="space-y-6">
<div class="flex justify-between items-center">
<div>
<h1 class="text-3xl font-bold text-white">📊 Database Demo Page</h1>
<p class="text-slate-400 mt-1">Auto-generated page using your database content</p>
<h1 class="text-3xl font-bold text-white">🎯 Real Content Sales Page</h1>
<p class="text-slate-400 mt-1">Generated from your {fragments.length} content fragments</p>
</div>
<a href="/admin" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg">
← Back to Admin
<a href="/admin/pages" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg">
← Back
</a>
</div>
{createdPage ? (
<div class="bg-green-900/20 border border-green-700 rounded-lg p-6">
<h2 class="text-green-400 font-semibold text-xl mb-3">✅ Demo Page Created!</h2>
<p class="text-green-300 mb-4">
Your demo page has been successfully created from database content.
<h2 class="text-green-400 font-semibold text-2xl mb-3">✅ Sales Page Created!</h2>
<p class="text-green-300 mb-4 text-lg">
Your {fragments.length}-section sales letter has been generated from real database content.
</p>
<div class="flex gap-3">
<div class="flex gap-3 mb-6">
<a
href={`/preview/page/${createdPage.id}`}
target="_blank"
class="px-6 py-3 bg-green-600 hover:bg-green-500 text-white rounded-lg font-medium"
class="px-8 py-4 bg-green-600 hover:bg-green-500 text-white rounded-lg font-semibold text-lg"
>
👁️ View Demo Page
👁️ View Full Sales Page
</a>
<a
href={`/admin/pages/${createdPage.id}/edit`}
class="px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium"
href={`/admin/pages`}
class="px-8 py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-semibold text-lg"
>
✏️ Edit Page
📄 All Pages
</a>
</div>
<div class="mt-6 p-4 bg-slate-800 rounded border border-slate-600">
<p class="text-slate-300 text-sm font-mono">
ID: {createdPage.id}<br/>
Route: {createdPage.route}<br/>
Status: {createdPage.status}
</p>
<div class="grid grid-cols-2 gap-4 mt-6">
<div class="p-4 bg-slate-800 rounded border border-slate-600">
<div class="text-sm text-slate-400 mb-1">Page ID</div>
<div class="font-mono text-xs text-slate-300">{createdPage.id}</div>
</div>
<div class="p-4 bg-slate-800 rounded border border-slate-600">
<div class="text-sm text-slate-400 mb-1">Route</div>
<div class="font-semibold text-white">{createdPage.route}</div>
</div>
<div class="p-4 bg-slate-800 rounded border border-slate-600">
<div class="text-sm text-slate-400 mb-1">Status</div>
<div class="font-semibold text-green-400">{createdPage.status}</div>
</div>
<div class="p-4 bg-slate-800 rounded border border-slate-600">
<div class="text-sm text-slate-400 mb-1">Word Count</div>
<div class="font-semibold text-white">~{fragments.reduce((sum, f) => sum + f.word_count, 0)} words</div>
</div>
</div>
</div>
) : error ? (
<div class="bg-red-900/20 border border-red-700 rounded-lg p-6">
<h2 class="text-red-400 font-semibold text-xl mb-2">❌ Error</h2>
<p class="text-red-300">{error}</p>
</div>
) : (
<div class="bg-yellow-900/20 border border-yellow-700 rounded-lg p-6">
<h2 class="text-yellow-400 font-semibold text-xl mb-3">⚠️ Page Creation</h2>
<p class="text-yellow-300">
Generating demo page... refresh if needed.
</p>
<h2 class="text-yellow-400 font-semibold text-xl mb-2">⏳ Generating...</h2>
<p class="text-yellow-300">Creating sales page from fragments...</p>
</div>
)}
<div class="bg-slate-800 rounded-lg border border-slate-700 p-6">
<h3 class="text-white font-semibold text-lg mb-4">Database Content Found:</h3>
<div class="grid grid-cols-2 gap-4">
<div class="p-4 bg-blue-900/20 border border-blue-700 rounded">
<div class="text-3xl font-bold text-blue-400">{fragments.length}</div>
<div class="text-slate-400 text-sm mt-1">Content Fragments</div>
</div>
<div class="p-4 bg-purple-900/20 border border-purple-700 rounded">
<div class="text-3xl font-bold text-purple-400">{templates.length}</div>
<div class="text-slate-400 text-sm mt-1">Article Templates</div>
</div>
<h3 class="text-white font-semibold text-lg mb-4">📦 Content Fragments Found:</h3>
<div class="grid gap-3">
{fragments.map(frag => (
<div class="p-4 bg-slate-900 border border-slate-700 rounded">
<div class="flex justify-between items-center mb-2">
<span class="font-semibold text-blue-400">{frag.fragment_type}</span>
<span class="text-xs text-slate-500">{frag.word_count} words</span>
</div>
<div class="text-sm text-slate-400 line-clamp-2">
{frag.content_body.replace(/<[^>]*>/g, '').substring(0, 150)}...
</div>
</div>
))}
</div>
</div>
{template && (
<div class="bg-purple-900/20 border border-purple-700 rounded-lg p-6">
<h3 class="text-purple-300 font-semibold text-lg mb-3">📋 Template Structure: {template.name}</h3>
<div class="flex flex-wrap gap-2">
{template.structure_json.map((section: string) => {
const hasContent = fragments.some(f => f.fragment_type === section);
return (
<span class={`px-3 py-1 rounded text-sm font-medium ${
hasContent
? 'bg-green-900/30 border border-green-700 text-green-300'
: 'bg-red-900/30 border border-red-700 text-red-300'
}`}>
{section} {hasContent ? '✓' : '✗'}
</span>
);
})}
</div>
<p class="mt-4 text-sm text-purple-300">
{fragments.length} of {template.structure_json.length} sections have content
</p>
</div>
)}
</div>
</AdminLayout>