Hi @left oracle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#using the content of multiple mdx file
cloud bridgeBOT
To import and use the content of multiple MDX files in Astro, you can use the Astro.glob() function. This function allows you to import multiple pages at once. Here's an example of how you can use it:
---
// Import multiple files with Astro.glob
const posts = await Astro.glob('../content/*.mdx');
---
After importing the posts, you can map over them and render each post's content:
<>
<Section>
{posts.map(post => <post.Content />)}
</Section>
</>
Please note that the path in Astro.glob() should be adjusted according to your project's structure.
For more information, you can refer to the Astro documentation on importing markdown (https://docs.astro.build/en/guides/markdown-content#importing-markdown) and Astro documentation on MDX-only exports (https://docs.astro.build/en/guides/markdown-content#mdx-only-exports).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
left oracle
oh I thought Content is suppose to be used like this:
{post.Content}
Let me check the knowledge base for you. One moment! :books:
Sorry @left oracle, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?
left oracle
how do I sort them? @cloud bridge
cloud bridgeBOT
Let me check the knowledge base for you. One moment! :books:
To sort the posts, you can use JavaScript's built-in sort() function. However, you'll need some sort of criteria to sort by. This could be the post's title, date, or any other property.
Here's an example of how you can sort the posts by title:
---
// Import multiple files with Astro.glob
let posts = await Astro.glob('../content/*.mdx');
// Sort posts by title
posts = posts.sort((a, b) => a.title.localeCompare(b.title));
---
Then, you can render the sorted posts:
<>
<Section>
{{posts.map(post => <post.Content />)}}
</Section>
</>
Please note that this assumes each of your posts has a title property. Adjust the sorting criteria according to your needs.