(wiki) fix rendering nested headings in ToC

This commit is contained in:
Maciej Jur 2023-06-10 21:52:59 +02:00
parent 6862bdebeb
commit bdb78b7eac
2 changed files with 26 additions and 24 deletions

View file

@ -8,6 +8,27 @@ interface Props {
headings: MarkdownHeading[];
}
export type Nested = MarkdownHeading & { children?: MarkdownHeading[] };
function fold(headings: MarkdownHeading[]): Nested[] {
const toc = [] as Nested[];
const map = new Map<number, Nested>();
for (const h of headings) {
const heading = { ...h };
map.set(heading.depth, heading);
if (heading.depth === 2)
toc.push(heading)
else {
const backref = map.get(heading.depth - 1)!;
backref.children
? backref.children.push(heading)
: backref.children = [heading];
}
}
return toc;
}
const { headings } = Astro.props;
---
@ -16,5 +37,7 @@ const { headings } = Astro.props;
<span class="link-tree__heading-text">Content</span>
</h2>
<nav id="table-of-contents" class="link-tree__nav">
<HeadingsList headings={Maybe.of(headings)} />
<HeadingsList
headings={Maybe.of(headings).map(fold)}
/>
</nav>

View file

@ -1,38 +1,17 @@
---
import type { MarkdownHeading } from 'astro';
import { Maybe } from 'purify-ts';
import type { Nested } from './Headings.astro';
interface Props {
headings: Maybe<MarkdownHeading[]>;
headings: Maybe<Nested[]>;
}
type Nested = MarkdownHeading & { children?: MarkdownHeading[] };
const { headings } = Astro.props;
function fold(headings: MarkdownHeading[]) {
const toc = [] as Nested[];
const map = new Map<number, Nested>();
for (const h of headings) {
const heading = { ...h };
map.set(heading.depth, heading);
if (heading.depth === 2)
toc.push(heading)
else {
const backref = map.get(heading.depth - 1)!;
backref.children
? backref.children.push(heading)
: backref.children = [heading];
}
}
return toc;
}
---
{headings
.map(fold)
.map(headings =>
<ul class="link-tree__nav-list">
{headings.map(heading =>