From 2842227cf0d7eaf43f508dd3eb53bf6fcfed36b3 Mon Sep 17 00:00:00 2001
From: Geoff Rich <geoff.rich@alaskaair.com>
Date: Thu, 8 Jul 2021 06:55:03 -0700
Subject: [PATCH] docs: fix heading level a11y issue (#5679)

---
 site/content/docs/01-component-format.md |  8 ++++----
 site/src/routes/docs/index.svelte        | 17 +++++++++++++++++
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/site/content/docs/01-component-format.md b/site/content/docs/01-component-format.md
index c7bcfaa800..05c55f9e0f 100644
--- a/site/content/docs/01-component-format.md
+++ b/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
 
 ---
 
diff --git a/site/src/routes/docs/index.svelte b/site/src/routes/docs/index.svelte
index a276b0edb7..ea79d7f5c9 100644
--- a/site/src/routes/docs/index.svelte
+++ b/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>