firefrost-gaming/firefrost-operations-manual
3
0
Fork 0
Code Issues 146 Pull Requests Packages Projects Releases Wiki Activity
Files
3976b02bf65636836edd5c210bca0734784d3afd
firefrost-operations-manual/tools/ghost-page-builder/README.md
Claude 68b8e51a72 feat: Holly's Arcane colors + Ghost Page Builder with Trinity 
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>
2026-03-21 21:45:04 +00:00

4.6 KiB
Raw Blame History

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