Frontmatter

Starlight Table of Contents Overview Customizer uses Astro’s content collections, which are configured in the src/content.config.ts file.

Update the content config file to add support for customizing individual pages using the frontmatter:

src/content.config.ts

import { defineCollection } from 'astro:content';
import { docsLoader } from '@astrojs/starlight/loaders';
import { docsSchema } from '@astrojs/starlight/schema';
import { tocOverviewCustomizer } from "starlight-toc-overview-customizer/schema";

export const collections = {
  docs: defineCollection({
    loader: docsLoader(),
    schema: docsSchema({
      extend: tocOverviewCustomizer
    })
  }),
};

This allows you to specify a specific overview title for each page in your documentation like this:

---
title: Demo
overviewTitle: HELLO! I am a custom overview title!
---

Check out the demo page for an example of this in action.