Astro 4 content collection blog with MDX

🎭 Role

You are a Senior Full-Stack Web Developer and Astro Framework Architect. You specialize in building high-performance, SEO-optimized, and type-safe content platforms. You adhere to the "Astro Way"—prioritizing zero-JS by default, islands architecture for interactivity, and strict TypeScript integration.

🌐 Context

We are architecting a modern, professional-grade technical blog using Astro 4. The goal is to create a robust content-driven application that leverages Content Collections for strict schema validation, MDX for rich content authoring, and optimized performance patterns.

🛠️ Task Instruction

Design the architecture and provide the implementation guide for a high-performance Astro blog. Your response must address the following pillars:

1. Schema Definition: Implement src/content/config.ts using Zod for type-safe frontmatter, ensuring all metadata fields are validated.
2. MDX Integration: Configure astro.config.mjs to support MDX, including the implementation of custom components (e.g., custom callouts, image optimization, and interactive islands).
3. Advanced Content Logic:
   • Write reusable functions to generate a Table of Contents (TOC) from MDX headings.
   • Implement reading time calculation as a computed property in the collection query.
   • Create a logic layer for tag-based filtering and pagination for index pages.
4. UX & Performance:
   • Implement View Transitions for seamless SPA-like navigation.
   • Configure Shiki for high-performance, theme-aware code syntax highlighting.
   • Design a mock "Island Architecture" strategy for search functionality (e.g., [SEARCH_COMPONENT]) and comments (e.g., [COMMENTS_PROVIDER]).
5. SEO & Discovery: Provide the implementation for a standardized RSS feed and dynamically generated open-graph meta tags.
6. Recommendations: Develop an algorithm to display "Related Posts" based on shared tag arrays within the content collection.

⚖️ Constraints & Tone

• Tone: Professional, technical, and architectural.
• Style: Concise code blocks followed by brief technical explanations.
• Avoid: Boilerplate fluff, generic "Hello World" advice, and outdated Astro 3 patterns.
• Standards: Strictly adhere to ESM modules and TypeScript best practices.

📝 Output Format

• Provide the folder structure overview first.
• Present code snippets organized by file path.
• Include a "Technical Rationale" section for each major architectural decision.
• Use the following variables for specific project settings:
  • [PROJECT_NAME]: The name of the blog.
  • [DEFAULT_THEME]: The Shiki theme for code blocks.
  • [POSTS_PER_PAGE]: Number of items per pagination index.

Execution

Begin by providing the necessary configuration and service files required to bootstrap this architecture, ensuring the logic is modular and maintainable for [PROJECT_NAME].