# Index Page Generation for TYPO3 DDEV Projects
## Purpose
Generate a professional overview page (`index.html`) that serves as the main entry point for the DDEV development environment, providing quick access to all TYPO3 versions and development tools.
## Automatic Branding Detection
**The index page MUST automatically detect and apply appropriate branding:**
### Step 1: Detect Available Branding Skills
Check for branding skills in this priority order:
1. **Company-specific branding** (e.g., `netresearch-branding`, `company-branding`)
2. **TYPO3 branding** (fallback - use TYPO3 orange #FF8700)
3. **Generic clean design** (last resort - neutral colors)
**Detection Method:**
```bash
# Check if branding skill exists
list-skills | grep -i branding
```
### Step 2: Apply Branding Based on Detection
#### If Netresearch Branding Detected
**Invoke:** `netresearch-branding` skill
**Colors:**
- Primary: #2F99A4 (Turquoise)
- Accent: #FF4D00 (Orange)
- Text: #585961 (Anthracite grey)
- Background: #FFFFFF (White)
- Light grey: #CCCDCC
**Typography:**
- Headlines: `font-family: 'Raleway', sans-serif;` (600/700 weight)
- Body: `font-family: 'Open Sans', sans-serif;` (400 weight)
**Layout:**
- Compact header: 20px padding
- High white space: 40px container padding
- Card shadows: subtle with turquoise glow on hover
#### If TYPO3 Branding (Fallback)
**Colors:**
- Primary: #FF8700 (TYPO3 Orange)
- Secondary: #000000 (Black)
- Text: #333333 (Dark grey)
- Background: #F8F9FA (Light grey)
- Cards: #FFFFFF (White)
**Typography:**
- System fonts: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`
- No external font imports
**Layout:**
- Standard header: 40px padding
- Moderate white space: 30px container padding
- Card shadows: standard grey shadows
#### If No Branding (Generic)
**Colors:**
- Primary: #0066CC (Professional blue)
- Text: #333333
- Background: #FFFFFF
- Cards: #F5F5F5
**Typography:**
- System fonts only
- Standard sizing
## HTML Template Structure
### Required Elements
1. **Header** - Compact bar with project title
2. **Info Box** - Backend credentials (username/password)
3. **Grid Layout** - 2-4 columns responsive
4. **Cards** - One per TYPO3 version + tools
5. **Links** - Frontend and Backend URLs
### Card Content Template
```html
[EMOJI]
[VERSION NAME]
[DESCRIPTION]
```
### Cards to Include
**Always include:**
1. TYPO3 12.4 LTS (🎯 emoji)
2. TYPO3 13.x (⚡ emoji)
3. Documentation (📚 emoji)
4. Development Tools (📧 emoji - Mailpit)
**Optional cards** (if applicable):
5. TYPO3 11.5 LTS (📦 emoji)
6. Redis/Valkey (🔄 emoji)
7. Custom tools
## Generation Workflow
### Step 1: Detect Branding
```
1. Check for branding skills
2. If netresearch-branding exists → Use Netresearch colors/fonts
3. Else if project has branding config → Use project branding
4. Else → Use TYPO3 branding (fallback)
```
### Step 2: Extract Project Metadata
```
- Project name (from .ddev/config.yaml or composer.json)
- DDEV sitename
- Configured TYPO3 versions (from docker-compose or config)
```
### Step 3: Generate HTML
**File location:** `.ddev/web-build/index.html`
**Template variables to replace:**
- `{{PROJECT_NAME}}` - Extension display name
- `{{DDEV_SITENAME}}` - DDEV project name
- `{{PRIMARY_COLOR}}` - Brand primary color
- `{{ACCENT_COLOR}}` - Brand accent color
- `{{TEXT_COLOR}}` - Body text color
- `{{FONT_HEADLINE}}` - Headline font family
- `{{FONT_BODY}}` - Body font family
### Step 4: Copy to Web Root
```bash
# After generation
ddev exec cp /var/www/hello_world/.ddev/web-build/index.html /var/www/html/
```
## Example: Netresearch-Branded Index
```html
{{PROJECT_NAME}} - Development Environment
```
## Example: TYPO3-Branded Index (Fallback)
```html
{{PROJECT_NAME}} - Development Environment
```
## Responsive Design Requirements
**Breakpoints:**
```css
/* Mobile: default (single column) */
.grid {
grid-template-columns: 1fr;
}
/* Tablet: 768px+ (2 columns) */
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop: 1024px+ (auto-fit) */
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
}
```
## Accessibility Requirements
**WCAG AA Compliance:**
1. **Color Contrast**
- Text on background: minimum 4.5:1
- Large text (18px+): minimum 3:1
- Verify with: https://webaim.org/resources/contrastchecker/
2. **Keyboard Navigation**
- All links must be keyboard accessible
- Visible focus states
- Logical tab order
3. **Semantic HTML**
- Proper heading hierarchy (h1 → h2 → h3)
- Descriptive link text (not just "click here")
- Alt text for images (if any)
## Quality Checklist
Before finalizing the index page:
- [ ] Branding detection executed correctly
- [ ] Appropriate colors applied
- [ ] Proper fonts loaded (if external fonts used)
- [ ] All TYPO3 version links present
- [ ] Backend credentials displayed
- [ ] Responsive design works on mobile/tablet/desktop
- [ ] Color contrast passes WCAG AA
- [ ] No console errors
- [ ] File copied to /var/www/html/
- [ ] Accessible at https://{sitename}.ddev.site/
## Integration with SKILL.md
**In Step 8 of SKILL.md, replace the current text with:**
```markdown
### Step 8: Generate Project Overview Page
**Automatic branding detection:**
The overview page automatically detects and applies appropriate branding:
1. **Check for branding skills** (netresearch-branding, company-branding, etc.)
2. **Apply detected branding** (colors, fonts, layout)
3. **Fallback to TYPO3 branding** (orange #FF8700) if no branding detected
4. **Generate responsive HTML** with cards for each TYPO3 version
**Generation process:**
```bash
# Skill automatically:
# 1. Detects available branding (netresearch-branding skill if present)
# 2. Applies brand colors and fonts
# 3. Creates .ddev/web-build/index.html
# 4. Copies to /var/www/html/
# Manual copy if needed:
ddev exec cp /var/www/hello_world/.ddev/web-build/index.html /var/www/html/
```
**See:** `INDEX-PAGE-GENERATION.md` for complete branding detection logic
```
## Example Detection Logic (Pseudocode)
```python
def generate_index_page():
# Step 1: Detect branding
branding = detect_branding()
if branding == "netresearch":
colors = {
"primary": "#2F99A4",
"text": "#585961",
"background": "#FFFFFF"
}
fonts = {
"headline": "Raleway",
"body": "Open Sans"
}
header_padding = "20px"
elif branding == "company-specific":
# Load company branding
colors = load_company_colors()
fonts = load_company_fonts()
else: # TYPO3 fallback
colors = {
"primary": "#FF8700",
"text": "#333333",
"background": "#F8F9FA"
}
fonts = {
"headline": "system-ui",
"body": "system-ui"
}
header_padding = "40px"
# Step 2: Generate HTML
html = generate_html_template(colors, fonts, header_padding)
# Step 3: Write file
write_file(".ddev/web-build/index.html", html)
# Step 4: Copy to web root
copy_to_web_root()
```
---
**This approach ensures:**
- ✅ Automatic branding application
- ✅ Consistent professional appearance
- ✅ Graceful fallback to TYPO3 branding
- ✅ Company branding when available
- ✅ No manual branding decisions needed