Astro Weekly #4

Microsoft launch Fluent 2 with Astro, Raycast extension released, taking the new Keystatic integration for a ride

Author

Nathan Lawson
October 24, 2023

Hey there, it's Astro Weekly!

We're back with a fresh batch of cosmic curiosities and fascinating finds. Let's dive in and explore what’s been happening in the Astro universe this week.

This week in Astro ✨

Web pages in half the time ⏱️

Microsoft gets fluent with Astro ❇️

This week, Astro released an insightful case study that delves into the reasons behind Microsoft's decision to opt for Astro as their platform of choice for constructing the new Fluent 2 Design System website.

Microsoft found Astro's default approach of shipping zero JavaScript to be the ideal choice for a lightweight and high-performance framework. Astro's tool-agnostic nature also made it possible for Microsoft to seamlessly integrate with other frameworks, allowing them to maintain their design system library built with React.

It’s very important to us that Astro is able to generate fully static files. This is very advantageous for us because we want to be protected from multiple things such as DDoS attacks

Tudor Popa, Engineering Manager @ Microsoft (Fluent 2)

Microsoft designed and built the new Fluent 2 website with Astro over the course of 10 months, including over 200 pages of new content, building new pages in half the time compared to their previous stack. Impressive!

Astro Docs. Supercharged. 🔦

If you’re a fan of the productivity app Raycast, then your Astro workflow is about to become even better! Thanks to the work of Elian Van Cutsem, an Astro Documentation extension is now available. Now you can find out why your SSR pages aren’t SSR-ing faster than ever before!

Embedded tweet post not loading? → Direct link

Astro Community 🧑‍🚀

Nice to meet you

Keystatic 🔑

Keystatic, a tool that makes Markdown, JSON and YAML content in your codebase editable by humans, has shipped a new and improved integration that can have your Astro site running with Keystatic in next to no time.

If you want to witness this in action, Simon Vrachliotis has a handy video guide showing you the whole process in under 2.5 minutes.

What exactly is Keystatic?

Keystatic, a project by Thinkmill, simplifies content management with a CMS-like UI. This content can be stored either locally or on GitHub, eliminating the need for a traditional database. Keystatic seamlessly integrates with web development frameworks like Astro, Next.js, and Remix.

Application Design in Astro ✏️

This artwork 🤌

Mark your calendars. The King of View Transitions sits down with the President of Whiteboards later this week to discuss all things application design in Astro.

Maxi Ferreira and Ben Holmes will be live on Twitch this Friday, Oct 27 @ 9:30am PDT. Be sure to tune in!

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 🌠

Give your side hustle some shine

Realtime Colors is an intuitive free tool that helps you quickly visualise a color palette right within the browser, but most impressive of all, it’s built with Astro.

The toolbar allows you to see and tweak all of the variables, including typography, share presets, and easily export code in either CSS or Tailwind CSS — perfect for all those side projects you’ll never finish.

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…

We've reached the end of another week!

Don't hesitate to continue sharing your suggestions for upcoming editions of Astro Weekly. If you have something you'd like to contribute for future publications, please drop me an email at [email protected] or connect with me on X.

Have a great week, Astronauts!

– Nathan 🧑‍🚀