Glossary

About the role We're looking for a UX/UI Designer who bridges the gap between sharp visual thinking and practical, developer-friendly output.

Accessibility The component wraps everything in a with an set to all words joined by a comma: Screen readers announce the full list of words from the and ignore the animated content inside (the cursor has ).

Adcopy is a key concept used across this site's content and documentation.

Adding Custom Schema To add custom structured data to a specific page or component: JSON-LD categorization for rich search…

Code Example Adding New Variables You can add any new global variable here and then use it in your Tailwind classes or custom CSS.

The same applies to dark mode: all token values change when the class is toggled on , and every component updates without any extra code. --- Adding your own components When you need something that isn't in the library, follow the same patt

AI platform for audio ad creation and tracking.

What you'll learn Spend a full day building, evaluating, and shipping production-grade AI agents alongside practitioners who do this for a living.

AiCoursify is a key concept used across this site's content and documentation.

Aimakesong is a key concept used across this site's content and documentation.

Wardrobe optimization.

Knowledge bot for Slack.

How OpenAI's technical teams use Codex daily to accelerate engineering work — use cases and best practices that demonstrate how Codex enhances speed, work quality, and complexity management across Security, Product Engineering, and Infrastructure.

Change your voice to AI voices.

An open Microsoft Teams Q&A on the changing shape of engineering leadership — hiring, performance, team composition, and what stays the same when AI changes everything else.

AI growth platform for businesses.

A code writing assistant developed by Amazon

Build, train, and deploy ML models at scale.

Analytics and verification Set these in your file (copy from ): None of these are required during…

Customization Search Logic You can fine-tune the search sensitivity and indexed fields in : UI & Aesthetics The search modal is styled using Tailwind CSS 4 and Motion for smooth…

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.

A top-bar for important notifications.

The AnnouncementBanner sits at the top of your page to highlight news, sales, or…

AI image platform converts photos to art styles.

On-brand copywriting.

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.

Architecture Our search system is designed for speed and zero-cost scaling: Search Index: A lightweight JSON file ( ) is generated at build time containing the searchable content of all pages, blog posts, and docs.

Pose generator for artists.

AI programming agent.

Create custom images.

Static-first rendering with island architecture — load JavaScript only where you actually need it.

Astro Rocket ships configured with sensible…

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.

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.

Core Features ⚡ Astro v5 integration for blazing fast performance. 🎨 TailwindCSS styling with custom theme support. 📱 Responsive Design mobile-first approach. 🌗 Dark Mode fully supported out of the box.

Audit your landing page.

Auto combines both: phone and tablet readers get the inline card at the top, desktop readers get the sticky…

Automated generation The sitemap is built using .

Key Features Automated Sitemaps: Your content is automatically indexed and…

Automatic theme colour The ring colour requires no JavaScript to follow the active theme.

Customization and architecture of the Fuse.js Command Palette.

Badges are used to label items with short, descriptive…

Googles revolutionary AI image generation.

AI-powered text to UI design tool.

AI bangs try-on selfies.

Basic Markdown You can use all standard Markdown syntax: Bold and Italic text.

Modern, masonry-style grid layout.

Container & Grid {/ Container demo /} Bento Items Demonstrating Bento Items for structuring your page. {/ Grid demo /} Vertical Tabs {/ Card demo /} {/ Card demo /} {/ Card demo /} Detailed analytics with charts, traffic sources, and user b

import { Users, FileText, Heart, Video, Trophy } from 'lucide-react'; The BentoGrid provides a trendy, asymmetric layout inspired by bento boxes.

Copywriting assistant for WordPress & in Chrome.

Learning platform for students and educators.

Assistant with ChatGPT for devs.

The AI-powered coding assistant.

Blog components — (post listing card with cover image, tags, and reading time), (full-width post header with cover image and metadata), (three-card section at the bottom of every post), (Twitter/X, LinkedIn, clipboard copy), and (the brand-

Blog index — the bar sits underneath the solid bar header, exactly at the bottom border of the header.

Blog post SEO Each blog post has two frontmatter fields that feed directly into SEO: — becomes the page , , and .

Content Aggregation The feed automatically aggregates content from multiple sources: Blog Posts: Standard articles from .

Basic Markdown You can use all standard Markdown syntax: Bold and Italic text.

Boolean switches Blog image overlay When , a translucent brand-colour tint is applied over blog cover images.

Borders: for a subtle, modern feel.

Breadcrumbs: Improved navigation for nested pages.

Bring your hardest leadership question This is a no-slides, no-prepared-content…

For anything that needs , , or real-time updates, create a file and use the directive when you include it: --- Browse the live demo The fastest way to get a feel for all 57 components is the live component demo.

A practical, full-day workshop on shipping autonomous AI agents — from architecture and tool-use to evaluation, guardrails, and production deployment. Bring your laptop.

Built-in Schemas The following schemas are automatically generated based on the page type: Organization Where: Global (all pages).

Interactive button component with multiple variants and sizes.

What ships out of the box The SEO layer covers six distinct concerns: Structured data (JSON-LD) — schema.org markup for the home page and every blog post Open Graph and Twitter Cards — social sharing metadata for every page Canonical URLs —

import { ArrowRight } from 'lucide-react'; Cards are foundational containers that can be used for anything from feature lists to blog posts.

Topics that tend to come up Hiring engineers in a market where everyone claims AI experience Performance management when individual output is amplified by tools Team composition: how the senior-to-junior ratio is shifting Career advice for

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.

Changelog Entries: Product updates from .

A timeline entry for release notes.

The ChangelogItem displays a single release entry with version, date, type, and…

Changing the brand colour The base brand colour scale lives in .

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.

Checking your SEO output After deploying, verify with two tools: Google Rich Results Test — paste your URL and confirm structured data is parsed correctly Open Graph Debugger — verify social sharing metadata and force-refresh Facebook's cac

Create 3D maps for your next project.

To shift a theme to a completely different colour, you only need to change the hue number across the to scale — keep the lightness and chroma values the same and the whole palette moves…

Create and roleplay with AI characters.

For structured data (Google rich results), you can also supply a static logo image: Colour themes Astro Rocket ships with 12 colour themes.

The Universal Search in Cooper is powered by a high-performance Fuse.js engine, providing fuzzy matching and instant results via a premium Command Palette…

Astro Rocket now supports comments at the bottom of blog posts.

Astro Rocket now has optional comments on blog posts, powered by Giscus and GitHub…

Detailed feature comparison grid.

The ComparisonTable allows you to compare features across different plans or…

Custom CSS classes for specific UI components.

A guide on how to use MDX for documentation and blog posts.

Workshops & unconference Optional pre- and post-conference workshops at additional cost.

Configuring the site identity All structured data pulls from in .

Configuring your site Almost everything about the site is controlled from a single file: .

A 60-minute live webinar on choosing the right strategy framework for your context — OGSM, Porter's Five Forces, SAFe, Jobs-to-be-Done — and avoiding the consultant-deck trap.

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.

Variants {/ Section demo (component not bundled) /} {/ Section demo (component not bundled) /} | Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | | | | Controls the layout style. | Container The Container component cent

Content Aggregation The feed automatically aggregates content from multiple sources: Blog Posts: Standard articles from .

A flexible section for displaying text and images.

The ContentSection component is ideal for detailing specific features, telling a story, or presenting complex information with an accompanying image.

Learn how to set up and customize your new Astro project.

Core UI The fundamental elements of your user…

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.

The CTA (Call to Action) component is designed to drive user conversions at the end of a page or…

Customising the look The TOC uses the standard theme tokens — , , , .

Project Structure Here's a quick look at how the project is organized: Customization Theming You can easily customize the primary brand color and other site settings in .

Most sites get dark mode subtly wrong.

Most sites get dark mode subtly wrong.

Dark mode for free — because all colours are semantic, every new component you build inherits dark mode automatically as long as you use token-based utilities rather than hardcoded values.

Dark mode through tokens Dark mode in Astro Rocket is not a separate…

Data: Automatically maps frontmatter (Title, Description, Author, Date, Image) to the valid Schema.org…

Talks Decoupled Drupal in 2026 — Lessons from three production migrations JSON:API performance — Caching layers, response shaping, and where decoupling hurts Drupal + Astro — Live walkthrough of a content-driven site Doors open at 18:00 wit

Deep Linking Changelog entries in the RSS feed include intelligent deep links.

Deploying to Netlify Astro Rocket also supports Netlify out of the box.

Deploying to Vercel Create a new repository on GitHub (or GitLab / Bitbucket) and push your local project to it Go to vercel.com and click Add New Project Import your repository — Vercel detects Astro automatically Add your environment vari

Deployment This Boilerplate is ready to deploy to Vercel, Netlify, or any static hosting…

Trigger a new deployment to pick up the key: In Vercel, go to Deployments Find your latest deployment, click the three-dot menu, and choose Redeploy Alternatively, push any small change to your main branch — Vercel will build and deploy aut

About the role We're looking for a UX/UI Designer who bridges the gap between sharp visual thinking and practical, developer-friendly output.

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.

This post covers how it is built, why it is desktop-only, and a non-obvious CSS cascade issue that caused the hide-on-scroll to not work until it was fixed.

Desktop-only: the media query The scroll indicator is hidden by default and made visible only when the viewport is wide enough and tall enough to be a desktop screen: The condition alone is not enough.

Three-day developer conference covering AI engineering, platform architecture, and modern web. Single-track main stage, deep-dive workshops, and unconference sessions.

Showcase your tools CLI or coding experience.

The DeveloperExperience component highlights the ease of use of your tool, featuring a feature list and a simulated terminal window.

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.

The integration uses Giscus, which stores comments in a GitHub Discussions thread on a repo of your choice.

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.

Talks Decoupled Drupal in 2026 — Lessons from three production migrations JSON:API performance — Caching layers, response shaping, and where decoupling hurts Drupal + Astro — Live walkthrough of a content-driven site Doors open at 18:00 wit

Talks Decoupled Drupal in 2026 — Lessons from three production migrations JSON:API performance — Caching layers, response shaping, and where decoupling hurts Drupal + Astro — Live walkthrough of a content-driven site Doors open at 18:00 wit

Local Drupal community meetup focusing on decoupled architectures, JSON:API performance, and pairing Drupal with modern frontend stacks like Astro and Next.js.

Create lesson, teaching resources, & assessments.

The one thing it does not include is an email service account, because that belongs to you.

To send email from an address on your domain, you need to add a few DNS records there so Resend can prove to receiving mail servers that the emails are…

Enabling it The scroll indicator is a prop on the…

The two props The component exposes two props that control the scroll progress bar: | Prop | Type | Default | What it does | |------|------|:-------:|--------------| | | | | Renders the progress bar | | | \| | | Places the bar on the top or

An open Microsoft Teams Q&A on the changing shape of engineering leadership — hiring, performance, team composition, and what stays the same when AI changes everything else.

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.

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.

SEO — (all meta tags, Open Graph, Twitter Cards), (structured data for WebSite, Organization, BlogPosting, Breadcrumb, FAQ), and (analytics script slot). --- Everything responds to the active theme Every component uses the design system's C

A guide on how to use MDX for documentation and blog posts.

Existing Classes Link Preview ( ) Styles the rich link preview cards used in MDX files.

You only need to set the values you want to override: Faster, snappier feel — lower and , shorten both pauses: Slower, more deliberate feel — raise and extend so readers have time to absorb each word: How to change the words Edit the array

Feature: Includes a 'Sitelinks Search Box' definition, enabling a search bar for your site directly in Google results (if…

The repo must be public and have Discussions enabled (Settings → Features →…

Display your product features in a clean grid.

Figma is a key concept used across this site's content and documentation.

File Location Usage This file defines the root…

File Location Font Configuration By default, the global font stack is set in (referencing system fonts) and specific headings use…

This session covers the small set of frameworks that survive contact with reality — and the failure modes that kill the rest.

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

Frontmatter Every MDX file should start with a frontmatter block.

AI-powered game generation.

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

The integration uses Giscus, which stores comments in a GitHub Discussions thread on a repo of your choice.

How OpenAI's technical teams use Codex daily to accelerate engineering work — use cases and best practices that demonstrate how Codex enhances speed, work quality, and complexity management across Security, Product Engineering, and Infrastructure.

Granular Control: Hide specific pages (like drafts or internal tools) from search results using .

Visualize new hairstyles with AI.

A practical, full-day workshop on shipping autonomous AI agents — from architecture and tool-use to evaluation, guardrails, and production deployment. Bring your laptop.

A practical, full-day workshop on shipping autonomous AI agents — from architecture and tool-use to evaluation, guardrails, and production deployment. Bring your laptop.

Header: floating capsule vs. fixed bar Astro Rocket has two header shapes.

Heading Use the Heading component for page titles and section headers. {/ Heading demo (component not bundled) /} {/ Heading demo (component not bundled) /} {/ Heading demo (component not bundled) /} Text Use the Text component for…

Local Drupal community meetup focusing on decoupled architectures, JSON:API performance, and pairing Drupal with modern frontend stacks like Astro and Next.js.

Local Drupal community meetup focusing on decoupled architectures, JSON:API performance, and pairing Drupal with modern frontend stacks like Astro and Next.js.

Usage Example {/ Hero demo (component not bundled) /} Props | Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | | | | Top label badge text. | | | | | Main headline text. | | | | | Text to be highlighted…

The same curve drives both the hero entrance animations and the scroll-reveal…

A guide on how to use MDX for documentation and blog posts.

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.

Hide on a single post Sometimes a post is too short for a TOC, or it's an announcement that doesn't need section…

Both animations are disabled when the user prefers reduced motion: Hides on scroll Once the user scrolls past 50 px, the indicator fades out and the scroll listener removes itself: The class drives the visual change entirely through CSS: Th

What ships out of the box The SEO layer covers six distinct concerns: Structured data (JSON-LD) — schema.org markup for the home page and every blog post Open Graph and Twitter Cards — social sharing metadata for every page Canonical URLs —

Where it shows up The bar is enabled on three page types, each with a different position: Homepage — the bar sits on top of the floating capsule header.

Vercel is the hosting platform this site runs on.

To shift a theme to a completely different colour, you only need to change the hue number across the to scale — keep the lightness and chroma values the same and the whole palette moves…

Implementation We use a dedicated component ( ) to inject standard JSON-LD scripts into the of your pages.

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.

Individual blog posts — same as the blog index: the bar runs along the bottom of the header.

The three layouts | Layout | Mobile / tablet ( ) | Desktop ( , ≥1280 px) | |---|---|---| | | Card at the top of the article | Card at the top of the article | | | TOC hidden | Sticky sidebar to the right of the article | | | Card at the top

Usage Interactive Cards By passing an prop, the card becomes a clickable link with hover effects. {/ Card demo (component not bundled) /} Props | Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | | | | If provided, rende

A guide on how to use MDX for documentation and blog posts.

SEO impact Because Astro renders the heading on the server, the full element — including the with all words — is present in the HTML source before any JavaScript runs.

This boilerplate implements JSON-LD (JavaScript Object Notation for Linked Data).

Talks Decoupled Drupal in 2026 — Lessons from three production migrations JSON:API performance — Caching layers, response shaping, and where decoupling hurts Drupal + Astro — Live walkthrough of a content-driven site Doors open at 18:00 wit

Key Bindings ⌘ + K (Mac) or Ctrl + K (Windows): Open Search.

Key Features Automated Sitemaps: Your content is automatically indexed and…

Landing page sections — (logo bar), (interactive tabbed feature showcase), (animated score dials), and (technology badge strip).

Display recent blog posts automatically.

The LatestPosts component fetches and displays the most recent blog posts from your content…

Layer 1 — the outer button is 48 × 48 px ( ), fixed to the bottom-right corner of the…

Layer 2 — the SVG ring sits , filling the button…

Layer 3 — the inner face is a inset by 5 px ( ), styled as a pill with the site's background, border, and shadow tokens.

When enabled, the Giscus script is lazy-loaded — it only downloads when the reader actually scrolls toward the comments…

Bring your hardest leadership question This is a no-slides, no-prepared-content…

Astro Rocket ships a 3-state colour-mode system — System / Light / Dark — that resolves all of those.

To shift a theme to a completely different colour, you only need to change the hue number across the to scale — keep the lightness and chroma values the same and the whole palette moves…

What we'll cover A live, unscripted recording you can watch as it…

Watch us record season two, episode one live on YouTube. We're joined by three guests to debate where static-site generation goes next — and whether \'static\' still means anything in 2026.

When enabled, the Giscus script is lazy-loaded — it only downloads when the reader actually scrolls toward the comments…

Logo Cloud: professionally display partner/client logos with grayscale-to-color hover…

Then use it in or standard CSS: Logo Configuration You can configure the logo strategy in .

The LogoCloud displays a grid of partner or client logos. > Note: This component currently fetches data from the content collection or falls back to a default list defined in the…

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.

A guide on how to use MDX for documentation and blog posts.

Mermaid Diagrams You can now use Mermaid diagrams directly in your MDX/Markdown files!

Turn simple text prompts or images into full 3D models.

The system acts as a dual-layer filter: Meta Tag: Adds to the page HTML.

Agenda Minute 0–10 — Why most frameworks fail (and why a few don't) Minute 10–30 — OGSM, Porter's Five Forces, JTBD: when each one fits Minute 30–45 — Live walkthrough on a real product case Minute 45–60 — Q&A Who it's for Founders, product

Agenda Minute 0–10 — Why most frameworks fail (and why a few don't) Minute 10–30 — OGSM, Porter's Five Forces, JTBD: when each one fits Minute 30–45 — Live walkthrough on a real product case Minute 45–60 — Q&A Who it's for Founders, product

Agenda Minute 0–10 — Why most frameworks fail (and why a few don't) Minute 10–30 — OGSM, Porter's Five Forces, JTBD: when each one fits Minute 30–45 — Live walkthrough on a real product case Minute 45–60 — Q&A Who it's for Founders, product

Agenda Minute 0–10 — Why most frameworks fail (and why a few don't) Minute 10–30 — OGSM, Porter's Five Forces, JTBD: when each one fits Minute 30–45 — Live walkthrough on a real product case Minute 45–60 — Q&A Who it's for Founders, product

How OpenAI's technical teams use Codex daily to accelerate engineering work — use cases and best practices that demonstrate how Codex enhances speed, work quality, and complexity management across Security, Product Engineering, and Infrastructure.

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.

Customization Search Logic You can fine-tune the search sensitivity and indexed fields in : UI & Aesthetics The search modal is styled using Tailwind CSS 4 and Motion for smooth…

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.

If Resend shows as the name, leave the GoDaddy host field empty or enter .

You can keep the header focused on your primary navigation while the footer holds everything else.

Local Drupal community meetup focusing on decoupled architectures, JSON:API performance, and pairing Drupal with modern frontend stacks like Astro and Next.js.

Added Timeline, Logo Cloud, and Breadcrumbs components.

How OpenAI's technical teams use Codex daily to accelerate engineering work — use cases and best practices that demonstrate how Codex enhances speed, work quality, and complexity management across Security, Product Engineering, and Infrastructure.

Nice to have is a key concept used across this site's content and documentation.

Why it works without a library Three things make this system hold together at the quality level of a paid animation toolkit: One spring curve used everywhere. appears in the hero keyframes, the header drop-in, the scroll-reveal…

Open Graph: Beautiful social sharing cards generated…

What ships out of the box The SEO layer covers six distinct concerns: Structured data (JSON-LD) — schema.org markup for the home page and every blog post Open Graph and Twitter Cards — social sharing metadata for every page Canonical URLs —

How OpenAI's technical teams use Codex daily to accelerate engineering work — use cases and best practices that demonstrate how Codex enhances speed, work quality, and complexity management across Security, Product Engineering, and…

How to disable the typing effect Option 1 — Replace with static text Remove the component and its import, then put your static heading copy directly in the slot: Option 2 — Single static word without the cursor If you want the styled text c

How to disable the typing effect Option 1 — Replace with static text Remove the component and its import, then put your static heading copy directly in the slot: Option 2 — Single static word without the cursor If you want the styled text c

Standard header for content pages.

See every component live The library is organized in three layers: 33 UI primitives that form the building blocks, 7 higher-level pattern components, and a set of page-structure components for the Hero, Header, Footer, Blog, and SEO layers.

The PageHeader component provides a consistent Title and Description layout for the top of your pages.

See every component live The library is organized in three layers: 33 UI primitives that form the building blocks, 7 higher-level pattern components, and a set of page-structure components for the Hero, Header, Footer, Blog, and SEO layers.

Per-post override Some posts don't need comments — announcements, legal pages, or quick…

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.

Performance note The scroll listener uses and throttling, so it adds no measurable overhead to scrolling…

How OpenAI's technical teams use Codex daily to accelerate engineering work — use cases and best practices that demonstrate how Codex enhances speed, work quality, and complexity management across Security, Product Engineering, and Infrastructure.

Day 2 — Platform Architecture Internal developer platforms, golden paths, and the org dynamics behind them.

Present your pricing plans clearly.

The PricingTable component arranges items in a responsive grid.

What you'll learn Spend a full day building, evaluating, and shipping production-grade AI agents alongside practitioners who do this for a living.

Showcase your work with style.

Initial release with core features — Astro v5, TailwindCSS, dark mode, and responsive design.

Project Structure Here's a quick look at how the project is organized: Customization Theming You can easily customize the primary brand color and other site settings in .

The ProjectCard is the core of the portfolio…

Prose Customization We use the class for rendering Markdown content (Blogs, Docs). allows you to override default Tailwind Typography styles to match your theme.

File Location Purpose While we encourage using Tailwind utility classes directly in your or files (e.g., ), sometimes it is cleaner to extract complex composite styles or style elements where you cannot access the markup directly (like exte

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.

Optional island interactivity — drop React components in anywhere you need client-side behaviour, without affecting the rest of the page.

Astro Rocket renders an optional table of contents on blog posts in three layouts: inline card, sticky sidebar, or both. Pick the one that fits your audience.

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.

Trigger a new deployment to pick up the key: In Vercel, go to Deployments Find your latest deployment, click the three-dot menu, and choose Redeploy Alternatively, push any small change to your main branch — Vercel will build and deploy aut

Reduced motion Every animation respects : When the user has enabled reduced motion in their OS settings, all entrance animations are replaced with immediate…

Related features The scroll progress ring joins two other scroll-aware UX features in Astro Rocket: Scroll progress bar — a 2 px brand-coloured line in the header that fills as you scroll, enabled on the homepage, blog index, and…

Related scroll features The scroll indicator joins two other scroll-aware elements in Astro Rocket: Scroll progress bar — a thin brand-coloured line in the header that fills as you scroll, enabled on the homepage, blog index, and post pages

Remote is a key concept used across this site's content and documentation.

Resend is a developer-focused email delivery…

Core Features ⚡ Astro v5 integration for blazing fast performance. 🎨 TailwindCSS styling with custom theme support. 📱 Responsive Design mobile-first approach. 🌗 Dark Mode fully supported out of the box.

What ships out of the box The SEO layer covers six distinct concerns: Structured data (JSON-LD) — schema.org markup for the home page and every blog post Open Graph and Twitter Cards — social sharing metadata for every page Canonical URLs —

RSS Feeds: Automatic feed generation for your blog and…

Installation First, clone the repository to your local machine: Next, install the dependencies: Running Locally Start the development server: Open your browser and navigate to to see the site in action.

Watch us record season two, episode one live on YouTube. We're joined by three guests to debate where static-site generation goes next — and whether \'static\' still means anything in 2026.

Safe component customisation — you can restyle a specific component at the component token level without risking side effects…

Astro Rocket now has a scroll progress bar.

Related features The scroll progress ring joins two other scroll-aware UX features in Astro Rocket: Scroll progress bar — a 2 px brand-coloured line in the header that fills as you scroll, enabled on the homepage, blog index, and…

Scroll reveal Everything below the hero that should animate into view uses the scroll-reveal system.

Scroll reveal animations — elements with a attribute fade and slide into view as they enter the viewport, powered by .

Scroll-based features Two features update in real time as the user scrolls, both throttled with : Scroll progress bar — a 2px brand-coloured line that runs along the header edge (top or bottom, configurable) and fills from left to right as

Architecture Our search system is designed for speed and zero-cost scaling: Search Index: A lightweight JSON file ( ) is generated at build time containing the searchable content of all pages, blog posts, and docs.

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.

About the role We're looking for a Senior Astro Developer who cares deeply about web performance, clean code, and shipping work that makes a real…

SEO impact Because Astro renders the heading on the server, the full element — including the with all words — is present in the HTML source before any JavaScript runs.

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.

Built-in search engine optimization features.

Setting up the contact form The contact form uses Resend for email…

Deploying to Vercel Create a new repository on GitHub (or GitLab / Bitbucket) and push your local project to it Go to vercel.com and click Add New Project Import your repository — Vercel detects Astro automatically Add your environment vari

Show/hide threshold The button — and ring — remain hidden until the visitor has scrolled past 400 px.

It has three concrete benefits: Single source of truth — brand colour, spacing scale, border radius, and typography sizes are all defined once.

Create a new repository on GitHub (or GitLab / Bitbucket) and push your local project to it Go to netlify.com, click Add new site → Import an existing project, and connect your repository Under Site configuration → Environment variables, ad

What ships out of the box The SEO layer covers six distinct concerns: Structured data (JSON-LD) — schema.org markup for the home page and every blog post Open Graph and Twitter Cards — social sharing metadata for every page Canonical URLs —

Automated sitemap generation and indexing control.

Sitemap Filter: Automatically removes the URL from during the build…

Interactive button component with multiple variants and sizes.

You only need to set the values you want to override: Faster, snappier feel — lower and , shorten both pauses: Slower, more deliberate feel — raise and extend so readers have time to absorb each word: How to change the words Edit the array

A guide on how to use MDX for documentation and blog posts.

in the footer come from the array in : Remove any URL you don't use.

Watch us record season two, episode one live on YouTube. We're joined by three guests to debate where static-site generation goes next — and whether \'static\' still means anything in 2026.

The Stats component displays a grid of key statistics, perfect for social proof or highlighting…

Step 1 — Create a Resend account Go to resend.com and sign up.

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.

Copy the four values shown on the page: (e.g. ) - Step 2 — Configure Astro Rocket Open and find .

Step 2 — Verify your domain in Resend This is the most involved 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.

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.

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.

Step 6 — Test it Open your live site, fill in the contact form, and submit.

Why this matters Most strategy decks die in…

A 60-minute live webinar on choosing the right strategy framework for your context — OGSM, Porter's Five Forces, SAFe, Jobs-to-be-Done — and avoiding the consultant-deck trap.

Structured Data: Rich JSON-LD schemas (Organization, Article, FAQ) are…

Support named slots for flexible…

Switching layouts later Switching is a one-line change.

Astro Rocket ships a 3-state colour-mode system — System / Light / Dark — that resolves all of those.

Long-form articles benefit from a table of…

Tables Explore the complete set of premium components designed for Cooper.

The value in controls the browser's tag (the mobile browser chrome colour) and should be updated to match: The Tailwind connection Astro Rocket uses Tailwind CSS v4, which reads CSS custom properties…

Utility-first CSS with v4's native cascade layers, CSS-first configuration, and perceptually uniform OKLCH colours.

Customization Search Logic You can fine-tune the search sensitivity and indexed fields in : UI & Aesthetics The search modal is styled using Tailwind CSS 4 and Motion for smooth…

Core Features ⚡ Astro v5 integration for blazing fast performance. 🎨 TailwindCSS styling with custom theme support. 📱 Responsive Design mobile-first approach. 🌗 Dark Mode fully supported out of the box.

Talks Decoupled Drupal in 2026 — Lessons from three production migrations JSON:API performance — Caching layers, response shaping, and where decoupling hurts Drupal + Astro — Live walkthrough of a content-driven site Doors open at 18:00 wit

The Team component allows you to display your team members in a responsive grid.

Showcase your team members.

About the role We're looking for a Technical Content Writer to contribute long-form articles, tutorials, and deep-dives to the Astro Rocket blog.

About the role We're looking for a Technical Content Writer to contribute long-form articles, tutorials, and deep-dives to the Astro Rocket blog.

The Testimonials component uses a marquee effect (infinite horizontal scroll) to display…

Heading Use the Heading component for page titles and section headers. {/ Heading demo (component not bundled) /} {/ Heading demo (component not bundled) /} {/ Heading demo (component not bundled) /} Text Use the Text component for…

Customize global colors, spacing, and radius using theme.css.

ThemeModeDropdown / ThemeSelectorDropdown — the two pill-shaped dropdowns that live side-by-side in the header. is the 3-state colour-mode picker (System / Light / Dark) backed by ; is the 12-swatch colour-theme picker backed by .

Theming The default makes Giscus follow the visitor's OS-level light/dark…

Three days, one track, no fluff DevCon Europe brings together a curated group of engineers and tech leads for honest, technical conversations about what's actually working in…

The Timeline component visualizes a sequence of events.

A guide on how to use MDX for documentation and blog posts.

Astro Rocket's back-to-top button has been upgraded with a circular scroll-progress ring.

Travel Berlin Congress Center is a 10-minute walk from Alexanderplatz, with direct rail connections to Berlin Brandenburg Airport (35 min) and Hauptbahnhof (10 min).

Turning it off Each page layout controls the bar…

Two instances, one state The pill is rendered twice — once in the desktop header (hidden below the breakpoint) and once inside the mobile menu (hidden above ).

Two ways to override per page If you want a specific page to use a different footer menu (rare, but possible), the component still accepts a prop and a prop.

Strict mode throughout — every component, utility, and config is fully typed, so you catch errors at compile time instead of in production.

Typography components ensure consistency across your documentation and…

About the role We're looking for a UX/UI Designer who bridges the gap between sharp visual thinking and practical, developer-friendly output.

See every component live The library is organized in three layers: 33 UI primitives that form the building blocks, 7 higher-level pattern components, and a set of page-structure components for the Hero, Header, Footer, Blog, and SEO layers.

The Universal Search in Cooper is powered by a high-performance Fuse.js engine, providing fuzzy matching and instant results via a premium Command Palette…

A guide on how to use MDX for documentation and blog posts.

Using the legal links row For Privacy/Terms/Imprint-style links, the footer has a separate 'legal' row that some layouts ( , ) render in a dedicated bottom strip.

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.

Call to Action section to convert visitors.

import Button from '@/components/ui/form/Button/Button.astro'; import Icon from '@/components/ui/primitives/Icon/Icon.astro'; Astro Rocket inherits a complete UI component library from Velocity by Southwell Media.

Vercel is the hosting platform this site runs on.

What ships out of the box The SEO layer covers six distinct concerns: Structured data (JSON-LD) — schema.org markup for the home page and every blog post Open Graph and Twitter Cards — social sharing metadata for every page Canonical URLs —

Getting the form to actually deliver requires three external pieces: a Resend account, a verified sending domain, and one environment variable on Vercel.

Once all records are added, go back to Resend and click Verify DNS…

Container & Grid {/ Container demo /} Bento Items Demonstrating Bento Items for structuring your page. {/ Grid demo /} Vertical Tabs {/ Card demo /} {/ Card demo /} {/ Card demo /} Detailed analytics with charts, traffic sources, and user b

How OpenAI's technical teams use Codex daily to accelerate engineering work — use cases and best practices that demonstrate how Codex enhances speed, work quality, and complexity management across Security, Product Engineering, and Infrastructure.

View-transition cleanup Astro Rocket uses Astro View Transitions for client-side page…

Day 3 — Modern Web Edge runtimes, hybrid rendering, and the next wave of frontend…

A 60-minute live webinar on choosing the right strategy framework for your context — OGSM, Porter's Five Forces, SAFe, Jobs-to-be-Done — and avoiding the consultant-deck trap.

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.

What's included Full-day instruction with two practitioners Working code repository with starter templates Lunch and coffee on site Six-week follow-up Slack access for participants Recording of all sessions A practical, full-day workshop on

Built-in Schemas The following schemas are automatically generated based on the page type: Organization Where: Global (all pages).

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.

Workshops & unconference Optional pre- and post-conference workshops at additional cost.

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

You know how to explain technical concepts clearly without dumbing them down, and your writing feels like a human wrote it — not a content…

Writing blog posts Create a new file in .