Articles

Astro Theme Provider is a tool that allows you to author themes for Astro like a normal project and export your work as an integration for others to use.

Problems with current theme practices

In Astro, typically a theme is a full project published as a template that users can clone and customize. Project templates are a common pattern and have lots of use cases, but they also have downsides that theme authors may not always be aware of.

One of the most significant downsides to project templates is that they are not beginner-friendly. The main demographic for theme users are people who are new to Astro and web development in general. Cloning and editing a project template as a beginner can be challenging. Project templates often times use lots of different technologies and can be bloated with files beginners may never need to edit. Also, there are no official conventions for authoring templates. Most templates use different combinations of patterns and structures. For example, many templates have a config file for customization, but the location of the file and its options vary depending on the template. Learning how to use a template while also learning how to use Astro can be confusing.

Project templates also have some more practical downsides. Merging improvements from a template can be difficult if not impossible after customizing your local copy. Also, templates cannot be easily added to existing Astro projects. Adding a template to an existing project requires manually splicing code from a template into a project.

A better way to create themes

A better way to create more user-friendly themes is shifting away from project templates and towards Astro integrations. Using an integration to author a theme has many different advantages over a traditional template. One of the largest advantages is that they can be published and consumed as NPM packages. This allows users to add themes to existing projects and upgrade them at any time.

Although theme integrations can be more user-friendly than project templates, they come at the cost of being harder to create. They require a lot of boilerplate and a lower level knowledge of Astro and Vite making it inaccessible for a lot of developers.

Astro Theme Provider solves this by making it easier for theme authors to create theme integrations without having to write any integration code. Themes can be authored similar to a normal Astro project and be exported for others to use with a single function call.

import { z } from 'astro/zod';
import defineTheme from 'astro-theme-provider';

export default defineTheme({
    name: "my-theme",
    schema: z.object({
        title: z.string()
    })
})

After creating your theme, it can be used inside an Astro project as an integration:

import { defineConfig } from "astro/config";
import myTheme from "my-theme";

export default defineConfig({
    integrations: [
        myTheme({
            config: {
                title: "Welcome to my theme!",
            },
        }),
    ],
});

Real world example

Astro Theme Provider is inspired by Starlight, Astro’s official documentation theme. Starlight is a theme integration that allows you to build a full documentation website with a config object and some markdown. Its ease of setup and use has made Starlight one of the most popular themes for Astro. Its success proves that theme integrations are a powerful pattern that have been under utilized in the Astro ecosystem.

What’s Next

We’re excited to share that Astro Theme Provider is in beta as of today. What’s next? - We’re working on improving the experience and shaping a stable version, but we need your help! We encourage contributions of any kind! You can check out the Project on GitHub and join us on Discord!

We’re excited to introduce AstroStudio CMS - a dedicated content management system (CMS) built on top of Astro Studio. This project was developed by Adam, Dreyfus, and Jumper.

Why another CMS?

While Astro’s content capabilities are powerful, we recognized a need for a more streamlined and user-friendly CMS solution within the Astro ecosystem. Many Astro users, especially those coming from more traditional CMS backgrounds, have expressed a desire for a dedicated CMS that can seamlessly integrate with Astro projects.

AstroStudio CMS was born out of this need, providing a content management platform that is tailor-made for Astro. By building on top of Astro Studio, we’re able to offer a CMS experience that feels native to the Astro workflow, making it easier for both developers and content creators to collaborate on Astro-powered projects.

Leveraging the Power of Astro

AstroStudio CMS is built from the ground up to seamlessly integrate with Astro’s robust and efficient framework. By harnessing the power of Astro, we’ve created a CMS solution that aligns perfectly with the Astro ecosystem, providing a solid foundation for building and scaling Astro-powered applications.

Key Features

AstroStudio CMS leverages Astro’s robust and efficient framework, providing a solid foundation for building and scaling Astro-powered applications. One of the key features of the CMS is the enhanced Markdown experience, where we’ve incorporated the ‘Marked’ library with support for extensions. This enriches the Markdown capabilities with greater flexibility and functionality.

Another important feature is the Shiki-powered syntax highlighting, which ensures code snippets are both visually appealing and easy to read. This is particularly useful in non-Cloudflare environments, where bundle size considerations are a factor.

In addition to ‘Marked’, AstroStudio CMS also provides an alternative Markdown processing option with Markdoc, offering users a choice for their content creation needs. All data within the CMS is securely housed in the Astro Studio database, accessible only to authorized users with studio.astro.build login credentials.

Furthermore, AstroStudio CMS features built-in authentication support, including options for Local and GitHub authentication. This enhances the security and user management capabilities of the CMS, although the authentication feature is currently in development.

Lastly, the CMS includes the Unpic image service, a free and efficient solution for managing external URLs with support for major CDNs. This streamlines the process of working with images within the AstroStudio CMS.

A Community-Driven Effort

At the heart of Astrolicious is a deep commitment to community involvement and collaboration. We believe that the development of AstroStudio CMS should be a collective effort, drawing on the diverse talents and perspectives of the Astro community.

To that end, we’ve handed the repository Astrolicious as an open organization, welcoming contributors of all skill levels to get involved and help shape the future of this CMS. Whether you’re a seasoned Astro developer or new to the ecosystem, we encourage you to join our Discord server and explore ways to contribute.

By fostering a sense of shared ownership and investment, we aim to create a CMS that truly reflects the needs and desires of the Astro community. Your feedback, ideas, and code contributions will be invaluable as we work to build a feature-rich and user-friendly content management solution for Astro.

So don’t be a stranger - come join us on this journey and help us realize the full potential of AstroStudio CMS!

Get Involved

AstroStudio CMS is currently in beta and should be considered an experimental project. It heavily relies on the @astrojs/db package, which is also in active development and not yet stable. As a result, you should expect a significant number of breaking changes as the project continues to evolve.

While we believe that by building on the cutting-edge features of Astro Studio, we can create a powerful and innovative CMS solution, this also means that AstroStudio CMS may not be suitable for mission-critical or production-ready projects at this stage. We encourage you to use caution and thoroughly test the CMS in your own projects before deploying it to a live environment.

Astrolicious is a free and open-source project, and we welcome contributions from the Astro community. If you’re interested in getting involved, please visit our GitHub repository and join our Discord server. Together, let’s build an even stronger and more vibrant Astro ecosystem.

We’re over the moon to unveil our latest adventure

Crafted with passion over weeks and constantly evolving, Astrolicious is our love letter to integration maintainers, community enthusiasts, and the entire Astro ecosystem.

Our mission?

To build an extraordinary community of innovation, collaboration, and enhancement that benefits everyone orbiting Astro.

What is Astrolicious? 🧐

Astrolicious isn’t just a name; it’s a movement. A collective ambition to shine a spotlight on community integrations, amplifying their visibility, maintenance, and reliability. Think of us as an umbrella organization, but with a twist — where every drop of effort helps nourish the vast Astro ecosystem.

Who’s Fueling the Astrolicious Rocket? 🚀

Our crew? A dynamic blend of community pioneers, Astro’s core members, and familiar faces from the Astro Discord. This fusion of minds ensures we stay true to Astro’s vision while navigating the cosmos at warp speed. Eager to join the expedition? We’re scouting for astronauts! 🌌

What’s on the Astrolicious Horizon? 🔭

Beneath our banner, stars are already aligning - expect a universe of projects, guides, and docs to explore soon. Have a look at who joined our galaxy already:

@astrolicious/i18n

@astrolicious/i18n by Florian is an i18n integration for Astro with server and client utilities, type safety and translations built-in. It solves some long standing issues regarding translating paths in different locales, including static and dynamic ones! Check the docs to learn more!

astro-tips.dev

astro-tips.dev is an initiative to centralize useful Astro resources that do not fit the official docs but almost! This is just getting started but many maintainers have contributed or are interested in it already!

How Can You Be a Part of This Stellar Journey? ✨

Your support is our rocket fuel! Follow us across the social cosmos. Share our vision with the community and let your voice be heard. We’re all ears for feedback, ideas, and dreams. Together, let’s make Astrolicious not just successful, but legendary.

Stay tuned for more updates by following us on X and on GitHub. Together, we’re not just reaching for the stars — we’re shaping the future of the Astro ecosystem. 🚀💫

This thought piece clarifies my personal view and opinion. It does not represent the opinion of every Astrolicious member, but I base the vision on it. So, I ask our members with a role to stand behind it.

How it all started

There were some discussions in the Astro Discord way back at the end of 2023 about the idea of having a place for community projects, with shared maintenance across multiple people, and a way for the community to find well-maintained and tested projects.

Similar efforts in the past didn’t work out, and having everything scattered creates some challenges. Users might not adopt community projects because they need a way to validate whether a project is well-maintained or high-quality. The dream was born: an unofficial trusted source for community projects, where users can be assured that the projects are well maintained, follow a high-quality standard, and are safe to use.

Strive to make Astro better

I believe Astrolicious, as an open community-driven idea, helps the greater community reduce the dependency attack surface and contributes to Astro’s growth and adoption. Community projects are crucial for the open-source ecosystem. Our passion and motivation are to improve Astro.

How do we differ from Astro?

While we welcome everyone and follow the same code of conduct as Astro, we don’t target the average Astro user. However, we have some projects under the Astrolicious umbrella that offer resources for Astro users.

Astrolicious targets integration creators, theme creators, and other integrable community projects. In fact, everyone feeling home in Astro’s integration channel will feel home at Astrolicious, too. However, it is essential to me that we keep open communication and connections between Astro and Astrolicious.

Which Discord is for me?

First things first, if you are not a member of the Astro Discord, stop reading and join us.

Everyone engaging with Astrolicious should be on the Astro Discord. The Astro Discord was, and always will be, the first place our Astro community will go to. And if you build your own Astro site, you won’t need the Astrolicious Discord.

The Astrolicious Discord targets contributors of our repositories. Even if you are looking for advice on how to build your first integration or theme, the integration channel is a perfect place to start. It should cover most cases but if you feel the need to dive deeper, you can join the Astrolicious server.

Is this a potential Astrolicious Project?

Sometimes, a question arises: Is this a potential Astrolicious Project?

I can’t give a general answer because we welcome every submission and are excited to see the interest. We will discuss every submission and idea. However, looking at the vision helps get a feeling.

Suppose your idea is not an integration, a theme, or another integrable community project. In that case, it does not fit the vision very well. I suggest you keep the idea on your personal GitHub Account and share it in Astro’s showcase channel.

Otherwise, if you want to benefit from a shared group of maintainers all working on your idea, with you also committing to maintaining other projects, then Astrolicious might be a good place for your idea. Still, if you plan to keep it yourself, you may not need Astrolicious at all.

Post Mortem

We will only succeed if Astro succeeds and gets stronger. We work on that goal together and would love to invite you to join us. Whenever you have concerns or are unsure about anything, please reach out to me or us. I want to ensure everyone understands the vision and knows why we’re doing this.