astro-content-collections-minimal

Customization

Configuration Options

All available options for astro.config.mjs:

// astro.config.mjs
contentCollectionsMinimal({
  siteTitle: "My site",
  siteDescription: "サイトの説明",
  lang: "ja",
  styles: "./src/styles/global.css",
  components: {
    Header: "./src/components/MyHeader.astro",
    Footer: "./src/components/MyFooter.astro",
    Layout: "./src/layouts/MyLayout.astro",
  },
});

Option	Type	Required	Default	Description
`siteTitle`	`string`	Yes	—	Site title (displayed in the browser tab and header)
`styles`	`string`	Yes	—	Relative path to the global CSS file (e.g., Tailwind entry)
`siteDescription`	`string`	No	—	Site description (used for meta description)
`lang`	`string`	No	`"en"`	HTML `lang` attribute
`components`	`object`	No	—	Paths to custom components that override the defaults

Styling with CSS Custom Properties

You can customize styles by overriding CSS custom properties in the CSS file specified by the styles option (e.g., global.css).

Since this package also supports full component replacement, the only CSS custom property currently provided is --color-background (background color). You can also use Tailwind’s built-in variables.

/* src/styles/global.css */
@import "tailwindcss";
@plugin "@tailwindcss/typography";

@theme inline {
  /* You can use Tailwind variables directly */
  --color-background: var(--color-amber-100);
}

Component Overrides

The default Header, Footer, and Layout components can be replaced with your own custom Astro components. Specify paths relative to the project root. You only need to specify the components you want to override — the rest will use the defaults.

// astro.config.mjs
contentCollectionsMinimal({
  siteTitle: "My site",
  styles: "./src/styles/global.css",
  components: {
    Header: "./src/components/MyHeader.astro",
    Footer: "./src/components/MyFooter.astro",
    Layout: "./src/layouts/MyLayout.astro",
  },
});

Accessing Configuration in Custom Components

To use configuration values such as siteTitle inside your custom components, import the provided virtual module.

---
// src/components/MyHeader.astro
import config from "virtual:astro-content-collections-minimal/config";
const { siteTitle } = config;
---

<header>
  <h1>{siteTitle}</h1>
</header>

Props Passed to the Layout Component

When you override the Layout component, the following Astro.props are automatically passed from the internal routing logic. Use them to build your own <head> and meta tags.

title — Page title (a combination of the frontmatter title and siteTitle, or a fallback value)
description — Page description (the frontmatter description, or a fallback value)