Metrica
Skip to content
All posts

Blog

Articles on Astro, web performance, design systems, and building with Fastry.

Make It Yours: Set a Custom Logo and Site Name

Swap Astro Rocket's auto-generated monogram for your own logo image, rename your site, and choose between a logo-with-wordmark or a logo-only header — mostly from a single config file.

Hans Martens
2 min
astro-rocket branding logo customization

The Stack Marquee — A Pure-CSS Infinite Tech Strip

Astro Rocket's homepage has a new Stack Marquee: two rows of tech-stack cards scrolling opposite ways with zero JavaScript. Here's how the loop works and why it's hidden on phones.

Hans Martens
2 min
astro-rocket animation css components ux performance

What the Lighthouse Score Actually Means — and Why This Site Hits 100

A plain-language guide to the Google Lighthouse report: what the four scores measure, how to run one yourself, and what 100/100/100/100 says about a modern Astro site.

Almaz
2 min
lighthouse performance accessibility seo web-vitals

Going Multilingual: Native i18n in Astro Rocket 1.3.0

How the new opt-in i18n system works, what it adds when you turn it on, and the exact steps to ship your site in English plus a second language.

Hans Martens
2 min
astro-rocket i18n internationalization tutorial v1-3-0

Comments on Blog Posts — Giscus, Lazy-Loaded

Astro Rocket now has optional comments on blog posts, powered by Giscus and GitHub Discussions. The script is lazy-loaded so readers who don't scroll to the bottom pay zero cost.

Hans Martens
2 min
astro-rocket features blog comments giscus

Independent Footer Menu — Different Links in Header and Footer

Astro Rocket now lets you configure the footer menu independently of the header navigation. Add a Privacy link, an Imprint, or a Cookie Policy without cluttering your main nav.

Hans Martens
2 min
astro-rocket features footer navigation

Table of Contents — Reading Anchors for Long Posts

Astro Rocket renders an optional TOC on blog posts in three layouts — inline card, sticky sidebar, or both — with the sidebar on the left or right. Pick what fits your audience.

Hans Martens
2 min
astro-rocket features blog navigation

System, Light, Dark — How Astro Rocket's Colour-Mode System Works

A 3-state colour-mode system with no flash, live OS-preference tracking, and a pill dropdown that respects what the user actually picked. Here is how it is built.

Hans Martens
2 min
astro-rocket dark-mode design-system ux tutorial

Animations in Astro Rocket — How the Premium Motion Design Works

A deep dive into every animation layer in Astro Rocket: the spring-curve hero entrance, staggered cascades, scroll-reveal, and how it all stays smooth without a JS animation library.

Hans Martens
2 min
astro-rocket animation css ux performance

57 Components Ready to Use — Astro Rocket's Full UI Library

Astro Rocket ships with 57 production-ready components from the Velocity library — buttons, cards, dialogs, forms, data display, and full page-structure components. All accessible, all themed.

Hans Martens
2 min
astro-rocket components ui velocity

SEO in Astro Rocket: What's Built In and How to Configure It

Astro Rocket handles structured data, Open Graph, canonical URLs, sitemaps, and more out of the box. Here's exactly what ships and where to configure it.

Hans Martens
2 min
astro-rocket seo structured-data tutorial configuration

Hero Scroll Indicator — Desktop-Only, Hides on Scroll

Astro Rocket's hero has an animated scroll indicator: two bouncing chevrons that fade in after the hero animation and disappear the moment you start scrolling. Here's how every part of it works.

Hans Martens
2 min
astro-rocket features ux animation

Follow along

Stay in the loop — new articles, thoughts, and updates.