Merge branch 'site-sidebar-level-4-headings' of https://github.com/mindrones/svelte into mindrones-site-sidebar-level-4-headings

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
 
 ---
 
@@ -190,4 +190,4 @@ To apply styles to a selector globally, use the `:global(...)` modifier.
 		color: goldenrod;
 	}
 </style>
-```
+```

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

@@ -99,39 +99,35 @@ 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, '-')
-						.replace(/^-/, '')
-						.replace(/-$/, '');
-
-					if (seen.has(slug)) throw new Error(`Duplicate slug ${slug}`);
-					seen.add(slug);
-
-					if (level === 3) {
-						const title = unescape(
-							text
-								.replace(/<\/?code>/g, '')
-								.replace(/\.(\w+)(\((.+)?\))?/, (m, $1, $2, $3) => {
-									if ($3) return `.${$1}(...)`;
-									if ($2) return `.${$1}()`;
-									return `.${$1}`;
-								})
-						);
-
-						subsections.push({ slug, title });
-					}
-
-					return `
-						<h${level}>
-							<span id="${slug}" class="offset-anchor" ${level > 3 ? 'data-scrollignore' : ''}></span>
-							<a href="docs#${slug}" class="anchor" aria-hidden="true"></a>
-							${text}
-						</h${level}>`;
+				const slug = rawtext
+					.toLowerCase()
+					.replace(/[^a-zA-Z0-9]+/g, '-')
+					.replace(/^-/, '')
+					.replace(/-$/, '');
+
+				if (seen.has(slug)) throw new Error(`Duplicate slug ${slug}`);
+				seen.add(slug);
+
+				if (level === 3 || level === 4) {
+					const title = unescape(
+						text
+							.replace(/<\/?code>/g, '')
+							.replace(/\.(\w+)(\((.+)?\))?/, (m, $1, $2, $3) => {
+								if ($3) return `.${$1}(...)`;
+								if ($2) return `.${$1}()`;
+								return `.${$1}`;
+							})
+					);
+
+					subsections.push({ slug, title, level });
 				}
 
-				return `<h${level}>${text}</h${level}>`;
+				return `
+					<h${level}>
+						<span id="${slug}" class="offset-anchor" ${level > 4 ? 'data-scrollignore' : ''}></span>
+						<a href="docs#${slug}" class="anchor" aria-hidden="true"></a>
+						${text}
+					</h${level}>`;
 			};
 
 			blockTypes.forEach(type => {

site/src/routes/docs/index.svelte

@@ -18,7 +18,7 @@
 	let show_contents = false;
 
 	onMount(() => {
-		// don't update `active_section` for headings below level 3, see _sections.js
+		// don't update `active_section` for headings above level 4, see _sections.js
 		const anchors = container.querySelectorAll('[id]:not([data-scrollignore])');
 
 		let positions;
@@ -245,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) {
-			top: 0.4em;
+		.content :global(h5) :global(.anchor),
+		.content :global(h6) :global(.anchor) {
+			top: 0.5em;
 		}
 	}
 
@@ -265,6 +268,7 @@
 		line-height: 1;
 	}
 
+	.content :global(h4),
 	.content :global(h4 > code) {
 		font-weight: 700;
 		font-size: var(--h4);