docs: add preview links implementation guide

2025-12-14 10:38:03 -05:00
parent df8dd18a43
commit 8a85a3d94a
1 changed files with 215 additions and 0 deletions
--- a/PREVIEW_LINKS_GUIDE.md
+++ b/PREVIEW_LINKS_GUIDE.md
@@ -0,0 +1,215 @@
+# Preview Links - Implementation Summary
+
+## ✅ Preview Routes Available
+
+The Spark Platform has complete preview functionality for all content types:
+
+### 1. **Article Preview**
+- **Route:** `/preview/article/[articleId]`
+- **File:** `frontend/src/pages/preview/article/[articleId].astro`
+- **Features:**
+  - Full article rendering with HTML content
+  - Metadata display (word count, SEO score, generation hash)
+  - Preview banner with status
+  - Back to articles link
+  - Edit in Directus link
+
+### 2. **Page Preview**
+- **Route:** `/preview/page/[pageId]`
+- **File:** `frontend/src/pages/preview/page/[pageId].astro`
+- **Features:**
+  - Block-based content rendering
+  - Fallback to HTML content
+  - Preview mode banner
+  - Close preview button
+
+### 3. **Post Preview**
+- **Route:** `/preview/post/[postId]`
+- **File:** `frontend/src/pages/preview/post/[postId].astro`
+- **Features:**
+  - Article content with meta description
+  - Published/Draft status badge
+  - Copy preview link button
+  - Close preview button
+
+### 4. **Site Preview** (NEW!)
+- **Route:** `/preview/site/[siteId]`
+- **File:** `frontend/src/pages/preview/site/[siteId].astro`
+- **Features:**
+  - Shows all pages for a site
+  - Site metadata (domain, page count, created date)
+  - Grid of page cards
+  - Click any page to preview it
+  - Empty state for sites with no pages
+
+---
+
+## 🔘 Preview Buttons Added
+
+### Sites Manager
+**File:** `frontend/src/components/admin/sites/SitesManager.tsx`
+
+**Added:**
+- 👁️ **Preview button** on each site card
+- Opens `/preview/site/[siteId]` in new tab
+- Purple-themed button to stand out
+- Located next to "Manage Content" button
+
+**Usage:**
+```tsx
+<Button 
+  variant="outline" 
+  size="sm" 
+  className="bg-purple-900/30 border-purple-700 hover:bg-purple-800/40 text-purple-300" 
+  onClick={() => window.open(`/preview/site/${site.id}`, '_blank')}
+>
+  👁️ Preview
+</Button>
+```
+
+### Other Components with Preview
+**Kanban Board** (`KanbanBoard.tsx`):
+- Preview button for generated articles
+- Opens `/preview/article/[id]`
+
+---
+
+## 📋 Preview Links by Content Type
+
+| Content Type | Preview URL | Access From |
+|--------------|-------------|-------------|
+| **Sites** | `/preview/site/[siteId]` | Sites Manager → Preview button |
+| **Pages** | `/preview/page/[pageId]` | Site preview → Click page card |
+| **Posts** | `/preview/post/[postId]` | Posts manager (to be added) |
+| **Articles** | `/preview/article/[articleId]` | Kanban Board → Preview button |
+
+---
+
+## 🎨 Preview Page Features
+
+### Common Features (All Previews)
+- ✅ Preview mode banner at top
+- ✅ Status badge (Draft/Published/Active)
+- ✅ Close preview button
+- ✅ Responsive design
+- ✅ Clean, readable styling
+
+### Site Preview Specific
+- ✅ Site metadata display
+- ✅ Grid of all pages
+- ✅ Click-through to page previews
+- ✅ Empty state for no pages
+- ✅ Page status indicators
+- ✅ Permalink display
+
+### Article Preview Specific
+- ✅ Full metadata grid
+- ✅ Word count
+- ✅ SEO score
+- ✅ Generation hash
+- ✅ Template info
+- ✅ Location targeting data
+
+---
+
+## 🔗 How to Use Preview Links
+
+### From Sites Manager:
+1. Go to `/admin/sites`
+2. Find your site card
+3. Click **👁️ Preview** button
+4. Opens site preview in new tab
+5. Click any page card to preview that page
+
+### From Kanban Board:
+1. Go to `/admin/content-factory`
+2. Find an article card
+3. Click preview icon
+4. Opens article preview in new tab
+
+### Direct URL Access:
+```
+https://launch.jumpstartscaling.com/preview/site/[site-id]
+https://launch.jumpstartscaling.com/preview/page/[page-id]
+https://launch.jumpstartscaling.com/preview/post/[post-id]
+https://launch.jumpstartscaling.com/preview/article/[article-id]
+```
+
+---
+
+## 🚀 Next Steps
+
+### To Add Preview Buttons to Other Managers:
+
+**Posts Manager:**
+```tsx
+<Button onClick={() => window.open(`/preview/post/${post.id}`, '_blank')}>
+  👁️ Preview
+</Button>
+```
+
+**Pages Manager:**
+```tsx
+<Button onClick={() => window.open(`/preview/page/${page.id}`, '_blank')}>
+  👁️ Preview
+</Button>
+```
+
+**Articles Manager:**
+```tsx
+<Button onClick={() => window.open(`/preview/article/${article.id}`, '_blank')}>
+  👁️ Preview
+</Button>
+```
+
+---
+
+## 📊 Implementation Status
+
+| Component | Preview Route | Preview Button | Status |
+|-----------|---------------|----------------|--------|
+| Sites | ✅ `/preview/site/[id]` | ✅ Added | Complete |
+| Pages | ✅ `/preview/page/[id]` | ⏳ To add | Route ready |
+| Posts | ✅ `/preview/post/[id]` | ⏳ To add | Route ready |
+| Articles | ✅ `/preview/article/[id]` | ✅ In Kanban | Complete |
+
+---
+
+## 🎯 Example Preview URLs
+
+**Site Preview:**
+```
+/preview/site/e7c12533-0fb1-4ae1-8b26-b971988a8e84
+```
+
+**Page Preview:**
+```
+/preview/page/abc123-page-id
+```
+
+**Article Preview:**
+```
+/preview/article/xyz789-article-id
+```
+
+---
+
+## 📝 Code Changes
+
+**Files Modified:**
+- `frontend/src/components/admin/sites/SitesManager.tsx` - Added preview button
+
+**Files Created:**
+- `frontend/src/pages/preview/site/[siteId].astro` - Site preview page
+
+**Existing Preview Routes:**
+- `frontend/src/pages/preview/article/[articleId].astro` ✅
+- `frontend/src/pages/preview/page/[pageId].astro` ✅
+- `frontend/src/pages/preview/post/[postId].astro` ✅
+
+---
+
+**Commit:** `df8dd18` - feat: add preview button to sites and create site preview page  
+**Status:** ✅ **COMPLETE**
+
+🎉 **All preview functionality is now available and accessible from the Sites Manager!**