# Blog Frontend Components

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

Inventory of all blog-specific components, their variations, and dependencies.

## Overview

This document catalogs all blog-specific components, their usage across page types, variations, and component dependencies.

## Component Inventory

### 1. Post Card Component

**Purpose**: Display post preview/preview card

**Usage**:

- Blog index page
- Category archive pages
- Related posts sections

**Structure**:

```
Post Card
├── Featured Image
├── Category Badge
├── Title (H3, linked)
├── Excerpt/Preview Text
├── Publication Date
└── Read More Link
```

**Variations**:

- **Index Page**: Full-width cards in grid
- **Category Archive**: Category-specific styling
- **Related Posts**: Smaller, compact format

**Counts**:

- Index: 8 post cards
- Lexikon: Variable (all Lexikon posts)
- Ratgeber: Variable (all Ratgeber posts)
- Inside Ordio: Variable (all Inside Ordio posts)
- Single Post Related: 14 related post cards

### 2. Pagination Component

**Purpose**: Navigate between pages of posts

**Usage**:

- Blog index page
- Category archive pages

**Structure**:

```
Pagination
├── Previous Link (if applicable)
├── Page Numbers
│   ├── Current Page (highlighted)
│   ├── Adjacent Pages
│   └── Ellipsis (for gaps)
└── Next Link (if applicable)
```

**Counts**:

- Index: 1 pagination component
- Lexikon: 1 pagination component
- Ratgeber: 1 pagination component
- Inside Ordio: 1 pagination component

### 3. Post Header Component

**Purpose**: Display post title, metadata, and featured image

**Usage**:

- Single post pages only

**Structure**:

```
Post Header
├── Featured Image
├── Category Badge
├── Title (H1)
├── Publication Date
├── Author (if displayed)
└── Reading Time (if displayed)
```

**Content**:

- H1: Post title
- Featured image
- Publication date
- Author information

### 4. Post Content Component

**Purpose**: Display main post content

**Usage**:

- Single post pages only

**Structure**:

```
Post Content
├── H2-H6 Headings
├── Paragraphs
├── Images
├── Lists
├── Links
└── Other HTML Elements
```

**Content Metrics** (sample post):

- H1: 1 heading
- H2: 4 headings
- H3: 4 headings
- Images: 9 images
- Links: 18 links

### 5. Related Posts Component

**Purpose**: Display related posts

**Usage**:

- Single post pages only

**Structure**:

```
Related Posts
├── Section Title
└── Post Cards Grid
    ├── Related Post 1
    ├── Related Post 2
    └── ...
```

**Count**: 14 related post cards per single post

### 6. Category Navigation Component

**Purpose**: Filter/navigate between categories

**Usage**:

- Blog index page
- Category archive pages

**Structure**:

```
Category Navigation
├── All Posts Link
├── Lexikon Link
├── Ratgeber Link
└── Inside Ordio Link
```

**Variations**:

- **Tabs**: Category filter tabs
- **Links**: Category archive links
- **Active State**: Highlighted active category

### 7. Breadcrumbs Component

**Purpose**: Display navigation path

**Usage**:

- Single post pages (if enabled)
- Category archive pages (if enabled)

**Structure**:

```
Breadcrumbs
├── Home Link
├── Insights Link
├── Category Link (if applicable)
└── Current Page (text, not link)
```

**Schema**: BreadcrumbList schema markup

### 8. Social Sharing Component

**Purpose**: Share posts on social media

**Usage**:

- Single post pages (if enabled)

**Structure**:

```
Social Sharing
├── Facebook Share
├── Twitter Share
├── LinkedIn Share
└── Other Platforms
```

**Status**: Not consistently detected (may be conditional)

## Component Dependencies

### Post Card Dependencies

- Featured Image Component
- Category Badge Component
- Link Component
- Date Formatting Component

### Post Header Dependencies

- Featured Image Component
- Category Badge Component
- Date Formatting Component
- Author Component (if used)

### Related Posts Dependencies

- Post Card Component
- Post Relationship Logic
- Link Component

## Component Variations by Page Type

### Index Page Components

- Post Cards (8)
- Pagination (1)
- Category Navigation

### Category Archive Components

- Post Cards (variable)
- Pagination (1)
- Category Header

### Single Post Components

- Post Header (1)
- Post Content (1)
- Related Posts (14 cards)
- Breadcrumbs (if enabled)
- Social Sharing (if enabled)

## Component Reusability

### Highly Reusable Components

1. **Post Card**: Used across all listing pages
2. **Pagination**: Used on all archive pages
3. **Category Navigation**: Used site-wide
4. **Link Component**: Used throughout

### Page-Specific Components

1. **Post Header**: Single posts only
2. **Post Content**: Single posts only
3. **Related Posts**: Single posts only
4. **Breadcrumbs**: Conditional, single posts/archives

## Migration Considerations

### Component Requirements

1. **Post Card Component**

   - Reusable across page types
   - Responsive design
   - Image optimization
   - Link handling

2. **Pagination Component**

   - Page number generation
   - Previous/Next logic
   - URL structure handling

3. **Post Header Component**

   - Featured image display
   - Metadata formatting
   - Responsive layout

4. **Post Content Component**

   - HTML content rendering
   - Image handling
   - Link processing
   - Schema markup

5. **Related Posts Component**
   - Relationship logic
   - Post card reuse
   - Limit/ordering

### Component Architecture

**Recommended Structure**:

```
components/
├── blog/
│   ├── PostCard.jsx
│   ├── PostHeader.jsx
│   ├── PostContent.jsx
│   ├── RelatedPosts.jsx
│   ├── Pagination.jsx
│   ├── CategoryNav.jsx
│   └── Breadcrumbs.jsx
```

## Data Files

- **Frontend Structure**: `docs/data/blog-frontend-structure.json`
- **Post Metadata**: `docs/data/blog-posts-metadata.json`

## Related Documentation

- [Frontend Page Types](FRONTEND_PAGE_TYPES.md) - Page type inventory
- [Frontend Layouts](FRONTEND_LAYOUTS.md) - Layout structure
- [Frontend Navigation](FRONTEND_NAVIGATION.md) - Navigation structure
- [Migration Template Requirements](MIGRATION_TEMPLATE_REQUIREMENTS.md) - Template specifications