Тёмный

Content Collections API Deep Dive 

Coding in Public
Подписаться 48 тыс.
Просмотров 17 тыс.
50% 1

Опубликовано:

 

22 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 71   
@astrodotbuild
@astrodotbuild Год назад
Astro approves of this message 💚💚👩‍🚀🚀💚💚
@CodinginPublic
@CodinginPublic Год назад
🚀👨‍🚀🚀
@moneyfr
@moneyfr Год назад
Next year you ll be in top dev RU-vid's influencer
@CodinginPublic
@CodinginPublic Год назад
That’s kind. Just hope to keep learning and provide value where I can.
@Mitsunee_
@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
@CodinginPublic Год назад
Go Astro 🚀
@solev11
@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
@CodinginPublic Год назад
Astro is 🔥!
@yoJuicy
@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
@CodinginPublic Год назад
Thanks, James! Just love learning and glad it can benefit more than me!
@_the_one_1
@_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
@CodinginPublic Год назад
Oh wow! That's awesome! Glad it was a help!
@rezpl
@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
@CodinginPublic Год назад
always be updating 🚀
@naranyala_dev
@naranyala_dev Год назад
Excellent, thank you Chris. Future exploration always with Astro, ready to launch 🚀🚀🚀
@CodinginPublic
@CodinginPublic Год назад
So glad you enjoyed it!
@ceralguy85
@ceralguy85 Год назад
Great update from Astro team 🚀 and great update to the Project, thank you so much for this tutorial Chris.
@CodinginPublic
@CodinginPublic Год назад
Glad you enjoyed it! Thanks for saying something!
@vouneo
@vouneo Год назад
I really love this, trying to find errors in md is so frustrating.
@CodinginPublic
@CodinginPublic Год назад
Ikr!??
@briankgarland
@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
@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.
@TheOne13337
@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
@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?
@fabriciololiveira
@fabriciololiveira Год назад
Great video! Thank you very much!
@CodinginPublic
@CodinginPublic Год назад
Glad you enjoyed it!
@MarkConstable
@MarkConstable Год назад
Excellent tutorial, thanks.
@CodinginPublic
@CodinginPublic Год назад
Glad it was helpful!
@bobdpa
@bobdpa Год назад
Chris should be hired by Astro 🙋‍♂️💯
@CodinginPublic
@CodinginPublic Год назад
🤔 … but then it would be work? 🤣 Go Astro! 🚀
@bobdpa
@bobdpa Год назад
@@CodinginPublic very true haha 🙈
@wiesson1546
@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
@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.
@MarkJaquith
@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
@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.
@anasouardini
@anasouardini Год назад
It sucks, the old way was providing me the "headings" property which I use to create my table of content very easily.
@CodinginPublic
@CodinginPublic Год назад
You can actually get headings using Content Collections, too! Here: docs.astro.build/en/guides/content-collections/#rendering-content-to-html
@anasouardini
@anasouardini Год назад
@@CodinginPublic Thank you, I'm still figuring things out.
@ErikaPfeiffer-rm7fk
@ErikaPfeiffer-rm7fk Год назад
What about SPAs with Astro? Would be great to have a video about this if possible
@CodinginPublic
@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
@ErikaPfeiffer-rm7fk Год назад
There is an astro-spa package on npm and some examples on codesandbox
@CodinginPublic
@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!
@BronGhast014
@BronGhast014 Год назад
what terminal was being used here?
@CodinginPublic
@CodinginPublic Год назад
Warp :)
@kirso
@kirso Год назад
@@CodinginPublic Is that a custom theme for Warp? I always thought its limited to what is in Warp.
@CodinginPublic
@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.
@ozanmuyes
@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
@CodinginPublic Год назад
Ah, I think you’re right (looking at the docs now); not sure why I thought that? Thanks!
@peoray
@peoray Год назад
How did you do the suspended copy and paste at 36:07?
@CodinginPublic
@CodinginPublic Год назад
It’s an extension called Turbo Console Log
@peoray
@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
@CodinginPublic Год назад
AH! That's something else-sorry. I misunderstood you. That's called Pastebot. It's a copy and paste app for macOS.
@0xtz_
@0xtz_ Год назад
Yes maan , I'm working rn with TS and I won't go back to Js 😂
@CodinginPublic
@CodinginPublic Год назад
🙌
@jhalmu
@jhalmu Год назад
Why I want to write by hand to .md files? How about editor page and data from database?
@kayodeadechinan5928
@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
@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! 🚀
@wahyusa
@wahyusa Год назад
Let's go
@CodinginPublic
@CodinginPublic Год назад
🙌
@DanteMishima
@DanteMishima Год назад
This takes me back to my Eleventy series... Useful as it may be, I shan't be using it.
@CodinginPublic
@CodinginPublic Год назад
But if you do…you’ll never go back :)
@DanteMishima
@DanteMishima Год назад
@@CodinginPublic 😂😂 No Chris... I came to Astro to avoid this kind of stuff, now it's following me 🤣🤣🤣
@CodinginPublic
@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
@DanteMishima Год назад
@@CodinginPublic I'll probably pitch Astro to one of my clients - that's where I see myself messing with this...
@CodinginPublic
@CodinginPublic Год назад
That’s fair :)
@baileysli6235
@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
@CodinginPublic Год назад
Hmm...haven't noticed that but it may be worth exploring in the Discord if you keep seeing problems with it.
@bobbyb6412
@bobbyb6412 3 месяца назад
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
@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
@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
@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...
Далее
You may not ACTUALLY understand Content Collections…
42:03
How to work with data in Astro
26:04
Просмотров 23 тыс.
These Are Too Smooth 😮‍💨
00:57
Просмотров 6 млн
СДЕЛАЛИ СОБСТВЕННЫЙ МУЛЬТИК
25:15
(NEW!) Optimize Image Features in Astro 3.0
18:32
Просмотров 8 тыс.
Learn to Code SPA Week 6
1:15:49
Просмотров 28
HTMX and Astro Are An Amazing Combo!
17:50
Просмотров 12 тыс.
Astro Crash Course in 20 Minutes!
22:07
Просмотров 58 тыс.
How to Optimize Images in Astro
13:24
Просмотров 10 тыс.
Astro 2.0 is Revolutionary! Again!
26:05
Просмотров 50 тыс.
The Future of Astro is...
19:09
Просмотров 14 тыс.
Keystatic with Astro's Content Collections ⚡️🚀
22:00
These Are Too Smooth 😮‍💨
00:57
Просмотров 6 млн