Skip to content
C Cyberline Solutions
Tag

#astro-rocket

19 posts tagged "astro-rocket".

Video Slides in Project Galleries — Zero Bytes Until Play

Project carousels now accept self-hosted video slides next to images. Here's how to use them, how they work, and why they don't cost a single Lighthouse point.

H Hans Martens
2 min read
#astro-rocket #features #projects #performance

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.

H Hans Martens
2 min read
#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.

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

Going Multilingual: Native i18n in Astro Rocket

How Astro Rocket's opt-in i18n works end to end — locale routing, the t() helper, an auto-localized blog, projects, and navigation — and the exact steps to ship a multilingual site.

H Hans Martens
2 min read
#astro-rocket #i18n #internationalization #tutorial

Comments on Blog Posts — Giscus or Cusdis, Lazy-Loaded

Astro Rocket's blog comments are now pluggable: pick Giscus (GitHub Discussions) or the self-hostable, privacy-friendly Cusdis. Both lazy-load on scroll — skip them and you pay nothing.

H Hans Martens
2 min read
#astro-rocket #features #blog #comments #giscus #cusdis

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.

H Hans Martens
2 min read
#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.

H Hans Martens
2 min read
#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.

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

Getting Started with Astro Rocket — From Install to Live in Minutes

How to install, configure, and deploy Astro Rocket — covering site.config.ts, brand colours, navigation, writing posts, and deploying to Vercel.

H Hans Martens
1 min read
#astro-rocket #getting-started #configuration #vercel

Astro Rocket Configuration — Every Toggle, Theme, and Layout Option Explained

A complete walkthrough of Astro Rocket's configuration options: 12 colour themes, OKLCH colours, typography, radius and shadow tokens, header styles, dark mode, and more.

H Hans Martens
2 min read
#astro-rocket #configuration #customization #themes

Animations in Astro Rocket — How the Premium Motion Design Works

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

H Hans Martens
2 min read
#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.

H Hans Martens
2 min read
#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.

H Hans Martens
2 min read
#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.

H Hans Martens
2 min read
#astro-rocket #features #ux #animation

Scroll Progress Ring — A Circular Indicator on the Back-to-Top Button

Astro Rocket's back-to-top button now has a circular SVG progress ring that fills as you scroll. It's brand-coloured, theme-aware, and runs entirely in CSS and a small inline script.

H Hans Martens
2 min read
#astro-rocket #features #ux #animation

Contact Form Setup: Resend, Vercel, and GoDaddy Step by Step

Astro Rocket's contact form is wired up but needs three things to actually deliver email: a Resend account, a verified domain, and one environment variable on Vercel.

H Hans Martens
2 min read
#astro-rocket #tutorial #email #vercel #deployment

Scroll Progress Bar — Reading Progress at a Glance

Astro Rocket now has a scroll progress bar: a thin brand-coloured line that fills as you scroll. Here's how it works, where it lives, and how to enable it on any page.

H Hans Martens
2 min read
#astro-rocket #features #header #ux

How Astro Rocket's Design System Works — Tokens, Colors, and Dark Mode

Astro Rocket uses a three-tier token architecture with OKLCH colors. Change one value and the entire site updates. Here's how it works and how to make it yours.

H Hans Martens
2 min read
#astro-rocket #design-system #tailwind #customization #tutorial

The Hero Typing Effect in Astro Rocket — How It Works and How to Tune It

Astro Rocket's hero headline cycles through words with a typing animation. Learn how it works, how to tune every speed and pause, and how to disable it entirely.

H Hans Martens
2 min read
#astro-rocket #components #customization #tutorial #javascript