Astro Weekly #5

Astro 3.4 released, edit Astro content collections with Darkmatter, Death by JavaScript

Author

Nathan Lawson
October 31, 2023

Click or treat. Happy Halloween!

It’s been yet another spooktacular week for Astro, with some big updates shipped, plus our usual helping of treats from the community. Let’s get into it.

This week in Astro 🎃

HTMX in Astro?

Astro 3.4 released 😱

I'm not entirely certain what kind of witchcraft and wizardry is brewing with the Astro team, but the lightning-fast pace of new features since the release of Astro 3.0 is downright spooky.

Following closely on the heels of the Picture component in 3.3, Astro 3.4 has been released, bringing with it some frightfully good updates. Among these, the most significant is the introduction of Page Partials.

A page component can now be identified as a partial page, which will render its HTML content without including a <!DOCTYPE html> declaration nor any <head> content.

Partials are best used in conjunction with a rendering library, like htmx or Stimulus that is built around fetching HTML fragments.

Official Astro blog

When paired with a rendering library, partials provide an alternative method to Astro islands and <script> tags for creating dynamic content within Astro.

Explain this to me like I am a 5-year-old child on Halloween…

Okay, imagine you have a magic book. When you touch a picture in the book, it can instantly change into a new picture without needing to turn the page.

A rendering library, let’s say htmx, is like that magic book for websites. It helps parts of a webpage change without having to reload the whole page.

To mark any page as a partial, simply set the new partial option in the component frontmatter. 

---
export const partial = true;
---
<li>Eye of newt and toe of frog</li>

You can read a full breakdown of what’s new in Astro 3.4, including performance improvements to image generation, a new experimental dev overlay, and the usual bug fixes on the official Astro blog.

Astro Community 👻

Something we cannot see is at work

Darkmatter 🌌

Dark matter is a mysterious and invisible substance that makes up approx. 27% of the universe.

Darkmatter converts Astro’s content collections config into a UI anyone can use to manage your website content.

Now we’ve cleared that important detail up, let’s take a deeper look into this cool new project by Vadim Demedes.

Darkmatter empowers you to effortlessly handle your Astro site's content through an intuitive interface reminiscent of a traditional CMS. By scanning Zod collection schemas, it automatically generates a form interface, allowing you to populate your front matter without the need to launch an IDE.

  • Create, edit, and delete collection entries in a UI that adapts to each collection's Zod schema.

  • Populate front matter in an intuitive UI.

  • Drag & drop images into Markdown from anywhere.

  • Preview how your content will look before publishing.

  • Commit and push to git directly from Darkmatter.

If you're eager to dive deeper into Darkmatter, I highly recommend watching Chris Pennington's informative walkthrough on YouTube.

How to use Astro with a sprinkling of React 🧙

Does the thought of migrating away from a React-based framework seem a little scary to you?

If you’re intrigued about how that might work, Paul Scanlon has published an insightful article on how to use Astro to incrementally adopt a "reduced JavaScript" approach to building websites.

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

Astro Showcase 💀

Also known as Angular Fever

In the spirit of Halloween, our spotlight this week is eerily impressive.

Death by JavaScript is a spine-tingling photo gallery crafted using Astro and View Transitions, skillfully designed by Addy Osmani and Maxi Ferriera.

Remember, View Transitions remains an experimental feature in some browsers, so be sure to check it out using a supported browser for the best results.

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…

  • 1000.tools — an exclusive list of 1000 best tools vetted by humans

  • Next.js course — a brand new, free course from Vercel

  • Daily Domains — handpicked domains for your next side hustle, client project, or startup

That’s all for this week!

If you’re enjoying Astro Weekly as much as I enjoy Reese’s on Halloween, I’d love to hear your feedback, just like our good friend, Maxi!

Email me your comments and feedback at [email protected] or get in touch with me on X.

Have a great week, Astronauts!

– Nathan 🧟‍♂️