Astro Weekly #13

Welcome to the first Astro Weekly of 2024! 🎉

I trust everyone had a delightful festive break, whether you seized the chance to rejuvenate or aimed to wrap up those lingering side projects — I, unfortunately, fell short on that front.

Astro experienced significant traction in the web ecosystem in 2023, and my optimism leads me to believe that 2024 holds even greater promise, especially with the imminent launch of the much-anticipated Astro Studio.

Until then, let’s see what’s been happening this week to kick-start 2024!

This week in Astro ✨

Astro 4.1 released ⚡️

Well, it would appear the Astro elves didn’t take too long a break over Christmas. As the rest of us reacquaint ourselves with coding upon returning to our desks, the Astro team has been busy shipping Astro’s first release of the year.

This release may be a bit smaller than usual, but Astro 4.1 still includes several improvements and bug fixes.

Notably, the client:visible directive has received a new configuration option — it now supports a rootMargin option. This feature allows you to define a margin around the viewport for visibility calculations.

This means your component can now be hydrated when it approaches the viewport, eliminating the need to wait until it becomes completely visible.

<!-- Load component when it's within 200px away from entering the viewport -->
<Component client:visible={ {rootMargin: "200px"} } />

Astro 4.1 also ships new accessibility audit rules for the Dev Toolbar, plus custom cookie encoding and decoding. For all the details on those and more, head on over to the Astro blog.

Astro Community 🧑‍🚀

Astro Meta Tags 🏷️

Since the introduction of the Dev Toolbar in Astro 4.0, we’ve seen several awesome apps from the community. And today, we have another to share!

Astro Meta Tags is an Astro Dev Toolbar App that helps you inspect your project’s meta tags to help ensure you’re passing the correct data for all your favourite and least favourite social media sites.

To install Astro Meta Tags, run the following command with your preferred package manager:

npx astro add astro-meta-tags

Build an image gallery CMS with Xata 🖼️

Rishi Raj Jain has put together this excellent step-by-step guide on building an image gallery CMS with the powerful combination of Astro, Xata, and Cloudflare Pages.

By the end of it, you'll understand setting up Xata, crafting an effective schema, optimising images, seamlessly retrieving records without pagination, plus handling forms in Astro using view transitions.

If you have something awesome you’d like to share with the Astro community, you can reach me at [email protected] or via DM on X

AstroXtra 💫

What’s happening on Twitter X this week…

Direct link for web version:
https://twitter.com/PaulieScanlon/status/1742652748615524656

Astro Showcase 🌠

Our first showcase of 2024 is a little different from the norm; it’s not just a great project built with Astro, but rather something to help elevate your own.

Starlog is a beautiful lightweight theme for your release notes from Mark Peck, Design Lead at Astro. The theme supports light and dark modes, SCSS variables for easy customisation, plus view transitions for added sparkle.

Other Astro projects in orbit 🪐

More great Astro projects worth checking out! ↓

Would you like your work to be featured in our Astro Showcase? Get in touch at [email protected] or DM me on X

Beyond the Astrosphere 🪐

What caught my eye outside of Astro this week…

• Epic Easing — quickly generate easing curves for ease, spring, and bounce animations, and instantly export to CSS & SCSS

• UI Colors — generate, edit, save, and share Tailwind CSS color shades

• Warp — a modern, Rust-based terminal with AI built-in

And that’s a wrap for the first issue of 2024! Only 49 or so more to go…

As always, if you wish to contribute you can reach me at [email protected] or via DM on X. If you’ve never contributed before, how’s that for a goal in 2024?

Please do keep sharing Astro Weekly wherever you can, it’s going to be quite the year, I promise.

Have fun out there!

– Nathan 🧑‍🚀