Astrojs Dynamic Routing

Question

I'm getting a 404 at the post/article view.

Astro 4.5.4

My directory structure is: /src/content/posts/yyyy/mm/post-title/index.mdx

My URI is example.com/posts/post-title

On the listing page: example.com/posts/ all the posts are showing, including hero image, author, category and description blurb. The href is correct as well: /posts/post-title But when I click the link, I get a 404.

I have getStaticPaths() inside /src/pages/posts/[...post].astro

export async function getStaticPaths() {
  const posts = await getCollection("posts");

  return posts.map((post) => {
    const slugParts = post.id.replace(/^.*posts\//, '').split('/');
    // Concatenate the slug parts into a string path
    const slug = slugParts.slice(0, -1).join('/'); // Exclude the index.mdx part
    console.log('Generated Path:', `/posts/${slug}`); // Log for debugging
    return {
      params: {
        post: slug, // Now it's a string, not an array
      },
      props: { post },
    };
  });
}

When I fire up the dev server locally npm run dev here's the console output:

┃ Local    http://localhost:4321/
┃ Network  use --host to expose

18:13:23 watching for file changes...
18:13:25 [200] / 32ms
Generated Path: /posts/2022/09/how-to-plan-your-time-wisely
Generated Path: /posts/2022/09/using-a-time-tracker-can-help-you-achieve-success
Generated Path: /posts/2024/02/productivity-strategies-for-people-with-attention-deficit-hyperactivity-disorder
Generated Path: /posts/2024/03/how-to-plan-a-cheap-weekend-getaway
Generated Path: /posts/2024/03/the-benefits-of-making-a-weekly-plan
18:13:56 [WARN] [router] A `getStaticPaths()` route pattern was matched, but no matching static path was found for requested path `/posts/`.

Possible dynamic routes being matched: src/pages/posts/[...post].astro.
18:13:57 [404] /posts/ 326ms

It seems as all the info that is needed is available in getStaticPaths() but Astro just can't seem to put 2+2 together.

Any clues/directions/suggestions/answers would be welcomed. Thanks.