I like the concept and you do a good job of explaining it. FYI: Your CSS for the 100vh - grid - auto 1fr auto, is a bit off as you can see at roughly 10:50. What I have started doing is, might not work in IE but whatever HTML - without the body div.body header ... /header main ... /main footer ... /footer /div /body CSS - sass styleish .bodyContainer display: flex; flex-direction: column; height: 100vh; overflow: hidden; header flex-grow: 0; main flex-grow: 1; overflow: auto; footer flex-grow: 0;
Awesome! Yeah, you could build in pagination with vanilla JS if you find it helpful. I've also recently moved to Pagefind myself and found it really helpful. Did a recent video about it on my channel. Cheers!
Hey! And if I want to use it in a Navbar for example, how can I do it? because I got the nav in a component, and it shows in all pages that nav... can do all the logic in the same file?
47:56 I wanted to ask you if there is a way to return an astro component, for example instead of a template string with the ... element and pass the data to said component by parameter. Thanks for your video, it helped me a lot :)
@@CodinginPublic How can I do it? I have: --- import Card from '@/components/card.astro' --- ... const generateSearchList = (results) => { return results.map((r) => { return `${r.item.name}` }).join("") } ... I wouldn't know how to pass that Card component to the script to generate the list
I added the main content of Content Collection pages to SEARCH_DATA, not just the title and description. The more content files, the heavier search.json becomes on the frontend. Is it possible to move the search to the backend? If yes, how can it be done?
Yes! It's especially easy if you build using SSR. As you hit the route, you could process the request and then return the results in the page from the server. Alternatively (and probably better for speed), you can have a JSON endpoint (like the one created here) that's ingested by an API you create on the server (edge functions would work well here). When you search, you can hit your API endpoint and pass it your query. It would then return a list of results you could display. Hope that points you in the right direction!
Is there a way for the search function to access the markdown content of the blog posts, which is the content written under the fronmatter script? If that can be done, the search bar can determine whether or not the main body of the post contains the search words.
I like the concept and you do a good job of explaining it.
FYI: Your CSS for the 100vh - grid - auto 1fr auto, is a bit off as you can see at roughly 10:50. What I have started doing is, might not work in IE but whatever
HTML - without the
body
div.body
header ... /header
main ... /main
footer ... /footer
/div
/body
CSS - sass styleish
.bodyContainer
display: flex; flex-direction: column; height: 100vh; overflow: hidden;
header
flex-grow: 0;
main
flex-grow: 1; overflow: auto;
footer
flex-grow: 0;
This is really great and worked seamlessly integrated in my project- the only thing missing is search pagination, but its not 100% necessary
Awesome! Yeah, you could build in pagination with vanilla JS if you find it helpful. I've also recently moved to Pagefind myself and found it really helpful. Did a recent video about it on my channel. Cheers!
Hey! And if I want to use it in a Navbar for example, how can I do it? because I got the nav in a component, and it shows in all pages that nav... can do all the logic in the same file?
You are a good coder - thank you for this 🙏
Glad it was a help!
Perfect tutorial, Thanks for the efforts!
Glad it was helpful!
47:56 I wanted to ask you if there is a way to return an astro component, for example instead of a template string with the ... element and pass the data to said component by parameter.
Thanks for your video, it helped me a lot :)
You’re welcome! Yes! You can do that!
@@CodinginPublic How can I do it? I have:
---
import Card from '@/components/card.astro'
---
...
const generateSearchList = (results) => {
return results.map((r) => {
return `${r.item.name}`
}).join("")
}
...
I wouldn't know how to pass that Card component to the script to generate the list
@@ryuse2568 I have the same problem. How did you solve this?!
Hi thanks for the course, could u please to make a video about astro internalization and make a small project connected with that
Got a whole module planned on this!
I added the main content of Content Collection pages to SEARCH_DATA, not just the title and description. The more content files, the heavier search.json becomes on the frontend.
Is it possible to move the search to the backend? If yes, how can it be done?
Yes! It's especially easy if you build using SSR. As you hit the route, you could process the request and then return the results in the page from the server. Alternatively (and probably better for speed), you can have a JSON endpoint (like the one created here) that's ingested by an API you create on the server (edge functions would work well here). When you search, you can hit your API endpoint and pass it your query. It would then return a list of results you could display. Hope that points you in the right direction!
Is there a way for the search function to access the markdown content of the blog posts, which is the content written under the fronmatter script? If that can be done, the search bar can determine whether or not the main body of the post contains the search words.
Yes, you’d just included that rendered content in your .json file and then query it!
@@CodinginPublic Thanks for the suggestion.
where did the source code go?
i only see a readme on github
Check the branches!
focus and value it marks me in red help pls
Im not sure I understand?
Duuude! Awesome tutorial as always! I send you an email, pls help me 😭😭😭
Glad you enjoyed it! I'm a bit slow on email and can't always help. Hoping to get to my email later today.
@@CodinginPublic thank you so much dude! I supposed it’s an easy-stupid thing to solve but I’m really really noob and junior :(