How does it work!?

Introduction

StudioCMS is a powerful CMS built for Astro that allows you to manage and serve your content using Astro DB. It’s designed to be easy-to-use and flexible enough to handle any type of content.

Extending StudioCMS is easy too! You can create your own plugins to add new features to StudioCMS.

How does it work?

StudioCMS is divided into multiple parts:

• studiocms: The primary integration that hooks into your Astro project and provides the ability to interact with Astro DB (through the @astrojs/db integration).
• @studiocms/core: The core integration that provides the foundation for StudioCMS. It provides the database configurations, and adds various features including virtual imports, logging, etc.
• @studiocms/auth: An integration that provides authentication configuration options for the StudioCMS Dashboard.
• @studiocms/assets: An integration that provides the assets for the StudioCMS Dashboard.
• @studiocms/frontend: An integration that provides the frontend layouts and components for the StudioCMS ecosystem.
• @studiocms/renderers: An integration that provides the renderers for the StudioCMS ecosystem.
• @studiocms/dashboard: The primary web interface for managing your StudioCMS project. It provides a user-friendly interface for creating, editing, and deleting content.
• @studiocms/imagehandler: An integration that provides a <CustomImage /> component to handle remote images and optimize them for your project in an SSR environment.
• @studiocms/robotstxt: An integration that automates the creation of a robots.txt file for your StudioCMS project.
• @studiocms/betaresources: An integration that provides resources for the StudioCMS beta.

Breakdown

StudioCMS Core

StudioCMS Core is an Astro Integration which provides a comprehensive CMS solution out-of-the-box. This integration registers StudioCMS as the first plugin, sets up database configurations, watches for configuration changes, and adds various features including virtual imports, logging, and default frontend routes.

Features

• @astrojs/db: StudioCMS Core uses the @astrojs/db integration to connect to a libSQL database.
• Virtual Imports: StudioCMS Core adds several virtual modules packed with features that give you full control over your dynamic content.
• Logging: StudioCMS Core logs all changes to Astro Studio. This can be enabled in your config file.
• Default Frontend Routes: The StudioCMS Core integration adds default frontend routes to your Astro project to allow for easy access to the StudioCMS dashboard.
• Plugin System: You can extend StudioCMS using plugins to add additional functionality.

Core Virtual Modules

Tip

Modules prefixed with virtual: are virtual modules that are primarily used internally by StudioCMS, but can be used by developers to access StudioCMS data. To access these modules with proper typings, see the project development .d.ts file for an example of how to configure your project to sense these types.

Modules without the virtual: prefix have full typings defined and injected into your project’s .astro/ directory automatically, and can be accessed directly without any extra configuration.

• virtual:studiocms/config: Provides the resolved configuration for the StudioCMS integration ecosystem.
• virtual:studiocms/version: Provides the current version of the StudioCMS integration ecosystem.
• virtual:studiocms/pluginSystem: Provides the plugin system interfaces during runtime for StudioCMS.
• studiocms:components: Provides the front-end exported components for StudioCMS.
• studiocms:helpers: Provides the front-end exported helper functions for StudioCMS.
• studiocms:helpers/contentHelper: Provides the exported content helper functions for StudioCMS.
• studiocms:helpers/headDefaults: Provides the exported head defaults for StudioCMS.
• studiocms:helpers/routemap: Provides the exported route map for StudioCMS.

StudioCMS: Dashboard

The StudioCMS Dashboard is a web interface that allows you to manage your StudioCMS project. It provides a user-friendly interface for creating, editing, and deleting content for your project. The StudioCMS Dashboard is built with Astro and DaisyUI with UnoCSS.

Tech Stack

• Dashboard: The StudioCMS Dashboard provides a user-friendly interface for managing your StudioCMS project.
• UnoCSS: The StudioCMS Dashboard uses UnoCSS for styling and theming.
• DaisyUI: The StudioCMS Dashboard uses DaisyUI for styling and theming.
• AuthConfig: The StudioCMS Dashboard provides authentication configuration options.
• Astrolace: The StudioCMS Dashboard is built using Astrolace a Shoelace.style Astro Integration.
• DashboardRouteOverride: The StudioCMS Dashboard provides a dashboard route override configuration option. Allowing you to change the default route for the StudioCMS Dashboard and API.

Dashboard Virtual Modules

• studiocms:auth/config: Provides the authentication configuration for the dashboard.

StudioCMS: ImageHandler

The StudioCMS ImageHandler is an integration that provides a custom image component for your Astro project. This component is used to handle remote images and optimize them in a SSR environment using @unpic/astro.

Features

• <CustomImage />: The StudioCMS ImageHandler provides a custom image component for your Astro project.

ImageHandler Virtual Modules

• studiocms:imageHandler/components: The Virtual module that provides the exported image components for the StudioCMS ImageHandler.

StudioCMS: Renderers

The StudioCMS Renderers integration provides the renderers for the StudioCMS ecosystem. This integration is used to determine how content should be rendered in StudioCMS.

Renderers Virtual Modules

• studiocms:renderer: Provides the main renderer component for the StudioCMS ecosystem.
• studiocms:renderer/config: Provides the configuration for the StudioCMS renderer.
• studiocms:renderer/astroMarkdownConfig: Provides the configuration for Astro Markdown support.