mirror of
https://github.com/pacnpal/thrillwiki_laravel.git
synced 2025-12-20 05:51:09 -05:00
127 lines
3.4 KiB
Markdown
127 lines
3.4 KiB
Markdown
# 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:
|
|
```php
|
|
- 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 |