mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 21:27:06 +04:00
74 lines
2.1 KiB
Plaintext
74 lines
2.1 KiB
Plaintext
---
|
|
// TOC comes in as a prop from the consuming page (h2/h3 headings from the
|
|
// markdown content, excluding <!--EXAMPLE-->...<!--/EXAMPLE--> blocks).
|
|
import Subheader from '@ui/Subheader.astro'
|
|
import Icon from '@ui/Icon.astro'
|
|
import illustrations from '@data/illustrations.json'
|
|
|
|
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[]
|
|
/** "Edit this page" URL on GitHub; omitted for pages without a source file */
|
|
editUrl?: string | undefined
|
|
/** URL of the file implementing the component, from the page's `source` front matter */
|
|
sourceUrl?: string | undefined
|
|
}
|
|
|
|
const { toc = [], editUrl, sourceUrl } = Astro.props
|
|
|
|
const illustrationsCount = illustrations.length
|
|
---
|
|
|
|
<!-- BEGIN DOCS TOC -->{
|
|
toc.length > 0 && (
|
|
<Fragment>
|
|
<Subheader as="h3" id="toc-heading" class="mb-2">
|
|
On this page
|
|
</Subheader>
|
|
<nav class="nav nav-vertical mb-6" id="toc" aria-labelledby="toc-heading">
|
|
{toc.map((item) => (
|
|
<a href={`#${item.id}`} class={`nav-link${item.level === 3 ? ' docs-toc-sub' : ''}`}>
|
|
{item.text}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
</Fragment>
|
|
)
|
|
}
|
|
|
|
<a href="https://r.tabler.io/illustrations" class="card card-sm 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>
|
|
|
|
{
|
|
(sourceUrl || editUrl) && (
|
|
<nav class="docs-page-links mt-6" aria-label="Page tools">
|
|
{sourceUrl && (
|
|
<a href={sourceUrl} class="docs-page-link" target="_blank" rel="noopener noreferrer">
|
|
<Icon name="code" />
|
|
Source code
|
|
</a>
|
|
)}
|
|
|
|
{editUrl && (
|
|
<a href={editUrl} class="docs-page-link" target="_blank" rel="noopener noreferrer">
|
|
<Icon name="edit" />
|
|
Edit this page on GitHub
|
|
</a>
|
|
)}
|
|
</nav>
|
|
)
|
|
}
|
|
<!-- END DOCS TOC -->
|