# New Unified Templating Approach

## Overview

We've implemented a new, cleaner approach to page building and templating that separates concerns and makes the system much more intuitive for users.

## Key Changes

### 1. Theme Structure (Fixed)
- **Header**: Configurable through website settings (logo, menu) or custom built with GrapesJS
- **Footer**: Configurable through website settings (description, menu) or custom built with GrapesJS  
- **Content Area**: Where all page content goes - fully editable with GrapesJS

### 2. Content Management (Dynamic)
- All page content is stored as JSON in the database
- Users edit content using GrapesJS visual builder
- Content is rendered through the theme's layout structure
- No more confusion between theme files and user content

## How It Works

### Theme Layout (`resources/views/themes/default/layout.blade.php`)
```php
<!-- Header -->
@if($headerSection && $headerSection->is_custom)
    {!! $headerSection->getRenderedContent() !!}  {{-- Custom GrapesJS header --}}
@elseif($customHeader)
    {!! $customHeader !!}  {{-- Custom HTML from settings --}}
@else
    {{-- Default header with configurable logo/menu --}}
@endif

<!-- Main Content Area -->
<main>
    @yield('content')  {{-- This is where page content goes --}}
</main>

<!-- Footer -->
@if($footerSection && $footerSection->is_custom)
    {!! $footerSection->getRenderedContent() !!}  {{-- Custom GrapesJS footer --}}
@elseif($customFooter)
    {!! $customFooter !!}  {{-- Custom HTML from settings --}}
@else
    {{-- Default footer with configurable menu --}}
@endif
```

### Page Templates (Simplified)
```php
{{-- resources/views/themes/default/page.blade.php --}}
@extends('themes.default.layout')
@section('content')
    {!! $page->getRenderedContent() !!}  {{-- All content from database JSON --}}
@endsection
```

### Content Storage
- **`grapesjs_data`**: Full GrapesJS project data (JSON)
- **`grapesjs_html`**: Rendered HTML content
- **`grapesjs_css`**: Page-specific CSS
- **`is_builder_page`**: Flag indicating this is a GrapesJS page

## User Workflow

### 1. Website Setup
1. Choose a theme (provides layout structure)
2. Configure basic settings (logo, colors, fonts)
3. Set up menus for header/footer

### 2. Header/Footer Customization (Optional)
- **Option A**: Use default header/footer with configurable logo and menus
- **Option B**: Build custom header/footer using GrapesJS global sections
- **Option C**: Add custom HTML through website settings

### 3. Page Content Creation
1. Create new page
2. Edit with GrapesJS visual builder
3. Content is saved as JSON in database
4. Page renders using theme layout + user content

## Benefits

### For Users
- **Clear Separation**: Theme structure vs. content is obvious
- **No Confusion**: All content editing happens in one place (GrapesJS)
- **Flexibility**: Can customize header/footer or use defaults
- **Consistency**: All pages use the same theme structure

### For Developers
- **Maintainable**: Clear separation of concerns
- **Extensible**: Easy to add new themes
- **Scalable**: Content is stored efficiently as JSON
- **Testable**: Each component can be tested independently

## Technical Implementation

### Page Model (`app/Models/Page.php`)
```php
public function getRenderedContent()
{
    // Priority: GrapesJS HTML > Builder Data > Regular Content
    $content = $this->grapesjs_html;
    
    if ($content) {
        // Replace menu placeholders with Blade includes
        $content = str_replace([
            '[[menu-location:header]]',
            '[[menu-location:footer]]',
        ], [
            "@include('components.menu-location', ['website' => \$website, 'location' => 'header'])",
            "@include('components.menu-location', ['website' => \$website, 'location' => 'footer'])",
        ], $content);
        
        // Render as Blade so includes are executed
        return \Illuminate\Support\Facades\Blade::render($content, ['website' => $this->website]);
    }
    
    // Fallbacks for legacy content
    return $this->content ?: '';
}
```

### Public Controller (`app/Http/Controllers/PublicController.php`)
```php
private function renderPage(Website $website, Page $page, $isPreview = false)
{
    // NEW UNIFIED APPROACH: All pages use the theme layout
    // The content area is where the GrapesJS content goes
    if ($page->is_home) {
        return view('themes.' . $website->theme . '.home', compact('website', 'page', 'menus', 'isPreview'));
    } else {
        return view('themes.' . $website->theme . '.page', compact('website', 'page', 'menus', 'isPreview'));
    }
}
```

### Default Pages
When a new website is created, default pages are automatically generated with JSON content:

- **Home Page**: Hero section + features grid
- **About Page**: Company story + image

Users can immediately edit these pages with GrapesJS.

## Migration Path

### Existing Websites
- Existing pages continue to work (backward compatibility)
- Users can gradually migrate to the new approach
- No data loss during transition

### New Websites
- Automatically use the new approach
- Default pages created with JSON content
- Ready for immediate editing with GrapesJS

## Configuration Options

### Website Settings
```php
// Logo
$website->setSetting('logo_url', '/path/to/logo.png');

// Footer
$website->setSetting('footer_description', 'Custom footer text');

// Custom Header/Footer HTML
$website->setSetting('custom_header', '<nav>...</nav>');
$website->setSetting('custom_footer', '<footer>...</footer>');

// Theme Settings
$website->setSetting('theme_settings.primary_color', '#2563eb');
$website->setSetting('theme_settings.heading_font', "'Playfair Display', serif");
```

### Global Sections
- **Header**: Custom header built with GrapesJS
- **Footer**: Custom footer built with GrapesJS
- **Other**: Reusable sections for multiple pages

## Future Enhancements

### Planned Features
1. **Template Library**: Pre-built page templates as JSON
2. **Component Library**: Reusable components for GrapesJS
3. **Theme Marketplace**: Third-party themes
4. **Advanced Customization**: More theme settings options

### Technical Improvements
1. **Performance**: Cache rendered content
2. **SEO**: Better meta tag management
3. **Analytics**: Track page builder usage
4. **Collaboration**: Multi-user editing

## Conclusion

This new approach eliminates the confusion between theme structure and user content, making the system much more intuitive and maintainable. Users now have a clear understanding of what they can customize and how to do it, while developers have a clean, extensible architecture to build upon.