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
 
 ---
 

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}

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, '-')
@@ -109,7 +108,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,18 +119,15 @@ 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" ${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,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);