jfrome1 / NTW2029

https://ntw-2029.vercel.app
0 stars 1 forks source link

Remove or change 'Overview' in right sidebar. Use only h1-h2 as toc items. #11

Closed JojokCreator closed 1 week ago

JojokCreator commented 2 weeks ago

To fix

Created in ./src/components based on original star light components.

CustomTableOfContents CustomTableOfContentsList starlight-toc.ts

In astro.config.mjs

      components: {
        // Override the default `TableOfContents` component.
        TableOfContents: "./src/components/CustomTableOfContents.astro",
      },

Modify our custom override.

---
import CustomTableOfContentsList from './CustomTableOfContentsList.astro';
const { labels, toc } = Astro.props;

// Uncomment to remove Overview heading
const index = toc.items.findIndex((item: { slug: string }) => item.slug === '_top');
if (index !== -1) {
  toc.items.splice(index, 1);
}

// Uncomment to change Overview heading and comment above
// toc.items[0].text = "Test"
---

{
    toc && (
        <starlight-custom-toc data-min-h={0} data-max-h={1}> // These numbers modify the minimum headings used 0=h1 1=h2
            <nav aria-labelledby="starlight__on-this-page">
                <h2 id="starlight__on-this-page">{labels['tableOfContents.onThisPage']}</h2>
                <CustomTableOfContentsList toc={toc.items} />
            </nav>
        </starlight-custom-toc>
    )
}

<script src="./starlight-toc"></script>
})]