cloud-hosting-platform/site-builder
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: Site Builder with PHP API backend

Browse Source 
Visual drag-and-drop website builder using GrapesJS with:
- Multi-page editor with live preview
- File-based asset storage via PHP API (no localStorage base64)
- Template library, Docker support, and Playwright test suite

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Josh Knapp
2026-02-28 19:25:42 +00:00
commit a71b58c2c7
58 changed files with 14464 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
FEATURES.md Normal file
View File

@@ -0,0 +1,88 @@
# Site Builder Features (2026-02-22)
## 1. Anchor Points & Link System
- **Anchor Point block**: Drag-and-drop anchor points with configurable `id` attribute
- **Link Type Selector**: When selecting a link/button element, choose between:
- External URL (manual input)
- Page Link (dropdown of all pages)
- Anchor on Page (dropdown of all anchors on current page)
- Anchors automatically populate in the dropdown
## 2. Asset Manager
- **New "Assets" tab** in left panel
- **File upload**: Upload images, videos, PDFs via file picker (stored as data URLs in localStorage)
- **URL-based assets**: Add assets by pasting URLs
- **Asset grid**: Visual grid showing thumbnails for images, icons for other file types
- **Click to copy**: Click any asset to copy its URL to clipboard
- **Delete assets**: Remove with × button
- Assets are also registered in GrapesJS's built-in asset manager for image selection
## 3. Image Resize/Crop (PHP Backend)
- **API endpoint**: `api/image-resize.php`
- **Modes**: `resize`, `crop`, `fit`
- **Input**: File upload or URL
- **Parameters**: width, height, quality (1-100), format (jpg/png/webp/auto)
- **Output**: JSON with resized image path, dimensions, and file size
- Requires PHP with GD extension on the server
## 4. Video Element Fix
- **Video block** has properly registered `video-wrapper` component type
- **Video URL trait**: Enter YouTube, Vimeo, or direct video file URLs
- **Apply Video button**: Click to apply the video URL
- **Video Section (BG)**: Separate component type for video background sections
- Both component types (`video-wrapper` and `video-section`) are registered and functional
## 5. Element Deletion Improvement
- **"Delete Section" context menu option**: Right-click any element → "Delete Section"
- Walks up the component tree to find the topmost parent (before the wrapper)
- Deletes the entire section including all child components
- Confirmation dialog before deletion
## 6. Header/Site-wide Elements
- **New "Head" tab** in right panel
- **Page `<head>` Code**: Add scripts, meta tags, and other `<head>` elements
- **Site-wide CSS**: Add CSS that applies to all pages
- Both are saved to localStorage and included in exports
- Site-wide CSS is applied live to the canvas editor
## 7. PDF/File Display Element
- **"File / PDF" block** in Media category
- Uses `<iframe>` for embedding
- **File URL trait**: Enter URL of PDF or document
- **Height control**: Adjustable iframe height
- **Apply File button**: Click to load the file
- Google Docs Viewer fallback for non-PDF files
- Placeholder UI with instructions when no file is loaded
## 8. Missing Icons Fixed
- **Section block**: `fa fa-columns` icon
- **Newsletter block**: `fa fa-newspaper` icon
- **Spacer block**: `fa fa-arrows-alt-v` icon
- All using Font Awesome 5 compatible class names
## 9. Typography Advanced Settings
- **Font Family**: Dropdown with 11 font options (Inter, Roboto, Open Sans, Poppins, Montserrat, Playfair Display, Merriweather, Source Code Pro, Arial, Georgia, Times New Roman)
- **Font Weight**: Dropdown from Thin (100) to Black (900)
- **Letter Spacing**: Number input with px/em/rem units
- **Line Height**: Number input with px/em/%/unitless options
- **Text Align**: Radio buttons with icons (left, center, right, justify)
- All properties properly configured in GrapesJS StyleManager
## 10. Logo Element Improvement
- **Logo Mode trait**: Select between Text Only, Image Only, or Image + Text
- **Logo Text trait**: Set the text content
- **Logo Image URL trait**: Set an image URL for the logo
- **Apply Logo button**: Regenerates the logo component based on selected mode
- Text mode shows initial letter icon + text (original behavior)
- Image mode shows just the image
- Both mode shows image + text side by side
## Additional Improvements
- **Local vendor scripts**: GrapesJS and plugins now load from local `vendor/` directory (no CDN dependency)
- **Plugin compatibility fix**: Fixed `gjs-blocks-basic` global name mismatch
- **Context menu**: Added "Delete Section" alongside existing "Delete"
## Testing
- 17 Playwright tests covering all features
- Run: `npx playwright test tests/features.spec.js`
- All tests passing ✅