Content Collections API Deep Dive

[@astrodotbuild]

Astro approves of this message 💚💚👩‍🚀🚀💚💚

[@CodinginPublic]

🚀👨‍🚀🚀

[@moneyfr]

Next year you ll be in top dev KZbin's influencer

[@CodinginPublic]

That’s kind. Just hope to keep learning and provide value where I can.

[@Mitsunee_]

I was literally going to use zod in my layouts for frontmatter schema validation and now that exact thing is integrated within astro. Running out of excuses to stall migrating my blog, I think I can even fully ditch my prebuild script that I needed to speed up builds with nextjs. Just amazing.

[@CodinginPublic]

Go Astro 🚀

[@solev11]

I love Astro! I built my blog with Astro not long ago, but this is next level. Content collections API looks great and makes life easier. Thank you for the great content you provide!

[@CodinginPublic]

Astro is 🔥!

[@_the_one_1]

I was literally reading Astro docs about Content Collections yesterday and was waiting to see Astro 2.0 release today! So happy to find that you made content on this! THANK YOU

[@CodinginPublic]

Oh wow! That's awesome! Glad it was a help!

[@yoJuicy]

Thank you for the content. I really appreciate you for the free help on youtube. Keep up the quality content and the views and subs will follow!

[@CodinginPublic]

Thanks, James! Just love learning and glad it can benefit more than me!

[@rezpl]

This is fantastic content, I started your blog tutorial yesterday and I have noticed that they will lunch 2.0 today. Cant believe you already updated it.

[@CodinginPublic]

always be updating 🚀

[@briankgarland]

Very cool. If I'm not using markdown files but rather pulling in data from a headless CMS, would this still be useful?

[@CodinginPublic]

No, this is for local md/mdx files only. The good news is that the CMS story is already very good! Many headless CMS’s offer validation out-of-the-box and a simple top-level await in an Astro file is all it takes to get your post content! But local MD/MDX files is not something anyone is much solving-even though many use them.

[@naranyala_dev]

Excellent, thank you Chris. Future exploration always with Astro, ready to launch 🚀🚀🚀

[@CodinginPublic]

So glad you enjoyed it!

[@TheOne13337]

There is one thing that i can't understand on Astro. So i have VPS and i am running all my projects there in docker containers. So i could throw whole Astro app there, not only static files. In reality if you are running blog/news site you are going to manage all the content with your browser with somekind of CMS, and all your pages live in some database. But when you make changes to your database, you have to always run "npm run build" so that static files get created/updated. How are you going to do that without having to SSH to your server everytime you make changes to your pages? Is there non-hacky way to do that, or are people using somekind of "Run shell commands with Node"? I saw that in lot of these tutorials people are developing locally > they create static files with "npm run build" > push to Github > Vercel notices changes and gets static files.

[@CodinginPublic]

If you use SSR, you can just update the source files and when people navigate to routes, Astro will fetch the most up-to-date content. Would that work for you? Or am I misunderstanding?

[@ceralguy85]

Great update from Astro team 🚀 and great update to the Project, thank you so much for this tutorial Chris.

[@CodinginPublic]

Glad you enjoyed it! Thanks for saying something!

[@vouneo]

I really love this, trying to find errors in md is so frustrating.

[@CodinginPublic]

Ikr!??

[@fabriciololiveira]

Great video! Thank you very much!

[@CodinginPublic]

Glad you enjoyed it!

[@bobdpa]

Chris should be hired by Astro 🙋‍♂️💯

[@CodinginPublic]

🤔 … but then it would be work? 🤣 Go Astro! 🚀

[@bobdpa]

@@CodinginPublic very true haha 🙈

[@MarkConstable]

Excellent tutorial, thanks.

[@CodinginPublic]

Glad it was helpful!

[@wiesson1546]

Are there some helpers to sort and filter the blog posts (or content in general) or are they automatically sorted by the date field?

[@CodinginPublic]

Yes, see 4:34. You’ll there's a filter method. Because frontmatter will be unique per schema, you may not always have a “date” property, but you can filter off any of the frontmatter items.

[@ErikaPfeiffer-rm7fk]

What about SPAs with Astro? Would be great to have a video about this if possible

[@CodinginPublic]

Astro is more ideal for content-first sites with pockets of interactivity rather than the other way around. Now, you can certainly build little routes that are fully interactive dashboards with React, etc. but if you want your whole site to be a SPA, Astro really isn’t set up for that. Does that make sense?

[@ErikaPfeiffer-rm7fk]

There is an astro-spa package on npm and some examples on codesandbox

[@CodinginPublic]

Ah, okay. I'll look into it! I just heard an interview with the Astro core team and they basically said what I said in my above comment. They did mention that there are a few RFCs and proposals for creating a more SPA option. But it's also possible I misunderstood them. I'll take a look. Thanks!

[@ozanmuyes]

Excellent video, thanks! But around 9:45; the name for the defined collection does NOT need to be the directory name ("blog" in this case) since at the bottom of the src/contents/config.ts file we export collections - UNLESS you'd like to use shorthand property. It is also clear in the docs on the right of the page around the timestamp (the key "engineering-blog" is going to be the URL part)

[@CodinginPublic]

Ah, I think you’re right (looking at the docs now); not sure why I thought that? Thanks!

[@jhalmu]

Why I want to write by hand to .md files? How about editor page and data from database?

[@kayodeadechinan5928]

Some advantages, i may see with mardown: you don't need backup, you don't need to pay for a database, you get versionning if you use git, you can reuse react component for interactivity, your markdown files can be catched and distributed to cdn ...one main disadvantage i see though, is that, every time you add a new post, you should make a push to git, and rebuild...

[@CodinginPublic]

The headless CMS story is already very good with Astro. Most CMS’s offer out-of-the-box validation and a simple top-level await in Astro frontmatter pulls in your posts. But no one was really solving the local markdown need any many content sites still use it (many of mine do!). As an example, I have several sites that are never updated. Setting up a full CMS for something like that doesn't make any sense because it's just extra work that will never be used. It's much easier to just open a .md file and be off. But no pressure if you prefer the CMS route. It's already top-level with Astro! 🚀

[@BronGhast014]

what terminal was being used here?

[@CodinginPublic]

Warp :)

[@kirso]

@@CodinginPublic Is that a custom theme for Warp? I always thought its limited to what is in Warp.

[@CodinginPublic]

Nope, you can make any theme you want. Mine is Rebecca purple I think? It’s one of the themes in their themes directory.

[@MarkJaquith]

Unfortunately, the custom slug API was removed at the last second. Now, the "slug" field in frontmatter is reserved, and that's how you designate a custom slug for a piece of content.

[@CodinginPublic]

I didn’t realize there was a way to use a frontmatter “slug” in the past to have Astro set your slug. But if that’s the case, then, yes. There’s a new way to do it with Content Collections API.

[@0xtz_]

Yes maan , I'm working rn with TS and I won't go back to Js 😂

[@CodinginPublic]

🙌

[@peoray]

How did you do the suspended copy and paste at 36:07?

[@CodinginPublic]

It’s an extension called Turbo Console Log

[@peoray]

@@CodinginPublic I can't seem to do the same thing you did with the extension. To be clear, I'm referring to the dialog that appears on the screen with the title 'Sequential paste'

[@CodinginPublic]

AH! That's something else-sorry. I misunderstood you. That's called Pastebot. It's a copy and paste app for macOS.

[@anasouardini]

It sucks, the old way was providing me the "headings" property which I use to create my table of content very easily.

[@CodinginPublic]

You can actually get headings using Content Collections, too! Here: docs.astro.build/en/guides/content-collections/#rendering-content-to-html

[@anasouardini]

@@CodinginPublic Thank you, I'm still figuring things out.

[@wahyusa]

Let's go

[@CodinginPublic]

🙌

[@DanteMishima]

This takes me back to my Eleventy series... Useful as it may be, I shan't be using it.

[@CodinginPublic]

But if you do…you’ll never go back :)

[@DanteMishima]

@@CodinginPublic 😂😂 No Chris... I came to Astro to avoid this kind of stuff, now it's following me 🤣🤣🤣

[@CodinginPublic]

lol well the nice thing here is that it’s not that different to just putting all your posts in the route. It’s just a different folder with superpowers :)

[@DanteMishima]

@@CodinginPublic I'll probably pitch Astro to one of my clients - that's where I see myself messing with this...

[@CodinginPublic]

That’s fair :)

[@baileysli6235]

Thanks. Living example help me a lot. But I notice when I switch from Astro.glob to Collections my build became slower. Maybe that because of Zod?

[@CodinginPublic]

Hmm...haven't noticed that but it may be worth exploring in the Discord if you keep seeing problems with it.

[@bobbyb6412]

just some feedback: I feel your videos have good content, but you're a bit too fast to follow if you're actually doing this for the first time imo. remember we're trying to learn this stuff and having to constantly rewind is kind of exhausting

[@rickberger4081]

Great tutorial - however! I got into typescript hell with the getCollection() filter function. I finally resolved the issue with the following filter function declaration: (entry): entry is CollectionEntry => !entry.data.draft; TS is complaining about a function that returns a boolean not assignable to a predicate function (damned fine distinction, if you ask me.) Any insights appreciated.

[@CodinginPublic]

I'm definitely no expert in Typescript (as I mentioned in the video 😬) and I'm not entirely sure I understand what you’re typing exactly here, but you should be able to just type the returned value from the collection. You don't need to type the actual filter function; it'll infer all that. (again, I may not be understanding the scenario)

[@rickberger4081]

Yeah, me neither. Likely even less so. I've determined to use this project (and others) to learn typescript. I started the project from scratch using Astro 2.0.2 and TS 4.9.4, maybe which adds the finer distinction. After examining the error message *really* closely for a whole damned morning, I finally came up with this solution. A background in other strongly-typed languages (C++ & Java - both of which can get into some really arcane typing statements) helps, I think...