tarzalt.dev

Source code for tarzalt.dev. A blog nobody subscribed to and a portfolio nobody asked for.

---

Stack

Tech	What it does
Astro 6	Generates the static site
Tailwind CSS 4	Styling
React 19	The few parts that actually need JS
MDX	Markdown that got promoted
KaTeX	Math nobody will read
Mermaid	Diagrams
Shiki	Syntax highlighting, GitHub light/dark
Cloudflare	Hosting

Setup

Node.js >= 22.12

npm install
npm run dev       # localhost:4321

Scripts

Command	Description
npm run dev	Dev server
npm run build	Production build to ./dist/
npm run preview	Preview production build locally
npm run lint	Find problems
npm run format	Fix formatting
npm run format:check	Find formatting problems
npm run typecheck	astro check

Structure

src/
├── components/       # Astro and React components
├── config/           # Navigation, social links
├── content.config.ts # Blog collection schema
├── data/blog/        # Posts as page bundles
│   └── my-post/
│       ├── index.md
│       └── cover.png
├── layouts/          # Base and BlogPost layouts
├── lib/              # Shared utilities
├── pages/
│   ├── blog/         # Listing + dynamic [slug] route
│   ├── projects/     # Project pages
│   ├── about.astro
│   └── index.astro
└── styles/           # Global CSS
public/               # Static assets

Writing posts

Create a directory under src/data/blog/:

src/data/blog/my-new-post/
  index.md      # or .mdx if markdown wasn't enough
  cover.png

---
title: 'Post Title'
date: 2024-01-01
description: 'Short description'
tags: ['tag1', 'tag2']
featuredImage: './cover.png'
draft: false
---

Images use relative paths: ![alt](./image.png)

Code quality

Husky + lint-staged run Prettier and ESLint on staged files before each commit. You'll know when you forgot a semicolon.

License

MIT