Day 12: Prepare Case Study Content

Today was all about preparing the foundation for case studies. I needed a structured way to gather and organize case study information, so I created a questionnaire and set up Astro’s content collection system.

Creating the Questionnaire

First, I created a detailed specification document that serves as a questionnaire for gathering case study information. This document outlines all the fields needed for each case study:

• Project title and slug
• Client type (full-site, plugin, or maintenance)
• Project overview and description
• Scope of work
• Challenges faced
• Constraints and context
• Solution approach
• Technologies used
• Results achieved
• Client feedback
• Associated assets

This questionnaire ensures I capture all the necessary information in a consistent format for each case study.

Setting Up Astro Content Collection

Next, I set up Astro’s content collection schema for case studies. The schema includes all the fields from the questionnaire, with proper TypeScript types and Zod validation:

const caseStudiesSchema = z.object({
  title: z.string(),
  clientType: z.enum(['full-site', 'plugin', 'maintenance']),
  href: z.string().url(),
  projectSource: z
    .object({
      label: z.string(),
      href: z.string().url(),
    })
    .optional(),
  collaborateSince: z.string().optional(),
  description: z.string(),
  scope: z.array(z.string()),
  overview: z.array(z.string()),
  challenge: z.array(z.string()),
  constraintsAndContext: z.array(z.string()),
  solution: z.array(z.string()),
  technologies: z.array(z.string()),
  results: z.array(z.string()),
  clientFeedback: z.string().optional(),
  assets: z
    .array(
      z.object({
        label: z.string(),
        href: z.string().url(),
      })
    )
    .optional(),
});

Building Helper Functions

I created helper functions (getCaseStudies() and getCaseStudy(slug)) to provide a clean API for retrieving case study data from the content collection. These functions:

• Convert content collection entries to a consistent CaseStudyEntry interface
• Handle slug generation from filenames
• Provide type-safe access to case study data
• Support both listing all case studies and retrieving individual ones

Initial Case Study Content

I prepared the initial case study markdown files in src/content/case-studies/:

• client-portal.md - A WordPress plugin project
• skylark-law-ma-child-support-calculator.md - A Gravity Forms customization project

Each markdown file follows the schema structure, with frontmatter containing all the structured data and the body containing any additional narrative content.

What’s Next

With the content collection schema and helper functions in place, Day 13 will focus on building the actual case study pages that display this content in a beautiful, readable format.