@studiocms/blog

v0.1.0-beta.25 GitHub npm Changelog

This plugin enables the StudioCMS Blog features as well as a frontend in your Astro project. It will allow you to create, edit, and delete blog posts from the StudioCMS dashboard.

What does this plugin do?

This integration will add the following new routes to your StudioCMS-controlled front-end:

/[...slug] - Catch-all route rendering generic StudioCMS pages.
/blog - Blog index listing all posts.
/blog/[slug] - The individual blog post page.
/rss.xml - The RSS feed for your blog posts.

Installation

Install the package using the following command:
- npm
- pnpm
- yarn
Terminal window
npm run studiocms add @studiocms/blog
Terminal window
pnpm run studiocms add @studiocms/blog
Terminal window
yarn run studiocms add @studiocms/blog

Your StudioCMS config should now include @studiocms/blog:

import { 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    plugins?: StudioCMSPlugin[] | undefined;
    logLevel?: "All" | "Fatal" | "Error" | "Warning" | "Info" | "Debug" | "Trace" | "None" | undefined;
    dbStartPage?: boolean | undefined;
    verbose?: boolean | undefined;
    componentRegistry?: Record<string, string> | undefined;
    locale?: {
        dateLocale?: string | undefined;
        dateTimeFormat?: Intl.DateTimeFormatOptions | undefined;
    } | undefined;
    features?: {
        sdk?: boolean | {
            cacheConfig?: boolean | {
                lifetime?: string | undefined;
            } | undefined;
        } | undefined;
        robotsTXT?: boolean | {
            host?: string | boolean | undefined;
            sitemap?: string | boolean | string[] | undefined;
            policy?: {
                userAgent?: "360Spider" | "360Spider-Image" | "360Spider-Video" | "HaoSouSpider" | "AdsBot-Google" | "AdsBot-Google-Mobile" | "AdsBot-Google-Mobile-Apps" | "Googlebot" | "Googlebot-Image" | "Googlebot-Mobile" | "Googlebot-News" | "Googlebot-Video" | "Mediapartners-Google" | "adidxbot" | "bingbot" | "BingPreview" | "MicrosoftPreview" | "msnbot" | "msnbot-media" | "Applebot" | "AppleNewsBot" | "Baiduspider" | "Baiduspider-image" | "Baiduspider-mobile" | "Baiduspider-news" | "Baiduspider-video" | "coccoc" | "coccocbot-image" | "coccocbot-web" | "DuckDuckBot" | "DuckDuckGo-Favicons-Bot" | "facebookcatalog" | "facebookexternalhit" | "Facebot" | "gooblog" | "ichiro" | "Sogou blog" | "Sogou inst spider" | "Sogou News Spider" | "Sogou Orion spider" | "Sogou spider2" | "Sogou web spider" ...
A utility function to define the StudioCMS config object.
This function is used to define the optional StudioCMS
config object in the Astro project root. The expected file
name is studiocms.config.mjs. And it should be adjacent
to the Astro project's astro.config.mjs file.
StudioCMS will attempt to import this file and use the default
export as the StudioCMS config object automatically if it exists.
Using this function is optional, but it can be useful for IDEs
to provide better intellisense and type checking.
@example 
// studiocms.config.mjs
import { defineStudioCMSConfig } from 'studiocms';

export default defineStudioCMSConfig({
 dbStartPage: true,
 contentRenderer: 'marked',
 verbose: true,
 dateLocale: 'en-us',
 // ...Other Options
})
defineStudioCMSConfig } from 'studiocms/config';
import 
function blog(options?: StudioCMSBlogOptions): StudioCMSPlugin
Creates and configures the StudioCMS Blog plugin.
@param ― options - Optional configuration options for the blog plugin.
@returns ― The configured StudioCMS plugin.
@example 
const blogPlugin = studioCMSBlogPlugin({
  blog: {
    title: 'My Blog',
    enableRSS: true,
    route: '/my-blog'
  },
  sitemap: true,
  injectRoutes: true
});
@param ― options.blog - Blog-specific options.
@param ― options.blog.title - The title of the blog. Defaults to 'Blog'.
@param ― options.blog.enableRSS - Whether to enable RSS feed. Defaults to true.
@param ― options.blog.route - The route for the blog. Defaults to '/blog'.
@param ― options.sitemap - Whether to trigger sitemap generation. Defaults to true.
@param ― options.injectRoutes - Whether to inject routes for the blog. Defaults to true.
blog from '@studiocms/blog';

 export default 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    plugins?: StudioCMSPlugin[] | undefined;
    logLevel?: "All" | "Fatal" | "Error" | "Warning" | "Info" | "Debug" | "Trace" | "None" | undefined;
    dbStartPage?: boolean | undefined;
    verbose?: boolean | undefined;
    componentRegistry?: Record<string, string> | undefined;
    locale?: {
        dateLocale?: string | undefined;
        dateTimeFormat?: Intl.DateTimeFormatOptions | undefined;
    } | undefined;
    features?: {
        sdk?: boolean | {
            cacheConfig?: boolean | {
                lifetime?: string | undefined;
            } | undefined;
        } | undefined;
        robotsTXT?: boolean | {
            host?: string | boolean | undefined;
            sitemap?: string | boolean | string[] | undefined;
            policy?: {
                userAgent?: "360Spider" | "360Spider-Image" | "360Spider-Video" | "HaoSouSpider" | "AdsBot-Google" | "AdsBot-Google-Mobile" | "AdsBot-Google-Mobile-Apps" | "Googlebot" | "Googlebot-Image" | "Googlebot-Mobile" | "Googlebot-News" | "Googlebot-Video" | "Mediapartners-Google" | "adidxbot" | "bingbot" | "BingPreview" | "MicrosoftPreview" | "msnbot" | "msnbot-media" | "Applebot" | "AppleNewsBot" | "Baiduspider" | "Baiduspider-image" | "Baiduspider-mobile" | "Baiduspider-news" | "Baiduspider-video" | "coccoc" | "coccocbot-image" | "coccocbot-web" | "DuckDuckBot" | "DuckDuckGo-Favicons-Bot" | "facebookcatalog" | "facebookexternalhit" | "Facebot" | "gooblog" | "ichiro" | "Sogou blog" | "Sogou inst spider" | "Sogou News Spider" | "Sogou Orion spider" | "Sogou spider2" | "Sogou web spider" ...
A utility function to define the StudioCMS config object.
This function is used to define the optional StudioCMS
config object in the Astro project root. The expected file
name is studiocms.config.mjs. And it should be adjacent
to the Astro project's astro.config.mjs file.
StudioCMS will attempt to import this file and use the default
export as the StudioCMS config object automatically if it exists.
Using this function is optional, but it can be useful for IDEs
to provide better intellisense and type checking.
@example 
// studiocms.config.mjs
import { defineStudioCMSConfig } from 'studiocms';

export default defineStudioCMSConfig({
 dbStartPage: true,
 contentRenderer: 'marked',
 verbose: true,
 dateLocale: 'en-us',
 // ...Other Options
})
defineStudioCMSConfig({
   
plugins?: StudioCMSPlugin[] | undefined
plugins: [
     
function blog(options?: StudioCMSBlogOptions): StudioCMSPlugin
Creates and configures the StudioCMS Blog plugin.
@param ― options - Optional configuration options for the blog plugin.
@returns ― The configured StudioCMS plugin.
@example 
const blogPlugin = studioCMSBlogPlugin({
  blog: {
    title: 'My Blog',
    enableRSS: true,
    route: '/my-blog'
  },
  sitemap: true,
  injectRoutes: true
});
@param ― options.blog - Blog-specific options.
@param ― options.blog.title - The title of the blog. Defaults to 'Blog'.
@param ― options.blog.enableRSS - Whether to enable RSS feed. Defaults to true.
@param ― options.blog.route - The route for the blog. Defaults to '/blog'.
@param ― options.sitemap - Whether to trigger sitemap generation. Defaults to true.
@param ― options.injectRoutes - Whether to inject routes for the blog. Defaults to true.
blog(/* Options */),
   ],
 });

Options

type StudioCMSBlogOptions = {
  /**
   * HTML Default Language - The default language for the HTML tag
   * @default 'en'
   */
  htmlDefaultLanguage: string | undefined;
  /**
   * HTML Default Header - The default head configuration for the Frontend
   */
  htmlDefaultHead: {
    /**
     * Name of the HTML tag to add to `<head>`, e.g. `'meta'`, `'link'`, or `'script'`.
     */
    tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
    /**
     * Attributes to set on the tag, e.g. `{ rel: 'stylesheet', href: '/custom.css' }`.
     */
    attrs?: Record<string, string | boolean | undefined> | undefined;
    /**
     * Content to place inside the tag (optional).
     */
    content?: string | undefined;
  }[] | undefined;
  /**
   * Favicon Configuration - The default favicon configuration for the Frontend
   */
  favicon: string | undefined;
  /**
   * Enable sitemap generation
   * @default true
   */
  sitemap: boolean | undefined;
  /**
   * Inject routes
   * @default true
   */
  injectRoutes: boolean | undefined;
  /**
   * The configuration for the blog
   */
  blog: {
    /**
     * The title of the blog
     */
    title: string | undefined;
    /**
     * Enable RSS feed
     */
    enableRSS: boolean | undefined;
    /**
     * The route for the blog
     * @default '/blog'
     * @example '/news'
     */
    route: string | undefined;
  } | undefined;
}