drowsy wharf
How can I combine two collections together so that I can display them on the same page? For example, I would like to combine my blog and knowledge base collections so that I can present all of them on a Resources page? This is my current code:
const posts = await getCollection("blog", ({ id }) => id.startsWith(lang));
const knowledgebase = await getCollection("kb", ({ id }) => id.startsWith(lang));
How can I make a resources var with the two collections joined
wary otter
I don't know for sure... but you could create one async function that retrieves both collections (in the function) then massage the data as you see fit and return it. Then put that async function in one createResource.
drowsy wharf
This worked, but the issue is with the buttonUrl. The blog articles live under /blog and knowledgebase under /kb, but the slug doesn't contain those subfolders. In the blog and kb templates I just added in /kb before the {post.slug}
const resources = [...(await getCollection("blog", ({ id }) => id.startsWith(lang))), ...(await getCollection("kb", ({ id }) => id.startsWith(lang)))];
const latestPosts = resources.sort((a, b) =>
+b.data.publishDate - +a.data.publishDate)
---
<Base
pageTitle="Resources | SimForm"
>
<SimpleHero title="Blog" />
<section>
<div class="flex flex-wrap justify-center mt-2 gap-x-5 gap-y-5 sm:p-5">
{
latestPosts.map((post) => (
<Card
title={post.data.title}
body={post.data.publishDate.toLocaleDateString("en-us", {
year: "numeric",
month: "short",
day: "numeric",
})}
cardImage="../assets/images/pages/oem-suppliers.jpg"
buttonText="Read more"
buttonUrl={`/${post.slug}`}
/>
))
}
</div>
<br>
</section>
warm coral
post should have a collection property, which you could use in your buttonUrl
buttonUrl={`/${post.collection}/${post.slug}`}