mirror of
https://github.com/tabler/tabler.git
synced 2026-08-28 12:56:24 +04:00
Paweł KunaandStarDev
39634cb4b9
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
46 lines
1.2 KiB
Plaintext
46 lines
1.2 KiB
Plaintext
---
|
|
// TOC comes in as a prop from the consuming page (h2/h3 headings from the
|
|
// markdown content, excluding <!--EXAMPLE-->...<!--/EXAMPLE--> blocks).
|
|
|
|
export interface TocItem {
|
|
/** 2 or 3 (h2/h3); h3 gets the ms-3 indent */
|
|
level: number
|
|
text: string
|
|
/** anchor without '#', e.g. "default-markup" */
|
|
id: string
|
|
}
|
|
|
|
interface Props {
|
|
toc?: TocItem[]
|
|
}
|
|
|
|
const { toc = [] } = Astro.props
|
|
|
|
// shared/data/illustrations.json has 125 entries.
|
|
const illustrationsCount = 125
|
|
---
|
|
|
|
<!-- BEGIN DOCS TOC -->{
|
|
toc.length > 0 && (
|
|
<Fragment>
|
|
<h3 id="toc-heading">Table of Contents</h3>
|
|
<nav class="nav nav-vertical" id="toc" aria-labelledby="toc-heading">
|
|
{toc.map((item) => (
|
|
<a href={`#${item.id}`} class={`nav-link${item.level === 3 ? ' ms-3' : ''}`}>
|
|
{item.text}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
</Fragment>
|
|
)
|
|
}
|
|
|
|
<a href="https://r.tabler.io/illustrations" class="card card-sm mt-6 shadow-none" target="_blank" rel="noopener noreferrer">
|
|
<div class="card-body">
|
|
<img src="/img/banner-carbon.png" class="mb-3" alt="" width="260" height="200" loading="lazy" />
|
|
|
|
<h4>{illustrationsCount} sleek illustrations for your startup's visual identity.</h4>
|
|
</div>
|
|
</a>
|
|
<!-- END DOCS TOC -->
|