21 posts
Tailwind v4 moves configuration out of JavaScript and into your CSS. Here's how this Astro blog wires up the Vite plugin and defines its whole design system with @theme — no tailwind.config file at all.
Astro highlights code with Shiki out of the box. Here's how to pick a theme like github-dark, enable line wrapping, and understand how it plays with custom code-block markup.
A small, dependency-free lightbox that opens images, diagrams, and code full-screen with zoom, drag-to-pan, and keyboard controls. Here's the real client-side logic, piece by piece.
Build one small Astro component that formats dates for humans and machines at once, using Intl.DateTimeFormat and the HTML time element with a datetime attribute.
Add a real comment section to a static Astro blog with zero backend — Giscus stores every comment as a GitHub Discussion. Here's the setup, the config shape, and how to match a dark theme.
Add lightweight, cookie-free analytics to Astro with @vercel/analytics in a tiny reusable component — what it does, when it loads, and how to wire it up.
My blog and my portfolio are separate sites, but they're one person. Here's how a single Person @id in JSON-LD tells search engines exactly that.
How Astro's 404.astro convention works, what makes a helpful not-found page, and how static hosts serve it — walked through with this blog's real 404 page.
Teach search engines what your post actually is. Build a BlogPosting + BreadcrumbList JSON-LD graph in Astro and inject it per-post for rich results.
Learn how Astro's getStaticPaths turns your content into individual static pages at build time, using the real [slug].astro route from this blog.
Ship the three SEO basics every Astro blog needs: an @astrojs/rss feed, an @astrojs/sitemap, and one BaseHead component that emits canonical, Open Graph, Twitter, and robots meta on every page.
Build a complete blog tag system in Astro — a helper that counts tags, a /tags index page, and dynamically generated per-tag pages using getStaticPaths.
Three small helper functions turn an Astro content collection into related-post suggestions and prev/next links — draft hiding, tag-based ranking, and adjacency.
Define an Astro content collection with a Zod schema so every post's frontmatter is validated at build time and fully typed in your editor.
Add fast, fully client-side search to a static Astro blog using Pagefind — no server, no API, and no query ever leaving the visitor's browser.
Astro 7 ships a new default Markdown processor. Here's why you'd override it with unified() to register your own remark and rehype plugins, and how remarkPlugins, rehypePlugins, and shikiConfig fit together.
Wrap every Shiki code block in a toolbar with a language label, a copy button, and a fullscreen button — emitted at build time by a rehype plugin so there's no layout shift and it works before JavaScript loads.
Build a tiny remark plugin that counts the words in a Markdown post and exposes a '4 min read' estimate on Astro's frontmatter — grounded in real, working code.
Mermaid's internal color math can't parse oklch(), so passing OKLCH tokens straight in gives you washed-out defaults. Here's how I map my OKLCH design tokens to hex and feed them to mermaid.initialize.
Mermaid is a big library, and most blog posts have zero diagrams. Here's the one-guard pattern I use so only posts that actually contain a diagram download the mermaid JavaScript.
Astro's built-in Shiki highlighter treats a mermaid fence as code and syntax-highlights it. Here's how a tiny remark plugin rewrites that fence before Shiki sees it, so a client runtime can turn it into a real diagram.