cloud-hosting-platform/site-builder
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
site-builder/FEATURES.md
Josh Knapp a71b58c2c7 Initial commit: Site Builder with PHP API backend 
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>
2026-02-28 19:25:42 +00:00

4.1 KiB
Raw Permalink Blame History

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 ✅
Reference in New Issue View Git Blame Copy Permalink