Fix: Change editors to client:only + add demo page generator using database content

src/pages/admin/pages/demo-generator.astro

@@ -0,0 +1,218 @@
+---
+// Demo Page Generator - Uses Real Database Content
+import AdminLayout from '@/layouts/AdminLayout.astro';
+import { pool } from '@/lib/db';
+
+// Get site
+const { rows: sites } = await pool.query<{id: string; domain: string}>('SELECT id, domain FROM sites LIMIT 1');
+const site = sites[0];
+
+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 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'
+);
+
+// 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>
+
+  <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>
+`;
+
+// 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>
+    `;
+  });
+  
+  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>
+`;
+
+// Create the page using the API
+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",
+  status: "published"
+};
+
+let createdPage = null;
+try {
+  const response = await fetch(`${Astro.url.origin}/api/shim/pages/create`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${import.meta.env.GOD_MODE_TOKEN}`
+    },
+    body: JSON.stringify(pageData)
+  });
+  
+  if (response.ok) {
+    createdPage = await response.json();
+  }
+} catch (error) {
+  console.error('Failed to create demo page:', error);
+}
+---
+
+<AdminLayout title="Demo Page Generator">
+  <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>
+      </div>
+      <a href="/admin" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg">
+        ← Back to Admin
+      </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.
+        </p>
+        <div class="flex gap-3">
+          <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"
+          >
+            👁️ View Demo 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"
+          >
+            ✏️ Edit Page
+          </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>
+      </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>
+      </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>
+      </div>
+    </div>
+
+  </div>
+</AdminLayout>

src/pages/admin/pages/new.astro

@@ -27,7 +27,7 @@ if (!siteId) {
 
     <div class="bg-slate-800 rounded-lg border border-slate-700 p-6">
       <PageEditor 
-        client:load 
+        client:only="react" 
         siteId={siteId}
         onSave={(page) => {
           window.location.href = `/admin/pages/${page.id}/edit`;

src/pages/admin/posts/new.astro

@@ -27,7 +27,7 @@ if (!siteId) {
 
     <div class="bg-slate-800 rounded-lg border border-slate-700 p-6">
       <PostEditor 
-        client:load 
+        client:only="react" 
         siteId={siteId}
         onSave={(post) => {
           window.location.href = `/admin/posts/${post.id}/edit`;