Skip to main content
The RobTop Games Web project includes a powerful blog system built on Astro’s content collections, providing type-safe content management and dynamic routing.

​
Architecture Overview

The blog system is built using several key components:
  • Content Collections - Type-safe content management using Astro’s content collections API
  • Dynamic Routing - Automatic page generation using [slug].astro pattern
  • Schema Validation - Zod schema ensures all blog posts have required fields
  • PostLayout - Consistent layout for all blog posts with author info, tags, and breadcrumbs

​
Content Collections

Blog posts are stored in src/content/blog/ and managed through Astro’s content collections system. This provides:
  • Type safety - TypeScript types generated from Zod schema
  • Validation - Automatic validation of frontmatter fields
  • Query API - Simple API to fetch and filter posts
The collection is defined in src/content/config.ts:3-16 with a Zod schema that validates:
  • Title, description, and author information
  • Creation and update timestamps
  • Cover image and author avatar URLs
  • Publish status and optional tags
Learn more about content collections.

​
Blog Post Structure

Each blog post consists of:
  1. Frontmatter - Metadata in YAML format at the top of the file
  2. Markdown Content - The actual blog post content using standard Markdown
---
title: "Your Post Title"
createdAt: "2025-08-12T04:17:35.590Z"
image: "https://example.com/cover.jpg"
description: "A brief description"
author: "Author Name"
publish: true
tags: ["Guide", "Tutorial"]
authorImage: "https://example.com/avatar.jpg"
---

# Your Content Here

Write your blog post content using Markdown...

​
Dynamic Routing

The blog uses Astro’s dynamic routing with [slug].astro to automatically generate pages: 
// src/pages/blog/[slug].astro:5-11
export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}
This function:
  1. Fetches all posts from the blog collection
  2. Creates a route for each post using its filename as the slug
  3. Passes the post data as props to the page component
The slug is automatically generated from the filename. For example, guide-to-geometry-dash.md becomes /blog/guide-to-geometry-dash.

​
Blog Listing Page

The blog index page at /blog displays all published posts. It uses the CardsBlog component to:
  • Query all posts from the collection
  • Filter by publish: true status
  • Sort by creation date (newest first)
  • Display post cards with images, titles, and metadata

​
Post Layout Features

The PostLayout.astro provides a rich reading experience:
  • Breadcrumb Navigation - Shows the path from home → blog → post
  • Author Information - Displays author name, avatar, and post date
  • Tags Display - Shows all tags with visual badges
  • Cover Image - Large hero image at the top of the post
  • Recent Articles Sidebar - Shows 3 most recent posts
  • Social Actions - Like, comment, and share buttons
  • Responsive Design - Optimized for mobile and desktop
The layout automatically calculates “days ago” for post timestamps and includes hover effects for better user interaction.

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us