Autgenerate Sidebar from Custom Pages

[stevegreco]

I am curious if there is a way to autogenerate Sidebar links for custom pages in the /pages directory. I think the use case is pretty simple, I have a custom content collection of .md files, and I am using getStaticPaths to generate pages for each item. So I want to autogenerate nav links for each of those pages.

[HiDeoo]

👋 There is no such built-in feature, it could also be quite tricky even if it was possible, e.g. if only some of them should be included, etc.

What I personally usually end up doing is to extract the list of pages into a dedicated function and reuse it in both the getStaticPaths function and the sidebar configuration.

Let's say I have a list of pages generated like this:

// src/pages/dogs/[dog].astro
export function getStaticPaths() {
  return [
    { params: { dog: "clifford" } },
    { params: { dog: "rover" } },
    { params: { dog: "spot" } },
  ];
}

I would extract this list into a dedicated function:

// src/libs/content.ts
export function getPages() {
  return ["clifford", "rover", "spot"];
}

Rewrite my getStaticPaths function to use this new function:

// src/pages/dogs/[dog].astro
import { getPages } from "../../libs/content.ts";

export function getStaticPaths() {
  return getPages().map((dog) => ({ params: { dog } }));
}

And I would have an additional function generating sidebar links:

// src/libs/content.ts
export function getSidebarLinks() {
  return getPages().map((dog) => ({ label: dog, link: `/dogs/${dog}` }));
}

That I would use in my configuration:

import { getSidebarLinks } from "./src/libs/content.ts";

starlight({
  sidebar: [
    {
      label: "Guides",
      items: [{ label: "Example Guide", slug: "guides/example" }],
    },
    { label: "Reference", autogenerate: { directory: "reference" } },
    // Add the sidebar links
    { label: "Dogs", items: getSidebarLinks() },
  ],
});

[stevegreco]

Ahh ok, but with this we will still be manually maintaining the list of pages, as opposed to having that list be automatically generated from the collection.

My first attempt, I tried something like this.

export async function getSidebarLinks() {
  const components = await getCollection("examples");
  return components.map((c) => ({
    label: c.data.title,
    link: `components/${c.id}`,
  }));
}

This ends up throwing an error, because I don't think we can use getCollection in the astro.config

[HiDeoo]

The example uses a literal list of strings but it's mostly for the example purposes only. If it was fetched from the network, it would be the same and the network call could be done in getPages().

Regarding the approach when using getCollection(), you could still do the same and do the call in getPages() but instead of using getSidebarLinks() in your config, you can use it in a route data middleware to append your links:

// src/routeData.ts
import { defineRouteMiddleware } from '@astrojs/starlight/route-data';
import { getSidebarLinks } from "./libs/content.ts";

export const onRequest = defineRouteMiddleware(async (context) => {
  // Get the sidebar for this page.
  const { sidebar } = context.locals.starlightRoute;

  // Update the sidebar
  sidebar.push({
    type: "group",
    label: "Dogs",
    collapsed: false,
    badge: undefined,
    entries: await getSidebarLinks(),
  });
});

The shape of the objects returned by getSidebarLinks() would need to be updated to match StarlightRouteData['sidebar'][number] but this should do the trick.