index page not found for site root (/) when using content collection

[oliverlietz]

What version of astro are you using?

2.4.2

Are you using an SSR adapter? If so, which one?

none

What package manager are you using?

npm

What operating system are you using?

Mac

What browser are you using?

any

Describe the Bug

It's not possible to serve the root page (e.g. index.md) from a content collection:

404: Not found
Path: /

Setting slug in front matter to '/' (slash) or '' (empty string) does not work.

npm run dev

> project@0.0.1 dev
> astro dev

  🚀  astro  v2.4.2 started in 388ms
  
  ┃ Local    http://localhost:3000/
  ┃ Network  use --host to expose
  
07:33:44 PM [content] Watching src/content/ for changes
07:33:44 PM [content] Types generated
07:33:44 PM [astro] update /.astro/types.d.ts
07:33:54 PM [getStaticPaths] A `getStaticPaths()` route pattern was matched, but no matching static path was found for requested path `/`.

Possible dynamic routes being matched: src/pages/[...slug].astro.
07:33:54 PM [serve]    404                                        /
07:34:18 PM [astro] reload /src/content/pages/index.md
07:34:18 PM [astro] update /.idea/sonarlint/issuestore/index.pb
07:34:18 PM [astro] update /.idea/sonarlint/securityhotspotstore/index.pb
07:34:18 PM [astro] update /.astro/types.d.ts
07:34:28 PM [getStaticPaths] invalid path param: slug. `undefined` expected for an optional param, but got empty string.
07:34:28 PM [getStaticPaths] A `getStaticPaths()` route pattern was matched, but no matching static path was found for requested path `/`.

Possible dynamic routes being matched: src/pages/[...slug].astro.
07:34:28 PM [serve]    404                                        /
07:34:48 PM [astro] update /.idea/sonarlint/securityhotspotstore/index.pb
07:34:48 PM [astro] update /.idea/sonarlint/issuestore/index.pb
07:34:50 PM [astro] reload /src/content/pages/index.md
07:34:50 PM [astro] update /.astro/types.d.ts
07:47:31 PM [getStaticPaths] A `getStaticPaths()` route pattern was matched, but no matching static path was found for requested path `/`.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-z4igp1-mwgqtc

Participation

• I am willing to submit a pull request for this issue.

[matthewp]

You have to use undefined as the slug to generate an index route. See this example: https://stackblitz.com/edit/github-z4igp1-mwgqtc?file=src%2Fcontent%2Fpages%2Findex.md

[matthewp]

Oops, this is a working version: https://stackblitz.com/edit/github-z4igp1-s5vuq7?file=src%2Fcontent%2Fpages%2Findex.md

[oliverlietz]

Working:

---
import {getCollection} from 'astro:content';
export async function getStaticPaths() {
    const pages = await getCollection('pages');
    return pages.map(page => ({
        params: {slug: page.slug || undefined}, props: {page},
    }));
}
const {page} = Astro.props;
const {Content} = await page.render();
---

@matthewp, Is it documented already somewhere?

[bennycode]

@oliverlietz I also wanted to use the same Astro template for both (a static index route and dynamic content routes). The key to solve this is ensuring that the paths returned by getStaticPaths include one for when the slug is / or undefined. This approach is explained on the Rest parameters page.

Here is my working example:

src/pages/course/[...slug].astro

---
import { getCollection } from 'astro:content';
import Sidebar from '~/components/course/Sidebar.astro';
import PageLayoutText from '~/layouts/PageLayoutText.astro';

export async function getStaticPaths() {
  const chapters = await getCollection('course');

  const paths = [
    {
      params: { slug: '/' },
      props: { chapter: chapters[0] },
    },
  ];

  paths.push(
    ...chapters.map((chapter) => ({
      params: { slug: chapter.slug },
      props: { chapter },
    }))
  );

  return paths;
}

const { chapter } = Astro.props;
const { Content, headings } = await chapter.render();
---

<PageLayoutText>
  <div class="flex">
    <aside class="w-1/4 border">
      <Sidebar toc={headings} />
    </aside>

    <main class="w-3/4 border">
      <Content />
    </main>
  </div>
</PageLayoutText>

Best,
Benny