# Blog Migration Template Requirements

**Last Updated:** 2026-01-09

Template requirements for migrating the WordPress blog to static pages, including structure specifications, component requirements, and responsive/performance requirements.

## Overview

This document specifies the template requirements for the blog migration, focusing on structure and functionality rather than exact design replication. The migration is an opportunity to improve SEO, performance, and UX.

## Required Templates

### 1. Blog Index Template

**Purpose**: Display all blog posts across categories

**URL**: `/insights/`

**Structure Requirements**:

- Header navigation
- Category filter navigation
- Post grid/list component
- Pagination component
- Footer

**Components Needed**:

- Post Card component (reusable)
- Category Navigation component
- Pagination component

**Content Requirements**:

- Display latest posts from all categories
- Category filter functionality
- Pagination (posts per page: configurable)
- SEO meta tags
- Schema markup (WebPage, BreadcrumbList)

**Responsive Requirements**:

- Mobile-first design
- Responsive grid (1-3 columns based on screen size)
- Touch-friendly navigation
- Optimized images

**Performance Requirements**:

- Lazy load images
- Pagination to limit initial load
- Optimized CSS/JS
- Fast page load (<2s LCP)

### 2. Category Archive Template

**Purpose**: Display posts for a specific category

**URLs**:

- `/insights/lexikon/`
- `/insights/ratgeber/`
- `/insights/inside-ordio/`

**Structure Requirements**:

- Header navigation
- Category header (title, description)
- Post grid/list component
- Pagination component
- Footer

**Components Needed**:

- Post Card component (reusable)
- Category Header component
- Pagination component

**Content Requirements**:

- Display posts filtered by category
- Category-specific header
- Pagination
- SEO meta tags
- Schema markup (CollectionPage, BreadcrumbList)

**Variations**:

- Can reuse index template with category filter
- Category-specific styling possible

**Responsive Requirements**:

- Same as index template
- Category-specific optimizations

### 3. Single Post Template

**Purpose**: Display individual blog post

**URL Pattern**: `/insights/{category}/{slug}/`

**Structure Requirements**:

- Header navigation
- Breadcrumbs (optional but recommended)
- Post header (title, date, featured image)
- Post content area
- Related posts section
- Footer

**Components Needed**:

- Post Header component
- Post Content component
- Related Posts component
- Breadcrumbs component (optional)
- Social Sharing component (optional)

**Content Requirements**:

- Post title (H1)
- Publication date
- Featured image
- Post content (HTML)
- Author information (if available)
- Related posts (14 posts)
- SEO meta tags
- Schema markup (Article, BreadcrumbList, ImageObject)

**Responsive Requirements**:

- Readable content width (max-width: 7xl/1280px)
- Responsive images
- Mobile-friendly typography
- Touch-friendly links

**Performance Requirements**:

- Optimized featured image
- Lazy load content images
- Fast content rendering
- Related posts lazy load

## Component Requirements

### Post Card Component

**Purpose**: Display post preview

**Props/Data**:

- Title
- Featured image
- Excerpt/preview
- Publication date
- Category
- URL/slug

**Features**:

- Responsive image
- Hover effects
- Link to post
- Category badge

**Reusability**: Used across all listing pages

### Post Header Component

**Purpose**: Display post title and metadata

**Props/Data**:

- Title
- Featured image
- Publication date
- Author (if available)
- Category
- Reading time (if available)

**Features**:

- Responsive layout
- Image optimization
- Date formatting
- Category link

### Post Content Component

**Purpose**: Render post HTML content

**Props/Data**:

- HTML content
- Images (with optimization)
- Links (internal/external)

**Features**:

- HTML rendering
- Image optimization
- Link processing
- Responsive typography

### Related Posts Component

**Purpose**: Display related posts

**Props/Data**:

- Related post IDs/URLs
- Post data (title, image, date)

**Features**:

- Post card reuse
- Limit (14 posts)
- Relationship-based selection
- Responsive grid

### Pagination Component

**Purpose**: Navigate between pages

**Props/Data**:

- Current page
- Total pages
- Posts per page
- Base URL

**Features**:

- Previous/Next links
- Page numbers
- Current page highlighting
- URL generation

### Category Navigation Component

**Purpose**: Filter/navigate categories

**Props/Data**:

- Categories list
- Current category
- Post counts per category

**Features**:

- Active state
- Link generation
- Responsive design
- Filter functionality

### Breadcrumbs Component

**Purpose**: Display navigation path

**Props/Data**:

- Breadcrumb items (Home, Category, Post)

**Features**:

- Link generation
- Schema markup
- Responsive display

## Template Structure Specifications

### File Structure

**Recommended**:

```
templates/
├── blog/
│   ├── index.html (or index.jsx)
│   ├── category.html (or category.jsx)
│   └── post.html (or post.jsx)
components/
├── blog/
│   ├── PostCard.jsx
│   ├── PostHeader.jsx
│   ├── PostContent.jsx
│   ├── RelatedPosts.jsx
│   ├── Pagination.jsx
│   ├── CategoryNav.jsx
│   └── Breadcrumbs.jsx
```

### Data Structure

**Post Data**:

```json
{
  "slug": "leitfaden-zur-finanzbuchhaltung",
  "title": "Leitfaden zur Finanzbuchhaltung",
  "category": "lexikon",
  "content": "<html>...",
  "excerpt": "...",
  "featured_image": "...",
  "publication_date": "2023-09-01",
  "modified_date": "2025-03-31",
  "author": "Emma",
  "meta_title": "...",
  "meta_description": "...",
  "topics": ["personalverwaltung"],
  "related_posts": [...]
}
```

## Responsive Requirements

### Breakpoints

- **Mobile**: < 640px
- **Tablet**: 640px - 1024px
- **Desktop**: > 1024px

### Layout Adaptations

- **Mobile**: Single column, stacked navigation
- **Tablet**: 2-column grid, expanded navigation
- **Desktop**: 3-column grid, full navigation

### Performance Targets

- **LCP**: < 2.5s
- **FID**: < 100ms
- **CLS**: < 0.1
- **PageSpeed Score**: > 90

## SEO Requirements

### Meta Tags

- Title tags (unique per page)
- Meta descriptions (unique per page)
- Open Graph tags
- Twitter Card tags
- Canonical URLs

### Schema Markup

- Organization (all pages)
- WebSite (all pages)
- WebPage (index/posts)
- Article (single posts)
- BreadcrumbList (all pages)
- CollectionPage (category archives)

### URL Structure

- Maintain current URL structure
- SEO-friendly slugs
- Category-based URLs

## Migration Considerations

### Design Flexibility

- **Not Required**: Exact design replication
- **Required**: Functional structure
- **Opportunity**: Improve UX/UI
- **Focus**: Performance and SEO

### Content Migration

- Preserve all content
- Maintain URL structure
- Preserve internal links
- Update broken links

### Performance Optimization

- Static generation
- Image optimization
- Code splitting
- Lazy loading
- Caching strategy

## Related Documentation

- [Frontend Layouts](FRONTEND_LAYOUTS.md) - Current layout structure
- [Frontend Components](FRONTEND_COMPONENTS.md) - Component inventory
- [Migration Architecture](MIGRATION_ARCHITECTURE.md) - Technical architecture
- [Migration Content Structure](MIGRATION_CONTENT_STRUCTURE.md) - Data structure requirements