docs: fix heading level a11y issue (#5679)

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
 
 ---
 
@@ -87,7 +87,7 @@ You can use reserved words as prop names.
 </script>
 ```
 
-##### 2. Assignments are 'reactive'
+#### 2. Assignments are 'reactive'
 
 ---
 
@@ -109,7 +109,7 @@ Because Svelte's reactivity is based on assignments, using array methods like `.
 </script>
 ```
 
-##### 3. `$:` marks a statement as reactive
+#### 3. `$:` marks a statement as reactive
 
 ---
 
@@ -171,7 +171,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/index.svelte

@@ -1,6 +1,23 @@
 <script context="module">
+	const title_replacements = {
+		'1_export_creates_a_component_prop': 'props',
+		'2_Assignments_are_reactive': 'reactive assignments',
+		'3_$_marks_a_statement_as_reactive': 'reactive statements ($:)',
+		'4_Prefix_stores_with_$_to_access_their_values': 'accessing stores ($)'
+	};
+
 	export async function preload() {
 		const sections = await this.fetch(`docs.json`).then(r => r.json());
+		for (const section of sections) {
+			for (const subsection of section.subsections) {
+				const { slug } = subsection;
+				// show abbreviated title in the table of contents
+				if (slug in title_replacements) {
+					subsection.title = title_replacements[slug];
+				}
+			}
+		}
+
 		return { sections };
 	}
 </script>