thrillwiki_laravel/memory-bank/design/BaseLayout.md

Base Layout Implementation

Overview

The base layout has been migrated from Django to Laravel while maintaining design parity and functionality. The implementation uses Laravel's Blade templating system and leverages Laravel's built-in features.

Key Components

Static Assets Organization

• Images placed in public/images/
• JavaScript modules in resources/js/modules/
• CSS files in resources/css/
• Using Laravel Vite for asset compilation

Layout Structure

Location: resources/views/layouts/app.blade.php

Key Changes from Django Implementation

1. Template Syntax Adaptations:

   • {% extends %} → @extends()
   • {% block %} → @section()/@yield()
   • {% static %} → @vite()
   • {% csrf_token %} → @csrf
   • {% if %} → @if/@auth/@guest

2. Authentication Handling:

   • Using Laravel's built-in auth system
   • Adapted Django user checks to Laravel guards/middleware
   • Modified permission checks using Laravel's Gate/Policy system

3. Asset Management:

   • Moved from Django's static files to Laravel's Vite
   • CSS and JS now bundled through Vite
   • Custom scripts moved to resources directory for compilation

4. Features Maintained:

   • Dark mode support with system preference detection
   • Responsive navigation with mobile menu
   • User authentication UI
   • Search functionality
   • Flash messages

Required Routes

The following routes need to be defined to support the layout:

- home
- parks.index
- rides.index
- search
- moderation.dashboard
- profile.show
- settings
- admin.index
- login
- register
- terms
- privacy

Component Styling

• Maintained Tailwind CSS classes from Django implementation
• Custom styles for dropdowns and HTMX functionality preserved
• Dark mode classes mapped directly from Django

JavaScript Dependencies

1. Core Libraries:

   • Alpine.js (via Vite)
   • HTMX (via CDN)
   • Font Awesome (via CDN)

2. Custom Modules (migrated to resources/js/modules):

   • alerts.js
   • location-autocomplete.js
   • main.js
   • park-map.js
   • photo-gallery.js
   • search.js

Next Steps

1. Components Migration:

   • Convert remaining Django templates to Blade components
   • Create Livewire components for interactive features

2. JavaScript Integration:

   • Set up Vite configuration for module bundling
   • Integrate modules with Laravel's asset pipeline
   • Test JavaScript functionality

3. Styling:

   • Configure Tailwind for Laravel
   • Verify dark mode functionality
   • Test responsive design

4. Authentication:

   • Implement Laravel auth routes
   • Set up user permissions
   • Test authentication flow

5. Testing:

   • Verify all interactive features
   • Test responsive design
   • Ensure dark mode works correctly
   • Validate authentication flows

Technical Notes

Performance Considerations

1. Asset Loading:

   • Critical CSS inlined in head
   • Non-critical assets deferred
   • JavaScript modules loaded asynchronously

2. Optimization:

   • Images placed in public directory for direct serving
   • CSS/JS bundled and minified via Vite
   • Caching headers maintained

Browser Compatibility

• Maintains support for modern browsers
• Dark mode detection uses modern APIs
• Fallbacks in place for older browsers

Security

• CSRF protection implemented
• XSS prevention through Laravel's security features
• Content Security Policy considerations documented