firefrost-gaming/firefrost-operations-manual
3
0
Fork 0
Code Issues 146 Pull Requests Packages Projects Releases Wiki Activity
Files
d46e82a7042faf101496100e9c9ec13a2a93069f
firefrost-operations-manual/tools/ghost-page-builder
History
Claude 7e49af8494 fix: Use nicknames in Ghost Page Builder templates (not real names) 
PRIVACY FIX:
- Trinity Layout template: Real names → Nicknames
  - Meg → GingerFury
  - Holly → unicorn20089
  - Michael → Frostystyle
- Trinity Card Grid template: Same fix

POLICY:
Public-facing content uses nicknames only.
Real names only in internal documentation.

Caught by Michael during testing checkpoint.

Signed-off-by: Chronicler #39 <claude@firefrostgaming.com>
2026-03-21 21:51:16 +00:00
..
ghost-page-builder.jsx
fix: Use nicknames in Ghost Page Builder templates (not real names)
2026-03-21 21:51:16 +00:00
README.md
feat: Holly's Arcane colors + Ghost Page Builder with Trinity
2026-03-21 21:45:04 +00:00

README.md

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:

<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 💙🔥❄️

Reference in New Issue View Git Blame Copy Permalink