From e7166b18fc5805d17228da63c447e9d0fbf9d979 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 24 Sep 2024 21:16:26 -0400
Subject: [PATCH 1/8] fix on-this-page widget

---
 .../src/routes/docs/[...path]/+layout.svelte  |  32 +-
 .../src/routes/docs/[...path]/+page.svelte    |  43 +-
 .../routes/docs/[...path]/OnThisPage.svelte   | 141 ++++++
 .../src/lib/docs/DocsCopyCodeButton.svelte    |   4 +-
 .../src/lib/docs/DocsOnThisPage.svelte        | 449 ------------------
 packages/site-kit/src/lib/styles/text.css     |   1 -
 6 files changed, 180 insertions(+), 490 deletions(-)
 create mode 100644 apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
 delete mode 100644 packages/site-kit/src/lib/docs/DocsOnThisPage.svelte

diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
index a66889bcaa..7d97a529c4 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
@@ -1,12 +1,7 @@
 <script>
-	import { page } from '$app/stores';
 	import { DocsContents } from '@sveltejs/site-kit/docs';
 
 	let { data, children } = $props();
-
-	const pageData = $derived($page.data.document);
-	const title = $derived(pageData?.metadata.title);
-	const category = $derived(pageData?.category);
 </script>
 
 <div class="container">
@@ -15,13 +10,6 @@
 	</div>
 
 	<div class="page content">
-		{#if category}
-			<p class="category">{category}</p>
-		{/if}
-		{#if title}
-			<h1>{title}</h1>
-		{/if}
-
 		{@render children()}
 	</div>
 </div>
@@ -45,14 +33,6 @@
 		all: unset;
 	}
 
-	.category {
-		font: 700 var(--sk-text-s) var(--sk-font);
-		text-transform: uppercase;
-		letter-spacing: 0.12em;
-		margin: 0 0 0.5em;
-		color: var(--sk-text-3);
-	}
-
 	@media (min-width: 832px) {
 		.content {
 			padding-left: calc(var(--sidebar-width) + var(--sk-page-padding-side));
@@ -82,7 +62,16 @@
 
 	@media (min-width: 1200px) {
 		.container {
-			--sidebar-width: max(28rem, 23vw);
+			--sidebar-width: max(
+				28rem,
+				calc(
+					0.5 *
+						(
+							100vw - var(--sk-line-max-width) - var(--sk-page-padding-side) -
+								var(--sk-page-padding-side)
+						)
+				)
+			);
 			flex-direction: row;
 		}
 
@@ -90,7 +79,6 @@
 			--on-this-page-display: block;
 			padding: var(--sk-page-padding-top) calc(var(--sidebar-width) + var(--sk-page-padding-side));
 			margin: 0 auto;
-			width: var(--sk-line-max-width);
 			box-sizing: content-box;
 		}
 	}
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
index 48a287dcee..abe8ce9448 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
@@ -1,11 +1,15 @@
-<script>
+<script lang="ts">
 	import { Icon } from '@sveltejs/site-kit/components';
 	import { copy_code_descendants, legacy_details, ts_js_select } from '@sveltejs/site-kit/actions';
 	import { DocsOnThisPage, setupDocsHovers } from '@sveltejs/site-kit/docs';
+	import { afterNavigate } from '$app/navigation';
+	import OnThisPage from './OnThisPage.svelte';
 
 	let { data } = $props();
 
 	setupDocsHovers();
+
+	let content: HTMLElement = $state();
 </script>
 
 <svelte:head>
@@ -20,21 +24,23 @@
 </svelte:head>
 
 <div class="text" id="docs-content" use:ts_js_select use:copy_code_descendants use:legacy_details>
-	<a
-		class="edit"
-		href="https://github.com/sveltejs/svelte.dev/edit/main/apps/svelte.dev/content/{data.document
-			.file}"
-	>
-		<Icon size={50} name="edit" /> Edit this page on GitHub
-	</a>
-
-	<DocsOnThisPage
-		title={data.document.metadata.title}
-		path="/{data.document.slug}"
-		sections={data.document.sections}
-	/>
-
-	{@html data.document.body}
+	<header>
+		<h1>{data.document.metadata.title}</h1>
+
+		<a
+			class="edit"
+			href="https://github.com/sveltejs/svelte.dev/edit/main/apps/svelte.dev/content/{data.document
+				.file}"
+		>
+			<Icon size={50} name="edit" /> Edit this page on GitHub
+		</a>
+	</header>
+
+	<OnThisPage {content} document={data.document} />
+
+	<div class="content" bind:this={content}>
+		{@html data.document.body}
+	</div>
 </div>
 
 <div class="controls">
@@ -55,6 +61,11 @@
 </div>
 
 <style>
+	/* .text {
+		display: grid;
+		grid-template-columns: 1fr var(--sidebar-width);
+	} */
+
 	.edit {
 		position: relative;
 		font-size: 1.4rem;
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
new file mode 100644
index 0000000000..147a9066ce
--- /dev/null
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -0,0 +1,141 @@
+<script lang="ts">
+	import { afterNavigate } from '$app/navigation';
+	import type { Document } from '@sveltejs/site-kit';
+
+	let { content, document }: { content: HTMLElement; document: Document } = $props();
+
+	let headings: NodeListOf<HTMLHeadingElement>;
+	let current = $state('');
+
+	afterNavigate(() => {
+		current = location.hash.slice(1);
+		headings = content.querySelectorAll('h2');
+	});
+
+	function update() {
+		// a section is 'active' when it crosses the threshold
+		const threshold = (innerHeight * 1) / 3;
+
+		for (let i = 0; i < headings.length; i += 1) {
+			const heading = headings[i];
+			const next = headings[i + 1];
+
+			if (
+				next &&
+				heading.getBoundingClientRect().top < threshold &&
+				next.getBoundingClientRect().top > threshold
+			) {
+				current = heading.id;
+				break;
+			}
+		}
+	}
+</script>
+
+<svelte:window onscroll={update} onhashchange={() => (current = location.hash.slice(1))} />
+
+<aside class="on-this-page">
+	<label>
+		<input type="checkbox" checked aria-label="Toggle 'on this page' menu" />
+		On this page
+	</label>
+
+	<nav>
+		<!-- TODO hide top link on mobile -->
+		<a href="/{document.slug}" class:active={current === ''}>
+			{document.metadata.title}
+		</a>
+
+		{#each document.sections as section}
+			<a href="#{section.slug}" class:active={current === section.slug}>{section.title}</a>
+		{/each}
+	</nav>
+</aside>
+
+<style>
+	.on-this-page {
+		margin: 4rem 0;
+		background: var(--sk-back-3);
+		padding: 1rem;
+
+		label {
+			position: relative;
+		}
+
+		input {
+			appearance: none;
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			left: 0;
+			top: 0;
+		}
+
+		nav {
+			display: none;
+
+			a {
+				display: block;
+				color: inherit;
+				box-shadow: none; /* unfortunate hack to unset some other CSS */
+
+				/* Only show the title link if it's in the sidebar */
+				&:first-child {
+					display: none;
+				}
+
+				&.active {
+					font-weight: bold;
+				}
+			}
+		}
+
+		label {
+			display: block;
+			text-transform: uppercase;
+
+			&::before {
+				content: '▶';
+			}
+		}
+
+		label:has(:checked) {
+			&::before {
+				content: '▼';
+			}
+
+			& + nav {
+				display: block;
+			}
+		}
+
+		@media (min-width: 1200px) {
+			position: fixed;
+			top: 14rem;
+			right: 0;
+			margin: 0;
+			width: var(--sidebar-width);
+			padding: 0 var(--sk-page-padding-side) 0 0;
+			box-sizing: border-box;
+			background: none;
+
+			input {
+				display: none;
+			}
+
+			& label {
+				&::before {
+					content: none !important;
+				}
+			}
+
+			nav {
+				display: block;
+
+				a:first-child {
+					display: block;
+				}
+			}
+		}
+	}
+</style>
diff --git a/packages/site-kit/src/lib/docs/DocsCopyCodeButton.svelte b/packages/site-kit/src/lib/docs/DocsCopyCodeButton.svelte
index a1431a6153..c5c3cf945e 100644
--- a/packages/site-kit/src/lib/docs/DocsCopyCodeButton.svelte
+++ b/packages/site-kit/src/lib/docs/DocsCopyCodeButton.svelte
@@ -41,7 +41,7 @@
 	}
 </script>
 
-<button id="copy-to-clipboard-button" onclick={copy}>
+<button class="copy-to-clipboard-button" onclick={copy}>
 	{#if copying}
 		<span transition:fade={{ easing: cubicOut, duration: 400 }}>
 			<Icon name="copy-to-clipboard-filled" />
@@ -55,7 +55,7 @@
 </button>
 
 <style>
-	:global(.code-block #copy-to-clipboard-button) {
+	:global(.code-block .copy-to-clipboard-button) {
 		top: 5px;
 	}
 
diff --git a/packages/site-kit/src/lib/docs/DocsOnThisPage.svelte b/packages/site-kit/src/lib/docs/DocsOnThisPage.svelte
deleted file mode 100644
index eb589fed9f..0000000000
--- a/packages/site-kit/src/lib/docs/DocsOnThisPage.svelte
+++ /dev/null
@@ -1,449 +0,0 @@
-<script lang="ts">
-	import { browser } from '$app/environment';
-	import { afterNavigate } from '$app/navigation';
-	import { page } from '$app/stores';
-	import { click_outside, focus_outside, root_scroll } from '../actions';
-	import Icon from '../components/Icon.svelte';
-	import { mql, nav_open, on_this_page_open, overlay_open, reduced_motion } from '../stores';
-	import { createEventDispatcher, onMount, tick } from 'svelte';
-	import { expoOut } from 'svelte/easing';
-	import { readable } from 'svelte/store';
-	import { slide } from 'svelte/transition';
-	import type { Snippet } from 'svelte';
-	import type { Section } from '../types';
-
-	interface Props {
-		title: string;
-		path: string;
-		sections: Section[];
-		orientation?: 'auto' | 'inline' | 'aside';
-		children?: Snippet;
-	}
-
-	let { title, path, sections, orientation = 'auto', children }: Props = $props();
-
-	const dispatch = createEventDispatcher();
-
-	let hash = $state('');
-
-	let height = 0;
-
-	let content: HTMLElement;
-	let headings: NodeListOf<HTMLElement>;
-	let positions: number[] = [];
-	let containerEl = $state() as HTMLElement;
-
-	let show_contents = false;
-
-	const Z_INDICES = {
-		BASE: 2,
-		OPEN: 101
-	};
-
-	let mobile_z_index = $state(Z_INDICES.BASE);
-
-	let is_mobile = $derived(
-		orientation === 'auto' ? mql('(max-width: 1200px)') : readable(orientation === 'inline')
-	);
-
-	let pathname = $derived($page.url.pathname);
-
-	$effect(() => {
-		pathname;
-
-		emulate_autoscroll();
-	});
-
-	$effect.pre(() => {
-		$overlay_open = $on_this_page_open;
-	});
-
-	onMount(async () => {
-		await document.fonts.ready;
-		update();
-		highlight();
-	});
-
-	$effect(() => {
-		containerEl;
-		hash;
-		// bit of a hack — prevent sidebar scrolling if
-		// TOC is open on mobile, or scroll came from within sidebar
-		if ((show_contents && window.innerWidth < 832) || !content) return;
-
-		const active = containerEl?.querySelector('.active');
-
-		if (containerEl && active) {
-			const { top, bottom } = active.getBoundingClientRect();
-			const min = 100;
-			const max = window.innerHeight - 100;
-
-			if (top > max) {
-				containerEl.scrollBy({
-					top: top - max,
-					left: 0,
-					behavior: 'smooth'
-				});
-			} else if (bottom < min) {
-				containerEl.scrollBy({
-					top: bottom - min,
-					left: 0,
-					behavior: 'smooth'
-				});
-			}
-		}
-	});
-
-	afterNavigate(() => {
-		update();
-		highlight();
-
-		$on_this_page_open = false;
-	});
-
-	async function emulate_autoscroll() {
-		if (browser) {
-			const hash = $page.url.hash.replace(/^#/, '');
-
-			await tick();
-
-			const el = document.getElementById(hash);
-
-			el?.scrollIntoView({ behavior: 'auto', block: 'start' });
-		}
-	}
-
-	async function update() {
-		const contentEl = document.querySelector('.content') as HTMLElement | null;
-
-		if (!contentEl) return;
-
-		content = contentEl;
-
-		const { top } = content.getBoundingClientRect();
-		headings = content.querySelectorAll('h2[id]');
-		positions = Array.from(headings).map((heading) => {
-			const style = getComputedStyle(heading);
-			return heading.getBoundingClientRect().top - parseFloat(style.scrollMarginTop) - top;
-		});
-		height = window.innerHeight;
-	}
-
-	function highlight() {
-		if (!content) return;
-
-		const { top, bottom } = content.getBoundingClientRect();
-		let i = headings.length;
-		while (i--) {
-			if (bottom - height < 50 || positions[i] + top < 100) {
-				const heading = headings[i];
-				hash = `#${heading.id}`;
-				return;
-			}
-		}
-		hash = '';
-	}
-
-	function select(url: URL) {
-		// belt...
-		setTimeout(() => {
-			hash = url.hash;
-		});
-		// ...and braces
-		window.addEventListener(
-			'scroll',
-			() => {
-				hash = url.hash;
-			},
-			{ once: true }
-		);
-	}
-
-	function on_link_click() {
-		$on_this_page_open = false;
-		dispatch('select');
-	}
-</script>
-
-<svelte:window
-	use:root_scroll={highlight}
-	onresize={update}
-	onhashchange={() => select($page.url)}
-/>
-
-{#if !$is_mobile || ($is_mobile && sections.length > 0)}
-	<aside
-		class="on-this-page"
-		class:mobile={$is_mobile}
-		style:z-index={mobile_z_index}
-		bind:this={containerEl}
-		use:click_outside={() => $is_mobile && ($on_this_page_open = false)}
-		use:focus_outside={() => $is_mobile && ($on_this_page_open = false)}
-	>
-		<h2>
-			<button
-				class="heading"
-				aria-expanded={$on_this_page_open}
-				onclick={() => ($on_this_page_open = !$on_this_page_open)}
-			>
-				<span class="h2"
-					>{#if children}{@render children()}{:else}On this page{/if}</span
-				>
-
-				<span class="expand-icon" class:inverted={$on_this_page_open}>
-					<Icon name="chevron-down" />
-				</span>
-			</button>
-			<span class="h2 desktop-only-heading"
-				>{#if children}{@render children()}{:else}On this page{/if}</span
-			>
-		</h2>
-
-		{#if (browser && !$is_mobile) || ($is_mobile && $on_this_page_open)}
-			<nav
-				aria-label="On this page"
-				transition:slide={{ axis: 'y', easing: expoOut, duration: $reduced_motion ? 0 : 400 }}
-				onintrostart={() => $on_this_page_open && (mobile_z_index = Z_INDICES.OPEN)}
-				onoutrostart={async () => {
-					await tick();
-
-					if (!$on_this_page_open && $nav_open) {
-						mobile_z_index = Z_INDICES.BASE;
-					}
-				}}
-				onoutroend={() => !$on_this_page_open && (mobile_z_index = Z_INDICES.BASE)}
-			>
-				<ul>
-					<li>
-						<a href={path} aria-current={hash === '' ? 'page' : false} onclick={on_link_click}
-							>{title}</a
-						>
-					</li>
-					{#each sections as { title, slug }}
-						<li>
-							<a
-								href={`#${slug}`}
-								aria-current={`#${slug}` === hash ? 'page' : false}
-								onclick={on_link_click}
-							>
-								{title}
-							</a>
-						</li>
-					{/each}
-				</ul>
-			</nav>
-		{/if}
-	</aside>
-{/if}
-
-<style>
-	.on-this-page {
-		display: var(--on-this-page-display);
-		position: fixed;
-		padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 0 0;
-		width: min(280px, calc(var(--sidebar-width) - var(--sk-page-padding-side)));
-		max-height: calc(100vh - var(--sk-nav-height) - var(--sk-page-padding-top));
-		top: var(--sk-nav-height);
-		left: calc(100vw - (var(--sidebar-width)));
-		overflow-y: auto;
-		scrollbar-width: none;
-		font-family: var(--sk-font);
-	}
-	.on-this-page::-webkit-scrollbar {
-		display: none;
-	}
-
-	.heading {
-		display: none;
-	}
-
-	h2 {
-		/* override global styles */
-		margin: 0;
-		border: none;
-		padding: 0 0.85rem;
-	}
-
-	.h2 {
-		text-transform: uppercase;
-		font-size: 1.4rem;
-		font-weight: 400;
-		margin: 0;
-		padding: 0;
-		color: var(--sk-text-3);
-		text-align: start;
-	}
-
-	.desktop-only-heading {
-		display: inline;
-	}
-
-	.heading :global(svg) {
-		transform: translateY(-1px);
-	}
-
-	.expand-icon {
-		padding: 0.5rem;
-	}
-
-	.expand-icon :global(svg) {
-		transition: transform 0.4s var(--quint-out);
-		transform-origin: center;
-	}
-
-	.expand-icon.inverted :global(svg) {
-		transform: rotate3d(0, 0, 1, 180deg);
-	}
-
-	ul {
-		list-style: none;
-		margin-left: 0;
-	}
-
-	li {
-		margin: 0.2rem;
-	}
-
-	li::before {
-		content: none;
-	}
-
-	a {
-		display: block;
-		padding: 0.3rem 0.5rem;
-		color: var(--sk-text-3);
-		font-size: var(--sk-text-s);
-		border-left: 2px solid transparent;
-		box-shadow: none;
-
-		transition: 0.4s var(--quint-out);
-		transition-property: background, border-left;
-	}
-
-	a:hover {
-		box-shadow: none;
-		background: var(--sk-back-3);
-	}
-
-	a[aria-current='page'] {
-		background: var(--sk-back-3);
-		border-left-color: var(--sk-theme-1);
-	}
-
-	.on-this-page.mobile {
-		position: relative;
-		top: 0;
-		left: 0;
-		z-index: 99;
-
-		display: block;
-
-		width: 100%;
-		height: auto;
-		padding: 0;
-
-		margin: 5rem 0;
-
-		overflow-y: initial;
-	}
-
-	.on-this-page.mobile .desktop-only-heading {
-		display: none;
-	}
-
-	.on-this-page.mobile .heading {
-		position: relative;
-		width: 100%;
-
-		display: grid;
-		align-items: center;
-		grid-template-columns: 1fr auto;
-		gap: 0.75rem;
-		padding: 0.75rem 0.75rem;
-
-		z-index: 2;
-
-		box-shadow: var(--sk-shadow);
-		border-radius: var(--sk-border-radius);
-		box-sizing: border-box;
-
-		background-color: var(--sk-back-3);
-	}
-
-	.on-this-page.mobile .heading[aria-expanded='true'] {
-		border-radius: var(--sk-border-radius) var(--sk-border-radius) 0 0;
-	}
-
-	.on-this-page.mobile h2 {
-		padding: unset;
-	}
-
-	.on-this-page.mobile .h2 {
-		font-size: var(--sk-text-s);
-		line-height: 1;
-
-		padding: 0.8rem 0.5rem;
-
-		border: none;
-	}
-
-	.on-this-page.mobile .heading :global(svg) {
-		display: block;
-	}
-
-	.on-this-page.mobile nav {
-		position: absolute;
-		top: 45px;
-		left: 0;
-
-		width: 100%;
-		max-height: 50vh;
-
-		overflow-y: auto;
-
-		background-color: var(--sk-back-3);
-
-		border-radius: 0 0 var(--sk-border-radius) var(--sk-border-radius);
-		box-shadow: var(--sk-shadow);
-	}
-
-	.on-this-page.mobile ul {
-		margin: 0 !important;
-
-		display: grid;
-		gap: 0.5rem;
-	}
-
-	.on-this-page.mobile li {
-		margin: 0rem;
-	}
-
-	.on-this-page.mobile li:first-child {
-		display: none;
-	}
-
-	.on-this-page.mobile li:nth-child(2) {
-		margin-top: 0.75rem;
-	}
-
-	.on-this-page.mobile li:last-child {
-		margin-bottom: 0.75rem;
-	}
-
-	.on-this-page.mobile a {
-		padding: 0.4rem 1.25rem;
-		box-sizing: border-box;
-
-		color: var(--sk-text-2);
-	}
-
-	.on-this-page.mobile a[aria-current='page'] {
-		background-color: transparent;
-		border-left: 0;
-	}
-
-	.on-this-page.mobile a:hover {
-		text-decoration: none;
-		background-color: initial;
-	}
-</style>
diff --git a/packages/site-kit/src/lib/styles/text.css b/packages/site-kit/src/lib/styles/text.css
index b489111a36..7e1627e129 100644
--- a/packages/site-kit/src/lib/styles/text.css
+++ b/packages/site-kit/src/lib/styles/text.css
@@ -355,7 +355,6 @@ details.legacy {
 		color: hsl(var(--sk-text-warning-hsl));
 		font-size: 1.4rem;
 		font-weight: 600;
-		cursor: pointer;
 
 		&::after {
 			content: 'show all';

From 378b22d5d6b4918ccac58e71651b919b3589ca61 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 24 Sep 2024 21:18:11 -0400
Subject: [PATCH 2/8] fix

---
 apps/svelte.dev/src/routes/blog/[slug]/+page.svelte    | 6 +++---
 apps/svelte.dev/src/routes/docs/[...path]/+page.svelte | 5 ++---
 packages/site-kit/src/lib/docs/index.ts                | 1 -
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
index f022208fbc..f83723975e 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { page } from '$app/stores';
 	import { copy_code_descendants, ts_js_select } from '@sveltejs/site-kit/actions';
-	import { DocsOnThisPage, setupDocsHovers } from '@sveltejs/site-kit/docs';
+	import { setupDocsHovers } from '@sveltejs/site-kit/docs';
 
 	export let data;
 
@@ -37,12 +37,12 @@
 			<time datetime={data.date}>{data.date_formatted}</time>
 		</p>
 
-		<DocsOnThisPage
+		<!-- <DocsOnThisPage
 			title={data.title}
 			path={data.path}
 			sections={data.sections}
 			orientation="inline"
-		/>
+		/> -->
 
 		{@html data.body}
 	</article>
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
index abe8ce9448..4199da1b77 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
@@ -1,15 +1,14 @@
 <script lang="ts">
 	import { Icon } from '@sveltejs/site-kit/components';
 	import { copy_code_descendants, legacy_details, ts_js_select } from '@sveltejs/site-kit/actions';
-	import { DocsOnThisPage, setupDocsHovers } from '@sveltejs/site-kit/docs';
-	import { afterNavigate } from '$app/navigation';
+	import { setupDocsHovers } from '@sveltejs/site-kit/docs';
 	import OnThisPage from './OnThisPage.svelte';
 
 	let { data } = $props();
 
 	setupDocsHovers();
 
-	let content: HTMLElement = $state();
+	let content = $state() as HTMLElement;
 </script>
 
 <svelte:head>
diff --git a/packages/site-kit/src/lib/docs/index.ts b/packages/site-kit/src/lib/docs/index.ts
index fcff5c2986..7ad8700961 100644
--- a/packages/site-kit/src/lib/docs/index.ts
+++ b/packages/site-kit/src/lib/docs/index.ts
@@ -1,3 +1,2 @@
 export { default as DocsContents } from './DocsContents.svelte';
-export { default as DocsOnThisPage } from './DocsOnThisPage.svelte';
 export { setupDocsHovers } from './hover';

From 8f06edb937f0e26c08799d9cc5537dfa58c60836 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 24 Sep 2024 21:25:27 -0400
Subject: [PATCH 3/8] remove

---
 apps/svelte.dev/src/routes/docs/[...path]/+page.svelte | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
index 4199da1b77..a5d0437a7d 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
@@ -60,11 +60,6 @@
 </div>
 
 <style>
-	/* .text {
-		display: grid;
-		grid-template-columns: 1fr var(--sidebar-width);
-	} */
-
 	.edit {
 		position: relative;
 		font-size: 1.4rem;

From 56ab04a867a8143475f942fd549f1e9d6d05a77e Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 25 Sep 2024 08:08:30 -0400
Subject: [PATCH 4/8] sanitize titles

---
 packages/site-kit/src/lib/markdown/utils.ts       | 4 +---
 packages/site-kit/src/lib/server/content/index.ts | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/site-kit/src/lib/markdown/utils.ts b/packages/site-kit/src/lib/markdown/utils.ts
index 25cbb98c6b..9b83f6a25e 100644
--- a/packages/site-kit/src/lib/markdown/utils.ts
+++ b/packages/site-kit/src/lib/markdown/utils.ts
@@ -50,9 +50,7 @@ export function escape(html: string, encode = false) {
 export function slugify(title: string) {
 	return title
 		.toLowerCase()
-		.replace(/&#39;/g, '')
-		.replace(/&lt;/g, '')
-		.replace(/&gt;/g, '')
+		.replace(/&.+;/g, '')
 		.replace(/[^a-z0-9-$]/g, '-')
 		.replace(/-{2,}/g, '-')
 		.replace(/^-/, '')
diff --git a/packages/site-kit/src/lib/server/content/index.ts b/packages/site-kit/src/lib/server/content/index.ts
index b56155ebbb..ad9cd2cca8 100644
--- a/packages/site-kit/src/lib/server/content/index.ts
+++ b/packages/site-kit/src/lib/server/content/index.ts
@@ -25,7 +25,7 @@ export async function create_index(
 		}
 
 		const sections = Array.from(body.matchAll(/^##\s+(.*)$/gm)).map((match) => {
-			const title = match[1];
+			const title = match[1].replace(/`/g, '').replace(/&lt;/g, '<').replace(/&gt;/g, '>');
 			const slug = slugify(title);
 
 			return { slug, title };

From 7b11465dd02ca25fa3dd3e07a2b1e34cef20f900 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 25 Sep 2024 08:24:57 -0400
Subject: [PATCH 5/8] better styles

---
 apps/svelte.dev/src/lib/icons/arrow-left.svg  | 11 ++++++
 .../routes/docs/[...path]/OnThisPage.svelte   | 37 +++++++++++++++----
 2 files changed, 41 insertions(+), 7 deletions(-)
 create mode 100644 apps/svelte.dev/src/lib/icons/arrow-left.svg

diff --git a/apps/svelte.dev/src/lib/icons/arrow-left.svg b/apps/svelte.dev/src/lib/icons/arrow-left.svg
new file mode 100644
index 0000000000..ee413e3551
--- /dev/null
+++ b/apps/svelte.dev/src/lib/icons/arrow-left.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_9_705)">
+<path d="M6 11.9958H18" stroke="#676778" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 18L6 12L12 6" stroke="#676778" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_9_705">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index 147a9066ce..5f5995552c 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -73,6 +73,7 @@
 
 		nav {
 			display: none;
+			padding-top: 0.8rem;
 
 			a {
 				display: block;
@@ -83,25 +84,30 @@
 				&:first-child {
 					display: none;
 				}
-
-				&.active {
-					font-weight: bold;
-				}
 			}
 		}
 
 		label {
-			display: block;
 			text-transform: uppercase;
+			display: block;
 
 			&::before {
-				content: '▶';
+				content: '';
+				position: absolute;
+				right: 0;
+				top: calc(50% - 0.5em);
+				width: 1em;
+				height: 1em;
+				background: url($lib/icons/chevron.svg);
+				background-size: contain;
+				rotate: 0deg;
+				transition: rotate 0.2s;
 			}
 		}
 
 		label:has(:checked) {
 			&::before {
-				content: '▼';
+				rotate: -90deg;
 			}
 
 			& + nav {
@@ -124,6 +130,12 @@
 			}
 
 			& label {
+				font-size: var(--sk-text-s);
+
+				letter-spacing: 0.1em;
+				font-weight: 600;
+				display: block;
+
 				&::before {
 					content: none !important;
 				}
@@ -135,6 +147,17 @@
 				a:first-child {
 					display: block;
 				}
+
+				a.active::before {
+					content: '';
+					position: absolute;
+					left: -2rem;
+					top: calc(50% - 0.6em);
+					height: 1em;
+					width: 1em;
+					background: url($lib/icons/arrow-left.svg);
+					background-size: contain;
+				}
 			}
 		}
 	}

From d66d6adbc95a3271f0bd710002192f6e28d53df8 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 25 Sep 2024 08:33:17 -0400
Subject: [PATCH 6/8] tweaks

---
 .../routes/docs/[...path]/OnThisPage.svelte   | 82 ++++++++++---------
 1 file changed, 45 insertions(+), 37 deletions(-)

diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index 5f5995552c..82099510aa 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -54,25 +54,7 @@
 
 <style>
 	.on-this-page {
-		margin: 4rem 0;
-		background: var(--sk-back-3);
-		padding: 1rem;
-
-		label {
-			position: relative;
-		}
-
-		input {
-			appearance: none;
-			position: absolute;
-			width: 100%;
-			height: 100%;
-			left: 0;
-			top: 0;
-		}
-
 		nav {
-			display: none;
 			padding-top: 0.8rem;
 
 			a {
@@ -90,28 +72,56 @@
 		label {
 			text-transform: uppercase;
 			display: block;
+		}
 
-			&::before {
-				content: '';
-				position: absolute;
-				right: 0;
-				top: calc(50% - 0.5em);
-				width: 1em;
-				height: 1em;
-				background: url($lib/icons/chevron.svg);
-				background-size: contain;
-				rotate: 0deg;
-				transition: rotate 0.2s;
+		@media (max-width: 1199px) {
+			margin: 4rem 0;
+			background: var(--sk-back-3);
+			padding: 1rem;
+
+			&:not(:has(a:nth-child(2))) {
+				/* hide widget if there are no subheadings */
+				display: none;
 			}
-		}
 
-		label:has(:checked) {
-			&::before {
-				rotate: -90deg;
+			label {
+				position: relative;
+
+				&::before {
+					content: '';
+					position: absolute;
+					right: 0;
+					top: calc(50% - 0.5em);
+					width: 1em;
+					height: 1em;
+					background: url($lib/icons/chevron.svg);
+					background-size: contain;
+					rotate: 0deg;
+					transition: rotate 0.2s;
+				}
 			}
 
-			& + nav {
-				display: block;
+			label:has(:checked) {
+				&::before {
+					rotate: -90deg;
+				}
+
+				& + nav {
+					display: block;
+				}
+			}
+
+			input {
+				appearance: none;
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				left: 0;
+				top: 0;
+			}
+
+			nav {
+				display: none;
 			}
 		}
 
@@ -119,11 +129,9 @@
 			position: fixed;
 			top: 14rem;
 			right: 0;
-			margin: 0;
 			width: var(--sidebar-width);
 			padding: 0 var(--sk-page-padding-side) 0 0;
 			box-sizing: border-box;
-			background: none;
 
 			input {
 				display: none;

From 356a5b157daa7d53c141e4a31698bd3298e81520 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 25 Sep 2024 08:55:23 -0400
Subject: [PATCH 7/8] remove on-this-page from blog posts, it's weird to have
 it there

---
 apps/svelte.dev/src/lib/server/content.ts     |  7 ++---
 .../src/routes/blog/+page.server.js           |  6 +++-
 apps/svelte.dev/src/routes/blog/+page.svelte  |  6 ++--
 .../src/routes/blog/[slug]/+page.server.js    | 16 ++++------
 .../src/routes/blog/[slug]/+page.svelte       | 29 +++++++++----------
 .../svelte.dev/src/routes/nav.json/+server.ts | 22 ++------------
 6 files changed, 30 insertions(+), 56 deletions(-)

diff --git a/apps/svelte.dev/src/lib/server/content.ts b/apps/svelte.dev/src/lib/server/content.ts
index 4136e7b295..3562d96867 100644
--- a/apps/svelte.dev/src/lib/server/content.ts
+++ b/apps/svelte.dev/src/lib/server/content.ts
@@ -42,13 +42,10 @@ export const blog_posts = index.blog.children
 		const date = post.metadata.date ?? post.file.split('/').pop()!.slice(0, 10);
 
 		return {
-			title: post.metadata.title,
+			...post,
 			date,
 			date_formatted: format_date(date),
-			description: post.metadata.description,
-			draft: post.metadata.draft,
-			authors,
-			...post
+			authors
 		};
 	})
 	.sort((a, b) => (a.date < b.date ? 1 : -1));
diff --git a/apps/svelte.dev/src/routes/blog/+page.server.js b/apps/svelte.dev/src/routes/blog/+page.server.js
index 491ba98b86..37de117f70 100644
--- a/apps/svelte.dev/src/routes/blog/+page.server.js
+++ b/apps/svelte.dev/src/routes/blog/+page.server.js
@@ -4,6 +4,10 @@ export const prerender = true;
 
 export async function load() {
 	return {
-		posts: blog_posts
+		posts: blog_posts.map((document) => ({
+			metadata: document.metadata,
+			date: document.date,
+			slug: document.slug
+		}))
 	};
 }
diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte
index 8afa659b19..5d3d161577 100644
--- a/apps/svelte.dev/src/routes/blog/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/+page.svelte
@@ -19,11 +19,11 @@
 <h1 class="visually-hidden">Blog</h1>
 <div class="posts stretch">
 	{#each data.posts as post}
-		{#if !post.draft}
+		{#if !post.metadata.draft}
 			<article class="post" data-pubdate={post.date}>
 				<a class="no-underline" href="/{post.slug}" title="Read the article »">
-					<h2>{post.title}</h2>
-					<p>{post.description}</p>
+					<h2>{post.metadata.title}</h2>
+					<p>{post.metadata.description}</p>
 				</a>
 			</article>
 		{/if}
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.server.js b/apps/svelte.dev/src/routes/blog/[slug]/+page.server.js
index 66ba81c796..661cc1d995 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/+page.server.js
+++ b/apps/svelte.dev/src/routes/blog/[slug]/+page.server.js
@@ -5,22 +5,16 @@ import { render_content } from '$lib/server/renderer';
 export const prerender = true;
 
 export async function load({ params }) {
-	const post = blog_posts.find((post) => post.slug === `blog/${params.slug}`);
+	const document = blog_posts.find((document) => document.slug === `blog/${params.slug}`);
 
-	if (!post) error(404);
+	if (!document) error(404);
 
 	// forgive me — terrible hack necessary to get diffs looking sensible
 	// on the `runes` blog post
-	post.body = post.body.replace(/(    )+/gm, (match) => '  '.repeat(match.length / 4));
+	const markdown = document.body.replace(/(    )+/gm, (match) => '  '.repeat(match.length / 4));
 
 	return {
-		title: post.title,
-		description: post.description,
-		path: `/${post.slug}`,
-		date: post.date,
-		date_formatted: post.date_formatted,
-		body: await render_content(post.file, post.body),
-		authors: post.authors,
-		sections: post.sections
+		...document,
+		body: await render_content(document.file, markdown)
 	};
 }
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
index f83723975e..9a8c060983 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -1,20 +1,22 @@
-<script>
+<script lang="ts">
 	import { page } from '$app/stores';
 	import { copy_code_descendants, ts_js_select } from '@sveltejs/site-kit/actions';
 	import { setupDocsHovers } from '@sveltejs/site-kit/docs';
 
-	export let data;
+	let { data } = $props();
+
+	let content = $state() as HTMLElement;
 
 	setupDocsHovers();
 </script>
 
 <svelte:head>
-	<title>{data.title}</title>
+	<title>{data.metadata.title}</title>
 
 	<meta name="twitter:card" content="summary_large_image" />
-	<meta name="twitter:title" content={data.title} />
-	<meta name="twitter:description" content={data.description} />
-	<meta name="Description" content={data.description} />
+	<meta name="twitter:title" content={data.metadata.title} />
+	<meta name="twitter:description" content={data.metadata.description} />
+	<meta name="Description" content={data.metadata.description} />
 
 	<meta name="twitter:image" content="https://svelte.dev/blog/{$page.params.slug}/card.png" />
 	<meta name="og:image" content="https://svelte.dev/blog/{$page.params.slug}/card.png" />
@@ -22,8 +24,8 @@
 
 <div class="content">
 	<article class="post listify text" use:ts_js_select use:copy_code_descendants>
-		<h1>{data.title}</h1>
-		<p class="standfirst">{data.description}</p>
+		<h1>{data.metadata.title}</h1>
+		<p class="standfirst">{data.metadata.description}</p>
 
 		<p class="byline">
 			{#each data.authors as author, i}
@@ -37,14 +39,9 @@
 			<time datetime={data.date}>{data.date_formatted}</time>
 		</p>
 
-		<!-- <DocsOnThisPage
-			title={data.title}
-			path={data.path}
-			sections={data.sections}
-			orientation="inline"
-		/> -->
-
-		{@html data.body}
+		<div class="content" bind:this={content}>
+			{@html data.body}
+		</div>
 	</article>
 </div>
 
diff --git a/apps/svelte.dev/src/routes/nav.json/+server.ts b/apps/svelte.dev/src/routes/nav.json/+server.ts
index a403781747..5f6f40d96d 100644
--- a/apps/svelte.dev/src/routes/nav.json/+server.ts
+++ b/apps/svelte.dev/src/routes/nav.json/+server.ts
@@ -1,5 +1,5 @@
 import { json } from '@sveltejs/kit';
-import { blog_posts, docs as _docs, index } from '$lib/server/content';
+import { docs as _docs, index } from '$lib/server/content';
 import type { NavigationLink } from '@sveltejs/site-kit';
 
 export const prerender = true;
@@ -23,18 +23,6 @@ async function get_nav_list(): Promise<NavigationLink[]> {
 		}))
 		.sort((a, b) => a.title.localeCompare(b.title)); // Svelte first
 
-	const blog = [
-		{
-			title: '',
-			sections: blog_posts.map(({ title, slug, date }) => ({
-				title,
-				path: '/' + slug,
-				// Put a NEW badge on blog posts that are less than 14 days old
-				badge: (+new Date() - +new Date(date)) / (1000 * 60 * 60 * 24) < 14 ? 'NEW' : undefined
-			}))
-		}
-	];
-
 	const tutorial = index.tutorial.children.map((topic) => ({
 		title: topic.metadata.title,
 		sections: topic.children.map((section) => ({
@@ -67,13 +55,7 @@ async function get_nav_list(): Promise<NavigationLink[]> {
 		{
 			title: 'Blog',
 			prefix: 'blog',
-			pathname: '/blog',
-			sections: [
-				{
-					title: 'BLOG',
-					sections: blog
-				}
-			]
+			pathname: '/blog'
 		}
 	];
 }

From a6c1b843bacfdbd7f668e4b56e0cb2dac0af14ae Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 25 Sep 2024 09:01:04 -0400
Subject: [PATCH 8/8] fix

---
 apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts  | 2 +-
 apps/svelte.dev/src/routes/blog/[slug]/card.png/Card.svelte | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts b/apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts
index 068558509c..4d7e40ff4f 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts
+++ b/apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts
@@ -27,7 +27,7 @@ export async function GET({ params }) {
 
 	if (!post) error(404);
 
-	const result = render(Card, { props: post });
+	const result = render(Card, { props: { title: post.metadata.title, date: post.date_formatted } });
 	const element = toReactNode(`${result.body}<style>${CardCSS}</style>`);
 
 	const svg = await satori(element, {
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/card.png/Card.svelte b/apps/svelte.dev/src/routes/blog/[slug]/card.png/Card.svelte
index 512997600b..79b9c105ab 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/card.png/Card.svelte
+++ b/apps/svelte.dev/src/routes/blog/[slug]/card.png/Card.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	let { title, date_formatted }: { title: string; date_formatted: string } = $props();
+	let { title, date }: { title: string; date: string } = $props();
 </script>
 
 <div class="card">
@@ -7,7 +7,7 @@
 
 	<div class="text">
 		<h1>{title}</h1>
-		<p class="date">{date_formatted}</p>
+		<p class="date">{date}</p>
 	</div>
 </div>