get static list of all markdown files

[jcalixte]

Hi,

First, congrats for this super cool generator!

I'm trying to replicate what I read from Josh Comeau here with the getStaticProps from NextJS and I was wondering how I could get the same result in a îles project.

Thank you 😃

[ElMassimo]

UPDATE: You can now useDocuments('~/posts').

---

Hi Julien! 😃

getLatestContent is a method that traverses the local filesystem to find all of the .mdx blog posts.

This part can be achieved using glob imports, as in the blog example:

const allPosts = import.meta.globEagerDefault('../pages/posts/**/*.{md,mdx}')

To get the latest, you can sort them by date. If you use date in frontmatter, have in mind that YAML supports Date objects so that you don't have to manually do new Date.

For the popular part, you could use fetch, query any APIs as needed to obtain the names or hrefs of the posts, and then pick the top 5 or sort them accordingly.

---

Currently îles does not polyfill fetch during SSG, but it will in a future release, to simplify this use case.

[jcalixte]

Thank you very much, I'll try this!

[smakinson]

Been checking out astro a bit and came across îles from a blog post and it looks interesting. Can you confirm if the same limitation exists here (I'm thinking yes since its a Vite feature mentioned), but I thought I'd ask to be sure. Here is the open issue in Astro:

withastro/astro#1700

[ElMassimo]

@smakinson Yes, same limitation.

You could use import.meta.glob (lazy) to obtain all paths, filter down the paths you are interested in, and await the found module (if any):

Pseudo-code:

async function findPost (slug) {
  const postsByPath = import.meta.glob('./posts/*.mdx')
  return await Object.entries(postsByPath).find(([path, postImportFn]) => {
    // Let's say that the path is enough to know which file to choose:
    if (path.includes(slug)) return postImportFn().then(mod => mod.default)
  })
}

Since îles use Suspense, you can easily use this function in a script setup without any downsides, or even in getStaticPaths and provide the resulting post as props.

By using glob instead of globEager, it becomes very efficient even if you have a large amount of files, since the modules won't be imported until the import function is called.

The same approach could be used for multiple pages, to narrow down matching files. In the future îles will provide an optimized way to retrieve an entire collection or category.

Do you think it would be useful to create a Recipes section in the docs documenting this kind of approach?

[smakinson]

@ElMassimo Thanks for the reply. Yes I believe a recipes section would likely be useful to people as they come in to check it out.