Add anchor to h5 and h6 too but don't show 'em in the sidebar.

site/content/docs/01-component-format.md

@@ -24,7 +24,7 @@ All three sections — script, styles and markup — are optional.
 
 A `<script>` block contains JavaScript that runs when a component instance is created. Variables declared (or imported) at the top level are 'visible' from the component's markup. There are four additional rules:
 
-#### 1. `export` creates a component prop
+##### 1. `export` creates a component prop
 
 ---
 
@@ -48,7 +48,7 @@ Svelte uses the `export` keyword to mark a variable declaration as a *property*
 </script>
 ```
 
-#### 2. Assignments are 'reactive'
+##### 2. Assignments are 'reactive'
 
 ---
 
@@ -68,7 +68,7 @@ Update expressions (`count += 1`) and property assignments (`obj.x = y`) have th
 </script>
 ```
 
-#### 3. `$:` marks a statement as reactive
+##### 3. `$:` marks a statement as reactive
 
 ---
 
@@ -104,7 +104,7 @@ If a statement consists entirely of an assignment to an undeclared variable, Sve
 </script>
 ```
 
-#### 4. Prefix stores with `$` to access their values
+##### 4. Prefix stores with `$` to access their values
 
 ---
 

site/src/routes/docs/_sections.js

@@ -99,7 +99,6 @@ export default function() {
 			const seen = new Set();
 
 			renderer.heading = (text, level, rawtext) => {
-				if (level <= 4) {
 				const slug = rawtext
 					.toLowerCase()
 					.replace(/[^a-zA-Z0-9]+/g, '-')
@@ -125,13 +124,10 @@ export default function() {
 
 				return `
 					<h${level}>
-							<span id="${slug}" class="offset-anchor"></span>
+						<span id="${slug}" class="offset-anchor" ${level > 4 ? 'data-scrollignore' : ''}></span>
 						<a href="docs#${slug}" class="anchor" aria-hidden="true"></a>
 						${text}
 					</h${level}>`;
-				}
-
-				return `<h${level}>${text}</h${level}>`;
 			};
 
 			blockTypes.forEach(type => {

site/src/routes/docs/index.svelte

@@ -18,7 +18,8 @@
 	let show_contents = false;
 
 	onMount(() => {
-		const anchors = container.querySelectorAll('[id]');
+		// don't update `active_section` for headings above level 4, see _sections.js
+		const anchors = container.querySelectorAll('[id]:not([data-scrollignore])');
 
 		let positions;
 
@@ -244,12 +245,15 @@
 	@media (min-width: 768px) {
 		.content :global(h2):hover :global(.anchor),
 		.content :global(h3):hover :global(.anchor),
-		.content :global(h4):hover :global(.anchor) {
+		.content :global(h4):hover :global(.anchor),
+		.content :global(h5):hover :global(.anchor),
+		.content :global(h6):hover :global(.anchor) {
 			opacity: 1;
 		}
 
-		.content :global(h4):hover :global(.anchor) {
+		.content :global(h5) :global(.anchor),
-			top: 0.4em;
+		.content :global(h6) :global(.anchor) {
+			top: 0.5em;
 		}
 	}
 
@@ -264,6 +268,7 @@
 		line-height: 1;
 	}
 
+	.content :global(h4),
 	.content :global(h4 > code) {
 		font-weight: 700;
 		font-size: var(--h4);