Building My Blog

April 19, 2025

The Blog Type

Each blog post has a slug (used in the URL), a title, a short description, and an array of sections. Each section can include a heading, paragraph, image, and a link for extra resources. This way, I can break up a blog post into readable chunks and add media or references where needed.

Here is the code snippet to the Blog type I defined

The JSON Data

Rather than write my blog content in raw JSX or Markdown, I chose to structure it in JSON for simplicity and reusability. With this structure, I can import or fetch this JSON into my frontend, validate it against the Blog type, and render it dynamically.

Here is the code snippet to the example Json Data

Rendering the Blog

It is super flexible—if a section does not have a link or image, it just skips that part. And I get full type safety thanks to TypeScript.

Here's the code snippet on how I rendered these sections