astro-toc

Table of Contents (ToC) generator for Astro

Table of Contents

• Install
• Usage
• License

Install

npm install astro-toc

Usage

Classic

This render mode can render your ToC as <ul>, <ol> or <menu>; set the as property to select your flavour.

| Property | Type | Description | | :------------------ | :---------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | toc | { depth: number; title: string; url?: string; [string]: any }[] | depth and title are required. | | as optional | string | bullet | number | menu | | maxDepth optional | number | How many levels should be rendered |

---
import { TOC } from "astro-toc";

const toc = [
  {depth: 1, title: "Tours", url: /* optional*/},
  {depth: 2, title: "Walking Tours"},
  {depth: 3, title: "City Walking Tours"},
  {depth: 3, title: "River Walking Tours"},
  {depth: 2, title: "Boat Tours"},
  {depth: 1, title: "Restaurants"},
  {depth: 2, title: "Fine Dining"},
  {depth: 2, title: "Gastropub"},
  {depth: 2, title: "Fast Food"},
  {depth: 1, title: "Hotels"},
  {depth: 2, title: "Spa Hotels"},
  {depth: 2, title: "Bed & Breakfast"},
];
---

<TOC toc={toc} />

Component

When using a custom component it uses the <menu> element.

Unlike the classic render method title isn't required and the payload will be passed to the component.

| Property | Type | Description | | :------------------ | :----------------------------------- | :-------------------------------------- | | toc | { depth: number; [string]: any }[] | depth is required. | | use | (props) => any | Astro component | | maxDepth optional | number | string | How many levels should be rendered |

---
import { TOC } from "astro-toc";
import MyComponent from "path/to/MyComponent.astro";

const toc = [
  {depth: 1, title: "Tours"},
  {depth: 2, title: "Walking Tours"},
  {depth: 3, title: "City Walking Tours"},
  {depth: 3, title: "River Walking Tours"},
  {depth: 2, title: "Boat Tours"},
  {depth: 1, title: "Restaurants"},
  {depth: 2, title: "Fine Dining"},
  {depth: 2, title: "Gastropub"},
  {depth: 2, title: "Fast Food"},
  {depth: 1, title: "Hotels"},
];
---

<TOC toc={toc} use={MyComponent} />

License

ISC