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. 🚀💫