astro-toc

0.1.3 • Public • Published
astro-toc logo

astro-toc

license npm

Table of Contents (ToC) generator for Astro

Open in StackBlitz

Table of Contents

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

Package Sidebar

Install

npm i astro-toc

Weekly Downloads

34

Version

0.1.3

License

ISC

Unpacked Size

7.32 kB

Total Files

5

Last publish

Collaborators

  • theisel