Top And Bottom Table of Contents Wrapper

You can also display content above and below the Table of Contents at the same time.

Here is an example:

1. Create the component TableOfContents.astro:

   src/components/TableOfContents.astro

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

   Note

   The TopTableOfContentsWrapper component should be placed above the default TableOfContents component!
   The BottomTableOfContentsWrapper component should be placed below the default TableOfContents component!

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) ➡️