Single Page Layouts Guide

Single page layouts define how individual pieces of content are presented. Each layout offers a unique reading experience tailored to different content types and audience preferences.

Standard Layout

The Standard layout provides a traditional blog post experience with comprehensive features and excellent readability.

Key Features

• Sidebar table of contents for easy navigation
• Author bio section with social links
• Related posts to increase engagement
• Social sharing buttons for viral potential
• Comment section (optional)
• Full metadata display

Layout Structure

┌─────────────────────────────────┐
│          Header/Title           │
├──────────────┬──────────────────┤
│              │                  │
│   Content    │     Sidebar      │
│   (2/3)      │     (1/3)        │
│              │   - TOC          │
│              │   - Share        │
│              │   - Related      │
└──────────────┴──────────────────┘

Best Use Cases

1. Technical articles requiring navigation
2. Long-form blog posts
3. Documentation pages
4. Tutorials and guides

Configuration Example

---
title: Complete Guide to Astro
layout: standard
showToc: true
showAuthor: true
showRelated: true
showSharing: true
---

Magazine Layout

The Magazine layout offers a modern, editorial design inspired by online publications.

Key Features

• Hero image integration with text overlay
• Two-column reading on desktop
• Floating social share buttons
• Inline table of contents
• Drop cap first letter
• Enhanced typography

Visual Design

• Large, impactful hero images
• Sophisticated typography
• Ample white space
• Visual hierarchy
• Premium feel

Best Use Cases

1. Editorial content
2. Feature articles
3. Photo essays
4. Storytelling pieces
5. Brand narratives

Configuration Example

---
title: The Future of Web Development
layout: magazine
heroImage: /images/hero.jpg
excerpt: A compelling introduction to draw readers in...
---

Unique Features

Floating Social Share

• Fixed position on scroll
• Vertical orientation
• Non-intrusive placement

Typography Enhancement

• Larger font sizes
• Optimized line height
• Better paragraph spacing

Minimal Layout

The Minimal layout provides a distraction-free reading experience focused entirely on content.

Key Features

• Centered content column
• Collapsible TOC to save space
• Typography-first design
• Subtle animations
• End mark (◆ ◆ ◆)
• Clean aesthetic

Design Philosophy

“Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.” - Antoine de Saint-Exupéry

This layout embodies minimalist principles:

• No sidebar distractions
• Hidden navigation
• Focus on readability
• Elegant simplicity

Best Use Cases

1. Essays and opinion pieces
2. Poetry and creative writing
3. Personal stories
4. Philosophical content
5. Premium content

Configuration Example

---
title: Meditations on Simplicity
layout: minimal
showToc: true # Will be collapsible
showSharing: true # Appears at end
---

Comparing Layouts

Feature Comparison

Feature	Standard	Magazine	Minimal
Sidebar TOC	✓	Desktop only	Collapsible
Hero Image	Optional	Prominent	Optional
Social Share	Sidebar	Floating	Bottom
Author Bio	Full	Compact	Minimal
Related Posts	Sidebar	Bottom	Bottom
Reading Width	2/3	Variable	Narrow
Typography	Standard	Enhanced	Premium
Best For	Information	Stories	Essays

Performance Metrics

Standard Layout

• JavaScript: Moderate (TOC, sharing)
• CSS: ~15KB
• Interactive elements: High

Magazine Layout

• JavaScript: Moderate (floating elements)
• CSS: ~18KB
• Visual complexity: High

Minimal Layout

• JavaScript: Minimal
• CSS: ~12KB
• Fastest load time

Responsive Design

Mobile Adaptations

All Layouts (<640px)

• Single column
• Collapsible elements
• Touch-optimized
• Bottom navigation

Tablet (640-1024px)

• Standard: Sidebar moves below
• Magazine: Single column
• Minimal: Unchanged

Desktop (>1024px)

• Full layout features
• Optimal reading width
• All interactive elements

Customization Options

Global Settings

Configure in /src/config/cms.js:

features: {
  toc: true,
  sharing: true,
  readingTime: true,
  relatedPosts: true,
  authorBio: true
}

Per-Page Overrides

---
showToc: false # Hide on this page
showAuthor: false # Hide author bio
showRelated: false # Hide related posts
showSharing: false # Hide sharing buttons
---

Choosing the Right Layout

Decision Matrix

Choose Standard when:

• Content is information-dense
• Navigation is important
• Related content matters
• Traditional blog feel needed

Choose Magazine when:

• Visual impact is priority
• Storytelling is key
• Brand image matters
• Modern aesthetic required

Choose Minimal when:

• Content should shine
• Distractions must be eliminated
• Reading experience is paramount
• Elegance is valued

Advanced Customization

CSS Variables

Each layout exposes CSS variables:

/* Standard */
--standard-sidebar-width: 300px;
--standard-content-max-width: 65ch;

/* Magazine */
--magazine-hero-height: 70vh;
--magazine-column-gap: 3rem;

/* Minimal */
--minimal-content-width: 650px;
--minimal-font-size: 1.125rem;

Component Slots

Layouts support component injection:

{/_ cta
heading: "Subscribe Now"
variant: "primary"
_/}

Migration Between Layouts

Switching layouts is seamless:

# Before
layout: standard

# After (instant change)
layout: magazine

No content changes required!

Best Practices

1. Content-Layout Alignment

Match layout to content purpose

2. Consistency

Use similar layouts for similar content

3. User Experience

Consider your audience’s preferences

4. Performance

Minimal for mobile-first sites

5. Testing

Preview in all layouts before choosing

What’s Next?

Explore more CMS features:

• RSS Feeds
• Search Functionality
• Hierarchical Content