0.1.3 • Published 1 year ago
astro-toc v0.1.3
astro-toc
Table of Contents (ToC) generator for Astro
Table of Contents
Install
npm install astro-tocUsage
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