Getting frontmatter from collection

[slate sorrel]

my config.ts in src/content
// 1. Import utilities from astro:contentimport { z, defineCollection } from "astro:content"; // 2. Define your collection(s) const componentsCollection = defineCollection({ type: "content", schema: z.object({ title: z.string(), }), }); // 3. Export a singlecollections object to register your collection(s) // This key should match your collection directory name in "src/content" export const collections = { components: componentsCollection, };

translate.md in src/content/components
`---
slug: "translatefddffff"
title: "345325"

Your blog post content here.`

index.astro
`---
import { getCollection } from "astro:content";
import Layout from "../layouts/Layout.astro";
const test = await getCollection("components");

<Layout title="Rex Components">
<section>
<nav>
<!-- {components.map((component: any) => <div>{component}</div>)} -->
</nav>
</section>
<main>
{test.map((post: any) => <div>{post.title}</div>)}
</main>
</Layout>

<style>
main {
color: aquamarine;
}
</style>`

All I can get from the post is either slug or body. I cannot get title. What am I doing wrong? I initially wanted to pull astro instances from components but also could not seem to get a title var, so thought it was impossible and went this route, but now... nope. Oh and post.frontmatter is undefined.

and how to make my code formatted better?..

[fickle matrix]

Hey! You can format a code block by wrapping it in 3 backticks! There's a clever way to do this in a comment, but I can't remember, so I'll just sent a screenshot!

` <- this character

export const foo = () => 'bar';

[calm kite]

Your frontmatter variables are nested under data, in your case post.data.title. You should probably remove the any type from your map as this prevents your IDE to tell you about the actual type of post

https://docs.astro.build/en/guides/content-collections/#accessing-referenced-data

[slate sorrel]

That is undefined. Also if I remove the any TS has a hissyfit, even though I have the no any rule off.

[slate sorrel]

Actually while here, what I am actually trying to do is to have like a storybook collection of components, so I want to be able to get a list of all components from component files (.astro,.ts, .md whatever), but also be able to import that component and use it and also show its raw html/usage. But I do not want to have to write template literals as they do not get emmet vs code helpers. What is best? It doesnt look like there is anything that suits my need.

[calm kite]

It would be good if you could post a minimal stack blitz reproduction or at least the "hissyfit" that typescript throws at you 🙂 You most certainly don't have to put this any there if things were working correctly.

[slate sorrel]

I deleted my node cache, reinstalled stuff and took out the types, now it seems to work. But I am also noting that importing an astro instance via glob only has three proprieties but I can access frontmatter, for instance title via an instance even when TS is telling me its undefined. Is there a good way of extending the astroinstance type to include frontmatter fields?

[gusty portal]

Not with glob

for glob import, you need to type cast it yourself

for content collection, you get the types naturally

and yes, if you force an any then you overwrite the type so don't do that