What's new in Astro - April 2024

Some exciting news from around the Astro ecosystem this month. Let’s dive in!

Updates from Mission Control

🥳 Astro crosses 10,000,000 downloads on NPM!
📈 Astro moves up in the latest Thoughtworks 2024 Technology Radar report
🚀 FreeCodeCamp is looking for Astro contributors to revolutionize their contributor experience
🎙️ New regular Discord event: Tech Chat with Platform
🇨🇦 Meet you in Montreal! Save the date and register to attend “Astro Together”: May 28, 2024

Releases

Astro 4.6 and Astro 4.7
Starlight 0.22

Docs

Our weekly Discord call “Talking and Doc’ing” is a chance for you to watch Team Docs work in public, jump in a shared Codespace or Gitpod Workspace, and contribute to the docs live, together. This month’s topics included:

Reviewing several new Starlight components. Soon you’ll be able to add badges, call-to-action link buttons, fancy styled <details> elements, and more!
Learning about site navigation design principles, and testing out a new Astro Docs sidebar redesign!
Taking a deep dive into our docs web traffic stats to better understand how our site is used.

Astro wouldn’t be what it is without its community. From Discord support, to documentation improvements, to translations, to code contributions, Astro welcomes it all.

Astro Team News

Welcome to our newest Astro maintainer Ming-Jun Lu and newest core maintainer Emanuele Stoppa! Thank you both for your contributions to Astro, and we’re so fortunate to have you aboard! 🫡

These are some of the people who went above and beyond last month to make all our lives just a little (or a lot!) better:

🌟 $500 to @alexanderniebuhr for significant leadership with the Cloudflare adapter and extraordinary community leadership.
🍾 $250 to @adamm2047 for significant contributions to the Astro integrations ecosystem.
🎈 $250 to @hfornier for providing outstanding community support in Discord.
🎊 $250 to @casungo for their enthusiastic contributions translating Astro Docs into Italian.
🎉 $250 to @jlengstorf for educating and entertaining the community with content and video streams.

👕 ✨ Swag shop merch issued this month to @Jumper, @Dreyfus, and @cdvillard!

Check them out and learn more about the Astro Community Awards on our community website.

Showcase

Content

Here’s what caught our attention this week:

😎 We also think Astro is pretty cool, @aliciasykes!

🏋️ @snikidev pushes the limits using Astro.js as an alternative to Next.js

📊 Astro DB: Migrating my analytics data from Vercel Postgres by @tledoux

🔢 Build a Likes counter with Astro DB and Vercel with @k1350

⏱️ Tutorial: Using Astro and Server-Sent Events (SSE) to Build Realtime In-App Notifications by @rishirajjain

Because you can never get tired of watching and reading Astro Content, here’s even more community content!

📄 Extend Astro Syntax Highlighting by @iksaku
📺 Let’s Build a Blog with Astro! (docs tutorial live onstream) by @schalkneethling
📄 The View Transitions API by @cassidoo
📄 Astro + PhotoSwipe by @Petrovicz
📄 Fetching Latest YouTube Videos with RSS by @TechSquidTV
📄 How to use Astro-Font
📄 Step-by-step guide to a custom newsletter form with Astro, React, and ConvertKit by @robcipolla
📄 Django to Astro: Migrating a Django Portfolio to Astro.js by @jsolly
📄 How to create a Tab component with Tailwind CSS and AlpineJS by @mike_andreuzza
📄 How to create a Theme toggle with Tailwind CSS and AlpineJS by @mike_andreuzza
📄 How to deploy Astro to AWS Elastic Beanstalk by @rishirajjain
📄 Build authenticated and paywall pages with Stripe and Xata by @rishirajjain
📄 Build a dynamic e-Commerce store UI with Astro, Neon Postgres and AWS Amplify by @rishirajjain
📄 Authentication Users with Lucia and Neon by @rishirajjain
📄 Authentication Users with Clerk and React by @rishirajjain
📄 Use Firebase Realtime Database with Vue by @rishirajjain
📄 GSAP x Astro by @rishirajjain
📄 GSAP + ViewTransitions x Astro by @rishirajjain
📄 ECommerce Vector Search with Upstash by @rishirajjain
📄 How to create a tag input with Tailwind CSS and Alpinejs by @mike_andreuzza
📄 How to create a login form with Tailwind CSS and Alpinejs by @mike_andreuzza
📄 How to create a progress-bar with Tailwind CSS and Alpinejs by @mike_andreuzza
📄 How to create a rating system with Tailwind CSS and Alpinejs by @mike_andreuzza
📄 How to create an accordion with Tailwind CSS and Alpinejs by @mike_andreuzza
📺 Astro JS pour tous | Formation complète
📄 Deploy static sites with Astro, Docker and NGINX
📄 Image Gallery with TailwindCSS and Alpine by @mike_andreuzza
📄 Todo with Tailwind CSS and Alpine by @mike_andreuzza
📄 Pricing Slider with Tailwind CSS and Alpine by @mike_andreuzza
📄 Countdown with Tailwind CSS and Alpine by @mike_andreuzza
📄 Shiki transformers in Astro by @rishirajjain
📄 Using Entra ID with Astro by @cloudconrad
📄 Azure Static Web by @cloudconrad
📄 Astro Azure Functions by @cloudconrad
📄 HTMX & Astro by @c-daniele
📄 Tailwind v4 Tip by @oliverspeir
📄 Darkmode Tip by @astrolicious
📺 You should put your web app on the edge by @bholmesdev
📄 Bottom drawer with Tailwind CSS and Alpinejs by @mike_andreuzza
📄 Multistep from with Tailwind CSs and Alpinejs by @mike_andreuzza
📄 Mqking a link shortener Astro DB by @aczw
📄 Blog View Counter using Astro, Svelte by @rbole
📄 How to do advanced caching and ISR with Astro by @ascorbic.
📄 PhotoSwipe in Astro by @rishirajjain
📄 Astro - La Última FRONTera (Presentation slides) by @achamorro-dev
📺 How I Built My Blog Using Astro & MDX by @CodeBrew
📺 Svelte Summit Astro Apperance by @sveltesociety

Tips & Tools

The latest community-built utilities and integrations to help you build with Astro.

👜 Bag of Tricks for Astro’s View Transitions by @martin

🌟 now with experimental Starlight view transitions components!

🛞 astro-turnstile by @chaosbite

(🕵️ early preview) a simple way to add a turnstile to your Astro site.

🗄️ AstroStudio CMS by @astrolicious

🧑‍🚀 A dedicated CMS for Astro Studio built by the Astro Community.

Themes & Templates

Several new Astro themes were added to the Astro theme directory this month. Try them out!

Websites

Sites of the month:

Add another site to check every day after you’ve solved Wordle and Jumblie… open another tab for Let’s Play Alpha—built with Astro to help computer science students learn about algorithmic searches.

Font Awesome’s awesome docs are now built with Starlight!

What do you do when a K-pop fan mistakenly finds themselves in the Astro Discord? Build an Astro website for them… with Astro!

Looking for some inspiration? See all the community member websites submitted to our Discord #showcase channel and featured on community calls this month.

Starlight in the wild

Want to be on this list next month? Post your Astro websites, projects, apps, tools, blog posts, demos, and videos in our #showcase channel in our Discord!

推荐订阅源

The Astro Blog