# Ghost Page Builder Tool

**Created:** March 22, 2026  
**Version:** 1.0  
**Author:** Chronicler #39  
**Task:** #70

---

## Overview

Interactive React tool for previewing Ghost CMS page HTML with Fire/Frost CSS before publishing. Eliminates the edit-paste-preview-repeat cycle.

## Features

- **Live HTML Editor** with syntax highlighting
- **Real-time Preview** with Fire/Frost CSS applied
- **Viewport Toggle** (Desktop 1200px / Tablet 768px / Mobile 375px)
- **Sample Templates** (Blank, Simple, Two Column, Card Grid)
- **Auto-save** to localStorage
- **Copy to Clipboard** for easy Ghost Admin pasting
- **Tab Key Support** (inserts 2 spaces, maintains cursor position)

## Usage

### Quick Start

1. Open `ghost-page-builder.jsx` in Claude (upload to chat)
2. Claude will render it as an interactive artifact
3. Start typing HTML in the left pane
4. See live preview in the right pane
5. Toggle viewport to test mobile/tablet
6. Click "Copy HTML" when satisfied
7. Paste into Ghost Admin → Publish

### Sample Workflow

**Creating an "About" page:**
1. Load "Simple Page" template
2. Edit title: `<h1>About Firefrost Gaming</h1>`
3. Add content paragraphs
4. Toggle to Mobile view to check responsive layout
5. Click "Copy HTML"
6. Open Ghost Admin → Pages → New Page
7. Paste HTML into HTML card
8. Publish

### Fire/Frost/Arcane CSS Classes

The tool includes the complete Trinity color system:

**Fire Colors (Meg/The Emissary):**
- `.fire-text` - Fire orange text (#FF6B35)
- `.fire-gradient` - Fire gradient background
- `.fire-border` - Fire orange border

**Arcane Colors (Holly/The Catalyst):**
- `.arcane-text` - Arcane purple text (#A855F7)
- `.arcane-gradient` - Arcane gradient background
- `.arcane-border` - Arcane purple border

**Frost Colors (Michael/The Wizard):**
- `.frost-text` - Frost teal text (#4ECDC4)
- `.frost-gradient` - Frost gradient background
- `.frost-border` - Frost teal border

**Trinity Gradients:**
- `.fire-frost-gradient` - Classic Fire+Frost
- `.trinity-gradient` - Fire+Arcane+Frost (full trinity)
- `.arcane-storm-gradient` - Holly's signature gradient

**Example:**
```html
<h2 class="fire-text">🔥 Fire Section</h2>
<p>Community-focused content...</p>

<h2 class="arcane-text">⚡ Arcane Section</h2>
<p>Creative, building content...</p>

<h2 class="frost-text">❄️ Frost Section</h2>
<p>Technical content...</p>
```

## Technical Details

**Architecture:**
- React artifact (single `.jsx` file)
- Split-pane layout (editor + preview)
- Iframe with `srcdoc` for isolated preview
- Two-state pattern (instant input + 500ms debounced preview)
- LocalStorage persistence

**CSS Injection Order:**
1. Ghost Theme CSS (Source v1.5.2) - via CDN
2. Fire/Frost Custom CSS - embedded

**Ghost Compatibility:**
- Uses `.gh-body` and `.gh-content` wrapper classes
- Matches Ghost typography and spacing
- Supports Ghost embed cards (Twitter, YouTube, etc.)

**Sandbox Flags:**
- `allow-same-origin` - Required for CSS loading
- `allow-scripts` - Required for Ghost embed cards

## Architecture Consultation

This tool was built following architectural guidance from Gemini AI. See full consultation documentation:

**File:** `docs/tasks/ghost-page-builder/gemini-consultation.md`

**Key decisions:**
- Use iframe `srcdoc` (not direct document manipulation)
- Skip CodeMirror for V1 (use styled textarea)
- Viewport via container resizing (not CSS scale)
- Tab key intercept with React state timing fix

## Troubleshooting

### Preview doesn't update
- Check browser console for errors
- Ensure you're using a modern browser (Chrome, Firefox, Edge)
- Try refreshing the page

### Tab key moves focus instead of inserting spaces
- This is a browser issue - the handler should intercept
- Report as bug if persistent

### Copy button doesn't work
- Browser may block clipboard access
- Grant clipboard permissions when prompted
- Try manually selecting and copying

### Preview doesn't match Ghost
- Ensure Ghost wrapper classes are present (`.gh-content`)
- Check that Fire/Frost CSS is loading
- Verify Ghost theme CSS CDN link is accessible

## Files

- `ghost-page-builder.jsx` - Main React artifact (350+ lines)
- `README.md` - This file
- `../docs/tasks/ghost-page-builder/gemini-consultation.md` - Architecture consultation

## Related Tasks

- **Task #70:** Ghost Page Builder Tool (this tool)
- **Task #69:** Ghost Website Core Pages (uses this tool)
- **Task #52:** Ghost Homepage Content (uses this tool)

## Version History

| Version | Date | Changes |
|---------|------|---------|
| 1.0 | 2026-03-22 | Initial release following Gemini consultation |

---

**Fire + Frost + Foundation = Where Love Builds Legacy** 💙🔥❄️