Content Layer

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.

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 file structure 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,
    }),
  ],
})

Folder Structure

.
├── src/
│   ├── blocks/
│   │   └── ...
│   ├── components/
│   │   └── ...
│   ├── layouts/
│   │   └── ...
│   ├── assets/
│   │   └── ...
│   ├── content/
│   │   ├── pages/
│   │   │   └── ...
│   │   ├── records/
│   │   │   └── ...
│   │   │       └── ...
│   │   ├── presets/
│   │   │   ├── base.yml
│   │   │   └── ...
│   │   └── ...
│   ├── css/
│   │   ├── custom.css
│   │   └── ...
├── public/
│   └── ...
└──

• /src/: The main source directory containing all the core files of the project.
  • /blocks/: Contains reusable block components that can be composed to build pages (Custom or overwrites existing fulldev-ui blocks)
  • /components/: Houses individual UI components used throughout the project (Custom or overwrites existing fulldev-ui components)
  • /layouts/: Contains layout components used to structure pages (Custom or overwrites existing fulldev-ui layouts)
  • /assets/: Contains assets like images, fonts, etc.
  • /content/: Stores content-related files:
    • pages/: Contains markdown or MDX files for individual pages.
    • records/: Contains markdown or MDX files for content collections. Nested in directories by collection name.
    • /presets/: Includes configuration files for various settings like the sidebar.
  • /css/: Contains global CSS files and styles.

File Structure

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.

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

title: Page Title
description: This is my page description
---

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

Image Alt collection

To create yml records for images, you can simply add generateImageEntries: true to the integration setup. This will generate a yml file in the src/assets/ directory with the image alt text pre set to the unslugged filename which can be customized. If turned on the Image component will automatically use these records for the alt text of local images.

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

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

i18n

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

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