Bottom Table of Contents Wrapper

If you want to display something entirely different below the Table of Contents, you can use the BottomTableOfContentsWrapper component. This component is a wrapper around the default Table of Contents and allows you to display additional content below the default Table of Contents.

This means that you can exchange the card component with whatever you want.

Here is an example:

1. Create the component TableOfContents.astro:

   src/components/TableOfContents.astro

   ---
   import Default from '@astrojs/starlight/components/TableOfContents.astro'
   import BottomTableOfContentsWrapper from 'starlight-cooler-credit/components/BottomTableOfContentsWrapper.astro'
   ---
   
   <Default><slot /></Default>
   <BottomTableOfContentsWrapper>
     <p>Hello, Astronaut! 👨‍🚀</p>
   </BottomTableOfContentsWrapper>

2. Override the default TableOfContents component in your astro.config.mjs:

   astro.config.mjs

   export default defineConfig({
     integrations: [
       starlight({
         components: {
           TableOfContents: "./src/components/TableOfContents.astro",
         },
       }),
     ],
   });

You can see the result in the right Table of Contents (if you’re not on a mobile device) ➡️