Josh Knapp
91a6b6f34b
Rebuilt the visual site builder from scratch using Craft.js, React 18, and TypeScript. The new editor renders directly in the DOM (no iframe), supports 40+ components, multi-page with shared header/footer, 16 templates, full-spectrum color/gradient controls, custom head code injection, save/publish workflow, and auto-save. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
76 lines
3.3 KiB
Markdown
76 lines
3.3 KiB
Markdown
# WHP Site Builder v2
|
|
|
|
A visual drag-and-drop website builder for WHP, rebuilt from the ground up with Craft.js, React 18, and TypeScript. Replaces the legacy GrapesJS-based editor.
|
|
|
|
## Quick Start
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
Opens at http://localhost:5173. The editor runs in standalone mode without WHP integration.
|
|
|
|
## Build and Deploy
|
|
|
|
```bash
|
|
# Build production bundle
|
|
npm run build
|
|
|
|
# Deploy to WHP
|
|
cp dist/index.html /docker/whp/web/site-builder/editor.html
|
|
cp -r dist/js/ /docker/whp/web/site-builder/js/
|
|
cp -r dist/css/ /docker/whp/web/site-builder/css/
|
|
```
|
|
|
|
The PHP wrapper (`index.php`) injects `WHP_CONFIG` (user session, CSRF token, site ID) into the HTML before serving.
|
|
|
|
## Architecture
|
|
|
|
- **Craft.js** - React-based visual editor framework (no iframe, direct DOM rendering)
|
|
- **Inline styles** - All user content uses React CSSProperties, no class-based CSS
|
|
- **Component pattern** - Each component is a self-contained file with: render logic, settings panel, Craft.js config, and HTML export method
|
|
- **3-panel layout** - Left (blocks/pages/layers/assets), Center (canvas with device preview), Right (styles/settings/head)
|
|
- **Dark theme** - CSS custom properties, Inter font, blue accent
|
|
|
|
## Components (22)
|
|
|
|
| Category | Components |
|
|
|----------|-----------|
|
|
| Layout | Container, Section, ColumnLayout (1-6 cols), BackgroundSection, HeaderZone, FooterZone |
|
|
| Basic | Heading (H1-H6), TextBlock, ButtonLink, Navbar, Footer, Divider, Spacer |
|
|
| Media | ImageBlock (upload/browse/drag-drop), VideoBlock (YouTube/Vimeo/direct/background) |
|
|
| Sections | HeroSimple, FeaturesGrid, CTASection |
|
|
| Forms | FormContainer, InputField, TextareaField, FormButton |
|
|
|
|
## Features
|
|
|
|
- **Visual Editor** - Drag-and-drop building, real-time preview, responsive device preview (Desktop/Tablet/Mobile)
|
|
- **Site Design Tokens** - 17 site-wide properties (colors, fonts, radii, nav style) with Basic/Advanced tabs
|
|
- **Multi-Page** - Unlimited pages with shared Header and Footer across all pages
|
|
- **16 Templates** - Pre-built designs across 4 categories (Business, Creative, Personal, Community)
|
|
- **Asset Management** - Upload, browse, drag-drop, thumbnails, server-side storage via WHP API
|
|
- **HTML Export** - Full document export with Google Fonts and inline styles
|
|
- **Auto-Save** - Saves every 30 seconds when connected to WHP
|
|
- **Context Menu** - Right-click for duplicate, copy, paste, move, delete
|
|
- **Keyboard Shortcuts** - Undo, redo, delete
|
|
- **Layers Panel** - Component hierarchy tree view
|
|
- **Undo/Redo** - Full history support
|
|
|
|
## Key Files
|
|
|
|
| File | Purpose |
|
|
|------|---------|
|
|
| `src/main.tsx` | Entry point, reads WHP_CONFIG |
|
|
| `src/App.tsx` | Editor + providers (EditorConfig, SiteDesign, Pages) |
|
|
| `src/components/resolver.ts` | Component registry (20 components) for serialization |
|
|
| `src/editor/EditorShell.tsx` | 3-panel layout + context menu + keyboard shortcuts |
|
|
| `src/editor/Canvas.tsx` | Craft.js Frame with device switching |
|
|
| `src/state/PageContext.tsx` | Multi-page state + header/footer |
|
|
| `src/state/SiteDesignContext.tsx` | 17 site-wide design tokens |
|
|
| `src/templates/definitions.ts` | 16 template definitions |
|
|
| `src/constants/presets.ts` | Color, font, spacing presets |
|
|
| `src/utils/html-export.ts` | Node-tree to HTML renderer |
|
|
|
|
See `CLAUDE.md` for full documentation. See `FEATURES.md` for a complete feature list.
|