Browse Source

Add a function to extract ToC entries from HTML

master
buttercat1791 10 months ago
parent
commit
78e4d23f71
  1. 30
      src/lib/components/TableOfContents.svelte

30
src/lib/components/TableOfContents.svelte

@ -1,4 +1,5 @@ @@ -1,4 +1,5 @@
<script lang='ts'>
import { page } from '$app/state';
import type { PublicationTree } from '$lib/data_structures/publication_tree';
import type { TocEntry } from '$lib/data_structures/table_of_contents';
import { getContext } from 'svelte';
@ -10,6 +11,35 @@ @@ -10,6 +11,35 @@
// If single event, build the table of contents from the rendered HTML.
// Each rendered `<h>` should receive an entry in the ToC.
function buildTocFromDocument(parentElement: HTMLElement): void {
const entries: TocEntry[] = [];
const currentPathname = page.url.pathname;
parentElement
.querySelectorAll<HTMLHeadingElement>(
'h1, h2, h3, h4, h5, h6'
)
.forEach((header) => {
const title = header.textContent?.trim();
const id = header.id;
// Only create an entry if the header has an ID and a title.
if (id && title) {
const href = `${currentPathname}#${id}`;
const tocEntry: TocEntry = {
title,
href,
expanded: false, // Default to not expanded; can be changed as needed.
children: null, // These are leaf entries from a flat scan of headers.
};
entries.push(tocEntry);
}
});
// TODO: Update ToC state within the component.
}
let toc = $state<TocEntry[]>([]);
const publicationTree = getContext('publicationTree') as PublicationTree;

Loading…
Cancel
Save