diff --git a/apps/svelte.dev/src/routes/docs/[topic]/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/OnThisPage.svelte index 3bad6b262..9fc13dc5f 100644 --- a/apps/svelte.dev/src/routes/docs/[topic]/[...path]/OnThisPage.svelte +++ b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/OnThisPage.svelte @@ -9,7 +9,7 @@ afterNavigate(() => { current = location.hash.slice(1); - headings = content.querySelectorAll('h2'); + headings = content.querySelectorAll('h2, h3'); update(); // Ensure active link is set correctly on navigation }); @@ -58,8 +58,24 @@ {#each document.sections as section}
$1'
);
- const sections = Array.from(body.matchAll(/^##\s+(.*)$/gm)).reduce(
- (arr, match) => {
- if (is_in_code_block(body, match.index || 0)) return arr;
- const title = smart_quotes(match[1])
- // replace < and > inside code spans
- .replace(/`(.+?)`/g, (_, contents) =>
- contents.replace(//g, '>')
- )
- // turn e.g. `class:_name_` into `class:name`
- .replace(/_(.+)_/g, (_, contents) => `${contents}`);
-
- const slug = slugify(title);
-
- arr.push({ slug, title });
- return arr;
- },
- [] as Array<{ slug: string; title: string }>
- );
+ const sections = Array.from(body.matchAll(/^#{2,3}\s+(.*)$/gm)).reduce((arr, match) => {
+ if (is_in_code_block(body, match.index || 0)) return arr;
+ const title = smart_quotes(match[1])
+ // replace < and > inside code spans
+ .replace(/`(.+?)`/g, (_, contents) => contents.replace(//g, '>'))
+ // turn e.g. `class:_name_` into `class:name`
+ .replace(/_(.+)_/g, (_, contents) => `${contents}`);
+
+ const slug = slugify(title);
+
+ if (match[0].startsWith('###')) {
+ const section = arr.at(-1);
+ if (section) {
+ section.subsections.push({ slug: `${section.slug}-${slug}`, title });
+ }
+ } else {
+ arr.push({ slug, title, subsections: [] });
+ }
+
+ return arr;
+ }, [] as Array