Building barox.dev, Kicking Off the Journal
Barox
Software Engineer
Key Takeaways
- barox.dev is built on TanStack Start as a personal journal to document lessons learned and practice technical writing.
- The site relies on a schema-validated content pipeline that catches frontmatter typos and missing tags early to prevent downstream page errors.
- Images support specific placement variants, allowing content to render inline, centered, or break out to full width.
- Sidenotes render inline in the flow of reading and automatically stack vertically to avoid overlapping.
This is the first entry in the journal, and fittingly it's about the site itself. I'm building barox.dev on TanStack Start, mostly to practice writing and to have somewhere to put lessons learned as I go.
Why a content pipeline first
Before any page renders a single post, there needs to be a trustworthy way to turn an MDX file into something the rest of the site can rely on.
That's the whole point of the content pipeline: parse once, validate hard, and let every downstream page trust the shape of a Post.
Frontmatter gets validated with a schema, so a typo'd date or a missing tag fails immediately instead of turning into a broken page three routes later.
Here's the rough shape of a parsed post:
interface Post {
slug: string
title: string
date: Date
tags: string[]
published: boolean
excerpt: string
}Images get a placement, not just a src
A default-variant image renders at the same width as the text
column, right in the flow of reading.
Sidenotes stack instead of overlapping — this one sits right below the first, not on top of it.
A fluid-variant image breaks out to the entire content width, for anything that needs to be legible rather than decorative.
More soon.