Starting a dev log
This is the first entry in the Imperfect Systems dev log. The plan is simple: write down what I’m building, what breaks, and what I’d do differently, in public.
Why a dev log
Most of the interesting work happens between releases. A dev log captures that middle part: the dead ends, the small wins, the decisions that only make sense once you’ve seen the alternative fail.
How this blog works
The blog isn’t bespoke. The components, the related-posts scoring, the content schema, and the syntax-highlighting config all come from a shared package, @vdaluz/astro-blog, which also powers another site. This page is mostly glue: a content collection, two route files, and a neon-on-black theme.
import { blogSchema } from '@vdaluz/astro-blog';
const blog = defineCollection({
loader: glob({ pattern: '**/*.md', base: './src/content/blog' }),
schema: blogSchema({ defaultAuthor: 'Imperfect Systems' }),
});
The components are driven entirely by CSS-variable design tokens, so the same code renders in this site’s neon-green theme and in a completely different palette elsewhere. No forks, no copy-paste.
What’s next
More posts, and probably more sites sharing the same package. For now: it builds, it’s green, and it works.
Related reading
The filter pills existed, just not where anyone could find them
Per-project filtered views with a nice pill nav - reachable only from homepage cards. The main /blog index, where everyone actually lands, had no way in at all.
The CTA that pointed at the wrong dev log
The only call to action on the Deep Cut Atlas page linked to the whole unfiltered blog - a link that worked, returned 200, and quietly sent everyone to the wrong place for weeks.
The linter was pointing at the right line for the wrong reason
An attribute I nearly deleted on an assumption, an overflow that only exists at phone width, and an a11y suite that passed on every version of this - broken and fixed.