What's new in Astro - June 2024

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

Updates from Mission Control

Releases

Astro 4.10 and Astro 4.11
Starlight 0.24

Community

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 core maintainer @florian-lefebvre! We are so pleased to have you join the core team!

Community Awards May

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 @LorenzoLewis for exceptional contributions to Starlight development, docs, and support.
🚀 $250 to @SzymonChmal for fixing issues in the Astro core codebase.
🎈 $250 to @sasoria for being active in Docs PRs and reviews.
🎊 $250 to @Arknoodle for being positive, encouraging, and helpful in support.

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

Showcase

Content

Here’s what caught our attention this month:

✅ Most adopted meta-framework ✅ #1 in developer retention ✅ #1 in developer interest - See how Astro performed in the State of JS 2023 developer survey!
👀 Live Preview for Storyblok’s Astro Integration - @storyblok/astro now officially supports the live preview functionality of Storyblok’s Visual Editor. Benefit from real-time, instantaneous feedback reflecting changes as you build with Astro!
🔩 Did Astro fix environment variables? @JamesQQuick thinks so! See @notrab in action using the new envField schema for configuring API keys for Stripe.
🍦 If you build an Astro theme, integration, or tool, you might be interested in learning why Astrolicious might be a community for you, or your project!
📚 Strapi released a 3-part Astro & Strapi Website tutorial and Video crash course on YouTube. Stay tuned for more details: our own @bholmesdev will stream live with Strapi developers Tuesday July 16th at 10 am CST.

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

📺 The problem with server actions by @bholmesdev
📺 Astro Starlight and emoji-blast with Chris Swithinbank by @JoshuaKGoldberg
📺 My First Impressions (to Future of Astro) by @CodinginPublic
📺 Adding a Guestbook to my Websites AstroJS | Typescript | WebDev | Canvas by @nebojsa_cookie_duster
📺 Icons made easy with Astro Icon by @notrab
📺 Build a Customer Review Component with AstroJS and Astro DB by @petipois
📺 Astro JS Tutorial Website - Setup and Layout by @peitpois
📺 Aprende Astro playlist by @manzdev
📺 CURSO COMPLETO DE ASTRO by @informatica-live
📺 Curso Astro playlist by @webcads
📺 Astro JS - เฟรมเวิร์กน้องใหม่ เขียนง่าย โหลดไวมาก! by Chakkrisn Talawat by @creatorsgarden
📺 Sharing Session: Meet with Astro JS by @ngobrolintech
📺 DevTalles podcast - 167: Astro | Una opinión honesta y reflexiva by @DevTalles
📺 Capitole Tech Talks - View Transitions con Astro v4 by @capitoleconsulting
📺 Building LaunchFast w/Rishi Raj Jain by @brianmmdev
📺 Building thatdeveloperdad.com - day1 by @thatdeveloperdad
📺 Live Code: Dashboard Component by @CodinginPublic
📄 Hybrid i18n with Next and Astro (part 1) by @ericbureltech
📄 Using React Query with Astro: A Step-by-Step Guide by @mihos8146
📄 How to Create a Persistent Sidebar Menu using Astro and View Transitions by @ihiutch
📄 Using Animate On Scroll (AOS) in Astro: A Step-by-Step Guide by @rishirajjain
📄 Using Unplug Icons in Astro with React: A Step-by-Step Guide by @rishirajjain
📄 How to use Strapi with Astro by @rishirajjain
📄 How to Build your own Reverse Image Search in Astro by @rishirajjain
📄 How to Build a RAG chatbot with Astro, Postgres, and LlamaIndex by @rishirajjain
📄 Building a Contact Form with Astro and Cloudflare Workers: A Simple Guide by @hkbertoson
📄 Generate Related Posts for Your Astro Blog with Astra DB Vector Search by @datastax
📄 How to Implement RBAC (Role-Based Access Control) in Astro by @permit_io
📄 i like astro by @jackharrhy
📄 Adding search to static Astro sites by @thomasledoux1
📄 Integrate Pagefind’s Search with Astro: A Complete Setup Guide by @murtuzaalisurti
📄 Astro site rewrite 2024 edition by @schpet
📄 Send emails in an Astro project using Resend by @netlifydevelopers
📄 How to Make an Aside Component in Astro by @cosmicthemes

… and don’t miss the latest tips from Astro Tips such as How to make a dynamic footer date for static sites and tutorials from Lexingon Themes such as How to create a swatch clock with Tailwind CSS

Tips & Tools

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

Astrolace - An easy way to use Shoelace.style within your Astro project by @matthiesenxyz
Starlight View Modes - Starlight plugin adding view mode capabilities to your documentation website by @trueberryless
Starlight Utils - Utilities to use with your 🌟 Starlight site by @lorenzolewis
Content Utils Git Time - A library to retrieve last updated dates for your content from your Git history by @Fryuni
Astro Command Palette - A lightweight, extensible, and fast command palette for Astro by @pauchiner
ravixUI - An open-source, accessibility-focused component starter kit built with Tailwind CSS and optimized for Astro by @raviz
Full-text RSS feed - Find example code for rendering full content, including MDX, to an RSS feed using Astro’s experimental Container API by @delucis

Themes & Templates

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

Also check out:

Vendure Astro Storefront by @a.atalla
Astro Aceternity by @CarloB
Eva’s Astro Starter by @evadecker
Nanoblog by @marvin-j97

Websites

Sites of the month:

Astro ZeroJS View Transitions, a Spotify clone using Astro’s view transitions with 0JS.
Not just a website, Dracarys is an experience! A WebGL, Three.js experiment on GPGPU simulations, particles, postprocessing, shaders, water, modelling, audio, lightning, and dragons… your typical Astro site. 🔥🧊🐉 - 🔊 ON for full effect!
Organize your thoughts with stickly, a handy virtual sticky notes board built with Astro by @floyare. Choose your note color, then drag and drop anywhere on the screen.

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