Add modular component system to improve frontend development

Integrates Django Cotton to the project, enabling a modular component system for HTMX frontend components. Updates dependencies, settings, and templates to support Cotton's syntax and functionality, ensuring compatibility with existing Alpine.js integrations.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: eff39de1-3afa-446d-a965-acaf61837fc7
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/eff39de1-3afa-446d-a965-acaf61837fc7/jGCMVeA
This commit is contained in:
pac7
2025-09-21 13:17:28 +00:00
committed by pacnpal
parent 7d745cd517
commit a077bf236b

View File

@@ -21,6 +21,7 @@ ThrillWiki is a comprehensive Django-based web application for theme park and ri
- **Database**: PostgreSQL (DATABASE_URL environment variable)
- **Server**: Django development server on 0.0.0.0:5000
- **Spatial Libraries**: GDAL and GEOS configured with correct Nix store paths
- **Component System**: Django Cotton for modular HTMX frontend components
- **Settings**: Local development configuration active
#### Database Configuration
@@ -35,6 +36,7 @@ Migrations: All applied successfully (including circular dependency resolution)
- GeoDjango with PostGIS support
- Django REST Framework
- Django Allauth (authentication)
- Django Cotton (component system)
- CloudflareImages Toolkit
- Django PGHistory
- Pillow (image processing)
@@ -65,6 +67,15 @@ Migrations: All applied successfully (including circular dependency resolution)
### Recent Setup Work (September 2025)
#### Django Cotton Component System Integration
1. **Package Installation**: Added django-cotton>=2.1.3 to dependencies via UV package manager
2. **Configuration**: Integrated Cotton into Django settings via THIRD_PARTY_APPS
3. **Component Migration**: Converted existing auth modal and toast components to Cotton format
4. **Template Updates**: Updated base.html to use Cotton syntax (`<c-auth.modal />` and `<c-ui.toast />`)
5. **Alpine.js Compatibility**: Ensured all existing Alpine.js functionality preserved with Cotton components
6. **Result**: Modular component system with customizable styling via c-vars, maintaining HTMX/Alpine.js integration
#### Database Migration Strategy
1. **Initial Issue**: Circular dependency between `accounts.0001_initial` and `django_cloudflareimages_toolkit.0001_initial`
2. **Solution**: Split migrations into stages: