How to parse content of a .yml into astro? | Astro Lounge | Page 1

blazing questBOT Oct 28, 2025, 11:10 AM

#

Hi @mighty horizon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on your question, you have a YAML file that's being loaded into an Astro content collection, and you need to render the Markdown content stored in the contenuto property.

Solution

Since your contenuto field contains Markdown text ('# Hello World!\n\nlorem ipsum dolor sit amet.'), you'll need to use a content loader that can render this Markdown to HTML. Here's how to do it:

1. Set up your content collection with a loader

In your src/content.config.ts, configure your collection to use the file() loader and render the Markdown content using renderMarkdown():

import { defineCollection } from 'astro:content';
import { file } from 'astro/loaders';

const pagine = defineCollection({
  loader: file("src/content/pagine/home.yml", {
    parser: async (text) => {
      const yaml = await import('yaml');
      return yaml.parse(text);
    }
  }),
  schema: /* your schema */
});

export const collections = { pagine };

However, to render the Markdown content, you'll need to create a custom loader that uses renderMarkdown():

import type { Loader } from 'astro/loaders';

export function yamlWithMarkdownLoader(fileName: string): Loader {
  return {
    name: 'yaml-markdown-loader',
    async load({ renderMarkdown, store }) {
      const yaml = await import('yaml');
      const fs = await import('fs/promises');
      const content = await fs.readFile(fileName, 'utf-8');
      const data = yaml.parse(content);
      
      store.clear();
      store.set({
        id: data.id,
        data: data,
        rendered: await renderMarkdown(data.contenuto),
      });
    },
  };
}

2. Render the content in your Astro page

#

Once your loader is set up to provide rendered content, you can use the render() function and <Content /> component in your page:

---
import { getEntry, render } from 'astro:content';

const entry = await getEntry('pagine', 'home');
if (!entry) {
  throw new Error('Could not find page');
}
const { Content } = await render(entry);
---

<h1>{entry.data.title}</h1>
<Content />

The <Content /> component will render the Markdown from your contenuto field as HTML.

Note on YAML support

To import YAML files in Astro, you may need to install a Vite or Rollup plugin like `@rollup/plugin-yaml` and configure it in your `astro.config.mjs`.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty horizon Kapa.ai is still learning and improving, please let me know how I did by reacting below.

mighty horizon Oct 28, 2025, 11:23 AM

#

@blazing quest Can you explain me what I have to do step by step, please?

blazing questBOT Oct 28, 2025, 11:23 AM

#

Let me check the knowledge base for you again. One moment! :books:

#

I'll break down the solution into clear, step-by-step instructions to help you render Markdown content from your YAML file in Astro.

Step-by-Step Guide

Step 1: Install Required Dependencies

First, install the necessary packages:

npm install yaml @rollup/plugin-yaml --save-dev

Step 2: Configure Vite to Support YAML Files

Add the YAML plugin to your astro.config.mjs to enable YAML imports:

import { defineConfig } from 'astro/config';
import yaml from '@rollup/plugin-yaml';

export default defineConfig({
  vite: {
    plugins: [yaml()]
  }
});

Step 3: Create a Custom Loader

Create a new file src/loaders/yamlMarkdownLoader.ts with a custom loader that uses renderMarkdown():

import type { Loader } from 'astro/loaders';
import { readFile } from 'fs/promises';
import YAML from 'yaml';

export function yamlMarkdownLoader(fileName: string): Loader {
  return {
    name: 'yaml-markdown-loader',
    async load({ renderMarkdown, store }) {
      const fileContent = await readFile(fileName, 'utf-8');
      const data = YAML.parse(fileContent);
      
      store.clear();
      store.set({
        id: data.id || 'home',
        data: data,
        rendered: await renderMarkdown(data.contenuto),
      });
    },
  };
}

Step 4: Configure Your Content Collection

In your src/content.config.ts, define your collection using the custom loader:

import { defineCollection, z } from 'astro:content';
import { yamlMarkdownLoader } from './loaders/yamlMarkdownLoader';

#

const pagine = defineCollection({
loader: yamlMarkdownLoader("src/content/pagine/home.yml"),
schema: z.object({
contenuto: z.string(),
// Add other fields from your YAML here
})
});

export const collections = { pagine };


### Step 5: Render the Content in Your Page

In your Astro page (e.g., `src/pages/index.astro`), [query and render the content](<https://docs.astro.build/en/guides/content-collections/#rendering-body-content>):

```astro
---
import { getEntry, render } from 'astro:content';

const entry = await getEntry('pagine', 'home');
if (!entry) {
  throw new Error('Could not find page');
}
const { Content } = await render(entry);
---

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <Content />
  </body>
</html>

Step 6: Test Your Setup

Run your Astro dev server:

npm run dev

Your Markdown content from the contenuto field should now be rendered as HTML on your page. The # Hello World! will become an <h1> tag, and the paragraph text will be properly formatted.

Summary

The key steps are:

Install dependencies for YAML parsing
Configure Vite to support YAML files
Create a custom loader that renders Markdown using renderMarkdown()
Configure your content collection with the custom loader
Use render() and <Content /> to display the content in your page

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty horizon Kapa.ai is still learning and improving, please let me know how I did by reacting below.

mighty horizon Oct 28, 2025, 11:25 AM

#

@blazing quest are you sure?

blazing questBOT Oct 28, 2025, 11:25 AM

#

Let me check the knowledge base for you again. One moment! :books:

#

I understand your concern. Let me clarify the approach I provided.

The solution I outlined is based on the Astro documentation, specifically for handling content collections with custom loaders. However, I should note a few important points:

Key Considerations

The renderMarkdown() function was added in Astro 5.9.0, so you need to ensure you're using at least this version.
Simpler alternatives exist - If you're already getting the data structure you showed (with id, data, filePath, etc.), it suggests you might already have a collection set up. In that case, you may not need a custom loader at all.

Alternative Approach

If your YAML file is already being loaded as a content collection entry, you might be able to use a simpler approach with the built-in file() loader:

import { defineCollection } from 'astro:content';
import { file } from 'astro/loaders';

const pagine = defineCollection({
  loader: file("src/content/pagine/home.yml"),
  schema: /* your schema */
});

However, this won't automatically render the Markdown in contenuto. For that, you'd need to either:

Use the custom loader approach with renderMarkdown() (as I described)
Or manually parse the Markdown in your page using a library like marked

Could you share:

Your current Astro version?
How your src/content.config.ts is currently configured?

This will help me provide a more accurate solution for your specific setup.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty horizon Kapa.ai is still learning and improving, please let me know how I did by reacting below.

mighty horizon Oct 28, 2025, 11:39 AM

#

@blazing quest in this case the content is from DecapCMS. can you change it to make it work?

blazing questBOT Oct 28, 2025, 11:39 AM

#

Let me check the knowledge base for you again. One moment! :books:

#

Ah, that's an important clarification! Since you're using Decap CMS, the setup is different. Decap CMS commits content directly to your repository, typically as Markdown files in your content collections.

Updated Solution for Decap CMS

Step 1: Configure Decap CMS

First, ensure your Decap CMS is properly configured. In your public/admin/config.yml, you should have something like:

collections:
  - name: "pagine"
    label: "Pagine"
    folder: "src/content/pagine"
    create: true
    fields:
      - { label: "ID", name: "id", widget: "string" }
      - { label: "Contenuto", name: "contenuto", widget: "markdown" }

Step 2: Configure Your Content Collection

In your src/content.config.ts, define your collection to work with the files Decap creates:

import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const pagine = defineCollection({
  loader: glob({ pattern: '**/*.{md,yml}', base: './src/content/pagine' }),
  schema: z.object({
    id: z.string().optional(),
    contenuto: z.string(),
    // Add other fields from your Decap config
  })
});

export const collections = { pagine };

Step 3: Handle the Markdown Content

Since Decap stores the contenuto field as a string (not as the main body), you'll need to render it manually. In your page:

---
import { getEntry } from 'astro:content';
import { marked } from 'marked'; // Install: npm install marked

const entry = await getEntry('pagine', 'home');
if (!entry) {
  throw new Error('Could not find page');
}

// Parse the markdown from the contenuto field
const htmlContent = marked.parse(entry.data.contenuto);
---

#


### Step 4: Install Markdown Parser

Install `marked` to parse the Markdown:

```bash
npm install marked

Important Notes

Decap CMS creates files in your repository, so you don't need a custom loader to fetch remote content
The contenuto field is stored as frontmatter data, not as the main document body, so you need to manually parse it
This approach uses set:html to render the parsed Markdown, similar to how you'd render content from PayloadCMS

Alternatively, if you want Decap to store the content as the main body instead of in a frontmatter field, you could configure Decap to use the `body` widget instead of storing it in `contenuto`.

#How to parse content of a .yml into astro?

Solution

1. Set up your content collection with a loader

2. Render the content in your Astro page

Note on YAML support

To import YAML files in Astro, you may need to install a Vite or Rollup plugin like @rollup/plugin-yaml and configure it in your astro.config.mjs.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Step-by-Step Guide

Step 1: Install Required Dependencies

Step 2: Configure Vite to Support YAML Files

Step 3: Create a Custom Loader

Step 4: Configure Your Content Collection

Step 6: Test Your Setup

Summary

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Key Considerations

Alternative Approach

This will help me provide a more accurate solution for your specific setup.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Updated Solution for Decap CMS

Step 1: Configure Decap CMS

Step 2: Configure Your Content Collection

Step 3: Handle the Markdown Content

Important Notes

Alternatively, if you want Decap to store the content as the main body instead of in a frontmatter field, you could configure Decap to use the body widget instead of storing it in contenuto.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

To import YAML files in Astro, you may need to install a Vite or Rollup plugin like `@rollup/plugin-yaml` and configure it in your `astro.config.mjs`.

Alternatively, if you want Decap to store the content as the main body instead of in a frontmatter field, you could configure Decap to use the `body` widget instead of storing it in `contenuto`.