68b8e51a72
Complete integration of Holly/The Catalyst into brand identity: DESIGN BIBLE UPDATED (v2.0): - Added Holly's Arcane palette (purple family) - Primary: #A855F7 (vibrant purple) - Secondary: #9D4EDD (bright violet) - Accent: #C77DFF (light amethyst) - Dark: #7F00FF (deep purple) - Updated core philosophy: Fire + Frost + Foundation - Added Trinity gradients (Fire+Frost+Arcane combinations) - Updated brand identity to reflect The Trinity - Replaced outdated color palettes with current system HOLLY'S COLOR PALETTE DEFINED: - Arcane Primary: #A855F7 (main branding) - Arcane Secondary: #9D4EDD (highlights) - Arcane Accent: #C77DFF (soft touches) - Arcane Dark: #7F00FF (text/borders) - Arcane Gradient: linear-gradient(135deg, #A855F7 0%, #C77DFF 100%) - Arcane Storm: linear-gradient(135deg, #7F00FF 0%, #A855F7 50%, #C77DFF 100%) GHOST PAGE BUILDER ENHANCED: - Added complete Arcane color system to CSS - New Trinity Gradient: Fire+Arcane+Frost (3-element gradient) - Updated templates to showcase all three elements: - Trinity Layout (3 columns: Fire/Arcane/Frost) - Trinity Card Grid (showcasing all three founders) - Added Arcane utility classes (.arcane-text, .arcane-gradient, .arcane-border) - Updated header gradient to include purple (Fire→Arcane→Frost) - Updated footer color reference to show all trinity colors - Tool now in git: tools/ghost-page-builder/ THE TRINITY NOW COMPLETE: - 🔥 Fire (Meg/Orange): Passion, community, warmth - ⚡ Arcane (Holly/Purple): Creative transformation, building, foundation - ❄️ Frost (Michael/Teal): Precision, technical excellence, strategy FILES MODIFIED: - docs/planning/design-bible.md (v1.2 → v2.0) - Updated philosophy, color palettes, brand identity - Added comprehensive Trinity color system - Documented all gradients and usage patterns FILES CREATED: - tools/ghost-page-builder/ghost-page-builder.jsx (350+ lines) - React artifact with complete Trinity CSS - Sample templates showcasing all three elements - Color reference footer with hex codes - tools/ghost-page-builder/README.md - Complete usage documentation - Trinity CSS class reference - Technical specifications ACCESSIBILITY: - All color combinations maintain WCAG contrast ratios - Trinity gradient provides smooth visual transitions - Each element color distinct and recognizable NEXT STEPS: 1. Test Ghost Page Builder with new Trinity templates 2. Use Trinity colors across all Ghost pages 3. Update social media graphics with Trinity branding 4. Holly's build showcases use Arcane colors Signed-off-by: Chronicler #39 <claude@firefrostgaming.com>
160 lines
4.6 KiB
Markdown
160 lines
4.6 KiB
Markdown
# 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** 💙🔥❄️
|