Content Collections

We utilize Astro’s Content Layer to create entire websites using just content files and our components.

Starter Template

This is the recommended way to get started with our content layer integration. We’ve created a starter template with examples of everything you need to get started.

pnpm create astro@latest -- --template fulldotdev/starter

Manual Setup

To get started with the manual setup, you need to install the integration and add injectRoutes: true to your astro.config.ts file, see frontmatter below for more information on how this generates a site using content files.

import { defineConfig } from 'astro/config'
import fulldev from 'fulldev-ui/integration'

// https://astro.build/config
export default defineConfig({
  integrations: [
    fulldev({
      // other options
      injectRoutes: true,
    }),
  ],
})

Type-safe frontmatter

Each file has a few frontmatter objects that are important to know about. Seo has priority over title and description, however title and description is used in multiple places like a card.

---
preset: [docs] # Applies the configuration from src/content/presets/docs.yml
component: DocsLayout

seo:
  title: Page Title
  description: This is my page description
  image: /image.jpg # Open Graph Image

# Information on the page, this is used in places like card, sidebar, etc.
title: Page Title
description: This is my page description

sections: # Here you generate the page by adding a component and passing props
  - component: Hero
    heading: Page Title
    text: This is my page description
    buttons:
      - text: Button
        color: brand
        href: /
      - text: Button
        href: /
---
# This is the prose, you can use markdown here

For all objects avaliable in the Content Layer, see the schemas .

Presets

Presets are configuration files that can be used to set the default values for a page. They are located in the src/content/presets directory and you can use them by adding the preset property to the frontmatter of a page or add a basePreset to the integration setup in the astro.config.ts file.

import { defineConfig } from 'astro/config'
import fulldev from 'fulldev-ui/integration'

// https://astro.build/config
export default defineConfig({
  integrations: [
    fulldev({
      // other options
      basePreset: 'base', // Applies the configuration from src/content/presets/base.yml to every page
    }),
  ],
})

i18n

Getting started with i18n is easy, you can easily add additional languages by creating a new folder named after a language code in the content/pages directory and adding your content files in the new language.

These pages are just as static as the others however you can merge them with the default language by adding the i18n key to the frontmatter.

By merging pages you only need to specify the content that is different for the new language. Things like images do not need to be repeated in these new files. See example:

content/pages/index.md:

---
sections:
  - component: Hero
    image: /image.webp
    heading: Page Title
    text: This is my page description
---

content/pages/nl/index.md:

---
i18n: index

sections:
  - component: Hero
    heading: Page Title
    text: This is my page description
---

These return the same results

Example structure

.
├── src/
│   ├── content/
│   │   ├── pages/
│   │   │   ├── index.md
│   │   │   ├── nl/
│   │   │   │   └── index.md
│   │   │   └── de/
│   │   │   │   └── index.md