cleanup thorough
This commit is contained in:
IGNY8 VPS (Salman)
@@ -1,254 +0,0 @@
|
|||||||
# CRITICAL BUG FIXES - December 9, 2025
|
|
||||||
|
|
||||||
## Issue #1: User Swapping / Random Logout
|
|
||||||
|
|
||||||
### ROOT CAUSE
|
|
||||||
Django's database-backed session storage combined with in-memory user object caching at the process level caused cross-request contamination. When multiple requests were handled by the same worker process, user objects would leak between sessions.
|
|
||||||
|
|
||||||
### THE PROBLEM
|
|
||||||
1. **Database-Backed Sessions**: Django defaulted to storing sessions in the database, which allowed slow queries and race conditions
|
|
||||||
2. **In-Memory User Caching**: `django.contrib.auth.backends.ModelBackend` cached user objects in thread-local storage
|
|
||||||
3. **Middleware Mutation**: `AccountContextMiddleware` was querying DB again and potentially mutating request.user
|
|
||||||
4. **No Session Integrity Checks**: Sessions didn't verify that user_id/account_id remained consistent
|
|
||||||
|
|
||||||
### THE FIX
|
|
||||||
|
|
||||||
#### 1. Redis-Backed Sessions (`settings.py`)
|
|
||||||
```python
|
|
||||||
SESSION_ENGINE = 'django.contrib.sessions.backends.cache'
|
|
||||||
SESSION_CACHE_ALIAS = 'default'
|
|
||||||
|
|
||||||
CACHES = {
|
|
||||||
'default': {
|
|
||||||
'BACKEND': 'django.core.cache.backends.redis.RedisCache',
|
|
||||||
'LOCATION': 'redis://redis:6379/1',
|
|
||||||
'OPTIONS': {
|
|
||||||
'KEY_PREFIX': 'igny8', # Prevent key collisions
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Why**: Redis provides isolated, fast session storage that doesn't allow cross-process contamination like database sessions do.
|
|
||||||
|
|
||||||
#### 2. Custom Authentication Backend (`auth/backends.py`)
|
|
||||||
```python
|
|
||||||
class NoCacheModelBackend(ModelBackend):
|
|
||||||
def get_user(self, user_id):
|
|
||||||
# ALWAYS query DB fresh - no caching
|
|
||||||
return UserModel.objects.select_related('account', 'account__plan').get(pk=user_id)
|
|
||||||
```
|
|
||||||
|
|
||||||
**Why**: Disables Django's default user object caching that caused cross-request user leakage.
|
|
||||||
|
|
||||||
#### 3. Session Integrity Validation (`auth/middleware.py`)
|
|
||||||
```python
|
|
||||||
# Store account_id and user_id in session
|
|
||||||
request.session['_account_id'] = request.account.id
|
|
||||||
request.session['_user_id'] = request.user.id
|
|
||||||
|
|
||||||
# Verify on every request
|
|
||||||
stored_account_id = request.session.get('_account_id')
|
|
||||||
if stored_account_id and stored_account_id != request.account.id:
|
|
||||||
# Session contamination detected!
|
|
||||||
logout(request)
|
|
||||||
return JsonResponse({'error': 'Session integrity violation'}, status=401)
|
|
||||||
```
|
|
||||||
|
|
||||||
**Why**: Detects and prevents session contamination by verifying user/account IDs match on every request.
|
|
||||||
|
|
||||||
#### 4. Never Mutate request.user (`auth/middleware.py`)
|
|
||||||
```python
|
|
||||||
# WRONG (old code):
|
|
||||||
user = User.objects.select_related('account').get(id=user_id)
|
|
||||||
request.user = user # CAUSES CONTAMINATION
|
|
||||||
|
|
||||||
# CORRECT (new code):
|
|
||||||
# Just use request.user as-is from Django's AuthenticationMiddleware
|
|
||||||
request.account = getattr(request.user, 'account', None)
|
|
||||||
```
|
|
||||||
|
|
||||||
**Why**: Mutating request.user after Django's AuthenticationMiddleware set it causes the cached object to contaminate other requests.
|
|
||||||
|
|
||||||
### Files Modified
|
|
||||||
- `backend/igny8_core/settings.py` - Added Redis sessions and cache config
|
|
||||||
- `backend/igny8_core/auth/backends.py` - Created custom no-cache backend
|
|
||||||
- `backend/igny8_core/auth/middleware.py` - Added session integrity checks
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Issue #2: useNavigate / useLocation Errors During Development
|
|
||||||
|
|
||||||
### ROOT CAUSE
|
|
||||||
React Router context was lost during Hot Module Replacement (HMR) because every lazy-loaded route had its own Suspense boundary with `fallback={null}`. When Vite performed HMR on modules, the Suspense boundaries would re-render but lose the Router context from `<BrowserRouter>` in `main.tsx`.
|
|
||||||
|
|
||||||
### THE PROBLEM
|
|
||||||
1. **Individual Suspense Boundaries**: Every route had `<Suspense fallback={null}><Component /></Suspense>`
|
|
||||||
2. **HMR Context Loss**: When Vite replaced modules, Suspense boundaries would re-mount but Router context wouldn't propagate
|
|
||||||
3. **Only Affected Active Modules**: Planner, Writer, Sites, Automation were being actively developed, so HMR triggered more frequently
|
|
||||||
4. **Rebuild Fixed It Temporarily**: Full rebuild re-established all contexts, but next code change broke it again
|
|
||||||
|
|
||||||
### THE FIX
|
|
||||||
|
|
||||||
#### Single Top-Level Suspense Boundary (`App.tsx`)
|
|
||||||
```tsx
|
|
||||||
// BEFORE (WRONG):
|
|
||||||
<Routes>
|
|
||||||
<Route path="/planner/keywords" element={
|
|
||||||
<Suspense fallback={null}>
|
|
||||||
<Keywords />
|
|
||||||
</Suspense>
|
|
||||||
} />
|
|
||||||
<Route path="/writer/tasks" element={
|
|
||||||
<Suspense fallback={null}>
|
|
||||||
<Tasks />
|
|
||||||
</Suspense>
|
|
||||||
} />
|
|
||||||
{/* 100+ more routes with individual Suspense... */}
|
|
||||||
</Routes>
|
|
||||||
|
|
||||||
// AFTER (CORRECT):
|
|
||||||
<Suspense fallback={<div>Loading...</div>}>
|
|
||||||
<Routes>
|
|
||||||
<Route path="/planner/keywords" element={<Keywords />} />
|
|
||||||
<Route path="/writer/tasks" element={<Tasks />} />
|
|
||||||
{/* All routes without individual Suspense */}
|
|
||||||
</Routes>
|
|
||||||
</Suspense>
|
|
||||||
```
|
|
||||||
|
|
||||||
**Why**: A single Suspense boundary around the entire Routes component ensures Router context persists through HMR. When individual lazy components update, they suspend to the top-level boundary without losing Router context.
|
|
||||||
|
|
||||||
### Files Modified
|
|
||||||
- `frontend/src/App.tsx` - Moved Suspense to wrap entire Routes component, removed 100+ individual Suspense wrappers
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Why These Fixes Are Permanent
|
|
||||||
|
|
||||||
### Issue #1: User Swapping
|
|
||||||
- **Architectural**: Moved from database to Redis sessions (industry standard)
|
|
||||||
- **Eliminates Root Cause**: Disabled user caching that caused contamination
|
|
||||||
- **Verifiable**: Session integrity checks will detect any future contamination attempts
|
|
||||||
- **No Workarounds Needed**: All previous band-aid fixes (cache clearing, session deletion) can be removed
|
|
||||||
|
|
||||||
### Issue #2: Router Errors
|
|
||||||
- **Follows React Best Practices**: Single Suspense boundary for code-splitting is React's recommended pattern
|
|
||||||
- **HMR-Proof**: Router context now persists through hot reloads
|
|
||||||
- **Cleaner Code**: Removed 200+ lines of repetitive Suspense wrappers
|
|
||||||
- **Future-Proof**: Any new lazy-loaded routes automatically work without Suspense wrappers
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Testing Validation
|
|
||||||
|
|
||||||
### User Swapping Fix
|
|
||||||
```bash
|
|
||||||
# Test 1: Login with multiple users in different tabs
|
|
||||||
# Expected: Each tab maintains its own session without contamination
|
|
||||||
|
|
||||||
# Test 2: Rapid user switching
|
|
||||||
# Expected: Session integrity checks prevent contamination
|
|
||||||
|
|
||||||
# Test 3: High concurrency load test
|
|
||||||
# Expected: No user swapping under load
|
|
||||||
```
|
|
||||||
|
|
||||||
### Router Fix
|
|
||||||
```bash
|
|
||||||
# Test 1: Make code changes to Writer module while on /writer/tasks
|
|
||||||
# Expected: Page hot-reloads without useNavigate errors
|
|
||||||
|
|
||||||
# Test 2: Navigate between Planner → Writer → Sites during active development
|
|
||||||
# Expected: No Router context errors
|
|
||||||
|
|
||||||
# Test 3: Full rebuild no longer required
|
|
||||||
# Expected: HMR works consistently
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Migration Notes
|
|
||||||
|
|
||||||
### Backend
|
|
||||||
1. **Install Redis** (if not already):
|
|
||||||
```bash
|
|
||||||
# Already in docker-compose.yml, ensure it's running
|
|
||||||
docker-compose up -d redis
|
|
||||||
```
|
|
||||||
|
|
||||||
2. **Clear existing sessions** (one-time):
|
|
||||||
```bash
|
|
||||||
docker-compose exec backend python manage.py clearsessions
|
|
||||||
```
|
|
||||||
|
|
||||||
3. **No database migration needed** - session storage location changed but schema unchanged
|
|
||||||
|
|
||||||
### Frontend
|
|
||||||
1. **No code changes needed by developers**
|
|
||||||
2. **Clear browser cache** to remove old lazy-load chunks
|
|
||||||
3. **Verify HMR works** by making code changes in active modules
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Removed Code (Can Be Deleted)
|
|
||||||
|
|
||||||
### Backend - Previous Band-Aids
|
|
||||||
These can be removed as they're no longer needed:
|
|
||||||
- Cache clearing logic in logout views
|
|
||||||
- Manual session deletion in middleware
|
|
||||||
- User refresh queries in multiple places
|
|
||||||
- Account validation duplication
|
|
||||||
|
|
||||||
### Frontend - Previous Band-Aids
|
|
||||||
These can be removed:
|
|
||||||
- localStorage.clear() workarounds
|
|
||||||
- Manual cookie deletion loops
|
|
||||||
- Store reset logic
|
|
||||||
- Redundant authentication state syncing
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Performance Impact
|
|
||||||
|
|
||||||
### Issue #1 Fix
|
|
||||||
- **Faster**: Redis sessions are 10-100x faster than database queries
|
|
||||||
- **Lower DB Load**: No more session table queries on every request
|
|
||||||
- **Memory**: Minimal (~1KB per session in Redis)
|
|
||||||
|
|
||||||
### Issue #2 Fix
|
|
||||||
- **Faster HMR**: Single Suspense boundary reduces re-render overhead
|
|
||||||
- **Smaller Bundle**: Removed 200+ lines of Suspense wrapper code
|
|
||||||
- **Better UX**: Cleaner loading states with top-level fallback
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Monitoring
|
|
||||||
|
|
||||||
Add these logs to verify fixes are working:
|
|
||||||
|
|
||||||
### Backend
|
|
||||||
```python
|
|
||||||
# In auth/middleware.py - already added
|
|
||||||
if stored_account_id and stored_account_id != request.account.id:
|
|
||||||
logger.error(f"Session contamination detected: stored={stored_account_id}, actual={request.account.id}")
|
|
||||||
```
|
|
||||||
|
|
||||||
### Frontend
|
|
||||||
```typescript
|
|
||||||
// In App.tsx - add if needed
|
|
||||||
useEffect(() => {
|
|
||||||
console.log('Router context established successfully');
|
|
||||||
}, []);
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Summary
|
|
||||||
|
|
||||||
Both issues were **architectural flaws**, not bugs in business logic:
|
|
||||||
|
|
||||||
1. **User Swapping**: Django's default session/auth caching allowed cross-request contamination
|
|
||||||
2. **Router Errors**: React's Suspense boundaries per route lost Router context during HMR
|
|
||||||
|
|
||||||
Both fixes align with **industry best practices** and are **permanent architectural improvements**.
|
|
||||||
@@ -1,300 +0,0 @@
|
|||||||
# Documentation Consolidation Report
|
|
||||||
|
|
||||||
**Date:** December 9, 2024
|
|
||||||
**Task:** Consolidate scattered documentation into single navigable structure
|
|
||||||
**Status:** ✅ COMPLETE
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Executive Summary
|
|
||||||
|
|
||||||
Successfully consolidated **120+ documentation files** from 2 separate folders (`master-docs/` and `old-docs/`) into a single, well-organized `docs/` folder with **49 active files** and **122 archived files** for reference.
|
|
||||||
|
|
||||||
### Key Achievements
|
|
||||||
|
|
||||||
✅ **Single source of truth** - All docs in `/docs/` folder
|
|
||||||
✅ **Quick navigation** - Find any file in 1-2 steps
|
|
||||||
✅ **No code in docs** - Only file paths, function names, workflows
|
|
||||||
✅ **Hierarchical structure** - Organized by system/backend/API/frontend/workflows/deployment
|
|
||||||
✅ **Safely archived** - Old docs preserved in `/docs/90-ARCHIVED/`
|
|
||||||
✅ **Multi-tenancy untouched** - 5 files remain unchanged ✓
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Project Structure Changes
|
|
||||||
|
|
||||||
### Before
|
|
||||||
```
|
|
||||||
/data/app/igny8/
|
|
||||||
├── master-docs/ (100+ markdown files, deep hierarchy)
|
|
||||||
├── old-docs/ (20+ markdown files, various formats)
|
|
||||||
├── multi-tenancy/ (5 files - payment/tenancy specific)
|
|
||||||
├── backend/
|
|
||||||
├── frontend/
|
|
||||||
└── ...
|
|
||||||
```
|
|
||||||
|
|
||||||
### After
|
|
||||||
```
|
|
||||||
/data/app/igny8/
|
|
||||||
├── docs/ (NEW - 49 active docs + 122 archived)
|
|
||||||
│ ├── README.md (Master navigation with Quick Find)
|
|
||||||
│ ├── 00-SYSTEM/ (5 files - architecture, auth, flows)
|
|
||||||
│ ├── 10-BACKEND/ (26 files - all modules organized)
|
|
||||||
│ ├── 20-API/ (7 files - all endpoints)
|
|
||||||
│ ├── 30-FRONTEND/ (8 files - UI components, state)
|
|
||||||
│ ├── 40-WORKFLOWS/ (5 files - complete user journeys)
|
|
||||||
│ ├── 50-DEPLOYMENT/ (3 files - setup, docker, migrations)
|
|
||||||
│ └── 90-ARCHIVED/ (122 files - old docs preserved)
|
|
||||||
│
|
|
||||||
├── multi-tenancy/ (UNTOUCHED - 5 files)
|
|
||||||
├── backend/
|
|
||||||
├── frontend/
|
|
||||||
└── ...
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Documentation Organization
|
|
||||||
|
|
||||||
### 00-SYSTEM (5 files)
|
|
||||||
High-level architecture and cross-cutting concerns
|
|
||||||
|
|
||||||
| File | Purpose |
|
|
||||||
|------|---------|
|
|
||||||
| ARCHITECTURE-OVERVIEW.md | System design, microservices |
|
|
||||||
| TECH-STACK.md | All technologies used |
|
|
||||||
| MULTITENANCY.md | Account isolation, tenant context |
|
|
||||||
| AUTHENTICATION.md | JWT, sessions, permissions |
|
|
||||||
| DATA-FLOWS.md | Cross-system workflows |
|
|
||||||
|
|
||||||
### 10-BACKEND (26 files across 7 modules)
|
|
||||||
All backend code locations without code snippets
|
|
||||||
|
|
||||||
| Module | Files | Coverage |
|
|
||||||
|--------|-------|----------|
|
|
||||||
| Core | 3 | OVERVIEW.md, MODELS.md, SERVICES.md |
|
|
||||||
| accounts/ | 1 | User, Account, Role models + endpoints |
|
|
||||||
| billing/ | 3 | Plans, Payments, Credits, Payment Methods |
|
|
||||||
| planner/ | 3 | Keywords, Clusters, Ideas pipeline |
|
|
||||||
| writer/ | 4 | Content, Tasks, Publishing, Images |
|
|
||||||
| automation/ | 3 | Pipeline, Stages, Scheduler |
|
|
||||||
| integrations/ | 3 | WordPress, AI Services, Image Generation |
|
|
||||||
| sites/ | 1 | Site & Sector management |
|
|
||||||
|
|
||||||
### 20-API (7 files)
|
|
||||||
All REST endpoints with handler locations
|
|
||||||
|
|
||||||
- API-REFERENCE.md (Complete endpoint list)
|
|
||||||
- AUTHENTICATION-ENDPOINTS.md
|
|
||||||
- PLANNER-ENDPOINTS.md
|
|
||||||
- WRITER-ENDPOINTS.md
|
|
||||||
- AUTOMATION-ENDPOINTS.md
|
|
||||||
- BILLING-ENDPOINTS.md
|
|
||||||
- INTEGRATION-ENDPOINTS.md
|
|
||||||
|
|
||||||
### 30-FRONTEND (8 files across 4 modules)
|
|
||||||
React components and state management
|
|
||||||
|
|
||||||
- FRONTEND-ARCHITECTURE.md
|
|
||||||
- STATE-MANAGEMENT.md
|
|
||||||
- COMPONENTS.md
|
|
||||||
- Module-specific: planner/, writer/, automation/, billing/
|
|
||||||
|
|
||||||
### 40-WORKFLOWS (5 files)
|
|
||||||
Complete user journeys with visual diagrams
|
|
||||||
|
|
||||||
- SIGNUP-TO-ACTIVE.md (User onboarding)
|
|
||||||
- CONTENT-LIFECYCLE.md (Keyword → Published content)
|
|
||||||
- PAYMENT-WORKFLOW.md (Payment approval flow)
|
|
||||||
- AUTOMATION-WORKFLOW.md (Full automation run)
|
|
||||||
- WORDPRESS-SYNC.md (Bidirectional sync)
|
|
||||||
|
|
||||||
### 50-DEPLOYMENT (3 files)
|
|
||||||
Environment and deployment guides
|
|
||||||
|
|
||||||
- ENVIRONMENT-SETUP.md
|
|
||||||
- DOCKER-DEPLOYMENT.md
|
|
||||||
- DATABASE-MIGRATIONS.md
|
|
||||||
|
|
||||||
### 90-ARCHIVED
|
|
||||||
Historical reference (122 files)
|
|
||||||
|
|
||||||
- master-docs-original/ (100+ files)
|
|
||||||
- old-docs-original/ (20+ files)
|
|
||||||
- README.md (Explains archive purpose)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Navigation System
|
|
||||||
|
|
||||||
### Master README "Quick Find" Table
|
|
||||||
|
|
||||||
The `/docs/README.md` file contains a comprehensive "Quick Find" table that allows developers to:
|
|
||||||
|
|
||||||
1. **Search by task** - "I want to add a feature" → Find module → Find file
|
|
||||||
2. **Search by module** - Direct links to backend/frontend modules
|
|
||||||
3. **Search by technology** - Find all docs for Django, React, Celery, etc.
|
|
||||||
4. **Search by code location** - Map directory to documentation
|
|
||||||
|
|
||||||
### Example Usage
|
|
||||||
|
|
||||||
**Scenario:** "I need to add a new payment method"
|
|
||||||
|
|
||||||
```
|
|
||||||
Step 1: Open /docs/README.md
|
|
||||||
Step 2: Find "Billing" in Quick Find table
|
|
||||||
Step 3: Navigate to /docs/10-BACKEND/billing/PAYMENT-METHODS.md
|
|
||||||
Step 4: Read:
|
|
||||||
- File location: backend/igny8_core/business/billing/models.py
|
|
||||||
- Model: PaymentMethodConfig
|
|
||||||
- Admin: PaymentMethodConfigAdmin in admin.py
|
|
||||||
Step 5: Open exact file and implement
|
|
||||||
```
|
|
||||||
|
|
||||||
No guessing. No searching. Direct navigation.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Documentation Standards
|
|
||||||
|
|
||||||
### What's IN the docs:
|
|
||||||
|
|
||||||
✅ File paths: `backend/igny8_core/business/billing/services/credit_service.py`
|
|
||||||
✅ Function names: `CreditService.add_credits(account, amount, type)`
|
|
||||||
✅ Model fields: `account.credits`, `invoice.total`, `payment.status`
|
|
||||||
✅ Endpoints: `POST /v1/billing/admin/payments/confirm/`
|
|
||||||
✅ Workflows: ASCII diagrams, state tables, field mappings
|
|
||||||
✅ Cross-references: Links to related documentation
|
|
||||||
|
|
||||||
### What's NOT in the docs:
|
|
||||||
|
|
||||||
❌ Code snippets
|
|
||||||
❌ Implementation details
|
|
||||||
❌ Line-by-line code walkthroughs
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Files Created/Modified
|
|
||||||
|
|
||||||
### Created
|
|
||||||
- `/docs/README.md` - Master navigation (4,300 lines)
|
|
||||||
- 49 documentation files across 6 main sections
|
|
||||||
- `/docs/90-ARCHIVED/README.md` - Archive explanation
|
|
||||||
|
|
||||||
### Modified
|
|
||||||
- `/docs/CHANGELOG.md` - Copied from multi-tenancy folder
|
|
||||||
|
|
||||||
### Archived
|
|
||||||
- `master-docs/` → `/docs/90-ARCHIVED/master-docs-original/`
|
|
||||||
- `old-docs/` → `/docs/90-ARCHIVED/old-docs-original/`
|
|
||||||
|
|
||||||
### Untouched
|
|
||||||
- `/multi-tenancy/` - 5 files remain unchanged ✓
|
|
||||||
- TENANCY-IMPLEMENTATION-GUIDE.md
|
|
||||||
- TENANCY-DATA-FLOW.md
|
|
||||||
- TENANCY-CHANGE-LOG.md
|
|
||||||
- README.md
|
|
||||||
- DOCUMENTATION-SUMMARY.md
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Verification Checklist
|
|
||||||
|
|
||||||
### Coverage
|
|
||||||
- [x] All backend modules documented
|
|
||||||
- [x] All API endpoints documented
|
|
||||||
- [x] All frontend modules documented
|
|
||||||
- [x] All major workflows documented
|
|
||||||
- [x] All deployment needs documented
|
|
||||||
|
|
||||||
### Navigation
|
|
||||||
- [x] Master README with Quick Find table
|
|
||||||
- [x] Module-specific references created
|
|
||||||
- [x] Cross-references working
|
|
||||||
- [x] No code in documentation
|
|
||||||
- [x] Exact file locations provided
|
|
||||||
|
|
||||||
### Safety
|
|
||||||
- [x] Old docs archived (not deleted)
|
|
||||||
- [x] Multi-tenancy folder untouched
|
|
||||||
- [x] Archive README created
|
|
||||||
- [x] Clear deprecation notices
|
|
||||||
|
|
||||||
### Quality
|
|
||||||
- [x] Hierarchical organization
|
|
||||||
- [x] 1-2 step navigation maximum
|
|
||||||
- [x] Consistent formatting
|
|
||||||
- [x] Maintenance guidelines included
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Success Metrics
|
|
||||||
|
|
||||||
| Metric | Before | After | Improvement |
|
|
||||||
|--------|--------|-------|-------------|
|
|
||||||
| Active doc files | 120+ (scattered) | 49 (organized) | 60% reduction |
|
|
||||||
| Documentation locations | 3 folders | 1 folder | 67% consolidation |
|
|
||||||
| Navigation steps | 3-5 steps | 1-2 steps | 60% faster |
|
|
||||||
| Code in docs | Yes (scattered) | No (only paths) | 100% cleaner |
|
|
||||||
| Archived safely | No | Yes (122 files) | 100% preserved |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Maintenance Guidelines
|
|
||||||
|
|
||||||
### When adding features:
|
|
||||||
1. Update relevant module reference doc
|
|
||||||
2. Update API doc if endpoint added
|
|
||||||
3. Update workflow doc if flow changed
|
|
||||||
4. Update CHANGELOG.md
|
|
||||||
|
|
||||||
### When fixing bugs:
|
|
||||||
1. Note fix in CHANGELOG.md
|
|
||||||
2. Update relevant doc if behavior changed
|
|
||||||
|
|
||||||
### Documentation standards:
|
|
||||||
- NO code snippets
|
|
||||||
- Only file paths and function names
|
|
||||||
- Visual diagrams welcome
|
|
||||||
- Tables for structured data
|
|
||||||
- Maintain 1-2 step navigation
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Future Recommendations
|
|
||||||
|
|
||||||
### Immediate (Next Sprint)
|
|
||||||
1. Review all 49 docs for accuracy
|
|
||||||
2. Add missing endpoint details in API docs
|
|
||||||
3. Create automation for doc updates
|
|
||||||
|
|
||||||
### Short-term (Next Month)
|
|
||||||
1. Add more visual diagrams to workflows
|
|
||||||
2. Create video walkthroughs using docs
|
|
||||||
3. Set up automated doc testing
|
|
||||||
|
|
||||||
### Long-term (Next Quarter)
|
|
||||||
1. Generate API docs from code annotations
|
|
||||||
2. Create interactive doc navigation
|
|
||||||
3. Build doc search functionality
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Conclusion
|
|
||||||
|
|
||||||
The documentation consolidation project successfully achieved all objectives:
|
|
||||||
|
|
||||||
✅ **Single source of truth** - `/docs/` folder
|
|
||||||
✅ **Quick navigation** - 1-2 step maximum
|
|
||||||
✅ **No code clutter** - Only essential references
|
|
||||||
✅ **Safe archival** - 122 files preserved
|
|
||||||
✅ **Multi-tenancy protected** - Untouched ✓
|
|
||||||
|
|
||||||
The new structure enables both human developers and AI agents to quickly find the exact file and function to modify without any guessing.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Report Generated:** December 9, 2024
|
|
||||||
**Status:** Production-Ready
|
|
||||||
**Maintained By:** Development Team
|
|
||||||
@@ -1,238 +0,0 @@
|
|||||||
# Integration Settings Architecture Analysis
|
|
||||||
|
|
||||||
## Current Setup (As of Dec 10, 2025)
|
|
||||||
|
|
||||||
### 1. How It Works Now
|
|
||||||
|
|
||||||
**System Architecture:**
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────────┐
|
|
||||||
│ INTEGRATION SETTINGS (System-Wide API Keys) │
|
|
||||||
│ Stored in: IntegrationSettings model │
|
|
||||||
│ Account: AWS Admin (slug: aws-admin) │
|
|
||||||
└─────────────────────────────────────────────────────────────┘
|
|
||||||
│
|
|
||||||
│ Fallback mechanism
|
|
||||||
↓
|
|
||||||
┌─────────────────────────────────────────┐
|
|
||||||
│ │
|
|
||||||
↓ ↓
|
|
||||||
┌──────────────────┐ ┌──────────────────┐
|
|
||||||
│ SUPER USER │ │ NORMAL USER │
|
|
||||||
│ dev@igny8.com │ │ paid2@paid.com │
|
|
||||||
│ │ │ │
|
|
||||||
│ Role: developer │ │ Role: owner │
|
|
||||||
│ Superuser: True │ │ Superuser: False│
|
|
||||||
│ Account: │ │ Account: │
|
|
||||||
│ AWS Admin │ │ Paid 2 │
|
|
||||||
└──────────────────┘ └──────────────────┘
|
|
||||||
│ │
|
|
||||||
│ Can access & modify │ Cannot access
|
|
||||||
│ Integration Settings │ Integration Settings
|
|
||||||
│ │
|
|
||||||
↓ ↓
|
|
||||||
┌──────────────────┐ ┌──────────────────┐
|
|
||||||
│ FRONTEND: │ │ FRONTEND: │
|
|
||||||
│ Settings → │ │ (No access to │
|
|
||||||
│ Integration │ │ settings page) │
|
|
||||||
│ Page │ │ │
|
|
||||||
└──────────────────┘ └──────────────────┘
|
|
||||||
│
|
|
||||||
│ Uses AI functions
|
|
||||||
↓
|
|
||||||
┌──────────────────────┐
|
|
||||||
│ BACKEND: │
|
|
||||||
│ get_model_config() │
|
|
||||||
│ Falls back to │
|
|
||||||
│ aws-admin settings │
|
|
||||||
└──────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2. Current Database State
|
|
||||||
|
|
||||||
**AWS Admin Account Integration Settings:**
|
|
||||||
- **OpenAI**: Active, has API key, model: gpt-4o-mini
|
|
||||||
- **Runware**: Active, has API key
|
|
||||||
- **Image Generation**: Active, no API key (uses OpenAI/Runware settings)
|
|
||||||
|
|
||||||
**Normal User Accounts:**
|
|
||||||
- Have NO integration settings in database
|
|
||||||
- Use aws-admin settings via fallback
|
|
||||||
|
|
||||||
### 3. Permission Architecture
|
|
||||||
|
|
||||||
**IntegrationSettingsViewSet:**
|
|
||||||
```python
|
|
||||||
permission_classes = [
|
|
||||||
IsAuthenticatedAndActive, # Must be logged in and active
|
|
||||||
HasTenantAccess, # Must have account
|
|
||||||
IsSystemAccountOrDeveloper # Must be superuser/developer/system user
|
|
||||||
]
|
|
||||||
```
|
|
||||||
|
|
||||||
**Who Can Access:**
|
|
||||||
- ✅ dev@igny8.com (superuser=True, role=developer)
|
|
||||||
- ❌ paid2@paid.com (superuser=False, role=owner)
|
|
||||||
|
|
||||||
**Exception - task_progress endpoint:**
|
|
||||||
```python
|
|
||||||
@action(..., permission_classes=[IsAuthenticatedAndActive])
|
|
||||||
def task_progress(self, request, task_id=None):
|
|
||||||
```
|
|
||||||
- ✅ All authenticated users can check task progress
|
|
||||||
|
|
||||||
### 4. How Normal Users Use System API Keys
|
|
||||||
|
|
||||||
**Flow:**
|
|
||||||
1. Normal user calls AI function (auto_cluster, generate_ideas, etc.)
|
|
||||||
2. Backend calls `get_model_config(function_name, account)`
|
|
||||||
3. Function checks user's account for IntegrationSettings
|
|
||||||
4. **User account has no settings → Fallback triggered**
|
|
||||||
5. Checks system accounts in order: `aws-admin` → `default-account` → `default`
|
|
||||||
6. Uses aws-admin account's OpenAI settings
|
|
||||||
7. AI function executes with system API key
|
|
||||||
|
|
||||||
**Code Reference:** `backend/igny8_core/ai/settings.py` lines 54-72
|
|
||||||
|
|
||||||
### 5. Your Questions Answered
|
|
||||||
|
|
||||||
**Q: What is super user relation for integration config which are globally used?**
|
|
||||||
|
|
||||||
**A:** Super user (dev@igny8.com) belongs to AWS Admin account. Integration settings are stored per-account in the database:
|
|
||||||
- AWS Admin account has the integration settings
|
|
||||||
- Super user can access/modify these via Integration Settings page in frontend
|
|
||||||
- These settings are "globally used" because ALL normal users fall back to them
|
|
||||||
|
|
||||||
**Q: Do we have to use only backend Django admin to make changes?**
|
|
||||||
|
|
||||||
**A:** No! You have TWO options:
|
|
||||||
|
|
||||||
1. **Frontend Integration Settings Page** (Recommended)
|
|
||||||
- Login as dev@igny8.com
|
|
||||||
- Go to Settings → Integration
|
|
||||||
- Modify OpenAI/Runware settings
|
|
||||||
- Changes saved to IntegrationSettings model for aws-admin account
|
|
||||||
|
|
||||||
2. **Django Admin** (Alternative)
|
|
||||||
- Access: http://api.igny8.com/admin/
|
|
||||||
- Navigate to System → Integration Settings
|
|
||||||
- Find aws-admin account settings
|
|
||||||
- Modify directly
|
|
||||||
|
|
||||||
**Q: Can normal users access integration settings?**
|
|
||||||
|
|
||||||
**A:** Currently: **NO** (by design)
|
|
||||||
|
|
||||||
The permission class `IsSystemAccountOrDeveloper` blocks normal users from:
|
|
||||||
- Viewing integration settings page
|
|
||||||
- Modifying API keys
|
|
||||||
- Testing connections
|
|
||||||
|
|
||||||
Normal users transparently use system API keys via fallback.
|
|
||||||
|
|
||||||
### 6. Current Issues You Mentioned
|
|
||||||
|
|
||||||
**Issue 1: "Super user is now unable to change settings"**
|
|
||||||
|
|
||||||
**Status:** This should work! Let me verify:
|
|
||||||
- dev@igny8.com has is_superuser=True ✓
|
|
||||||
- dev@igny8.com has role=developer ✓
|
|
||||||
- Permission class allows superuser/developer ✓
|
|
||||||
|
|
||||||
**Possible causes if not working:**
|
|
||||||
- Frontend routing issue (Integration page not accessible)
|
|
||||||
- Permission check failing due to HasTenantAccess
|
|
||||||
- Frontend not sending proper Authorization header
|
|
||||||
|
|
||||||
**Issue 2: "There are some wrong configs in aws-admin integration services"**
|
|
||||||
|
|
||||||
**Current Config:**
|
|
||||||
```json
|
|
||||||
OpenAI:
|
|
||||||
- model: "gpt-4o-mini"
|
|
||||||
- active: true
|
|
||||||
- has API key: true
|
|
||||||
|
|
||||||
Runware:
|
|
||||||
- active: true
|
|
||||||
- has API key: true
|
|
||||||
|
|
||||||
Image Generation:
|
|
||||||
- active: true
|
|
||||||
- has API key: false ← WRONG! Should use OpenAI or Runware key
|
|
||||||
```
|
|
||||||
|
|
||||||
**Fix needed:** Image generation settings should reference OpenAI or Runware, not have its own API key field.
|
|
||||||
|
|
||||||
### 7. Recommendations
|
|
||||||
|
|
||||||
**Option A: Keep Current Architecture (Recommended)**
|
|
||||||
- Super user controls all API keys via AWS Admin account
|
|
||||||
- Normal users transparently use system keys
|
|
||||||
- Simple, centralized control
|
|
||||||
- **Action needed:**
|
|
||||||
1. Verify super user can access Integration Settings page
|
|
||||||
2. Fix image_generation config (remove apiKey field, ensure provider is set)
|
|
||||||
3. Test that normal users can use AI functions
|
|
||||||
|
|
||||||
**Option B: Allow Per-Account API Keys**
|
|
||||||
- Each account can configure their own API keys
|
|
||||||
- Fallback to system if not configured
|
|
||||||
- More complex, but gives users control
|
|
||||||
- **Action needed:**
|
|
||||||
1. Remove IsSystemAccountOrDeveloper from viewset
|
|
||||||
2. Add UI to show "using system defaults" vs "custom keys"
|
|
||||||
3. Update get_model_config to prefer user keys over system
|
|
||||||
|
|
||||||
**Option C: Hybrid Approach**
|
|
||||||
- Normal users can VIEW system settings (read-only)
|
|
||||||
- Only super users can MODIFY
|
|
||||||
- Allows transparency without risk
|
|
||||||
- **Action needed:**
|
|
||||||
1. Create separate permission for view vs modify
|
|
||||||
2. Update frontend to show read-only view for normal users
|
|
||||||
|
|
||||||
### 8. Verification Commands
|
|
||||||
|
|
||||||
**Check if super user can access Integration Settings:**
|
|
||||||
```bash
|
|
||||||
# Login as dev@igny8.com in frontend
|
|
||||||
# Navigate to Settings → Integration
|
|
||||||
# Should see OpenAI/Runware/Image Generation tabs
|
|
||||||
```
|
|
||||||
|
|
||||||
**Check integration settings in database:**
|
|
||||||
```bash
|
|
||||||
docker compose exec -T igny8_backend python manage.py shell <<'EOF'
|
|
||||||
from igny8_core.modules.system.models import IntegrationSettings
|
|
||||||
from igny8_core.auth.models import Account
|
|
||||||
|
|
||||||
aws = Account.objects.get(slug='aws-admin')
|
|
||||||
for s in IntegrationSettings.objects.filter(account=aws):
|
|
||||||
print(f"{s.integration_type}: active={s.is_active}, has_key={bool(s.config.get('apiKey'))}")
|
|
||||||
EOF
|
|
||||||
```
|
|
||||||
|
|
||||||
**Test normal user AI function access:**
|
|
||||||
```bash
|
|
||||||
# Login as paid2@paid.com
|
|
||||||
# Try auto_cluster on keywords
|
|
||||||
# Should work using aws-admin OpenAI key
|
|
||||||
```
|
|
||||||
|
|
||||||
### 9. Next Steps
|
|
||||||
|
|
||||||
Based on your needs, tell me:
|
|
||||||
|
|
||||||
1. **Can dev@igny8.com access the Integration Settings page in the frontend?**
|
|
||||||
- If NO: We need to debug permission/routing issue
|
|
||||||
- If YES: Proceed to fix wrong configs
|
|
||||||
|
|
||||||
2. **What wrong configs need to be fixed in aws-admin integration?**
|
|
||||||
- Specific model versions?
|
|
||||||
- API key rotation?
|
|
||||||
- Image generation settings?
|
|
||||||
|
|
||||||
3. **Do you want to keep current architecture (super user only) or allow normal users to configure their own keys?**
|
|
||||||
|
|
||||||
I'm ready to help fix specific issues once you clarify the current state and desired behavior.
|
|
||||||
@@ -1,192 +0,0 @@
|
|||||||
# CRITICAL MULTI-TENANCY FIXES - December 10, 2025
|
|
||||||
|
|
||||||
## PROBLEM SUMMARY
|
|
||||||
|
|
||||||
Users are unable to use business features (auto_cluster, automation, etc.) despite being authenticated. The error is **"Account is required"** or permission denied.
|
|
||||||
|
|
||||||
## ROOT CAUSE
|
|
||||||
|
|
||||||
The system has **structural** issues in the multi-tenancy implementation:
|
|
||||||
|
|
||||||
### 1. **User Model Allows NULL Accounts**
|
|
||||||
**File**: `backend/igny8_core/auth/models.py` (line 644)
|
|
||||||
```python
|
|
||||||
account = models.ForeignKey('igny8_core_auth.Account',
|
|
||||||
on_delete=models.CASCADE,
|
|
||||||
null=True, # ❌ WRONG
|
|
||||||
blank=True, # ❌ WRONG
|
|
||||||
...)
|
|
||||||
```
|
|
||||||
|
|
||||||
**Problem**: Users can exist without accounts (orphaned users). When middleware sets `request.account` from `request.user.account`, it becomes `None` for orphaned users.
|
|
||||||
|
|
||||||
**Impact**: ALL business endpoints that check `request.account` fail.
|
|
||||||
|
|
||||||
### 2. **HasTenantAccess Permission Too Complex**
|
|
||||||
**File**: `backend/igny8_core/api/permissions.py` (lines 24-67)
|
|
||||||
|
|
||||||
**Problem**: The permission class had unnecessary fallback logic and unclear flow:
|
|
||||||
- Checked `request.account`
|
|
||||||
- Fell back to `request.user.account`
|
|
||||||
- Compared if they match
|
|
||||||
- Returned `False` on ANY exception
|
|
||||||
|
|
||||||
**Impact**: Added complexity made debugging hard. If user has no account, access is denied silently.
|
|
||||||
|
|
||||||
### 3. **Business Endpoints Explicitly Check `request.account`**
|
|
||||||
**File**: `backend/igny8_core/modules/planner/views.py` (line 633)
|
|
||||||
```python
|
|
||||||
account = getattr(request, 'account', None)
|
|
||||||
if not account:
|
|
||||||
return error_response(error='Account is required', ...)
|
|
||||||
```
|
|
||||||
|
|
||||||
**Problem**: Direct dependency on `request.account`. If middleware fails to set it, feature breaks.
|
|
||||||
|
|
||||||
**Impact**: Auto-cluster and other AI functions fail with "Account is required".
|
|
||||||
|
|
||||||
## FIXES APPLIED
|
|
||||||
|
|
||||||
### ✅ Fix 1: Simplified HasTenantAccess Permission
|
|
||||||
**File**: `backend/igny8_core/api/permissions.py`
|
|
||||||
|
|
||||||
**Change**: Removed fallback logic. Made it clear: **authenticated users MUST have accounts**.
|
|
||||||
|
|
||||||
```python
|
|
||||||
# SIMPLIFIED LOGIC: Every authenticated user MUST have an account
|
|
||||||
# Middleware already set request.account from request.user.account
|
|
||||||
# Just verify it exists
|
|
||||||
if not hasattr(request.user, 'account'):
|
|
||||||
return False
|
|
||||||
|
|
||||||
try:
|
|
||||||
user_account = request.user.account
|
|
||||||
if not user_account:
|
|
||||||
return False
|
|
||||||
return True
|
|
||||||
except (AttributeError, Exception):
|
|
||||||
return False
|
|
||||||
```
|
|
||||||
|
|
||||||
### ✅ Fix 2: Task Progress Permission
|
|
||||||
**File**: `backend/igny8_core/modules/system/integration_views.py` (line 900)
|
|
||||||
|
|
||||||
**Change**: Allowed any authenticated user to check task progress (not just system accounts).
|
|
||||||
|
|
||||||
```python
|
|
||||||
@action(..., permission_classes=[IsAuthenticatedAndActive])
|
|
||||||
def task_progress(self, request, task_id=None):
|
|
||||||
```
|
|
||||||
|
|
||||||
### ✅ Fix 3: AI Settings Fallback
|
|
||||||
**File**: `backend/igny8_core/ai/settings.py`
|
|
||||||
|
|
||||||
**Change**: Added fallback to system account (aws-admin) for OpenAI settings when user account doesn't have them configured.
|
|
||||||
|
|
||||||
### ✅ Fix 4: Error Response Parameter
|
|
||||||
**File**: `backend/igny8_core/modules/planner/views.py`
|
|
||||||
|
|
||||||
**Change**: Fixed `error_response()` call - changed invalid `extra_data` parameter to `debug_info`.
|
|
||||||
|
|
||||||
## REQUIRED ACTIONS
|
|
||||||
|
|
||||||
### 🔴 CRITICAL: Fix Orphaned Users
|
|
||||||
|
|
||||||
1. **Run the fix script**:
|
|
||||||
```bash
|
|
||||||
cd /data/app/igny8/backend
|
|
||||||
python3 fix_orphaned_users.py
|
|
||||||
```
|
|
||||||
|
|
||||||
2. **The script will**:
|
|
||||||
- Find users with `account = NULL`
|
|
||||||
- Create accounts for them OR delete them
|
|
||||||
- Report results
|
|
||||||
|
|
||||||
### 🔴 CRITICAL: Make Account Field Required
|
|
||||||
|
|
||||||
After fixing orphaned users, update the User model:
|
|
||||||
|
|
||||||
**File**: `backend/igny8_core/auth/models.py` (line 644)
|
|
||||||
|
|
||||||
**Change**:
|
|
||||||
```python
|
|
||||||
# BEFORE
|
|
||||||
account = models.ForeignKey(..., null=True, blank=True, ...)
|
|
||||||
|
|
||||||
# AFTER
|
|
||||||
account = models.ForeignKey(..., null=False, blank=False, ...)
|
|
||||||
```
|
|
||||||
|
|
||||||
**Then create and run migration**:
|
|
||||||
```bash
|
|
||||||
cd /data/app/igny8/backend
|
|
||||||
python3 manage.py makemigrations
|
|
||||||
python3 manage.py migrate
|
|
||||||
```
|
|
||||||
|
|
||||||
## VERIFICATION
|
|
||||||
|
|
||||||
After fixes, verify:
|
|
||||||
|
|
||||||
1. **Check no orphaned users**:
|
|
||||||
```bash
|
|
||||||
cd /data/app/igny8/backend
|
|
||||||
python3 manage.py shell -c "
|
|
||||||
from igny8_core.auth.models import User
|
|
||||||
orphaned = User.objects.filter(account__isnull=True).count()
|
|
||||||
print(f'Orphaned users: {orphaned}')
|
|
||||||
"
|
|
||||||
```
|
|
||||||
Expected: `Orphaned users: 0`
|
|
||||||
|
|
||||||
2. **Test auto-cluster**:
|
|
||||||
- Login as normal user
|
|
||||||
- Select 5+ keywords
|
|
||||||
- Click "Auto Cluster"
|
|
||||||
- Should work without "Account is required" error
|
|
||||||
|
|
||||||
3. **Test task progress**:
|
|
||||||
- Start any AI function
|
|
||||||
- Progress modal should show real-time updates
|
|
||||||
- No "403 Forbidden" errors
|
|
||||||
|
|
||||||
## ARCHITECTURE PRINCIPLES ESTABLISHED
|
|
||||||
|
|
||||||
1. **NO NULL ACCOUNTS**: Every user MUST have an account. Period.
|
|
||||||
|
|
||||||
2. **NO FALLBACKS**: If `request.user.account` is None, it's a data integrity issue, not a code issue.
|
|
||||||
|
|
||||||
3. **CLEAR FLOW**:
|
|
||||||
- User registers → Account created → User.account set
|
|
||||||
- User logs in → Middleware sets request.account from user.account
|
|
||||||
- Permission checks → Verify request.user.account exists
|
|
||||||
- Business logic → Use request.account directly
|
|
||||||
|
|
||||||
4. **FAIL FAST**: Don't hide errors with fallbacks. If account is missing, raise error.
|
|
||||||
|
|
||||||
## FILES MODIFIED
|
|
||||||
|
|
||||||
1. `backend/igny8_core/api/permissions.py` - Simplified HasTenantAccess
|
|
||||||
2. `backend/igny8_core/modules/system/integration_views.py` - Fixed task_progress permission
|
|
||||||
3. `backend/igny8_core/ai/settings.py` - Added system account fallback for AI settings
|
|
||||||
4. `backend/igny8_core/modules/planner/views.py` - Fixed error_response call
|
|
||||||
|
|
||||||
## FILES CREATED
|
|
||||||
|
|
||||||
1. `backend/fix_orphaned_users.py` - Script to fix orphaned users
|
|
||||||
2. `MULTI-TENANCY-FIXES-DEC-2025.md` - This document
|
|
||||||
|
|
||||||
## NEXT STEPS
|
|
||||||
|
|
||||||
1. ✅ Run orphaned users fix script
|
|
||||||
2. ✅ Make User.account field required (migration)
|
|
||||||
3. ✅ Test all business features
|
|
||||||
4. ✅ Update documentation to reflect "no fallbacks" principle
|
|
||||||
5. ✅ Add database constraints to prevent orphaned users
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Date**: December 10, 2025
|
|
||||||
**Status**: FIXES APPLIED - VERIFICATION PENDING
|
|
||||||
**Priority**: CRITICAL
|
|
||||||
@@ -1,155 +0,0 @@
|
|||||||
# Router Hook Error - ROOT CAUSE ANALYSIS (SOLVED)
|
|
||||||
|
|
||||||
## Date: December 10, 2025
|
|
||||||
|
|
||||||
## The Errors (FIXED)
|
|
||||||
|
|
||||||
- `/automation` → `useNavigate() may be used only in the context of a <Router> component.` ✅ FIXED
|
|
||||||
- `/planner/keywords` → `useLocation() may be used only in the context of a <Router> component.` ✅ FIXED
|
|
||||||
- `/planner/clusters` → `useLocation() may be used only in the context of a <Router> component.` ✅ FIXED
|
|
||||||
|
|
||||||
## ROOT CAUSE: Vite Bundling Multiple React Router Chunks
|
|
||||||
|
|
||||||
### The Real Problem
|
|
||||||
|
|
||||||
Components imported Router hooks from **TWO different packages**:
|
|
||||||
- Some used `import { useLocation } from 'react-router'`
|
|
||||||
- Some used `import { useLocation } from 'react-router-dom'`
|
|
||||||
- main.tsx used `import { BrowserRouter } from 'react-router-dom'`
|
|
||||||
|
|
||||||
Even though npm showed both packages as v7.9.5 and "deduped", **Vite bundled them into SEPARATE chunks**:
|
|
||||||
|
|
||||||
```
|
|
||||||
chunk-JWK5IZBO.js ← Contains 'react-router' code
|
|
||||||
chunk-U2AIREZK.js ← Contains 'react-router-dom' code
|
|
||||||
```
|
|
||||||
|
|
||||||
### Why This Caused the Error
|
|
||||||
|
|
||||||
1. **BrowserRouter** from `'react-router-dom'` (chunk-U2AIREZK.js) creates a Router context
|
|
||||||
2. **useLocation()** from `'react-router'` (chunk-JWK5IZBO.js) tries to read Router context
|
|
||||||
3. **Different chunks = Different module instances = Different React contexts**
|
|
||||||
4. The context from chunk-U2AIREZK is NOT accessible to hooks in chunk-JWK5IZBO
|
|
||||||
5. Hook can't find context → Error: "useLocation() may be used only in the context of a <Router> component"
|
|
||||||
|
|
||||||
### Evidence from Error Stack
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
ErrorBoundary caught an error: Error: useLocation() may be used only in the context of a <Router> component.
|
|
||||||
at useLocation (chunk-JWK5IZBO.js?v=f560299f:5648:3) ← 'react-router' chunk
|
|
||||||
at TablePageTemplate (TablePageTemplate.tsx:182:20)
|
|
||||||
...
|
|
||||||
at BrowserRouter (chunk-U2AIREZK.js?v=f560299f:9755:3) ← 'react-router-dom' chunk
|
|
||||||
```
|
|
||||||
|
|
||||||
**Two different chunks = Context mismatch!**
|
|
||||||
|
|
||||||
### Component Stack Analysis
|
|
||||||
|
|
||||||
The error showed BrowserRouter WAS in the component tree:
|
|
||||||
|
|
||||||
```
|
|
||||||
TablePageTemplate (useLocation ERROR)
|
|
||||||
↓ Clusters
|
|
||||||
↓ ModuleGuard
|
|
||||||
↓ Routes
|
|
||||||
↓ App
|
|
||||||
↓ BrowserRouter ← Context provided HERE
|
|
||||||
```
|
|
||||||
|
|
||||||
Router context was available, but the hook was looking in the WRONG chunk's context.
|
|
||||||
|
|
||||||
## The Fix Applied
|
|
||||||
|
|
||||||
### 1. Changed ALL imports to use 'react-router-dom'
|
|
||||||
|
|
||||||
**Files updated (16 files):**
|
|
||||||
- `src/templates/TablePageTemplate.tsx`
|
|
||||||
- `src/templates/ContentViewTemplate.tsx`
|
|
||||||
- `src/components/navigation/ModuleNavigationTabs.tsx`
|
|
||||||
- `src/components/common/DebugSiteSelector.tsx`
|
|
||||||
- `src/components/common/SiteSelector.tsx`
|
|
||||||
- `src/components/common/SiteAndSectorSelector.tsx`
|
|
||||||
- `src/components/common/PageTransition.tsx`
|
|
||||||
- `src/pages/Linker/ContentList.tsx`
|
|
||||||
- `src/pages/Linker/Dashboard.tsx`
|
|
||||||
- `src/pages/Writer/ContentView.tsx`
|
|
||||||
- `src/pages/Writer/Content.tsx`
|
|
||||||
- `src/pages/Writer/Published.tsx`
|
|
||||||
- `src/pages/Writer/Review.tsx`
|
|
||||||
- `src/pages/Optimizer/ContentSelector.tsx`
|
|
||||||
- `src/pages/Optimizer/AnalysisPreview.tsx`
|
|
||||||
- `src/pages/Optimizer/Dashboard.tsx`
|
|
||||||
|
|
||||||
**Changed:**
|
|
||||||
```tsx
|
|
||||||
// BEFORE
|
|
||||||
import { useLocation } from 'react-router';
|
|
||||||
import { useNavigate } from 'react-router';
|
|
||||||
|
|
||||||
// AFTER
|
|
||||||
import { useLocation } from 'react-router-dom';
|
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2. Removed 'react-router' from package.json
|
|
||||||
|
|
||||||
**Before:**
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"dependencies": {
|
|
||||||
"react-router": "^7.1.5",
|
|
||||||
"react-router-dom": "^7.9.5"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**After:**
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"dependencies": {
|
|
||||||
"react-router-dom": "^7.9.5"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. Result
|
|
||||||
|
|
||||||
Now Vite bundles ALL Router code into a SINGLE chunk, ensuring Router context is shared across all components.
|
|
||||||
|
|
||||||
## Why Container Rebuild "Fixed" It Temporarily
|
|
||||||
|
|
||||||
When you rebuild containers, sometimes Vite's chunk splitting algorithm temporarily bundles both packages together, making the error disappear. But on the next HMR or rebuild, it splits them again → error returns.
|
|
||||||
|
|
||||||
## Testing Instructions
|
|
||||||
|
|
||||||
After these changes, test by visiting:
|
|
||||||
- https://app.igny8.com/planner/keywords → Should have NO errors
|
|
||||||
- https://app.igny8.com/planner/clusters → Should have NO errors
|
|
||||||
- https://app.igny8.com/automation → Should have NO errors
|
|
||||||
- https://app.igny8.com/account/plans → Should still have NO errors
|
|
||||||
|
|
||||||
Check browser console for zero Router-related errors.
|
|
||||||
|
|
||||||
## Key Learnings
|
|
||||||
|
|
||||||
1. **npm deduplication ≠ Vite bundling** - Even if npm shows packages as "deduped", Vite may still create separate chunks
|
|
||||||
2. **Module bundler matters** - The error wasn't in React or React Router, it was in how Vite split the code
|
|
||||||
3. **Import source determines chunk** - Importing from different packages creates different chunks with separate module instances
|
|
||||||
4. **React Context is per-module-instance** - Contexts don't cross chunk boundaries
|
|
||||||
5. **Consistency is critical** - ALL imports must use the SAME package to ensure single chunk
|
|
||||||
6. **Component stack traces reveal bundling** - Looking at chunk file names in errors shows the real problem
|
|
||||||
|
|
||||||
## Solution: Use ONE Package Consistently
|
|
||||||
|
|
||||||
For React Router v7 in Vite projects:
|
|
||||||
- ✅ Use `'react-router-dom'` exclusively
|
|
||||||
- ❌ Never mix `'react-router'` and `'react-router-dom'` imports
|
|
||||||
- ✅ Remove unused router packages from package.json
|
|
||||||
- ✅ Verify with: `grep -r "from 'react-router'" src/` (should return nothing)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Status: ✅ RESOLVED
|
|
||||||
|
|
||||||
All imports standardized to `'react-router-dom'`. Error should no longer occur after HMR, container restarts, or cache clears.
|
|
||||||
@@ -1,147 +0,0 @@
|
|||||||
#!/usr/bin/env python3
|
|
||||||
"""
|
|
||||||
Script to identify and fix orphaned users (users without accounts).
|
|
||||||
|
|
||||||
This script will:
|
|
||||||
1. Find all users with account = NULL
|
|
||||||
2. For each user, either:
|
|
||||||
- Assign them to an existing account if possible
|
|
||||||
- Create a new account for them
|
|
||||||
- Delete them if they're test/invalid users
|
|
||||||
3. Report the results
|
|
||||||
|
|
||||||
Run this from backend directory:
|
|
||||||
python3 fix_orphaned_users.py
|
|
||||||
"""
|
|
||||||
|
|
||||||
import os
|
|
||||||
import sys
|
|
||||||
import django
|
|
||||||
|
|
||||||
# Setup Django
|
|
||||||
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'igny8_core.settings')
|
|
||||||
django.setup()
|
|
||||||
|
|
||||||
from igny8_core.auth.models import User, Account, Plan
|
|
||||||
from django.db import transaction
|
|
||||||
|
|
||||||
def main():
|
|
||||||
print("=" * 80)
|
|
||||||
print("ORPHANED USERS FIX SCRIPT")
|
|
||||||
print("=" * 80)
|
|
||||||
|
|
||||||
# Find users without accounts
|
|
||||||
orphaned_users = User.objects.filter(account__isnull=True)
|
|
||||||
count = orphaned_users.count()
|
|
||||||
|
|
||||||
print(f"\nFound {count} user(s) without accounts:\n")
|
|
||||||
|
|
||||||
if count == 0:
|
|
||||||
print("✅ No orphaned users found. System is healthy!")
|
|
||||||
return
|
|
||||||
|
|
||||||
# List them
|
|
||||||
for i, user in enumerate(orphaned_users, 1):
|
|
||||||
print(f"{i}. ID: {user.id}")
|
|
||||||
print(f" Email: {user.email}")
|
|
||||||
print(f" Username: {user.username}")
|
|
||||||
print(f" Role: {user.role}")
|
|
||||||
print(f" Active: {user.is_active}")
|
|
||||||
print(f" Superuser: {user.is_superuser}")
|
|
||||||
print(f" Created: {user.created_at}")
|
|
||||||
print()
|
|
||||||
|
|
||||||
# Ask what to do
|
|
||||||
print("\nOptions:")
|
|
||||||
print("1. Auto-fix: Create accounts for all orphaned users")
|
|
||||||
print("2. Delete all orphaned users")
|
|
||||||
print("3. Exit without changes")
|
|
||||||
|
|
||||||
choice = input("\nEnter choice (1-3): ").strip()
|
|
||||||
|
|
||||||
if choice == '1':
|
|
||||||
auto_fix_users(orphaned_users)
|
|
||||||
elif choice == '2':
|
|
||||||
delete_users(orphaned_users)
|
|
||||||
else:
|
|
||||||
print("\n❌ No changes made. Exiting.")
|
|
||||||
|
|
||||||
def auto_fix_users(users):
|
|
||||||
"""Create accounts for orphaned users"""
|
|
||||||
print("\n" + "=" * 80)
|
|
||||||
print("AUTO-FIXING ORPHANED USERS")
|
|
||||||
print("=" * 80 + "\n")
|
|
||||||
|
|
||||||
# Get or create free plan
|
|
||||||
try:
|
|
||||||
free_plan = Plan.objects.get(slug='free', is_active=True)
|
|
||||||
except Plan.DoesNotExist:
|
|
||||||
print("❌ ERROR: Free plan not found. Cannot create accounts.")
|
|
||||||
print(" Please create a 'free' plan first or assign users manually.")
|
|
||||||
return
|
|
||||||
|
|
||||||
fixed_count = 0
|
|
||||||
|
|
||||||
with transaction.atomic():
|
|
||||||
for user in users:
|
|
||||||
try:
|
|
||||||
# Generate account name
|
|
||||||
if user.first_name or user.last_name:
|
|
||||||
account_name = f"{user.first_name} {user.last_name}".strip()
|
|
||||||
else:
|
|
||||||
account_name = user.email.split('@')[0]
|
|
||||||
|
|
||||||
# Generate unique slug
|
|
||||||
base_slug = account_name.lower().replace(' ', '-').replace('_', '-')[:50] or 'account'
|
|
||||||
slug = base_slug
|
|
||||||
counter = 1
|
|
||||||
while Account.objects.filter(slug=slug).exists():
|
|
||||||
slug = f"{base_slug}-{counter}"
|
|
||||||
counter += 1
|
|
||||||
|
|
||||||
# Create account
|
|
||||||
account = Account.objects.create(
|
|
||||||
name=account_name,
|
|
||||||
slug=slug,
|
|
||||||
owner=user,
|
|
||||||
plan=free_plan,
|
|
||||||
credits=free_plan.get_effective_credits_per_month(),
|
|
||||||
status='trial',
|
|
||||||
billing_email=user.email,
|
|
||||||
)
|
|
||||||
|
|
||||||
# Assign account to user
|
|
||||||
user.account = account
|
|
||||||
user.save()
|
|
||||||
|
|
||||||
print(f"✅ Fixed user: {user.email}")
|
|
||||||
print(f" Created account: {account.name} (ID: {account.id})")
|
|
||||||
print(f" Credits: {account.credits}")
|
|
||||||
print()
|
|
||||||
|
|
||||||
fixed_count += 1
|
|
||||||
|
|
||||||
except Exception as e:
|
|
||||||
print(f"❌ ERROR fixing user {user.email}: {e}")
|
|
||||||
print()
|
|
||||||
|
|
||||||
print("=" * 80)
|
|
||||||
print(f"✅ Successfully fixed {fixed_count} user(s)")
|
|
||||||
print("=" * 80)
|
|
||||||
|
|
||||||
def delete_users(users):
|
|
||||||
"""Delete orphaned users"""
|
|
||||||
print("\n⚠️ WARNING: This will permanently delete the selected users!")
|
|
||||||
confirm = input("Type 'DELETE' to confirm: ").strip()
|
|
||||||
|
|
||||||
if confirm != 'DELETE':
|
|
||||||
print("\n❌ Deletion cancelled.")
|
|
||||||
return
|
|
||||||
|
|
||||||
count = users.count()
|
|
||||||
users.delete()
|
|
||||||
|
|
||||||
print(f"\n✅ Deleted {count} user(s)")
|
|
||||||
|
|
||||||
if __name__ == '__main__':
|
|
||||||
main()
|
|
||||||
3747
frontend/package-lock.json
generated
3747
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
1408
integration_views.py
1408
integration_views.py
File diff suppressed because it is too large
Load Diff
@@ -1,17 +0,0 @@
|
|||||||
# Sites Renderer Dev Image (Node 22 to satisfy Vite requirements)
|
|
||||||
FROM node:22-alpine
|
|
||||||
|
|
||||||
WORKDIR /app
|
|
||||||
|
|
||||||
# Copy package manifests first for better caching
|
|
||||||
COPY package*.json ./
|
|
||||||
|
|
||||||
RUN npm install --legacy-peer-deps
|
|
||||||
|
|
||||||
# Copy source (still bind-mounted at runtime, but needed for initial run)
|
|
||||||
COPY . .
|
|
||||||
|
|
||||||
EXPOSE 5176
|
|
||||||
|
|
||||||
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0", "--port", "5176"]
|
|
||||||
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
import js from '@eslint/js'
|
|
||||||
import globals from 'globals'
|
|
||||||
import reactHooks from 'eslint-plugin-react-hooks'
|
|
||||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
|
||||||
import tseslint from 'typescript-eslint'
|
|
||||||
|
|
||||||
export default tseslint.config(
|
|
||||||
{ ignores: ['dist'] },
|
|
||||||
{
|
|
||||||
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
|
||||||
files: ['**/*.{ts,tsx}'],
|
|
||||||
languageOptions: {
|
|
||||||
ecmaVersion: 2020,
|
|
||||||
globals: globals.browser,
|
|
||||||
},
|
|
||||||
plugins: {
|
|
||||||
'react-hooks': reactHooks,
|
|
||||||
'react-refresh': reactRefresh,
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
...reactHooks.configs.recommended.rules,
|
|
||||||
'react-refresh/only-export-components': [
|
|
||||||
'warn',
|
|
||||||
{ allowConstantExport: true },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>IGNY8 Sites</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="root"></div>
|
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
3816
sites/package-lock.json
generated
3816
sites/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,45 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "igny8-sites",
|
|
||||||
"private": true,
|
|
||||||
"version": "0.0.0",
|
|
||||||
"type": "module",
|
|
||||||
"scripts": {
|
|
||||||
"dev": "vite",
|
|
||||||
"build": "tsc -b && vite build",
|
|
||||||
"lint": "eslint .",
|
|
||||||
"preview": "vite preview",
|
|
||||||
"test": "vitest",
|
|
||||||
"test:ui": "vitest --ui",
|
|
||||||
"test:coverage": "vitest --coverage"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"axios": "^1.13.2",
|
|
||||||
"lucide-react": "^0.554.0",
|
|
||||||
"react": "^19.2.0",
|
|
||||||
"react-dom": "^19.2.0",
|
|
||||||
"react-hook-form": "^7.66.0",
|
|
||||||
"react-router-dom": "^7.9.6",
|
|
||||||
"zustand": "^5.0.8"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@eslint/js": "^9.39.1",
|
|
||||||
"@testing-library/jest-dom": "^6.6.3",
|
|
||||||
"@testing-library/react": "^16.2.0",
|
|
||||||
"@testing-library/user-event": "^14.5.1",
|
|
||||||
"@types/node": "^24.10.0",
|
|
||||||
"@types/react": "^19.2.2",
|
|
||||||
"@types/react-dom": "^19.2.2",
|
|
||||||
"@types/react-router-dom": "^5.3.3",
|
|
||||||
"@vitejs/plugin-react": "^5.1.0",
|
|
||||||
"@vitest/ui": "^1.0.4",
|
|
||||||
"eslint": "^9.39.1",
|
|
||||||
"eslint-plugin-react-hooks": "^7.0.1",
|
|
||||||
"eslint-plugin-react-refresh": "^0.4.24",
|
|
||||||
"globals": "^16.5.0",
|
|
||||||
"jsdom": "^25.0.1",
|
|
||||||
"typescript": "~5.9.3",
|
|
||||||
"typescript-eslint": "^8.46.3",
|
|
||||||
"vite": "^7.2.2",
|
|
||||||
"vitest": "^2.1.5"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.666 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB |
@@ -1,53 +0,0 @@
|
|||||||
import { lazy, Suspense } from 'react';
|
|
||||||
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
|
|
||||||
import ProtectedRoute from './shared/ProtectedRoute';
|
|
||||||
import BuilderLayout from './builder/components/layout/BuilderLayout';
|
|
||||||
|
|
||||||
// Lazy load builder pages (code-split to avoid loading in public sites)
|
|
||||||
const WizardPage = lazy(() => import('./builder/pages/wizard/WizardPage'));
|
|
||||||
const PreviewCanvas = lazy(() => import('./builder/pages/preview/PreviewCanvas'));
|
|
||||||
const SiteDashboard = lazy(() => import('./builder/pages/dashboard/SiteDashboard'));
|
|
||||||
|
|
||||||
// Renderer pages (load immediately for public sites)
|
|
||||||
const SiteRenderer = lazy(() => import('./pages/SiteRenderer'));
|
|
||||||
|
|
||||||
// Loading component
|
|
||||||
const LoadingFallback = () => (
|
|
||||||
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
|
|
||||||
<div>Loading...</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
return (
|
|
||||||
<BrowserRouter>
|
|
||||||
<Suspense fallback={<LoadingFallback />}>
|
|
||||||
<Routes>
|
|
||||||
{/* Public Site Renderer Routes (No Auth) */}
|
|
||||||
<Route path="/:siteSlug/:pageSlug?" element={<SiteRenderer />} />
|
|
||||||
<Route path="/:siteSlug" element={<SiteRenderer />} />
|
|
||||||
<Route path="/" element={<div>IGNY8 Sites Renderer</div>} />
|
|
||||||
|
|
||||||
{/* Builder Routes (Auth Required) */}
|
|
||||||
<Route
|
|
||||||
path="/builder/*"
|
|
||||||
element={
|
|
||||||
<ProtectedRoute>
|
|
||||||
<BuilderLayout>
|
|
||||||
<Routes>
|
|
||||||
<Route path="/" element={<WizardPage />} />
|
|
||||||
<Route path="preview" element={<PreviewCanvas />} />
|
|
||||||
<Route path="dashboard" element={<SiteDashboard />} />
|
|
||||||
<Route path="*" element={<Navigate to="/builder" replace />} />
|
|
||||||
</Routes>
|
|
||||||
</BuilderLayout>
|
|
||||||
</ProtectedRoute>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Routes>
|
|
||||||
</Suspense>
|
|
||||||
</BrowserRouter>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
@@ -1,55 +0,0 @@
|
|||||||
/**
|
|
||||||
* Tests for File Access
|
|
||||||
* Phase 5: Sites Renderer & Bulk Generation
|
|
||||||
*/
|
|
||||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
|
||||||
import { getFileUrl, getImageUrl } from '../utils/fileAccess';
|
|
||||||
|
|
||||||
// Mock fetch
|
|
||||||
global.fetch = vi.fn();
|
|
||||||
|
|
||||||
describe('File Access', () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
vi.clearAllMocks();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('loads images correctly', async () => {
|
|
||||||
// Test: File access works (images, documents, media)
|
|
||||||
const mockImageUrl = 'https://example.com/images/test.jpg';
|
|
||||||
|
|
||||||
(global.fetch as any).mockResolvedValueOnce({
|
|
||||||
ok: true,
|
|
||||||
url: mockImageUrl,
|
|
||||||
});
|
|
||||||
|
|
||||||
const url = await getImageUrl(1, 'test.jpg', 1);
|
|
||||||
expect(url).toBeDefined();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('loads documents correctly', async () => {
|
|
||||||
// Test: File access works (images, documents, media)
|
|
||||||
const mockDocUrl = 'https://example.com/documents/test.pdf';
|
|
||||||
|
|
||||||
(global.fetch as any).mockResolvedValueOnce({
|
|
||||||
ok: true,
|
|
||||||
url: mockDocUrl,
|
|
||||||
});
|
|
||||||
|
|
||||||
const url = await getFileUrl(1, 'documents', 'test.pdf', 1);
|
|
||||||
expect(url).toBeDefined();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('loads media files correctly', async () => {
|
|
||||||
// Test: File access works (images, documents, media)
|
|
||||||
const mockMediaUrl = 'https://example.com/media/test.mp4';
|
|
||||||
|
|
||||||
(global.fetch as any).mockResolvedValueOnce({
|
|
||||||
ok: true,
|
|
||||||
url: mockMediaUrl,
|
|
||||||
});
|
|
||||||
|
|
||||||
const url = await getFileUrl(1, 'media', 'test.mp4', 1);
|
|
||||||
expect(url).toBeDefined();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
@@ -1,86 +0,0 @@
|
|||||||
/**
|
|
||||||
* Tests for Layout Renderer
|
|
||||||
* Phase 5: Sites Renderer & Bulk Generation
|
|
||||||
*/
|
|
||||||
import { describe, it, expect } from 'vitest';
|
|
||||||
import { renderLayout } from '../utils/layoutRenderer';
|
|
||||||
|
|
||||||
describe('Layout Renderer', () => {
|
|
||||||
it('renders default layout correctly', () => {
|
|
||||||
// Test: Multiple layouts work correctly
|
|
||||||
const siteDefinition = {
|
|
||||||
layout: 'default',
|
|
||||||
pages: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
const result = renderLayout(siteDefinition);
|
|
||||||
expect(result).toBeDefined();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders minimal layout correctly', () => {
|
|
||||||
// Test: Multiple layouts work correctly
|
|
||||||
const siteDefinition = {
|
|
||||||
layout: 'minimal',
|
|
||||||
pages: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
const result = renderLayout(siteDefinition);
|
|
||||||
expect(result).toBeDefined();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders magazine layout correctly', () => {
|
|
||||||
// Test: Multiple layouts work correctly
|
|
||||||
const siteDefinition = {
|
|
||||||
layout: 'magazine',
|
|
||||||
pages: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
const result = renderLayout(siteDefinition);
|
|
||||||
expect(result).toBeDefined();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders ecommerce layout correctly', () => {
|
|
||||||
// Test: Multiple layouts work correctly
|
|
||||||
const siteDefinition = {
|
|
||||||
layout: 'ecommerce',
|
|
||||||
pages: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
const result = renderLayout(siteDefinition);
|
|
||||||
expect(result).toBeDefined();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders portfolio layout correctly', () => {
|
|
||||||
// Test: Multiple layouts work correctly
|
|
||||||
const siteDefinition = {
|
|
||||||
layout: 'portfolio',
|
|
||||||
pages: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
const result = renderLayout(siteDefinition);
|
|
||||||
expect(result).toBeDefined();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders blog layout correctly', () => {
|
|
||||||
// Test: Multiple layouts work correctly
|
|
||||||
const siteDefinition = {
|
|
||||||
layout: 'blog',
|
|
||||||
pages: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
const result = renderLayout(siteDefinition);
|
|
||||||
expect(result).toBeDefined();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders corporate layout correctly', () => {
|
|
||||||
// Test: Multiple layouts work correctly
|
|
||||||
const siteDefinition = {
|
|
||||||
layout: 'corporate',
|
|
||||||
pages: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
const result = renderLayout(siteDefinition);
|
|
||||||
expect(result).toBeDefined();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
@@ -1,49 +0,0 @@
|
|||||||
/**
|
|
||||||
* Tests for Site Definition Loader
|
|
||||||
* Phase 5: Sites Renderer & Bulk Generation
|
|
||||||
*/
|
|
||||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
|
||||||
import { loadSiteDefinition } from '../loaders/loadSiteDefinition';
|
|
||||||
|
|
||||||
// Mock fetch
|
|
||||||
global.fetch = vi.fn();
|
|
||||||
|
|
||||||
describe('Site Definition Loader', () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
vi.clearAllMocks();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('loads site definitions from API', async () => {
|
|
||||||
// Test: Sites renderer loads site definitions
|
|
||||||
const mockSiteDefinition = {
|
|
||||||
id: 1,
|
|
||||||
name: 'Test Site',
|
|
||||||
pages: [
|
|
||||||
{ id: 1, slug: 'home', title: 'Home' },
|
|
||||||
{ id: 2, slug: 'about', title: 'About' },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
(global.fetch as any).mockResolvedValueOnce({
|
|
||||||
ok: true,
|
|
||||||
json: async () => ({ data: mockSiteDefinition }),
|
|
||||||
});
|
|
||||||
|
|
||||||
const result = await loadSiteDefinition(1);
|
|
||||||
|
|
||||||
expect(result).toBeDefined();
|
|
||||||
expect(result.name).toBe('Test Site');
|
|
||||||
expect(result.pages).toHaveLength(2);
|
|
||||||
expect(global.fetch).toHaveBeenCalledWith(
|
|
||||||
expect.stringContaining('/api/v1/site-builder/blueprints/1/')
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('handles API errors gracefully', async () => {
|
|
||||||
// Test: Sites renderer loads site definitions
|
|
||||||
(global.fetch as any).mockRejectedValueOnce(new Error('API Error'));
|
|
||||||
|
|
||||||
await expect(loadSiteDefinition(1)).rejects.toThrow('API Error');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
/**
|
|
||||||
* Test Setup
|
|
||||||
* Phase 5: Sites Renderer Tests
|
|
||||||
*/
|
|
||||||
import { expect, afterEach } from 'vitest';
|
|
||||||
import { cleanup } from '@testing-library/react';
|
|
||||||
import '@testing-library/jest-dom';
|
|
||||||
|
|
||||||
// Cleanup after each test
|
|
||||||
afterEach(() => {
|
|
||||||
cleanup();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Mock window.matchMedia
|
|
||||||
Object.defineProperty(window, 'matchMedia', {
|
|
||||||
writable: true,
|
|
||||||
value: (query: string) => ({
|
|
||||||
matches: false,
|
|
||||||
media: query,
|
|
||||||
onchange: null,
|
|
||||||
addListener: () => {},
|
|
||||||
removeListener: () => {},
|
|
||||||
addEventListener: () => {},
|
|
||||||
removeEventListener: () => {},
|
|
||||||
dispatchEvent: () => {},
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
import { ReactNode } from 'react';
|
|
||||||
|
|
||||||
interface BuilderLayoutProps {
|
|
||||||
children: ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* BuilderLayout - Layout wrapper for Site Builder pages
|
|
||||||
* Provides consistent layout for builder routes
|
|
||||||
*/
|
|
||||||
export default function BuilderLayout({ children }: BuilderLayoutProps) {
|
|
||||||
return (
|
|
||||||
<div className="builder-layout" style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
|
|
||||||
<header style={{ padding: '1rem', borderBottom: '1px solid #e5e7eb', backgroundColor: '#fff' }}>
|
|
||||||
<h1 style={{ margin: 0, fontSize: '1.5rem', fontWeight: 600 }}>IGNY8 Site Builder</h1>
|
|
||||||
</header>
|
|
||||||
<main style={{ flex: 1, padding: '2rem' }}>
|
|
||||||
{children}
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
/**
|
|
||||||
* SiteDashboard - Site Builder Dashboard
|
|
||||||
* Placeholder component for builder dashboard functionality
|
|
||||||
*/
|
|
||||||
export default function SiteDashboard() {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h2>Site Builder Dashboard</h2>
|
|
||||||
<p>This is a placeholder for the Site Builder Dashboard.</p>
|
|
||||||
<p>The builder functionality can be accessed from the main app at <code>/sites/builder/dashboard</code></p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
/**
|
|
||||||
* PreviewCanvas - Site Builder Preview
|
|
||||||
* Placeholder component for builder preview functionality
|
|
||||||
*/
|
|
||||||
export default function PreviewCanvas() {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h2>Site Builder Preview</h2>
|
|
||||||
<p>This is a placeholder for the Site Builder Preview.</p>
|
|
||||||
<p>The builder functionality can be accessed from the main app at <code>/sites/builder/preview</code></p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
/**
|
|
||||||
* WizardPage - Site Builder Wizard
|
|
||||||
* Placeholder component for builder wizard functionality
|
|
||||||
*/
|
|
||||||
export default function WizardPage() {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h2>Site Builder Wizard</h2>
|
|
||||||
<p>This is a placeholder for the Site Builder Wizard.</p>
|
|
||||||
<p>The builder functionality can be accessed from the main app at <code>/sites/builder</code></p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
/* Import shared component styles */
|
|
||||||
/* Note: Using relative path since @shared alias may not work in CSS */
|
|
||||||
/* These will be imported via JavaScript instead */
|
|
||||||
|
|
||||||
:root {
|
|
||||||
font-family: 'Inter', 'Inter var', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
||||||
color: #0f172a;
|
|
||||||
background-color: #f5f7fb;
|
|
||||||
font-synthesis: none;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
*,
|
|
||||||
*::before,
|
|
||||||
*::after {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
background: #f5f7fb;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
font-family: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
@@ -1,182 +0,0 @@
|
|||||||
/**
|
|
||||||
* Site Definition Loader
|
|
||||||
* Phase 5: Sites Renderer & Publishing
|
|
||||||
*
|
|
||||||
* Loads site definitions from the filesystem or API.
|
|
||||||
*/
|
|
||||||
import axios from 'axios';
|
|
||||||
import type { SiteDefinition } from '../types';
|
|
||||||
|
|
||||||
const SITES_DATA_PATH = import.meta.env.SITES_DATA_PATH || '/sites';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get API base URL - auto-detect based on current origin
|
|
||||||
*/
|
|
||||||
function getApiBaseUrl(): string {
|
|
||||||
// First check environment variables
|
|
||||||
const envUrl = import.meta.env.VITE_API_URL;
|
|
||||||
if (envUrl) {
|
|
||||||
return envUrl.endsWith('/api') ? envUrl : `${envUrl}/api`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Auto-detect based on current origin (browser only)
|
|
||||||
if (typeof window !== 'undefined') {
|
|
||||||
const origin = window.location.origin;
|
|
||||||
|
|
||||||
// If accessing via IP address, use direct backend port
|
|
||||||
if (/^\d+\.\d+\.\d+\.\d+/.test(origin) || origin.includes('localhost') || origin.includes('127.0.0.1')) {
|
|
||||||
// Backend is on port 8011 (external) when accessed via IP
|
|
||||||
if (origin.includes(':8024')) {
|
|
||||||
return origin.replace(':8024', ':8011') + '/api';
|
|
||||||
}
|
|
||||||
// Default: try port 8011
|
|
||||||
return origin.split(':')[0] + ':8011/api';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Production: use subdomain
|
|
||||||
return 'https://api.igny8.com/api';
|
|
||||||
}
|
|
||||||
|
|
||||||
const API_URL = getApiBaseUrl();
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Resolve site slug to site ID.
|
|
||||||
* Queries the Site API to get the site ID from the slug.
|
|
||||||
*/
|
|
||||||
async function resolveSiteIdFromSlug(siteSlug: string): Promise<number> {
|
|
||||||
try {
|
|
||||||
// Query sites by slug - slug is unique per account, but we need to search across all accounts for public sites
|
|
||||||
const response = await axios.get(`${API_URL}/v1/auth/sites/`, {
|
|
||||||
params: { slug: siteSlug },
|
|
||||||
timeout: 10000,
|
|
||||||
headers: {
|
|
||||||
'Accept': 'application/json',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const sites = Array.isArray(response.data?.results) ? response.data.results :
|
|
||||||
Array.isArray(response.data) ? response.data : [];
|
|
||||||
|
|
||||||
if (sites.length > 0) {
|
|
||||||
return sites[0].id;
|
|
||||||
}
|
|
||||||
|
|
||||||
throw new Error(`Site with slug "${siteSlug}" not found`);
|
|
||||||
} catch (error) {
|
|
||||||
if (axios.isAxiosError(error)) {
|
|
||||||
if (error.response?.status === 404) {
|
|
||||||
throw new Error(`Site with slug "${siteSlug}" not found`);
|
|
||||||
}
|
|
||||||
throw new Error(`Failed to resolve site slug: ${error.message}`);
|
|
||||||
}
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Load site definition by site slug.
|
|
||||||
* First resolves slug to ID, then tries to load from filesystem (deployed sites),
|
|
||||||
* then falls back to API.
|
|
||||||
*/
|
|
||||||
export async function loadSiteDefinition(siteSlug: string): Promise<SiteDefinition> {
|
|
||||||
// First, resolve slug to site ID
|
|
||||||
let siteId: number;
|
|
||||||
try {
|
|
||||||
siteId = await resolveSiteIdFromSlug(siteSlug);
|
|
||||||
} catch (error) {
|
|
||||||
throw error; // Re-throw slug resolution errors
|
|
||||||
}
|
|
||||||
|
|
||||||
// Try API endpoint for deployed site definition first
|
|
||||||
try {
|
|
||||||
const response = await axios.get(`${API_URL}/v1/publisher/sites/${siteId}/definition/`, {
|
|
||||||
timeout: 10000, // 10 second timeout
|
|
||||||
headers: {
|
|
||||||
'Accept': 'application/json',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
if (response.data) {
|
|
||||||
return response.data as SiteDefinition;
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
// API load failed, try blueprint endpoint as fallback
|
|
||||||
console.error('Failed to load deployed site definition:', error);
|
|
||||||
if (axios.isAxiosError(error)) {
|
|
||||||
console.error('Error details:', {
|
|
||||||
message: error.message,
|
|
||||||
code: error.code,
|
|
||||||
response: error.response?.status,
|
|
||||||
url: error.config?.url,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fallback to blueprint API (for non-deployed sites)
|
|
||||||
try {
|
|
||||||
const response = await axios.get(`${API_URL}/v1/site-builder/blueprints/?site=${siteId}`);
|
|
||||||
const blueprints = Array.isArray(response.data?.results) ? response.data.results :
|
|
||||||
Array.isArray(response.data) ? response.data : [];
|
|
||||||
|
|
||||||
if (blueprints.length > 0) {
|
|
||||||
const blueprint = blueprints[0]; // Get latest blueprint
|
|
||||||
// Transform blueprint to site definition format
|
|
||||||
return transformBlueprintToSiteDefinition(blueprint);
|
|
||||||
}
|
|
||||||
|
|
||||||
throw new Error(`No blueprint found for site ${siteSlug}`);
|
|
||||||
} catch (error) {
|
|
||||||
if (axios.isAxiosError(error)) {
|
|
||||||
throw new Error(`Failed to load site: ${error.message}`);
|
|
||||||
}
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Transform SiteBlueprint to SiteDefinition format.
|
|
||||||
*/
|
|
||||||
function transformBlueprintToSiteDefinition(blueprint: any): SiteDefinition {
|
|
||||||
return {
|
|
||||||
id: blueprint.id,
|
|
||||||
name: blueprint.name,
|
|
||||||
description: blueprint.description,
|
|
||||||
version: blueprint.version,
|
|
||||||
layout: blueprint.structure_json?.layout || 'default',
|
|
||||||
theme: blueprint.structure_json?.theme || {},
|
|
||||||
navigation: blueprint.structure_json?.navigation || [],
|
|
||||||
pages: blueprint.pages?.map((page: any) => ({
|
|
||||||
id: page.id,
|
|
||||||
slug: page.slug,
|
|
||||||
title: page.title,
|
|
||||||
type: page.type,
|
|
||||||
blocks: page.blocks_json || [],
|
|
||||||
status: page.status,
|
|
||||||
order: page.order || 0,
|
|
||||||
})) || [],
|
|
||||||
config: blueprint.config_json || {},
|
|
||||||
created_at: blueprint.created_at,
|
|
||||||
updated_at: blueprint.updated_at,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Load site definition from a specific version.
|
|
||||||
*/
|
|
||||||
export async function loadSiteDefinitionByVersion(
|
|
||||||
siteId: string,
|
|
||||||
version: number
|
|
||||||
): Promise<SiteDefinition> {
|
|
||||||
try {
|
|
||||||
const fsPath = `${SITES_DATA_PATH}/clients/${siteId}/v${version}/site.json`;
|
|
||||||
const response = await fetch(fsPath);
|
|
||||||
if (response.ok) {
|
|
||||||
const definition = await response.json();
|
|
||||||
return definition;
|
|
||||||
}
|
|
||||||
throw new Error(`Version ${version} not found`);
|
|
||||||
} catch (error) {
|
|
||||||
throw new Error(`Failed to load site version ${version}: ${error}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
import { StrictMode } from 'react';
|
|
||||||
import { createRoot } from 'react-dom/client';
|
|
||||||
import App from './App.tsx';
|
|
||||||
import './index.css';
|
|
||||||
|
|
||||||
// Note: Shared component CSS imports removed - CSS files not accessible in container
|
|
||||||
// Components will work without shared CSS, just without the shared styles
|
|
||||||
// To add shared styles later, either:
|
|
||||||
// 1. Copy CSS files to sites/src/styles/shared/
|
|
||||||
// 2. Or mount frontend directory and use proper path
|
|
||||||
|
|
||||||
createRoot(document.getElementById('root')!).render(
|
|
||||||
<StrictMode>
|
|
||||||
<App />
|
|
||||||
</StrictMode>,
|
|
||||||
);
|
|
||||||
@@ -1,160 +0,0 @@
|
|||||||
import { useEffect, useState } from 'react';
|
|
||||||
import { useParams, Link } from 'react-router-dom';
|
|
||||||
import { loadSiteDefinition } from '../loaders/loadSiteDefinition';
|
|
||||||
import { renderLayout } from '../utils/layoutRenderer';
|
|
||||||
import type { SiteDefinition } from '../types';
|
|
||||||
|
|
||||||
function SiteRenderer() {
|
|
||||||
const { siteSlug, pageSlug } = useParams<{ siteSlug: string; pageSlug?: string }>();
|
|
||||||
const [siteDefinition, setSiteDefinition] = useState<SiteDefinition | null>(null);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!siteSlug) {
|
|
||||||
setError('Site slug is required');
|
|
||||||
setLoading(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
loadSiteDefinition(siteSlug)
|
|
||||||
.then((definition) => {
|
|
||||||
setSiteDefinition(definition);
|
|
||||||
setLoading(false);
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
setError(err.message || 'Failed to load site');
|
|
||||||
setLoading(false);
|
|
||||||
});
|
|
||||||
}, [siteSlug, pageSlug]);
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return <div>Loading site...</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return <div>Error: {error}</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!siteDefinition) {
|
|
||||||
return <div>Site not found</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Build navigation from site definition
|
|
||||||
// Show all published/ready pages (excluding home and draft/generating)
|
|
||||||
// Use explicit navigation if available, otherwise auto-generate from pages
|
|
||||||
const navigation = siteDefinition.navigation && siteDefinition.navigation.length > 0
|
|
||||||
? siteDefinition.navigation
|
|
||||||
: siteDefinition.pages
|
|
||||||
.filter(p =>
|
|
||||||
p.slug !== 'home' &&
|
|
||||||
(p.status === 'published' || p.status === 'ready') &&
|
|
||||||
p.status !== 'draft' &&
|
|
||||||
p.status !== 'generating'
|
|
||||||
)
|
|
||||||
.sort((a, b) => (a.order || 0) - (b.order || 0))
|
|
||||||
.map(page => ({
|
|
||||||
label: page.title,
|
|
||||||
slug: page.slug,
|
|
||||||
order: page.order || 0
|
|
||||||
}));
|
|
||||||
|
|
||||||
// Filter pages based on current route
|
|
||||||
const currentPageSlug = pageSlug || 'home';
|
|
||||||
const currentPage = siteDefinition.pages.find(p => p.slug === currentPageSlug);
|
|
||||||
|
|
||||||
// Show only the current page (home page on home route, specific page on page route)
|
|
||||||
const pagesToRender = currentPage
|
|
||||||
? [currentPage]
|
|
||||||
: []; // Fallback: no page found
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="site-renderer" style={{
|
|
||||||
maxWidth: '1200px',
|
|
||||||
margin: '0 auto',
|
|
||||||
padding: '0 1rem',
|
|
||||||
width: '100%'
|
|
||||||
}}>
|
|
||||||
{/* Navigation Menu */}
|
|
||||||
<nav style={{
|
|
||||||
padding: '1rem 0',
|
|
||||||
borderBottom: '1px solid #e5e7eb',
|
|
||||||
marginBottom: '2rem'
|
|
||||||
}}>
|
|
||||||
<div style={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
flexWrap: 'wrap',
|
|
||||||
gap: '1rem'
|
|
||||||
}}>
|
|
||||||
<Link
|
|
||||||
to={`/${siteSlug}`}
|
|
||||||
style={{
|
|
||||||
fontSize: '1.5rem',
|
|
||||||
fontWeight: 'bold',
|
|
||||||
textDecoration: 'none',
|
|
||||||
color: '#0f172a'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{siteDefinition.name}
|
|
||||||
</Link>
|
|
||||||
<div style={{
|
|
||||||
display: 'flex',
|
|
||||||
gap: '1.5rem',
|
|
||||||
flexWrap: 'wrap'
|
|
||||||
}}>
|
|
||||||
<Link
|
|
||||||
to={`/${siteSlug}`}
|
|
||||||
style={{
|
|
||||||
textDecoration: 'none',
|
|
||||||
color: currentPageSlug === 'home' ? '#4c1d95' : '#64748b',
|
|
||||||
fontWeight: currentPageSlug === 'home' ? 600 : 400
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Home
|
|
||||||
</Link>
|
|
||||||
{navigation.map((item) => (
|
|
||||||
<Link
|
|
||||||
key={item.slug}
|
|
||||||
to={`/${siteSlug}/${item.slug}`}
|
|
||||||
style={{
|
|
||||||
textDecoration: 'none',
|
|
||||||
color: currentPageSlug === item.slug ? '#4c1d95' : '#64748b',
|
|
||||||
fontWeight: currentPageSlug === item.slug ? 600 : 400
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{item.label}
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
{/* Main Content */}
|
|
||||||
{renderLayout({ ...siteDefinition, pages: pagesToRender })}
|
|
||||||
|
|
||||||
{/* Footer */}
|
|
||||||
<footer style={{
|
|
||||||
marginTop: '4rem',
|
|
||||||
padding: '2rem 0',
|
|
||||||
borderTop: '1px solid #e5e7eb',
|
|
||||||
textAlign: 'center',
|
|
||||||
color: '#64748b',
|
|
||||||
fontSize: '0.875rem'
|
|
||||||
}}>
|
|
||||||
<p style={{ margin: 0 }}>
|
|
||||||
© {new Date().getFullYear()} {siteDefinition.name}. All rights reserved.
|
|
||||||
</p>
|
|
||||||
{siteDefinition.description && (
|
|
||||||
<p style={{ margin: '0.5rem 0 0', fontSize: '0.75rem' }}>
|
|
||||||
{siteDefinition.description}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SiteRenderer;
|
|
||||||
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
import { useEffect, useState } from 'react';
|
|
||||||
import { Navigate, useLocation } from 'react-router-dom';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ProtectedRoute component that checks for authentication token.
|
|
||||||
* Redirects to login if not authenticated.
|
|
||||||
*/
|
|
||||||
interface ProtectedRouteProps {
|
|
||||||
children: React.ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function ProtectedRoute({ children }: ProtectedRouteProps) {
|
|
||||||
const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
|
|
||||||
const location = useLocation();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// Check for JWT token in localStorage
|
|
||||||
const token = localStorage.getItem('auth-storage');
|
|
||||||
if (token) {
|
|
||||||
try {
|
|
||||||
const authData = JSON.parse(token);
|
|
||||||
setIsAuthenticated(!!authData?.state?.token);
|
|
||||||
} catch {
|
|
||||||
setIsAuthenticated(false);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
setIsAuthenticated(false);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
if (isAuthenticated === null) {
|
|
||||||
// Still checking authentication
|
|
||||||
return <div>Checking authentication...</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!isAuthenticated) {
|
|
||||||
// Redirect to login (or main app login page)
|
|
||||||
// In production, this might redirect to app.igny8.com/login
|
|
||||||
return <Navigate to="/login" state={{ from: location }} replace />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return <>{children}</>;
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
export interface SiteDefinition {
|
|
||||||
id: number;
|
|
||||||
name: string;
|
|
||||||
description?: string;
|
|
||||||
version: number;
|
|
||||||
layout: string;
|
|
||||||
theme: Record<string, any>;
|
|
||||||
navigation: NavigationItem[];
|
|
||||||
pages: PageDefinition[];
|
|
||||||
config: Record<string, any>;
|
|
||||||
created_at: string;
|
|
||||||
updated_at: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface NavigationItem {
|
|
||||||
label: string;
|
|
||||||
slug: string;
|
|
||||||
order: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface PageDefinition {
|
|
||||||
id: number;
|
|
||||||
slug: string;
|
|
||||||
title: string;
|
|
||||||
type: string;
|
|
||||||
blocks: Block[];
|
|
||||||
status: string;
|
|
||||||
order?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Block {
|
|
||||||
type: string;
|
|
||||||
data: Record<string, any>;
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,142 +0,0 @@
|
|||||||
/**
|
|
||||||
* File Access Utility
|
|
||||||
* Phase 5: Sites Renderer & Publishing
|
|
||||||
*
|
|
||||||
* Integrates with Phase 3's SiteBuilderFileService for file access.
|
|
||||||
* Provides utilities to access site assets (images, documents, media).
|
|
||||||
*/
|
|
||||||
|
|
||||||
const SITES_DATA_PATH = import.meta.env.SITES_DATA_PATH || '/sites';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get API base URL - auto-detect based on current origin
|
|
||||||
*/
|
|
||||||
function getApiBaseUrl(): string {
|
|
||||||
const envUrl = import.meta.env.VITE_API_URL;
|
|
||||||
if (envUrl) {
|
|
||||||
return envUrl.endsWith('/api') ? envUrl : `${envUrl}/api`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof window !== 'undefined') {
|
|
||||||
const origin = window.location.origin;
|
|
||||||
if (/^\d+\.\d+\.\d+\.\d+/.test(origin) || origin.includes('localhost') || origin.includes('127.0.0.1')) {
|
|
||||||
if (origin.includes(':8024')) {
|
|
||||||
return origin.replace(':8024', ':8011') + '/api';
|
|
||||||
}
|
|
||||||
return origin.split(':')[0] + ':8011/api';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return 'https://api.igny8.com/api';
|
|
||||||
}
|
|
||||||
|
|
||||||
const API_URL = getApiBaseUrl();
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get file URL for a site asset.
|
|
||||||
*
|
|
||||||
* @param siteId - Site ID
|
|
||||||
* @param version - Site version (optional, defaults to 'latest')
|
|
||||||
* @param filePath - Relative path to file from assets directory
|
|
||||||
* @returns Full URL to the asset
|
|
||||||
*/
|
|
||||||
export function getSiteAssetUrl(
|
|
||||||
siteId: string | number,
|
|
||||||
filePath: string,
|
|
||||||
version: string | number = 'latest'
|
|
||||||
): string {
|
|
||||||
// Try filesystem first (for deployed sites)
|
|
||||||
const fsPath = `${SITES_DATA_PATH}/clients/${siteId}/v${version}/assets/${filePath}`;
|
|
||||||
|
|
||||||
// In browser, we need to use API endpoint
|
|
||||||
// The backend will serve files from the filesystem
|
|
||||||
return `${API_URL}/v1/site-builder/assets/${siteId}/${version}/${filePath}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get image URL for a site.
|
|
||||||
*/
|
|
||||||
export function getSiteImageUrl(
|
|
||||||
siteId: string | number,
|
|
||||||
imagePath: string,
|
|
||||||
version: string | number = 'latest'
|
|
||||||
): string {
|
|
||||||
return getSiteAssetUrl(siteId, `images/${imagePath}`, version);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get document URL for a site.
|
|
||||||
*/
|
|
||||||
export function getSiteDocumentUrl(
|
|
||||||
siteId: string | number,
|
|
||||||
documentPath: string,
|
|
||||||
version: string | number = 'latest'
|
|
||||||
): string {
|
|
||||||
return getSiteAssetUrl(siteId, `documents/${documentPath}`, version);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get media URL for a site.
|
|
||||||
*/
|
|
||||||
export function getSiteMediaUrl(
|
|
||||||
siteId: string | number,
|
|
||||||
mediaPath: string,
|
|
||||||
version: string | number = 'latest'
|
|
||||||
): string {
|
|
||||||
return getSiteAssetUrl(siteId, `media/${mediaPath}`, version);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Check if a file exists.
|
|
||||||
*
|
|
||||||
* @param siteId - Site ID
|
|
||||||
* @param filePath - Relative path to file
|
|
||||||
* @param version - Site version
|
|
||||||
* @returns Promise that resolves to true if file exists
|
|
||||||
*/
|
|
||||||
export async function fileExists(
|
|
||||||
siteId: string | number,
|
|
||||||
filePath: string,
|
|
||||||
version: string | number = 'latest'
|
|
||||||
): Promise<boolean> {
|
|
||||||
try {
|
|
||||||
const url = getSiteAssetUrl(siteId, filePath, version);
|
|
||||||
const response = await fetch(url, { method: 'HEAD' });
|
|
||||||
return response.ok;
|
|
||||||
} catch {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Load file content as text.
|
|
||||||
*/
|
|
||||||
export async function loadFileAsText(
|
|
||||||
siteId: string | number,
|
|
||||||
filePath: string,
|
|
||||||
version: string | number = 'latest'
|
|
||||||
): Promise<string> {
|
|
||||||
const url = getSiteAssetUrl(siteId, filePath, version);
|
|
||||||
const response = await fetch(url);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`Failed to load file: ${filePath}`);
|
|
||||||
}
|
|
||||||
return response.text();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Load file content as blob.
|
|
||||||
*/
|
|
||||||
export async function loadFileAsBlob(
|
|
||||||
siteId: string | number,
|
|
||||||
filePath: string,
|
|
||||||
version: string | number = 'latest'
|
|
||||||
): Promise<Blob> {
|
|
||||||
const url = getSiteAssetUrl(siteId, filePath, version);
|
|
||||||
const response = await fetch(url);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`Failed to load file: ${filePath}`);
|
|
||||||
}
|
|
||||||
return response.blob();
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,245 +0,0 @@
|
|||||||
/**
|
|
||||||
* Layout Renderer
|
|
||||||
* Phase 5: Sites Renderer & Publishing
|
|
||||||
*
|
|
||||||
* Renders different layout types for sites using shared components.
|
|
||||||
*/
|
|
||||||
import React from 'react';
|
|
||||||
import type { SiteDefinition } from '../types';
|
|
||||||
import { renderTemplate } from './templateEngine';
|
|
||||||
import { renderPageByType } from './pageTypeRenderer';
|
|
||||||
import {
|
|
||||||
DefaultLayout,
|
|
||||||
MinimalLayout,
|
|
||||||
MagazineLayout,
|
|
||||||
EcommerceLayout,
|
|
||||||
PortfolioLayout,
|
|
||||||
BlogLayout,
|
|
||||||
CorporateLayout,
|
|
||||||
} from '@shared/layouts';
|
|
||||||
|
|
||||||
export type LayoutType =
|
|
||||||
| 'default'
|
|
||||||
| 'minimal'
|
|
||||||
| 'magazine'
|
|
||||||
| 'ecommerce'
|
|
||||||
| 'portfolio'
|
|
||||||
| 'blog'
|
|
||||||
| 'corporate';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render site layout based on site definition.
|
|
||||||
*/
|
|
||||||
export function renderLayout(siteDefinition: SiteDefinition): React.ReactElement {
|
|
||||||
const layoutType = siteDefinition.layout as LayoutType;
|
|
||||||
|
|
||||||
switch (layoutType) {
|
|
||||||
case 'minimal':
|
|
||||||
return renderMinimalLayout(siteDefinition);
|
|
||||||
case 'magazine':
|
|
||||||
return renderMagazineLayout(siteDefinition);
|
|
||||||
case 'ecommerce':
|
|
||||||
return renderEcommerceLayout(siteDefinition);
|
|
||||||
case 'portfolio':
|
|
||||||
return renderPortfolioLayout(siteDefinition);
|
|
||||||
case 'blog':
|
|
||||||
return renderBlogLayout(siteDefinition);
|
|
||||||
case 'corporate':
|
|
||||||
return renderCorporateLayout(siteDefinition);
|
|
||||||
case 'default':
|
|
||||||
default:
|
|
||||||
return renderDefaultLayout(siteDefinition);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Default layout: Standard header, content, footer.
|
|
||||||
* Uses shared DefaultLayout component with fully styled modern design.
|
|
||||||
*/
|
|
||||||
function renderDefaultLayout(siteDefinition: SiteDefinition): React.ReactElement {
|
|
||||||
// Find home page for hero (only show hero on home page or when showing all pages)
|
|
||||||
const homePage = siteDefinition.pages.find(p => p.slug === 'home');
|
|
||||||
const heroBlock = homePage?.blocks?.find(b => b.type === 'hero');
|
|
||||||
|
|
||||||
// Only show hero if we're on home page or showing all pages
|
|
||||||
const isHomePage = siteDefinition.pages.length === 1 && siteDefinition.pages[0]?.slug === 'home';
|
|
||||||
const showHero = isHomePage || (homePage && siteDefinition.pages.length > 1);
|
|
||||||
const hero: React.ReactNode = (showHero && heroBlock) ? (renderTemplate(heroBlock) as React.ReactNode) : undefined;
|
|
||||||
|
|
||||||
// Render all pages using page-type-specific templates
|
|
||||||
const sections = siteDefinition.pages
|
|
||||||
.filter((page) => page.status !== 'draft' && page.status !== 'generating')
|
|
||||||
.sort((a, b) => (a.order || 0) - (b.order || 0))
|
|
||||||
.map((page) => {
|
|
||||||
// Use page-type-specific renderer if available
|
|
||||||
const blocksToRender = page.slug === 'home' && heroBlock && showHero
|
|
||||||
? page.blocks?.filter(b => b.type !== 'hero') || []
|
|
||||||
: page.blocks || [];
|
|
||||||
|
|
||||||
// Render using page-type template
|
|
||||||
return (
|
|
||||||
<div key={page.id} className="page-wrapper" data-page-slug={page.slug}>
|
|
||||||
{renderPageByType(page, blocksToRender)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DefaultLayout
|
|
||||||
hero={hero as any}
|
|
||||||
sections={sections}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Minimal layout: Clean, minimal design.
|
|
||||||
* Uses shared MinimalLayout component.
|
|
||||||
*/
|
|
||||||
function renderMinimalLayout(siteDefinition: SiteDefinition): React.ReactElement {
|
|
||||||
const mainContent = (
|
|
||||||
<>
|
|
||||||
{siteDefinition.pages
|
|
||||||
.filter((page) => page.status !== 'draft' && page.status !== 'generating')
|
|
||||||
.sort((a, b) => (a.order || 0) - (b.order || 0))
|
|
||||||
.map((page) => (
|
|
||||||
<div key={page.id} className="page-wrapper" data-page-slug={page.slug}>
|
|
||||||
{renderPageByType(page, page.blocks || [])}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<MinimalLayout>
|
|
||||||
{mainContent}
|
|
||||||
</MinimalLayout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Magazine layout: Editorial, content-focused.
|
|
||||||
* Uses shared MagazineLayout component.
|
|
||||||
*/
|
|
||||||
function renderMagazineLayout(siteDefinition: SiteDefinition): React.ReactElement {
|
|
||||||
const mainContent = (
|
|
||||||
<>
|
|
||||||
{siteDefinition.pages
|
|
||||||
.filter((page) => page.status !== 'draft' && page.status !== 'generating')
|
|
||||||
.sort((a, b) => (a.order || 0) - (b.order || 0))
|
|
||||||
.map((page) => (
|
|
||||||
<div key={page.id} className="page-wrapper" data-page-slug={page.slug}>
|
|
||||||
{renderPageByType(page, page.blocks || [])}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<MagazineLayout
|
|
||||||
mainContent={mainContent}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Ecommerce layout: Product-focused.
|
|
||||||
* Uses shared EcommerceLayout component.
|
|
||||||
*/
|
|
||||||
function renderEcommerceLayout(siteDefinition: SiteDefinition): React.ReactElement {
|
|
||||||
const mainContent = (
|
|
||||||
<>
|
|
||||||
{siteDefinition.pages
|
|
||||||
.filter((page) => page.status !== 'draft' && page.status !== 'generating')
|
|
||||||
.sort((a, b) => (a.order || 0) - (b.order || 0))
|
|
||||||
.map((page) => (
|
|
||||||
<div key={page.id} className="page-wrapper" data-page-slug={page.slug}>
|
|
||||||
{renderPageByType(page, page.blocks || [])}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<EcommerceLayout
|
|
||||||
mainContent={mainContent}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Portfolio layout: Showcase.
|
|
||||||
* Uses shared PortfolioLayout component.
|
|
||||||
*/
|
|
||||||
function renderPortfolioLayout(siteDefinition: SiteDefinition): React.ReactElement {
|
|
||||||
const mainContent = (
|
|
||||||
<>
|
|
||||||
{siteDefinition.pages
|
|
||||||
.filter((page) => page.status !== 'draft' && page.status !== 'generating')
|
|
||||||
.sort((a, b) => (a.order || 0) - (b.order || 0))
|
|
||||||
.map((page) => (
|
|
||||||
<div key={page.id} className="page-wrapper" data-page-slug={page.slug}>
|
|
||||||
{renderPageByType(page, page.blocks || [])}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<PortfolioLayout
|
|
||||||
mainContent={mainContent}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Blog layout: Content-first.
|
|
||||||
* Uses shared BlogLayout component.
|
|
||||||
*/
|
|
||||||
function renderBlogLayout(siteDefinition: SiteDefinition): React.ReactElement {
|
|
||||||
const mainContent = (
|
|
||||||
<>
|
|
||||||
{siteDefinition.pages
|
|
||||||
.filter((page) => page.status !== 'draft' && page.status !== 'generating')
|
|
||||||
.sort((a, b) => (a.order || 0) - (b.order || 0))
|
|
||||||
.map((page) => (
|
|
||||||
<div key={page.id} className="page-wrapper" data-page-slug={page.slug}>
|
|
||||||
{renderPageByType(page, page.blocks || [])}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<BlogLayout
|
|
||||||
mainContent={mainContent}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Corporate layout: Business.
|
|
||||||
* Uses shared CorporateLayout component.
|
|
||||||
*/
|
|
||||||
function renderCorporateLayout(siteDefinition: SiteDefinition): React.ReactElement {
|
|
||||||
const mainContent = (
|
|
||||||
<>
|
|
||||||
{siteDefinition.pages
|
|
||||||
.filter((page) => page.status !== 'draft' && page.status !== 'generating')
|
|
||||||
.sort((a, b) => (a.order || 0) - (b.order || 0))
|
|
||||||
.map((page) => (
|
|
||||||
<div key={page.id} className="page-wrapper" data-page-slug={page.slug}>
|
|
||||||
{renderPageByType(page, page.blocks || [])}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<CorporateLayout
|
|
||||||
mainContent={mainContent}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Note: Navigation and page rendering are now handled within each layout component
|
|
||||||
@@ -1,279 +0,0 @@
|
|||||||
/**
|
|
||||||
* Layout Renderer
|
|
||||||
* Phase 5: Sites Renderer & Publishing
|
|
||||||
*
|
|
||||||
* Renders different layout types for sites using shared components.
|
|
||||||
*/
|
|
||||||
import React from 'react';
|
|
||||||
import type { SiteDefinition } from '../types';
|
|
||||||
import { renderTemplate } from './templateEngine';
|
|
||||||
import {
|
|
||||||
DefaultLayout,
|
|
||||||
MinimalLayout,
|
|
||||||
MagazineLayout,
|
|
||||||
EcommerceLayout,
|
|
||||||
PortfolioLayout,
|
|
||||||
BlogLayout,
|
|
||||||
CorporateLayout,
|
|
||||||
} from '@shared/layouts';
|
|
||||||
|
|
||||||
export type LayoutType =
|
|
||||||
| 'default'
|
|
||||||
| 'minimal'
|
|
||||||
| 'magazine'
|
|
||||||
| 'ecommerce'
|
|
||||||
| 'portfolio'
|
|
||||||
| 'blog'
|
|
||||||
| 'corporate';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render site layout based on site definition.
|
|
||||||
*/
|
|
||||||
export function renderLayout(siteDefinition: SiteDefinition): React.ReactElement {
|
|
||||||
const layoutType = siteDefinition.layout as LayoutType;
|
|
||||||
|
|
||||||
switch (layoutType) {
|
|
||||||
case 'minimal':
|
|
||||||
return renderMinimalLayout(siteDefinition);
|
|
||||||
case 'magazine':
|
|
||||||
return renderMagazineLayout(siteDefinition);
|
|
||||||
case 'ecommerce':
|
|
||||||
return renderEcommerceLayout(siteDefinition);
|
|
||||||
case 'portfolio':
|
|
||||||
return renderPortfolioLayout(siteDefinition);
|
|
||||||
case 'blog':
|
|
||||||
return renderBlogLayout(siteDefinition);
|
|
||||||
case 'corporate':
|
|
||||||
return renderCorporateLayout(siteDefinition);
|
|
||||||
case 'default':
|
|
||||||
default:
|
|
||||||
return renderDefaultLayout(siteDefinition);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Default layout: Standard header, content, footer.
|
|
||||||
* Uses shared DefaultLayout component with fully styled modern design.
|
|
||||||
*/
|
|
||||||
function renderDefaultLayout(siteDefinition: SiteDefinition): React.ReactElement {
|
|
||||||
// Find home page for hero
|
|
||||||
const homePage = siteDefinition.pages.find(p => p.slug === 'home');
|
|
||||||
const heroBlock = homePage?.blocks?.find(b => b.type === 'hero');
|
|
||||||
const hero: React.ReactNode = heroBlock ? (renderTemplate(heroBlock) as React.ReactNode) : undefined;
|
|
||||||
|
|
||||||
// Render all pages as sections (excluding hero from home page if it exists)
|
|
||||||
const sections = siteDefinition.pages
|
|
||||||
.filter((page) => page.status !== 'draft')
|
|
||||||
.map((page) => {
|
|
||||||
// Filter out hero block if it's the home page (already rendered as hero)
|
|
||||||
const blocksToRender = page.slug === 'home' && heroBlock
|
|
||||||
? page.blocks?.filter(b => b.type !== 'hero') || []
|
|
||||||
: page.blocks || [];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div key={page.id} className="page" data-page-slug={page.slug}>
|
|
||||||
{page.slug !== 'home' && <h2>{page.title}</h2>}
|
|
||||||
{blocksToRender.length > 0 ? (
|
|
||||||
blocksToRender.map((block, index) => (
|
|
||||||
<div key={index} className="block" data-block-type={block.type}>
|
|
||||||
{renderTemplate(block)}
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
) : page.slug !== 'home' ? (
|
|
||||||
<p>No content available for this page.</p>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DefaultLayout
|
|
||||||
hero={hero as any}
|
|
||||||
sections={sections}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Minimal layout: Clean, minimal design.
|
|
||||||
* Uses shared MinimalLayout component.
|
|
||||||
*/
|
|
||||||
function renderMinimalLayout(siteDefinition: SiteDefinition): React.ReactElement {
|
|
||||||
const mainContent = (
|
|
||||||
<>
|
|
||||||
{siteDefinition.pages
|
|
||||||
.filter((page) => page.status !== 'draft')
|
|
||||||
.map((page) => (
|
|
||||||
<div key={page.id} className="page" data-page-slug={page.slug}>
|
|
||||||
<h2>{page.title}</h2>
|
|
||||||
{page.blocks && page.blocks.length > 0 ? (
|
|
||||||
page.blocks.map((block, index) => (
|
|
||||||
<div key={index} className="block" data-block-type={block.type}>
|
|
||||||
{renderTemplate(block)}
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<MinimalLayout>
|
|
||||||
{mainContent}
|
|
||||||
</MinimalLayout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Magazine layout: Editorial, content-focused.
|
|
||||||
* Uses shared MagazineLayout component.
|
|
||||||
*/
|
|
||||||
function renderMagazineLayout(siteDefinition: SiteDefinition): React.ReactElement {
|
|
||||||
const mainContent = (
|
|
||||||
<>
|
|
||||||
{siteDefinition.pages
|
|
||||||
.filter((page) => page.status !== 'draft')
|
|
||||||
.map((page) => (
|
|
||||||
<div key={page.id} className="page" data-page-slug={page.slug}>
|
|
||||||
{page.blocks && page.blocks.length > 0 ? (
|
|
||||||
page.blocks.map((block, index) => (
|
|
||||||
<div key={index} className="block" data-block-type={block.type}>
|
|
||||||
{renderTemplate(block)}
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<MagazineLayout
|
|
||||||
mainContent={mainContent}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Ecommerce layout: Product-focused.
|
|
||||||
* Uses shared EcommerceLayout component.
|
|
||||||
*/
|
|
||||||
function renderEcommerceLayout(siteDefinition: SiteDefinition): React.ReactElement {
|
|
||||||
const mainContent = (
|
|
||||||
<>
|
|
||||||
{siteDefinition.pages
|
|
||||||
.filter((page) => page.status !== 'draft')
|
|
||||||
.map((page) => (
|
|
||||||
<div key={page.id} className="page" data-page-slug={page.slug}>
|
|
||||||
{page.blocks && page.blocks.length > 0 ? (
|
|
||||||
page.blocks.map((block, index) => (
|
|
||||||
<div key={index} className="block" data-block-type={block.type}>
|
|
||||||
{renderTemplate(block)}
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<EcommerceLayout
|
|
||||||
mainContent={mainContent}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Portfolio layout: Showcase.
|
|
||||||
* Uses shared PortfolioLayout component.
|
|
||||||
*/
|
|
||||||
function renderPortfolioLayout(siteDefinition: SiteDefinition): React.ReactElement {
|
|
||||||
const mainContent = (
|
|
||||||
<>
|
|
||||||
{siteDefinition.pages
|
|
||||||
.filter((page) => page.status !== 'draft')
|
|
||||||
.map((page) => (
|
|
||||||
<div key={page.id} className="page" data-page-slug={page.slug}>
|
|
||||||
{page.blocks && page.blocks.length > 0 ? (
|
|
||||||
page.blocks.map((block, index) => (
|
|
||||||
<div key={index} className="block" data-block-type={block.type}>
|
|
||||||
{renderTemplate(block)}
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<PortfolioLayout
|
|
||||||
mainContent={mainContent}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Blog layout: Content-first.
|
|
||||||
* Uses shared BlogLayout component.
|
|
||||||
*/
|
|
||||||
function renderBlogLayout(siteDefinition: SiteDefinition): React.ReactElement {
|
|
||||||
const mainContent = (
|
|
||||||
<>
|
|
||||||
{siteDefinition.pages
|
|
||||||
.filter((page) => page.status !== 'draft')
|
|
||||||
.map((page) => (
|
|
||||||
<div key={page.id} className="page" data-page-slug={page.slug}>
|
|
||||||
{page.blocks && page.blocks.length > 0 ? (
|
|
||||||
page.blocks.map((block, index) => (
|
|
||||||
<div key={index} className="block" data-block-type={block.type}>
|
|
||||||
{renderTemplate(block)}
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<BlogLayout
|
|
||||||
mainContent={mainContent}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Corporate layout: Business.
|
|
||||||
* Uses shared CorporateLayout component.
|
|
||||||
*/
|
|
||||||
function renderCorporateLayout(siteDefinition: SiteDefinition): React.ReactElement {
|
|
||||||
const mainContent = (
|
|
||||||
<>
|
|
||||||
{siteDefinition.pages
|
|
||||||
.filter((page) => page.status !== 'draft')
|
|
||||||
.map((page) => (
|
|
||||||
<div key={page.id} className="page" data-page-slug={page.slug}>
|
|
||||||
{page.blocks && page.blocks.length > 0 ? (
|
|
||||||
page.blocks.map((block, index) => (
|
|
||||||
<div key={index} className="block" data-block-type={block.type}>
|
|
||||||
{renderTemplate(block)}
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<CorporateLayout
|
|
||||||
mainContent={mainContent}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Note: Navigation and page rendering are now handled within each layout component
|
|
||||||
|
|
||||||
@@ -1,374 +0,0 @@
|
|||||||
/**
|
|
||||||
* Page Type Renderer
|
|
||||||
* Renders page-type-specific templates for different page types.
|
|
||||||
*
|
|
||||||
* Each page type has its own template structure optimized for that content type.
|
|
||||||
*/
|
|
||||||
import React from 'react';
|
|
||||||
import type { PageDefinition, Block } from '../types';
|
|
||||||
import { renderTemplate } from './templateEngine';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render a page based on its type.
|
|
||||||
* Falls back to default rendering if no specific template exists.
|
|
||||||
*/
|
|
||||||
export function renderPageByType(page: PageDefinition, blocks: Block[]): React.ReactElement {
|
|
||||||
// Determine page type - use page.type if available, otherwise infer from slug
|
|
||||||
let pageType = page.type;
|
|
||||||
if (!pageType || pageType === 'custom') {
|
|
||||||
// Infer type from slug
|
|
||||||
if (page.slug === 'home') pageType = 'home';
|
|
||||||
else if (page.slug === 'products') pageType = 'products';
|
|
||||||
else if (page.slug === 'blog') pageType = 'blog';
|
|
||||||
else if (page.slug === 'contact') pageType = 'contact';
|
|
||||||
else if (page.slug === 'about') pageType = 'about';
|
|
||||||
else if (page.slug === 'services') pageType = 'services';
|
|
||||||
else pageType = 'custom';
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (pageType) {
|
|
||||||
case 'home':
|
|
||||||
return renderHomePage(page, blocks);
|
|
||||||
case 'products':
|
|
||||||
return renderProductsPage(page, blocks);
|
|
||||||
case 'blog':
|
|
||||||
return renderBlogPage(page, blocks);
|
|
||||||
case 'contact':
|
|
||||||
return renderContactPage(page, blocks);
|
|
||||||
case 'about':
|
|
||||||
return renderAboutPage(page, blocks);
|
|
||||||
case 'services':
|
|
||||||
return renderServicesPage(page, blocks);
|
|
||||||
case 'custom':
|
|
||||||
default:
|
|
||||||
return renderCustomPage(page, blocks);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Home Page Template
|
|
||||||
* Structure: Hero → Features → Testimonials → CTA
|
|
||||||
*/
|
|
||||||
function renderHomePage(page: PageDefinition, blocks: Block[]): React.ReactElement {
|
|
||||||
// Find specific blocks
|
|
||||||
const heroBlock = blocks.find(b => b.type === 'hero');
|
|
||||||
const featuresBlock = blocks.find(b => b.type === 'features' || b.type === 'grid');
|
|
||||||
const testimonialsBlock = blocks.find(b => b.type === 'testimonials');
|
|
||||||
const ctaBlock = blocks.find(b => b.type === 'cta');
|
|
||||||
const otherBlocks = blocks.filter(b =>
|
|
||||||
!['hero', 'features', 'grid', 'testimonials', 'cta'].includes(b.type)
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="page-home" data-page-slug={page.slug}>
|
|
||||||
{/* Hero Section */}
|
|
||||||
{heroBlock && (
|
|
||||||
<section className="home-hero">
|
|
||||||
{renderTemplate(heroBlock)}
|
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Features Section */}
|
|
||||||
{featuresBlock && (
|
|
||||||
<section className="home-features" style={{ padding: '3rem 2rem', background: '#f9fafb' }}>
|
|
||||||
{renderTemplate(featuresBlock)}
|
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Other Content Blocks */}
|
|
||||||
{otherBlocks.length > 0 && (
|
|
||||||
<section className="home-content" style={{ padding: '3rem 2rem' }}>
|
|
||||||
{otherBlocks.map((block, index) => (
|
|
||||||
<div key={index} className="block" data-block-type={block.type}>
|
|
||||||
{renderTemplate(block)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Testimonials Section */}
|
|
||||||
{testimonialsBlock && (
|
|
||||||
<section className="home-testimonials" style={{ padding: '3rem 2rem', background: '#f9fafb' }}>
|
|
||||||
{renderTemplate(testimonialsBlock)}
|
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* CTA Section */}
|
|
||||||
{ctaBlock && (
|
|
||||||
<section className="home-cta">
|
|
||||||
{renderTemplate(ctaBlock)}
|
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Products Page Template
|
|
||||||
* Structure: Title → Product Grid → Filters (if available)
|
|
||||||
*/
|
|
||||||
function renderProductsPage(page: PageDefinition, blocks: Block[]): React.ReactElement {
|
|
||||||
const productsBlock = blocks.find(b => b.type === 'products' || b.type === 'grid');
|
|
||||||
const otherBlocks = blocks.filter(b => b.type !== 'products' && b.type !== 'grid');
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="page-products" data-page-slug={page.slug}>
|
|
||||||
<header style={{ marginBottom: '2rem', textAlign: 'center' }}>
|
|
||||||
<h1 style={{ fontSize: '2.5rem', fontWeight: 'bold', marginBottom: '1rem' }}>
|
|
||||||
{page.title}
|
|
||||||
</h1>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
{/* Product Grid */}
|
|
||||||
{productsBlock && (
|
|
||||||
<section className="products-grid" style={{ padding: '2rem 0' }}>
|
|
||||||
{renderTemplate(productsBlock)}
|
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Other Content */}
|
|
||||||
{otherBlocks.length > 0 && (
|
|
||||||
<section className="products-content" style={{ padding: '2rem 0' }}>
|
|
||||||
{otherBlocks.map((block, index) => (
|
|
||||||
<div key={index} className="block" data-block-type={block.type}>
|
|
||||||
{renderTemplate(block)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Blog Page Template
|
|
||||||
* Structure: Title → Post List/Grid → Sidebar (if available)
|
|
||||||
*/
|
|
||||||
function renderBlogPage(page: PageDefinition, blocks: Block[]): React.ReactElement {
|
|
||||||
const heroBlock = blocks.find(b => b.type === 'hero');
|
|
||||||
const contentBlocks = blocks.filter(b => b.type !== 'hero');
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="page-blog" data-page-slug={page.slug}>
|
|
||||||
{/* Hero/Header */}
|
|
||||||
{heroBlock ? (
|
|
||||||
<section className="blog-hero">
|
|
||||||
{renderTemplate(heroBlock)}
|
|
||||||
</section>
|
|
||||||
) : (
|
|
||||||
<header style={{ marginBottom: '2rem', textAlign: 'center', padding: '2rem 0' }}>
|
|
||||||
<h1 style={{ fontSize: '2.5rem', fontWeight: 'bold', marginBottom: '0.5rem' }}>
|
|
||||||
{page.title}
|
|
||||||
</h1>
|
|
||||||
</header>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Blog Content - Grid Layout for Posts */}
|
|
||||||
<section className="blog-content" style={{
|
|
||||||
display: 'grid',
|
|
||||||
gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
|
|
||||||
gap: '2rem',
|
|
||||||
padding: '2rem 0'
|
|
||||||
}}>
|
|
||||||
{contentBlocks.map((block, index) => (
|
|
||||||
<article key={index} className="blog-post" style={{
|
|
||||||
border: '1px solid #e5e7eb',
|
|
||||||
borderRadius: '8px',
|
|
||||||
padding: '1.5rem',
|
|
||||||
background: '#fff'
|
|
||||||
}}>
|
|
||||||
{renderTemplate(block)}
|
|
||||||
</article>
|
|
||||||
))}
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Contact Page Template
|
|
||||||
* Structure: Title → Contact Info → Form → Map (if available)
|
|
||||||
*/
|
|
||||||
function renderContactPage(page: PageDefinition, blocks: Block[]): React.ReactElement {
|
|
||||||
const formBlock = blocks.find(b => b.type === 'form');
|
|
||||||
const textBlocks = blocks.filter(b => b.type === 'text' || b.type === 'section');
|
|
||||||
const mapBlock = blocks.find(b => b.type === 'image' && b.data?.caption?.toLowerCase().includes('map'));
|
|
||||||
const otherBlocks = blocks.filter(b =>
|
|
||||||
b.type !== 'form' &&
|
|
||||||
b.type !== 'text' &&
|
|
||||||
b.type !== 'section' &&
|
|
||||||
!(b.type === 'image' && b.data?.caption?.toLowerCase().includes('map'))
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="page-contact" data-page-slug={page.slug}>
|
|
||||||
<header style={{ marginBottom: '2rem', textAlign: 'center' }}>
|
|
||||||
<h1 style={{ fontSize: '2.5rem', fontWeight: 'bold', marginBottom: '1rem' }}>
|
|
||||||
{page.title}
|
|
||||||
</h1>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div style={{
|
|
||||||
display: 'grid',
|
|
||||||
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
|
|
||||||
gap: '2rem',
|
|
||||||
padding: '2rem 0'
|
|
||||||
}}>
|
|
||||||
{/* Contact Information */}
|
|
||||||
{textBlocks.length > 0 && (
|
|
||||||
<section className="contact-info">
|
|
||||||
{textBlocks.map((block, index) => (
|
|
||||||
<div key={index} className="block" data-block-type={block.type}>
|
|
||||||
{renderTemplate(block)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Contact Form */}
|
|
||||||
{formBlock && (
|
|
||||||
<section className="contact-form">
|
|
||||||
{renderTemplate(formBlock)}
|
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Map */}
|
|
||||||
{mapBlock && (
|
|
||||||
<section className="contact-map" style={{ marginTop: '2rem' }}>
|
|
||||||
{renderTemplate(mapBlock)}
|
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Other Content */}
|
|
||||||
{otherBlocks.length > 0 && (
|
|
||||||
<section className="contact-other" style={{ marginTop: '2rem' }}>
|
|
||||||
{otherBlocks.map((block, index) => (
|
|
||||||
<div key={index} className="block" data-block-type={block.type}>
|
|
||||||
{renderTemplate(block)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* About Page Template
|
|
||||||
* Structure: Hero → Mission → Team/Values → Stats
|
|
||||||
*/
|
|
||||||
function renderAboutPage(page: PageDefinition, blocks: Block[]): React.ReactElement {
|
|
||||||
const heroBlock = blocks.find(b => b.type === 'hero');
|
|
||||||
const statsBlock = blocks.find(b => b.type === 'stats');
|
|
||||||
const servicesBlock = blocks.find(b => b.type === 'services' || b.type === 'features');
|
|
||||||
const otherBlocks = blocks.filter(b =>
|
|
||||||
!['hero', 'stats', 'services', 'features'].includes(b.type)
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="page-about" data-page-slug={page.slug}>
|
|
||||||
{/* Hero Section */}
|
|
||||||
{heroBlock && (
|
|
||||||
<section className="about-hero">
|
|
||||||
{renderTemplate(heroBlock)}
|
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Main Content */}
|
|
||||||
<section className="about-content" style={{ padding: '3rem 2rem' }}>
|
|
||||||
{otherBlocks.map((block, index) => (
|
|
||||||
<div key={index} className="block" data-block-type={block.type} style={{ marginBottom: '2rem' }}>
|
|
||||||
{renderTemplate(block)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Services/Features Section */}
|
|
||||||
{servicesBlock && (
|
|
||||||
<section className="about-services" style={{ padding: '3rem 2rem', background: '#f9fafb' }}>
|
|
||||||
{renderTemplate(servicesBlock)}
|
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Stats Section */}
|
|
||||||
{statsBlock && (
|
|
||||||
<section className="about-stats" style={{ padding: '3rem 2rem' }}>
|
|
||||||
{renderTemplate(statsBlock)}
|
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Services Page Template
|
|
||||||
* Structure: Title → Service Cards → Details
|
|
||||||
*/
|
|
||||||
function renderServicesPage(page: PageDefinition, blocks: Block[]): React.ReactElement {
|
|
||||||
const heroBlock = blocks.find(b => b.type === 'hero');
|
|
||||||
const servicesBlock = blocks.find(b => b.type === 'services' || b.type === 'features');
|
|
||||||
const otherBlocks = blocks.filter(b =>
|
|
||||||
b.type !== 'hero' && b.type !== 'services' && b.type !== 'features'
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="page-services" data-page-slug={page.slug}>
|
|
||||||
{/* Hero/Header */}
|
|
||||||
{heroBlock ? (
|
|
||||||
<section className="services-hero">
|
|
||||||
{renderTemplate(heroBlock)}
|
|
||||||
</section>
|
|
||||||
) : (
|
|
||||||
<header style={{ marginBottom: '2rem', textAlign: 'center', padding: '2rem 0' }}>
|
|
||||||
<h1 style={{ fontSize: '2.5rem', fontWeight: 'bold', marginBottom: '0.5rem' }}>
|
|
||||||
{page.title}
|
|
||||||
</h1>
|
|
||||||
</header>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Services Grid */}
|
|
||||||
{servicesBlock && (
|
|
||||||
<section className="services-grid" style={{ padding: '2rem 0' }}>
|
|
||||||
{renderTemplate(servicesBlock)}
|
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Additional Content */}
|
|
||||||
{otherBlocks.length > 0 && (
|
|
||||||
<section className="services-content" style={{ padding: '2rem 0' }}>
|
|
||||||
{otherBlocks.map((block, index) => (
|
|
||||||
<div key={index} className="block" data-block-type={block.type}>
|
|
||||||
{renderTemplate(block)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Custom Page Template
|
|
||||||
* Default rendering for custom pages - renders all blocks in order
|
|
||||||
*/
|
|
||||||
function renderCustomPage(page: PageDefinition, blocks: Block[]): React.ReactElement {
|
|
||||||
return (
|
|
||||||
<div className="page-custom" data-page-slug={page.slug}>
|
|
||||||
<header style={{ marginBottom: '2rem', textAlign: 'center' }}>
|
|
||||||
<h1 style={{ fontSize: '2.5rem', fontWeight: 'bold', marginBottom: '1rem' }}>
|
|
||||||
{page.title}
|
|
||||||
</h1>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<section className="custom-content" style={{ padding: '2rem 0' }}>
|
|
||||||
{blocks.map((block, index) => (
|
|
||||||
<div key={index} className="block" data-block-type={block.type} style={{ marginBottom: '2rem' }}>
|
|
||||||
{renderTemplate(block)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,440 +0,0 @@
|
|||||||
/**
|
|
||||||
* Template Engine
|
|
||||||
* Phase 5: Sites Renderer & Publishing
|
|
||||||
*
|
|
||||||
* Renders blocks using shared components from the component library.
|
|
||||||
* Uses fully styled modern components from @shared.
|
|
||||||
*/
|
|
||||||
import React from 'react';
|
|
||||||
import type { Block } from '../types';
|
|
||||||
import {
|
|
||||||
HeroBlock,
|
|
||||||
FeatureGridBlock,
|
|
||||||
TestimonialsBlock,
|
|
||||||
CTABlock,
|
|
||||||
ServicesBlock,
|
|
||||||
StatsPanel,
|
|
||||||
TextBlock,
|
|
||||||
QuoteBlock,
|
|
||||||
ContactFormBlock,
|
|
||||||
ImageGalleryBlock,
|
|
||||||
VideoBlock,
|
|
||||||
ProductsBlock,
|
|
||||||
} from '@shared/blocks';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render a block using the template engine.
|
|
||||||
* Imports shared components dynamically.
|
|
||||||
*/
|
|
||||||
export function renderTemplate(block: Block | any): React.ReactElement {
|
|
||||||
// Handle both formats: { type, data } or { type, ...properties }
|
|
||||||
let type: string;
|
|
||||||
let data: Record<string, any>;
|
|
||||||
|
|
||||||
if (block.type && block.data) {
|
|
||||||
// Standard format: { type, data }
|
|
||||||
type = block.type;
|
|
||||||
data = block.data;
|
|
||||||
} else {
|
|
||||||
// API format: { type, heading, subheading, content, ... }
|
|
||||||
type = block.type;
|
|
||||||
data = block;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Try to import shared component
|
|
||||||
// This will be replaced with actual component imports once shared components are available
|
|
||||||
switch (type) {
|
|
||||||
case 'hero':
|
|
||||||
return renderHeroBlock(data);
|
|
||||||
case 'features':
|
|
||||||
return renderFeaturesBlock(data);
|
|
||||||
case 'testimonials':
|
|
||||||
return renderTestimonialsBlock(data);
|
|
||||||
case 'text':
|
|
||||||
return renderTextBlock(data);
|
|
||||||
case 'image':
|
|
||||||
return renderImageBlock(data);
|
|
||||||
case 'button':
|
|
||||||
return renderButtonBlock(data);
|
|
||||||
case 'section':
|
|
||||||
return renderSectionBlock(data);
|
|
||||||
case 'grid':
|
|
||||||
return renderGridBlock(data);
|
|
||||||
case 'card':
|
|
||||||
return renderCardBlock(data);
|
|
||||||
case 'list':
|
|
||||||
return renderListBlock(data);
|
|
||||||
case 'quote':
|
|
||||||
return renderQuoteBlock(data);
|
|
||||||
case 'video':
|
|
||||||
return renderVideoBlock(data);
|
|
||||||
case 'form':
|
|
||||||
return renderFormBlock(data);
|
|
||||||
case 'accordion':
|
|
||||||
return renderAccordionBlock(data);
|
|
||||||
case 'faq':
|
|
||||||
return renderFAQBlock(data);
|
|
||||||
case 'cta':
|
|
||||||
return renderCTABlock(data);
|
|
||||||
case 'services':
|
|
||||||
return renderServicesBlock(data);
|
|
||||||
case 'stats':
|
|
||||||
return renderStatsBlock(data);
|
|
||||||
default:
|
|
||||||
return <div className="block-unknown">Unknown block type: {type}</div>;
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error(`Error rendering block type ${type}:`, error);
|
|
||||||
return <div className="block-error">Error rendering block: {type}</div>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render hero block using shared HeroBlock component.
|
|
||||||
*/
|
|
||||||
function renderHeroBlock(data: Record<string, any>): React.ReactElement {
|
|
||||||
const title = data.heading || data.title || 'Hero Title';
|
|
||||||
const subtitle = data.subheading || data.subtitle;
|
|
||||||
const content = Array.isArray(data.content) ? data.content.join(' ') : data.content;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<HeroBlock
|
|
||||||
title={title}
|
|
||||||
subtitle={subtitle}
|
|
||||||
ctaLabel={data.buttonText || data.ctaLabel}
|
|
||||||
onCtaClick={data.buttonLink || data.ctaLink ? () => window.location.href = (data.buttonLink || data.ctaLink) : undefined}
|
|
||||||
supportingContent={content ? <p>{content}</p> : undefined}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render text block using shared TextBlock component.
|
|
||||||
*/
|
|
||||||
function renderTextBlock(data: Record<string, any>): React.ReactElement {
|
|
||||||
const content = Array.isArray(data.content) ? data.content.join(' ') : data.content;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<TextBlock
|
|
||||||
title={data.heading || data.title}
|
|
||||||
content={content || ''}
|
|
||||||
align={data.align || 'left'}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render image block.
|
|
||||||
*/
|
|
||||||
function renderImageBlock(data: Record<string, any>): React.ReactElement {
|
|
||||||
return (
|
|
||||||
<div className="block-image" style={{ padding: '1rem' }}>
|
|
||||||
{data.src && (
|
|
||||||
<img
|
|
||||||
src={data.src}
|
|
||||||
alt={data.alt || ''}
|
|
||||||
style={{ maxWidth: '100%', height: 'auto' }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{data.caption && <p style={{ fontSize: '0.9rem', color: '#666' }}>{data.caption}</p>}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render button block.
|
|
||||||
*/
|
|
||||||
function renderButtonBlock(data: Record<string, any>): React.ReactElement {
|
|
||||||
return (
|
|
||||||
<div className="block-button" style={{ padding: '1rem', textAlign: data.align || 'center' }}>
|
|
||||||
<a
|
|
||||||
href={data.link || '#'}
|
|
||||||
className="button"
|
|
||||||
style={{
|
|
||||||
display: 'inline-block',
|
|
||||||
padding: '0.75rem 1.5rem',
|
|
||||||
background: data.color || '#007bff',
|
|
||||||
color: 'white',
|
|
||||||
textDecoration: 'none',
|
|
||||||
borderRadius: '4px'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{data.text || 'Button'}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render section block.
|
|
||||||
*/
|
|
||||||
function renderSectionBlock(data: Record<string, any>): React.ReactElement {
|
|
||||||
return (
|
|
||||||
<section className="block-section" style={{ padding: '3rem 2rem', background: data.background || 'transparent' }}>
|
|
||||||
{data.title && <h2>{data.title}</h2>}
|
|
||||||
{data.content && <div dangerouslySetInnerHTML={{ __html: data.content }} />}
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render grid block.
|
|
||||||
*/
|
|
||||||
function renderGridBlock(data: Record<string, any>): React.ReactElement {
|
|
||||||
const columns = data.columns || 3;
|
|
||||||
return (
|
|
||||||
<div className="block-grid" style={{ display: 'grid', gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: '2rem', padding: '2rem' }}>
|
|
||||||
{data.items?.map((item: any, index: number) => (
|
|
||||||
<div key={index} className="grid-item">
|
|
||||||
{item.content && <div dangerouslySetInnerHTML={{ __html: item.content }} />}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render card block.
|
|
||||||
*/
|
|
||||||
function renderCardBlock(data: Record<string, any>): React.ReactElement {
|
|
||||||
return (
|
|
||||||
<div className="block-card" style={{ border: '1px solid #ddd', borderRadius: '8px', padding: '1.5rem', margin: '1rem' }}>
|
|
||||||
{data.title && <h3>{data.title}</h3>}
|
|
||||||
{data.content && <div dangerouslySetInnerHTML={{ __html: data.content }} />}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render list block.
|
|
||||||
*/
|
|
||||||
function renderListBlock(data: Record<string, any>): React.ReactElement {
|
|
||||||
const listType = data.ordered ? 'ol' : 'ul';
|
|
||||||
return React.createElement(
|
|
||||||
listType,
|
|
||||||
{ className: 'block-list', style: { padding: '1rem 2rem' } },
|
|
||||||
data.items?.map((item: string, index: number) => (
|
|
||||||
<li key={index}>{item}</li>
|
|
||||||
))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render quote block.
|
|
||||||
*/
|
|
||||||
function renderQuoteBlock(data: Record<string, any>): React.ReactElement {
|
|
||||||
return (
|
|
||||||
<blockquote className="block-quote" style={{ padding: '2rem', borderLeft: '4px solid #007bff', margin: '2rem 0', fontStyle: 'italic' }}>
|
|
||||||
{data.quote && <p>{data.quote}</p>}
|
|
||||||
{data.author && <cite>— {data.author}</cite>}
|
|
||||||
</blockquote>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render video block.
|
|
||||||
*/
|
|
||||||
function renderVideoBlock(data: Record<string, any>): React.ReactElement {
|
|
||||||
return (
|
|
||||||
<div className="block-video" style={{ padding: '1rem' }}>
|
|
||||||
{data.src && (
|
|
||||||
<video controls style={{ maxWidth: '100%' }}>
|
|
||||||
<source src={data.src} type={data.type || 'video/mp4'} />
|
|
||||||
</video>
|
|
||||||
)}
|
|
||||||
{data.embed && <div dangerouslySetInnerHTML={{ __html: data.embed }} />}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render form block.
|
|
||||||
*/
|
|
||||||
function renderFormBlock(data: Record<string, any>): React.ReactElement {
|
|
||||||
return (
|
|
||||||
<form className="block-form" style={{ padding: '2rem', maxWidth: '600px', margin: '0 auto' }}>
|
|
||||||
{data.fields?.map((field: any, index: number) => (
|
|
||||||
<div key={index} style={{ marginBottom: '1rem' }}>
|
|
||||||
<label>{field.label}</label>
|
|
||||||
<input
|
|
||||||
type={field.type || 'text'}
|
|
||||||
name={field.name}
|
|
||||||
placeholder={field.placeholder}
|
|
||||||
style={{ width: '100%', padding: '0.5rem' }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
<button type="submit" style={{ padding: '0.75rem 1.5rem', background: '#007bff', color: 'white', border: 'none', borderRadius: '4px' }}>
|
|
||||||
{data.submitText || 'Submit'}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render accordion block.
|
|
||||||
*/
|
|
||||||
function renderAccordionBlock(data: Record<string, any>): React.ReactElement {
|
|
||||||
return (
|
|
||||||
<div className="block-accordion" style={{ padding: '1rem' }}>
|
|
||||||
{data.items?.map((item: any, index: number) => (
|
|
||||||
<details key={index} style={{ marginBottom: '1rem', border: '1px solid #ddd', borderRadius: '4px', padding: '1rem' }}>
|
|
||||||
<summary style={{ cursor: 'pointer', fontWeight: 'bold' }}>{item.title}</summary>
|
|
||||||
<div style={{ marginTop: '1rem' }}>{item.content}</div>
|
|
||||||
</details>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render features block using shared FeatureGridBlock component.
|
|
||||||
*/
|
|
||||||
function renderFeaturesBlock(data: Record<string, any>): React.ReactElement {
|
|
||||||
const heading = data.heading || data.title;
|
|
||||||
const content = Array.isArray(data.content) ? data.content : [];
|
|
||||||
const layout = data.layout || 'two-column';
|
|
||||||
const columns = layout === 'two-column' ? 2 : layout === 'three-column' ? 3 : 3;
|
|
||||||
|
|
||||||
// Convert content array to features array
|
|
||||||
const features = content.map((item: string) => ({
|
|
||||||
title: item.split(':')[0] || item,
|
|
||||||
description: item.includes(':') ? item.split(':').slice(1).join(':').trim() : undefined,
|
|
||||||
}));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<FeatureGridBlock
|
|
||||||
heading={heading}
|
|
||||||
features={features}
|
|
||||||
columns={columns as 2 | 3 | 4}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render testimonials block using shared TestimonialsBlock component.
|
|
||||||
*/
|
|
||||||
function renderTestimonialsBlock(data: Record<string, any>): React.ReactElement {
|
|
||||||
const title = data.heading || data.title;
|
|
||||||
const subtitle = data.subheading || data.subtitle;
|
|
||||||
const content = Array.isArray(data.content) ? data.content : [];
|
|
||||||
const layout = data.layout || 'cards';
|
|
||||||
|
|
||||||
// Convert content array to testimonials array
|
|
||||||
const testimonials = content.map((item: string) => ({
|
|
||||||
quote: item,
|
|
||||||
author: 'Customer', // Default author if not provided
|
|
||||||
}));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<TestimonialsBlock
|
|
||||||
title={title}
|
|
||||||
subtitle={subtitle}
|
|
||||||
testimonials={testimonials}
|
|
||||||
columns={layout === 'cards' ? 3 : 1}
|
|
||||||
variant={layout === 'cards' ? 'card' : 'default'}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render FAQ block.
|
|
||||||
*/
|
|
||||||
function renderFAQBlock(data: Record<string, any>): React.ReactElement {
|
|
||||||
const heading = data.heading || data.title || 'FAQ';
|
|
||||||
const subheading = data.subheading || data.subtitle;
|
|
||||||
const content = Array.isArray(data.content) ? data.content : [];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="block-faq" style={{ padding: '3rem 2rem' }}>
|
|
||||||
{heading && <h2 style={{ marginBottom: '1rem' }}>{heading}</h2>}
|
|
||||||
{subheading && <p style={{ color: '#666', marginBottom: '2rem' }}>{subheading}</p>}
|
|
||||||
<div>
|
|
||||||
{content.map((item: string, index: number) => (
|
|
||||||
<div key={index} style={{ marginBottom: '1rem', padding: '1rem', borderBottom: '1px solid #eee' }}>
|
|
||||||
<p><strong>Q:</strong> {item}</p>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render CTA (Call to Action) block using shared CTABlock component.
|
|
||||||
*/
|
|
||||||
function renderCTABlock(data: Record<string, any>): React.ReactElement {
|
|
||||||
const title = data.heading || data.title || 'Call to Action';
|
|
||||||
const subtitle = data.subheading || data.subtitle;
|
|
||||||
const content = Array.isArray(data.content) ? data.content[0] : data.content;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<CTABlock
|
|
||||||
title={title}
|
|
||||||
subtitle={subtitle}
|
|
||||||
primaryCtaLabel={data.buttonText || data.ctaLabel}
|
|
||||||
primaryCtaLink={data.buttonLink || data.ctaLink}
|
|
||||||
backgroundImage={data.backgroundImage}
|
|
||||||
variant={data.layout === 'full-width' ? 'centered' : 'default'}
|
|
||||||
>
|
|
||||||
{content && <p>{content}</p>}
|
|
||||||
</CTABlock>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render services block using shared ServicesBlock component.
|
|
||||||
*/
|
|
||||||
function renderServicesBlock(data: Record<string, any>): React.ReactElement {
|
|
||||||
const title = data.heading || data.title;
|
|
||||||
const subtitle = data.subheading || data.subtitle;
|
|
||||||
const content = Array.isArray(data.content) ? data.content : [];
|
|
||||||
|
|
||||||
// Convert content array to services array
|
|
||||||
const services = content.map((item: string) => ({
|
|
||||||
title: item.split(':')[0] || item,
|
|
||||||
description: item.includes(':') ? item.split(':').slice(1).join(':').trim() : undefined,
|
|
||||||
}));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ServicesBlock
|
|
||||||
title={title}
|
|
||||||
subtitle={subtitle}
|
|
||||||
services={services}
|
|
||||||
columns={3}
|
|
||||||
variant="card"
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render stats block using shared StatsPanel component.
|
|
||||||
*/
|
|
||||||
function renderStatsBlock(data: Record<string, any>): React.ReactElement {
|
|
||||||
const content = Array.isArray(data.content) ? data.content : [];
|
|
||||||
|
|
||||||
// Convert content array to stats array
|
|
||||||
const stats = content.map((item: string) => {
|
|
||||||
// Try to parse "Label: Value" format
|
|
||||||
const parts = item.split(':');
|
|
||||||
if (parts.length >= 2) {
|
|
||||||
return {
|
|
||||||
label: parts[0].trim(),
|
|
||||||
value: parts.slice(1).join(':').trim(),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
label: item,
|
|
||||||
value: '',
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<StatsPanel
|
|
||||||
heading={data.heading || data.title}
|
|
||||||
stats={stats}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "ES2020",
|
|
||||||
"useDefineForClassFields": true,
|
|
||||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
|
||||||
"module": "ESNext",
|
|
||||||
"skipLibCheck": true,
|
|
||||||
|
|
||||||
/* Bundler mode */
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"allowImportingTsExtensions": true,
|
|
||||||
"isolatedModules": true,
|
|
||||||
"moduleDetection": "force",
|
|
||||||
"noEmit": true,
|
|
||||||
"jsx": "react-jsx",
|
|
||||||
|
|
||||||
/* Path mapping */
|
|
||||||
"baseUrl": ".",
|
|
||||||
"paths": {
|
|
||||||
"@shared/*": ["../frontend/src/components/shared/*"]
|
|
||||||
},
|
|
||||||
|
|
||||||
/* Linting */
|
|
||||||
"strict": true,
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
"noFallthroughCasesInSwitch": true,
|
|
||||||
"noUncheckedSideEffectImports": true
|
|
||||||
},
|
|
||||||
"include": ["src"]
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
{
|
|
||||||
"files": [],
|
|
||||||
"references": [
|
|
||||||
{ "path": "./tsconfig.app.json" },
|
|
||||||
{ "path": "./tsconfig.node.json" }
|
|
||||||
],
|
|
||||||
"compilerOptions": {
|
|
||||||
"baseUrl": ".",
|
|
||||||
"paths": {
|
|
||||||
"@shared/*": ["../frontend/src/components/shared/*", "/frontend/src/components/shared/*"]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "ES2022",
|
|
||||||
"lib": ["ES2023"],
|
|
||||||
"module": "ESNext",
|
|
||||||
"skipLibCheck": true,
|
|
||||||
|
|
||||||
/* Bundler mode */
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"allowImportingTsExtensions": true,
|
|
||||||
"isolatedModules": true,
|
|
||||||
"moduleDetection": "force",
|
|
||||||
"noEmit": true,
|
|
||||||
|
|
||||||
/* Linting */
|
|
||||||
"strict": true,
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
"noFallthroughCasesInSwitch": true
|
|
||||||
},
|
|
||||||
"include": ["vite.config.ts"]
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
import fs from 'node:fs';
|
|
||||||
import path from 'node:path';
|
|
||||||
import { fileURLToPath } from 'node:url';
|
|
||||||
import { defineConfig } from 'vite';
|
|
||||||
import react from '@vitejs/plugin-react';
|
|
||||||
|
|
||||||
const __filename = fileURLToPath(import.meta.url);
|
|
||||||
const __dirname = path.dirname(__filename);
|
|
||||||
const sharedPathCandidates = [
|
|
||||||
path.resolve(__dirname, '../frontend/src/components/shared'),
|
|
||||||
path.resolve(__dirname, '../../frontend/src/components/shared'),
|
|
||||||
'/frontend/src/components/shared',
|
|
||||||
path.resolve(__dirname, '../../frontend/src/components/shared'), // Try parent of parent
|
|
||||||
];
|
|
||||||
const sharedComponentsPath = sharedPathCandidates.find((candidate) => fs.existsSync(candidate)) ?? sharedPathCandidates[0];
|
|
||||||
|
|
||||||
// Log for debugging
|
|
||||||
console.log('Shared components path:', sharedComponentsPath);
|
|
||||||
console.log('Path exists:', fs.existsSync(sharedComponentsPath));
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [react()],
|
|
||||||
resolve: {
|
|
||||||
alias: {
|
|
||||||
'@shared': sharedComponentsPath,
|
|
||||||
// Explicit aliases for CSS files to ensure Vite resolves them
|
|
||||||
'@shared/blocks/blocks.css': path.join(sharedComponentsPath, 'blocks/blocks.css'),
|
|
||||||
'@shared/layouts/layouts.css': path.join(sharedComponentsPath, 'layouts/layouts.css'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
server: {
|
|
||||||
host: '0.0.0.0',
|
|
||||||
port: 5176,
|
|
||||||
allowedHosts: ['sites.igny8.com', 'builder.igny8.com'],
|
|
||||||
fs: {
|
|
||||||
allow: [path.resolve(__dirname, '..'), sharedComponentsPath],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
build: {
|
|
||||||
rollupOptions: {
|
|
||||||
output: {
|
|
||||||
manualChunks: {
|
|
||||||
// Code-split builder routes to avoid loading in public sites
|
|
||||||
'builder': ['./src/builder/pages/wizard/WizardPage', './src/builder/pages/preview/PreviewCanvas', './src/builder/pages/dashboard/SiteDashboard'],
|
|
||||||
// Vendor chunks
|
|
||||||
'vendor-react': ['react', 'react-dom', 'react-router-dom'],
|
|
||||||
'vendor-ui': ['lucide-react', 'zustand'],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
import { defineConfig } from 'vitest/config';
|
|
||||||
import react from '@vitejs/plugin-react';
|
|
||||||
import path from 'path';
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [react()],
|
|
||||||
test: {
|
|
||||||
environment: 'jsdom',
|
|
||||||
globals: true,
|
|
||||||
setupFiles: ['./src/__tests__/setup.ts'],
|
|
||||||
},
|
|
||||||
resolve: {
|
|
||||||
alias: {
|
|
||||||
'@': path.resolve(__dirname, './src'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
@@ -1,139 +0,0 @@
|
|||||||
#!/bin/bash
|
|
||||||
# Script to reproduce useLocation() error on demand
|
|
||||||
# Run this to trigger conditions that cause the error
|
|
||||||
# If error appears = bug exists, If no error = bug is fixed
|
|
||||||
|
|
||||||
set -e
|
|
||||||
|
|
||||||
echo "=========================================="
|
|
||||||
echo "useLocation() Error Reproduction Script"
|
|
||||||
echo "=========================================="
|
|
||||||
echo ""
|
|
||||||
echo "This script will trigger conditions known to cause:"
|
|
||||||
echo "'useLocation() may be used only in the context of a <Router> component'"
|
|
||||||
echo ""
|
|
||||||
|
|
||||||
# Function to check if error appears in browser console
|
|
||||||
function wait_for_check() {
|
|
||||||
echo ""
|
|
||||||
echo "⚠️ NOW CHECK YOUR BROWSER:"
|
|
||||||
echo " 1. Open: https://app.igny8.com/writer/tasks"
|
|
||||||
echo " 2. Open Developer Console (F12)"
|
|
||||||
echo " 3. Look for: 'useLocation() may be used only in the context of a <Router> component'"
|
|
||||||
echo ""
|
|
||||||
echo " ✅ NO ERROR = Bug is FIXED"
|
|
||||||
echo " ❌ ERROR APPEARS = Bug still EXISTS"
|
|
||||||
echo ""
|
|
||||||
read -p "Press Enter after checking..."
|
|
||||||
}
|
|
||||||
|
|
||||||
# Test 1: Clear Vite cache and restart frontend
|
|
||||||
function test1_clear_cache_restart() {
|
|
||||||
echo ""
|
|
||||||
echo "=========================================="
|
|
||||||
echo "TEST 1: Clear Vite Cache + Restart Frontend"
|
|
||||||
echo "=========================================="
|
|
||||||
echo "This simulates container operation that wipes cache..."
|
|
||||||
|
|
||||||
echo "Clearing Vite cache..."
|
|
||||||
docker compose exec igny8_frontend rm -rf /app/node_modules/.vite || true
|
|
||||||
|
|
||||||
echo "Restarting frontend container..."
|
|
||||||
docker compose restart igny8_frontend
|
|
||||||
|
|
||||||
echo "Waiting for frontend to start (30 seconds)..."
|
|
||||||
sleep 30
|
|
||||||
|
|
||||||
wait_for_check
|
|
||||||
}
|
|
||||||
|
|
||||||
# Test 2: Just restart frontend (no cache clear)
|
|
||||||
function test2_restart_only() {
|
|
||||||
echo ""
|
|
||||||
echo "=========================================="
|
|
||||||
echo "TEST 2: Restart Frontend Only (No Cache Clear)"
|
|
||||||
echo "=========================================="
|
|
||||||
|
|
||||||
echo "Restarting frontend container..."
|
|
||||||
docker compose restart igny8_frontend
|
|
||||||
|
|
||||||
echo "Waiting for frontend to start (30 seconds)..."
|
|
||||||
sleep 30
|
|
||||||
|
|
||||||
wait_for_check
|
|
||||||
}
|
|
||||||
|
|
||||||
# Test 3: Clear cache without restart
|
|
||||||
function test3_cache_only() {
|
|
||||||
echo ""
|
|
||||||
echo "=========================================="
|
|
||||||
echo "TEST 3: Clear Vite Cache Only (No Restart)"
|
|
||||||
echo "=========================================="
|
|
||||||
echo "Checking if HMR triggers the error..."
|
|
||||||
|
|
||||||
echo "Clearing Vite cache..."
|
|
||||||
docker compose exec igny8_frontend rm -rf /app/node_modules/.vite
|
|
||||||
|
|
||||||
echo "Waiting for HMR rebuild (20 seconds)..."
|
|
||||||
sleep 20
|
|
||||||
|
|
||||||
wait_for_check
|
|
||||||
}
|
|
||||||
|
|
||||||
# Test 4: Multiple rapid restarts
|
|
||||||
function test4_rapid_restarts() {
|
|
||||||
echo ""
|
|
||||||
echo "=========================================="
|
|
||||||
echo "TEST 4: Rapid Container Restarts (Stress Test)"
|
|
||||||
echo "=========================================="
|
|
||||||
echo "This simulates multiple deployment cycles..."
|
|
||||||
|
|
||||||
for i in {1..3}; do
|
|
||||||
echo "Restart $i/3..."
|
|
||||||
docker compose restart igny8_frontend
|
|
||||||
sleep 10
|
|
||||||
done
|
|
||||||
|
|
||||||
echo "Waiting for final startup (30 seconds)..."
|
|
||||||
sleep 30
|
|
||||||
|
|
||||||
wait_for_check
|
|
||||||
}
|
|
||||||
|
|
||||||
# Main menu
|
|
||||||
echo "Select test to run:"
|
|
||||||
echo "1) Clear cache + restart (most likely to trigger bug)"
|
|
||||||
echo "2) Restart only"
|
|
||||||
echo "3) Clear cache only (HMR test)"
|
|
||||||
echo "4) Rapid restarts (stress test)"
|
|
||||||
echo "5) Run all tests"
|
|
||||||
echo "q) Quit"
|
|
||||||
echo ""
|
|
||||||
read -p "Enter choice: " choice
|
|
||||||
|
|
||||||
case $choice in
|
|
||||||
1) test1_clear_cache_restart ;;
|
|
||||||
2) test2_restart_only ;;
|
|
||||||
3) test3_cache_only ;;
|
|
||||||
4) test4_rapid_restarts ;;
|
|
||||||
5)
|
|
||||||
test1_clear_cache_restart
|
|
||||||
test2_restart_only
|
|
||||||
test3_cache_only
|
|
||||||
test4_rapid_restarts
|
|
||||||
;;
|
|
||||||
q) exit 0 ;;
|
|
||||||
*) echo "Invalid choice"; exit 1 ;;
|
|
||||||
esac
|
|
||||||
|
|
||||||
echo ""
|
|
||||||
echo "=========================================="
|
|
||||||
echo "Testing Complete"
|
|
||||||
echo "=========================================="
|
|
||||||
echo ""
|
|
||||||
echo "If you saw the useLocation() error:"
|
|
||||||
echo " → Bug still exists, needs investigation"
|
|
||||||
echo ""
|
|
||||||
echo "If NO error appeared in any test:"
|
|
||||||
echo " → Bug is FIXED! ✅"
|
|
||||||
echo ""
|
|
||||||
Reference in New Issue
Block a user