zhongwei/gh-netresearch-claude-code-marketplace-netresearch-skills-bundle

Files

Zhongwei Li f6d4a68978 Initial commit

2025-11-30 08:43:13 +08:00

9.1 KiB

Raw Blame History

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:

Company-specific branding (e.g., netresearch-branding, company-branding)
TYPO3 branding (fallback - use TYPO3 orange #FF8700)
Generic clean design (last resort - neutral colors)

Detection Method:

# 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

Header - Compact bar with project title
Info Box - Backend credentials (username/password)
Grid Layout - 2-4 columns responsive
Cards - One per TYPO3 version + tools
Links - Frontend and Backend URLs

Card Content Template

<div class="card">
    <div class="card-icon">[EMOJI]</div>
    <h3>[VERSION NAME]</h3>
    <p>[DESCRIPTION]</p>
    <div class="card-links">
        <a href="[FRONTEND_URL]">→ Frontend</a>
        <a href="[BACKEND_URL]">→ Backend</a>
    </div>
</div>

Cards to Include

Always include:

TYPO3 12.4 LTS (🎯 emoji)
TYPO3 13.x (⚡ emoji)
Documentation (📚 emoji)
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

# After generation
ddev exec cp /var/www/hello_world/.ddev/web-build/index.html /var/www/html/

Example: Netresearch-Branded Index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{PROJECT_NAME}} - Development Environment</title>
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@600;700&family=Open+Sans:wght@400&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Open Sans', sans-serif;
            background: #FFFFFF;
            color: #585961;
        }
        .header {
            background: #2F99A4;
            padding: 20px;
        }
        .header h1 {
            font-family: 'Raleway', sans-serif;
            color: #FFFFFF;
            font-size: 24px;
        }
        .card-links a:hover {
            background: #2F99A4;
            color: #FFFFFF;
        }
    </style>
</head>
<body>
    <!-- Content here -->
</body>
</html>

Example: TYPO3-Branded Index (Fallback)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{PROJECT_NAME}} - Development Environment</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #F8F9FA;
            color: #333333;
        }
        .header {
            background: #FF8700;
            padding: 40px 20px;
        }
        .header h1 {
            color: #FFFFFF;
            font-size: 32px;
        }
        .card-links a {
            color: #FF8700;
        }
        .card-links a:hover {
            background: #FF8700;
            color: #FFFFFF;
        }
    </style>
</head>
<body>
    <!-- Content here -->
</body>
</html>

Responsive Design Requirements

Breakpoints:

/* 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:

Color Contrast
- Text on background: minimum 4.5:1
- Large text (18px+): minimum 3:1
- Verify with: https://webaim.org/resources/contrastchecker/
Keyboard Navigation
- All links must be keyboard accessible
- Visible focus states
- Logical tab order
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:

### 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

9.1 KiB Raw Blame History

Index Page Generation for TYPO3 DDEV Projects

Purpose

Automatic Branding Detection

Step 1: Detect Available Branding Skills

Step 2: Apply Branding Based on Detection

If Netresearch Branding Detected

If TYPO3 Branding (Fallback)

If No Branding (Generic)

HTML Template Structure

Required Elements

Card Content Template

Cards to Include

Generation Workflow

Step 1: Detect Branding

Step 2: Extract Project Metadata

Step 3: Generate HTML

Step 4: Copy to Web Root

Example: Netresearch-Branded Index

Example: TYPO3-Branded Index (Fallback)

Responsive Design Requirements

Accessibility Requirements

Quality Checklist

Integration with SKILL.md

9.1 KiB

Raw Blame History