Customizable Autogenerated Sidebars

[Minniehajj]

What version of starlight are you using?

0.21.1

What is your idea?

I'd like the ability to have finer control over autogenerated sidebars, and ordering of the contents within them. E.g. I'd like to reverse order a full list of autogenerated sidebar items, recursively.

Why is this feature necessary?

This is necessary because it allows the autogenerated sidebar feature to be a lot more extensible and powerful without needing to resort to a custom SidebarList component (which isn't technically even possible, you have to create an entire Sidebar component instead)

Do you have examples of this feature in other projects?

https://docusaurus.io/docs/sidebar/autogenerated#customize-the-sidebar-items-generator

Participation

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

[lorenzolewis]

This may be another good reference: https://gohugo.io/templates/lists/#sort-content

[joshka]

A specific use case for this is that we want to be able to automatically sort our release notes in reverse order at https://ratatui.rs/highlights/

[drtingtp]

I have also created new content collections and finding a way to have them listed by autogeneration.

[CGamesPlay]

I did this, which worked:

diff --git c/astro.config.mjs i/astro.config.mjs
index 2f5bfbd..ea2f7ff 100644
--- c/astro.config.mjs
+++ i/astro.config.mjs
@@ -6,7 +6,11 @@ import starlight from "@astrojs/starlight";
 export default defineConfig({
   integrations: [
     starlight({
       title: "My delightful docs site",
+      sidebar: [{ label: "All Posts", autogenerate: { directory: "post" } }],
+      components: {
+        Sidebar: "./src/components/Sidebar.astro",
+      },
     }),
   ],
 });
diff --git c/src/components/Sidebar.astro i/src/components/Sidebar.astro
new file mode 100644
index 0000000..29f27eb
--- /dev/null
+++ i/src/components/Sidebar.astro
@@ -0,0 +1,13 @@
+---
+import Default from '@astrojs/starlight/components/Sidebar.astro';
+
+const { sidebar } = Astro.props;
+
+const group = sidebar.find(g => g.label == 'All Posts');
+if (!group) {
+  throw new Error("cannot find All Posts group");
+}
+// Sort the posts chronologically
+group.entries.reverse();
+---
+<Default sidebar={sidebar} />

[unional]

Somehow this doesn't work for me. Using 0.30.6. There are some TypeScript error about the SidebarEntry, and in runtime getting id.startsWith is not a function.