Blog Section

A flexible blog section component designed to showcase articles, posts, and content in various layouts. Perfect for documentation sites, company blogs, and content-heavy pages with responsive design and customizable display options.

Features

• Multiple Layouts: Grid, list, and featured post layouts
• Responsive Design: Adapts beautifully to all screen sizes
• Rich Metadata: Support for categories, authors, dates, and read times
• Interactive Elements: Hover effects and smooth transitions
• Flexible Content: Customizable excerpts and post information
• SEO Friendly: Proper semantic HTML and structured data

Basic Usage

import BlogSection from "@/components/blog/BlogSection.astro"

const posts = [
  {
    title: "Getting Started with Documentation",
    excerpt: "Learn how to create beautiful documentation sites with modern tools and best practices.",
    date: "2024-01-15",
    author: "Jane Smith",
    tags: ["Tutorial"],
    readTime: "5 min read"
  },
];
// ... or these are typically attained via Astro Content Collections.

<BlogSection
  title="Latest Articles"
  tagline="From our blog"
  description="Stay updated with the latest insights, tutorials, and best practices."
  posts={posts}
  layout="grid"
/>

Examples

Grid Layout

List Layout

Featured Layout

Props

BlogPost Interface

interface BlogPost {
  title: string;        // Post title (required)
  date: string;         // Publication date in ISO format (required)
  author: string;      // Post author name (required)
  excerpt?: string;      // Post excerpt/summary
  tags?: string[];    // Post tags
  image?: string;       // Featured image URL
  readTime?: string;    // Estimated read time
}

Layout Types

Grid Layout

Perfect for showcasing multiple posts with equal visual weight:

• Responsive auto-fit grid system
• Consistent card-based design
• Automatic sizing based on content
• Great for blog homepages

<BlogSection layout="grid" posts={posts} />

List Layout

Ideal for chronological content display:

• Horizontal layout with image and content side-by-side
• Emphasizes chronological order
• Better for news feeds or updates
• Optimized for scanning

<BlogSection layout="list" posts={posts} />

Featured Layout

Best for highlighting important content:

• First post gets prominent featured treatment
• Remaining posts in standard grid
• Perfect for mixing evergreen and timely content
• Great for landing pages

<BlogSection layout="featured" posts={posts} />

Customization Options

Content Display

Control what information is shown for each post:

<BlogSection
  posts={posts}
  showExcerpts={true}
  showCategories={true}
  showAuthors={false}
  showReadTime={true}
/>

Custom Actions

Use the slot to add custom content like CTAs or navigation:

<BlogSection title="Latest Articles" posts={posts}>
  <a href="/docs-site-kickstarter/blog" class="blog-cta">
    View All Articles →
  </a>
</BlogSection>

Responsive Behavior

• Desktop: Auto-fit grid layout with optimal post sizing
• Tablet: Adjusted minimum sizes for better fit
• Mobile: Single column layout with optimized spacing
• Images: Responsive sizing with proper aspect ratios

SEO and Accessibility

• Semantic HTML: Proper article and heading structure
• Schema Markup: Rich snippets for better search results
• Alt Text: Image descriptions for screen readers
• Keyboard Navigation: Full keyboard accessibility
• Focus Management: Clear focus indicators

Date Formatting

Dates are automatically formatted using the browser’s locale:

// Input: "2024-01-15"
// Output: "January 15, 2024"

Best Practices

1. Consistent Excerpts: Keep excerpts to 2-3 sentences
2. Quality Images: Use high-resolution, relevant images
3. Clear Categories: Use consistent category naming
4. Read Time Accuracy: Provide realistic reading time estimates
5. Mobile Testing: Always test on mobile devices

Common Use Cases

• Documentation Blogs: Technical articles and tutorials
• Company News: Updates, announcements, and releases
• Resource Centers: Guides, best practices, and insights
• Community Content: User stories and case studies
• Product Updates: Feature releases and improvements

Integration Examples

With Static Site Generators

---
// In your Astro page
import { getCollection } from 'astro:content';
import BlogSection from '@/components/block/BlogSection.astro';

const posts = await getCollection('blog');
const formattedPosts = posts.map(post => ({
  title: post.data.title,
  excerpt: post.data.excerpt,
  date: post.data.date,
  author: post.data.author,
  image: post.data.image,
  tags: post.data.tags,
  readTime: post.data.readTime
}));
---

<BlogSection posts={formattedPosts} />

With CMS Integration

// Fetch from headless CMS
const posts = await fetch('/api/posts').then(res => res.json());

<BlogSection posts={posts} layout="featured" />