title | description | publishDate | authors | coverImage | socialImage | lang | |
---|---|---|---|---|---|---|---|
What's new in Astro - March 2024 |
March 2024 - Astro DB, Astro Developer Portal and so much more |
March 31, 2024 |
|
/src/content/blog/_images/whats-new-shared.webp |
/src/content/blog/_images/whats-new-march/og.webp |
en |
import ShowcaseGrid from './_whats-new-components/ShowcaseGrid.astro'; import ThemeGrid from './_whats-new-components/ThemeGrid.astro'; import { YouTube } from '@astro-community/astro-embed-youtube';
A month full of releases, Astro DB, Astro Developer Portal, and so much more. Let's dive in!
- Astro DB is now available in early preview! 🚀
- We launched the all new Astro Developer Portal! 🎉
- All tests in Astro have been migrated to
node:test
This month, we added a new Upgrade Astro page to the docs that includes how to upgrade to the latest version, past upgrade guides and docs for older versions, as well as an explanation of Astro's semantic versioning from our platform team. If you ever wondered what all the different numbers in our release versions meant, we've now got you covered!
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:
- Updating our community website with all of our past community award winners going back to the very beginning, giving us a chance to test a new pagination component.
- Adding our new
<Steps />
component to the entire Build a Blog beginner tutorial. - Helping a brand new Astro-community tips and resource site figure out how to get started with Starlight. Check out astro-tips.dev for recipes and more!
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.
Hear some of our past community award winners share what it's like contributing to Astro, and see for yourself what makes the Astro experience so special.
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 @mingjunlu for contributing to all aspects of the Astro project and community including support, translations, migrating tests and fixing issues.
- 🍾 $250 to @ktym4a for contributions to the Astro ecosystem, including core and integrations.
- 🎈 $250 to @jackshelton Shelton for outstanding leadership and community support with the QwikDev/astro integration.
- 🎊 $250 to @soslan117 for their enthusiastic contributions translating Astro Docs into Russian.
- 🎉 $250 to @bryceguy for creating several popular community packages and leadership in community support.
👕 ✨ Swag shop merch issued this month to @tigger_hyk, @nathanlawsn, and @sasoria !
Check them out and learn more about the Astro Community Awards on our community website.
Featured: "The Story of Astro DB"
With the launch of Astro DB and Astro Studio this month, there were several reaction videos, streams, and interviews. Learn the story of Astro DB, and see some of the first reactions by the community:
- 📺 The Story of Astro DB by @uidotdev
- 📺 Astro's Biggest Release Yet! by @jlengstorf
- 📺 Astro’s Big Announcement! by @chrispennington
- 🎧 Astro Launches an Integrated Database - Shop Talk Show with Dave Rupert and Chris Coyier
- 📺 Live Code: Building with Astro DB - Coding in Public
- 📺 Dive into Astro DB w/ Fred K. Schott - Ryan Carniato
- 📄 Exploring Astro DB by @rosnovsky
- 📄 Creating a Guestbook with Astro DB by @mrtrimble
- 📄 How to build a view counter with Astro DB by @vorillaz
Because you can never get tired of watching and reading Astro Content, here's even more community content!
- 📄 How to create a sticky changelog with Tailwind and Astro by @mike_andreuzza
- 📄 How to create a dynamic feature grid with Astrojs and Tailwind CSS by @mike_andreuzza
- 📄 eCommerce Store with Astro by @nebojsa_cookie_duster
- 📄 How to create a sidebar navigation with Tailwind and Alpine by @mike_andreuzza
- 📄 How to create and print an invoice with Astro and Tailwind by @mike_andreuzza
- 📄 Serving Astro with Rust
- 📄 Create an interactive testimonial with Astro & Tailwind by @mike_andreuzza
- 📄 Going Full-stack on Astro with Cloudflare D1 and Drizzle by @third774
- 📺 integrate Sanity into Astro by Simeon Griggs
- 📺 Lessons from Astro and Nuxt - EdinburghJS by @aFuzzyBear
- 📄 Things I've worked on at Astro in 2023 by @princesseuh
- 📄 Using Astro and Server-Sent Events (SSE) to Build Realtime In-App Notifications by @rishirajjain
- 📄 Adding resumability to Astro with Qwik by @pauliescanlon
- 📄 the Framework Field Guide by @crutchcorn
- 📄 How to create animated blog cards with Astrojs and Tailwind CSS by @mike_andreuzza
- 📄 Dynamic footer date for static websites by @florian_lefebvre
- 📄 Deploy Astro to AWS Amplify by @rishirajjain
- 📄 How to simplify your code and avoid repeating your markup with Astro and Tailwind by @mike_andreuzza
- 📄 Build your interface in Astro: Components by @domeT99
- 📺 Netflix-style web app build in Astro by @jlengstorf
- 📄 An Upgrade to the latest web technologies by @nitinatshikhashikz
- 📄 Tailwind dark mode: with or without JavaScript by @shelbyAsAShelby
- 📺 How To Build a Multilingual Website with Astro & Storyblok | Part 1 by @arisafukuzaki
- 📄 What is a layout in React? Comparing Next.js, React Router, and Astro by @ericbureltech
- 📄 Deploy Astro to Amazon ECS on AWS Fargate: A Step-by-Step Guide by @rishirajjain
The latest community-built utilities and integrations to help you build with Astro.
- Discover your first Astro PR by @liruifengv
- Astro db Lucia auth Adapter by @pilcrowonpaper
- Astro Mastodon component by @rosnovsky
- Switchcase Astro web app by @hellosendpie
- Clerk Astro integration
- Astro Embed by @Chris
Several new Astro themes were added to the Astro theme directory this month. Try them out!
<ThemeGrid themes={['refo', 'gurido', 'resume04', 'resume03']} />
More themes and templates:
- theme.technomancy.dev by @liltechnomancer
- clarity-astro-theme.netlify.app by @rush2jay
- Stellar documentation theme by @prerad
- PocketNaut by @nnisarg
- astro-website-starter by @SBK-4N
- Template for Astro + TailwindCSS monorepo by @solelychloe
- Astro db Lucia auth starter template by @ElianCodes
Looking for some inspiration? See all the community member websites submitted to our Discord #showcase
channel and featured on community calls this month.
export const sites = [ { url: 'https://travelcraft-wheat.vercel.app/', title: '@monikossa'}, { url: 'https://www.luckygenius.ai/', title: '@opus131'}, { url: 'https://animeif.netlify.app/', title: '@infinite_programmer'}, { url: 'https://borgesmj-portfolio.netlify.app/', title: '@borgesmj'}, { url: 'https://letitgo-shop.vercel.app/', title: '@monikossa'}, { url: 'https://zgela.services/', title: '@vdrnn'}, { url: 'https://carnetsvanille.com/', title: '@neitsa.bes'}, { url: 'https://minpluto.org/en/', title: '@sudovanilla'}, { url: 'https://memoria-ten.vercel.app/', title: '@monikossa'}, { url: 'https://loquierasono.democracia.com.es/', title: '@aitor451'}, { url: 'https://futrloggr.vercel.app/', title: '@xylis_'}, { url: 'https://unfoldgently.com/', title: '@jonoces'}, { url: 'https://stdpi.work/', title: '@stdpi'}, { url: 'https://johnsolly.dev/', title: '@jsolly'}, { url: 'https://vilop.com/', title: '@chris_leyva'}, { url: 'https://simotion.hu/', title: '@petrovicz'}, { url: 'https://tailpool.vercel.app/', title: '@tarik_wpplumber'}, { url: 'https://www.vg.no/', title: '@johand'}, { url: 'https://thefamilia.vercel.app/', title: '@monikossa'}, { url: 'https://travelcraft-wheat.vercel.app/', title: '@monikossa'}, { url: 'https://www.luckygenius.ai', title: '@opus131'}, { url: 'https://kulpinski.dev/', title: '@piotrkulpinski'}, { url: 'https://gautamvaishnav.vercel.app/', title: '@gautamvaishnav'}, { url: 'https://ep2024.europython.eu/', title: '@patrick.py'}, { url: 'https://art.tricked.dev/', title: '@tricked.'}, { url: 'https://flexilla-docs.vercel.app/', title: '@johnkat_mj'}, { url: 'https://astrolicious.dev/blog/hello-world', title: '@alexanderniebuhr'}, { url: 'https://piccalil.li/',title: '@leannecodes'}, { url: 'https://ryanfurrer.com/', title: '@ryandotfurrer'}, { url: 'https://www.ibrahimo.dev/', title: '@ibodev'}, { url: 'https://thiti.dev/', title: '@thiti.y'}, { url: 'https://jeremylondon.com/', title: '@jeremy'}, { url: 'https://thegoatlifefilm.com/', title: '@sanjayrjs'}, { url: 'https://astro-blog-db1703.netlify.app/', title: '@skywalker.db'}, { url: 'https://www.robcipolla.co.uk/', title: 'robcipolla.'}, { url: 'https://mikuhl.me/', title: 'mikuhl_'}, { url: 'https://legrostonneau-festival.fr/', title: 'colir_'}, { url: 'https://gu.illau.me/', title: 'edo999'}, { url: 'https://newsminutedaily.com/', title: '@tanmay099'}, { url: 'https://jackshelton.com/', title: '@jackshelton'}, { url: 'https://peterhanania.com/', title: '@peterhanania'}, { url: 'https://frankstall.one/portfolio/', title:'@frank_stallone'}, { url: 'https://mailta.pe/', title:'@imacrea'}, { url: 'https://blog.asyncx.top/en/', title:'@AsyncX'}, { url: 'https://ecommerce-project-creative.netlify.app/', title:'@roboxgamer52'}, ];
export const starlightSites = [ { url: 'https://docs.atuin.sh/', title: 'Atuin'}, { url: 'https://bibtex.eu/', title: 'Bibtex'}, { url: 'https://bloclibrary.dev', title: 'Bloclibrary'}, { url: 'https://codefori.github.io/docs/', title: 'Codefori'}, { url: 'https://docs.astronvim.com/', title: 'astronvim'}, { url: 'https://docs.bebop.sh/', title: 'Bepop'}, { url: 'https://screenshotone.com/docs/', title: 'Screenshot One'}, { url: 'https://sammccord.github.io/solid-pixi/', title: 'solid-pixi'}, { url: 'https://guides.jbrains.ca/', title: 'Guides by jbrains_'}, { url: 'https://astro-i18n.netlify.app/', title: 'astro-18n'}, { url: 'https://astro-tips.dev/', title: 'astro-tips'}, { url: 'https://ion.sst.dev/', title: 'Ion' }, { url: 'https://www.zvm.app/', title: 'zig version manager'}, {url: 'https://astro-embed.netlify.app/', title: 'astro-embed'} ];
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!