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}
  • - {@html section.title} + + {@html section.title} + + + {#if section.subsections.length > 0} + + {/if}
  • {/each} @@ -76,6 +92,10 @@ font: var(--sk-font-body-small); } + li ul { + margin: 0 0 0 1.6rem; + } + /* Only show the title link if it's in the sidebar */ li:first-child { display: none; @@ -228,6 +248,14 @@ display: list-item; } + li ul { + display: none; + } + + li ul[data-active='true'] { + display: block; + } + a.active { color: var(--sk-fg-1); text-decoration: underline; diff --git a/packages/site-kit/src/lib/server/content/index.ts b/packages/site-kit/src/lib/server/content/index.ts index 233820f30..d0b50fc6b 100644 --- a/packages/site-kit/src/lib/server/content/index.ts +++ b/packages/site-kit/src/lib/server/content/index.ts @@ -1,5 +1,5 @@ import { extract_frontmatter, is_in_code_block, slugify, smart_quotes } from '../../markdown/utils'; -import type { Document } from '../../types'; +import type { Document, Section } from '../../types'; export async function create_index( documents: Record, @@ -32,24 +32,27 @@ export async function create_index( '$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
    ); content[slug] = { slug, diff --git a/packages/site-kit/src/lib/types.d.ts b/packages/site-kit/src/lib/types.d.ts index 81f22adf1..6e41daf11 100644 --- a/packages/site-kit/src/lib/types.d.ts +++ b/packages/site-kit/src/lib/types.d.ts @@ -44,6 +44,7 @@ export interface DocumentSummary { export interface Section { slug: string; title: string; + subsections: Omit[]; } export interface BannerData {