Site: sidebar level-4 headings.

Fixes #2389

site/src/routes/docs/_GuideContents.svelte

@@ -106,6 +106,10 @@
 		opacity: 1
 	}
 
+	.subsection[data-level="4"] {
+		padding-left: 1em;
+	}
+
 	.active {
 		opacity: 1;
 		/* font-weight: 700; */
@@ -138,7 +142,12 @@
 
 			{#each section.subsections as subsection}
 				<!-- see <script> below: on:click='scrollTo(event, subsection.slug)' -->
-				<a class="subsection" class:active="{subsection.slug === active_section}" href="docs#{subsection.slug}">
+				<a
+					class="subsection"
+					class:active="{subsection.slug === active_section}"
+					href="docs#{subsection.slug}"
+					data-level="{subsection.level}"
+				>
 					{subsection.title}
 
 					{#if subsection.slug === active_section}
@@ -150,4 +159,4 @@
 			{/each}
 		</li>
 	{/each}
-</ul>
+</ul>

site/src/routes/docs/_sections.js

@@ -109,7 +109,7 @@ export default function() {
 					if (seen.has(slug)) throw new Error(`Duplicate slug ${slug}`);
 					seen.add(slug);
 
-					if (level === 3) {
+					if (level === 3 || level === 4) {
 						const title = unescape(
 							text
 								.replace(/<\/?code>/g, '')
@@ -120,12 +120,12 @@ export default function() {
 								})
 						);
 
-						subsections.push({ slug, title });
+						subsections.push({ slug, title, level });
 					}
 
 					return `
 						<h${level}>
-							<span id="${slug}" class="offset-anchor" ${level > 3 ? 'data-scrollignore' : ''}></span>
+							<span id="${slug}" class="offset-anchor"></span>
 							<a href="docs#${slug}" class="anchor" aria-hidden="true"></a>
 							${text}
 						</h${level}>`;

site/src/routes/docs/index.svelte

@@ -18,8 +18,7 @@
 	let show_contents = false;
 
 	onMount(() => {
-		// don't update `active_section` for headings below level 3, see _sections.js
+		const anchors = container.querySelectorAll('[id]');
-		const anchors = container.querySelectorAll('[id]:not([data-scrollignore])');
 
 		let positions;