OnThisPage

sites/svelte.dev/src/routes/docs/+layout.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { page } from '$app/stores';
 	import Contents from './Contents.svelte';
+	import '@sveltejs/site-kit/styles/code.css';
 
 	/** @type {import('./$types').LayoutServerData}*/
 	export let data;
@@ -55,8 +56,8 @@
 
 	.content :global(h2) {
 		margin-top: 8rem;
-		padding: 2rem 1.6rem 4rem 0.2rem;
+		padding: 2rem 1.6rem 2rem 0.2rem;
-		border-top: 2px solid #ddd;
+		border-bottom: 1px solid hsl(0, 0%, 87%, 0.2);
 		line-height: 1;
 		font-size: var(--sk-text-m);
 		letter-spacing: 0.05em;
@@ -128,7 +129,7 @@
 		padding: 0 0 1rem 0;
 		color: var(--sk-text-2);
 		max-width: var(--sk-line-max-width);
-		border-bottom: 1px solid #ddd;
+		border-bottom: 1px solid hsl(0, 0%, 87%, 0.2);
 		background: transparent;
 		line-height: 1;
 	}
@@ -150,7 +151,7 @@
 		font-family: inherit;
 		font-weight: 600;
 		font-size: 2.4rem;
-		color: var(--sk-theme-2);
+		color: var(--sk-text-2);
 		margin: 6.4rem 0 1.6rem 0;
 		padding-left: 0;
 		background: transparent;
@@ -265,7 +266,7 @@
 		border-top: none;
 	}
 
-	.content :global(h2[id])::after {
+	/* .content :global(h2[id])::after {
 		content: '';
 		position: absolute;
 		width: 100%;
@@ -273,7 +274,7 @@
 		top: 8rem;
 		height: 2px;
 		background: #ddd;
-	}
+	} */
 
 	.toc-container {
 		background: var(--sk-back-3);

sites/svelte.dev/src/routes/docs/[slug]/+page.svelte

@@ -1,6 +1,10 @@
 <script>
+	import OnThisPage from './OnThisPage.svelte';
+
 	/** @type {import('./$types').PageData}*/
 	export let data;
+
+	$: console.log(data);
 </script>
 
 <svelte:head>
@@ -8,3 +12,7 @@
 </svelte:head>
 
 {@html data.page.content}
+
+{#if data.page.sections.length !== 0}
+	<OnThisPage details={data.page} />
+{/if}

sites/svelte.dev/src/routes/docs/[slug]/OnThisPage.svelte

@@ -0,0 +1,141 @@
+<script>
+	import { onMount } from 'svelte';
+	import { afterNavigate } from '$app/navigation';
+	import { base } from '$app/paths';
+	import { page } from '$app/stores';
+
+	/** @type {import('./$types').PageData['page']} */
+	export let details;
+
+	/** @type {string} */
+	let hash = '';
+
+	/** @type {number} */
+	let height = 0;
+
+	/** @type {HTMLElement} */
+	let content;
+
+	/** @type {NodeListOf<HTMLElement>} */
+	let headings;
+
+	/** @type {number[]} */
+	let positions = [];
+
+	onMount(async () => {
+		await document.fonts.ready;
+
+		update();
+		highlight();
+	});
+
+	afterNavigate(() => {
+		update();
+		highlight();
+	});
+
+	function update() {
+		content = document.querySelector('.content');
+		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() {
+		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 = '';
+	}
+
+	/** @param {URL} url */
+	function select(url) {
+		// belt...
+		setTimeout(() => {
+			hash = url.hash;
+		});
+
+		// ...and braces
+		window.addEventListener(
+			'scroll',
+			() => {
+				hash = url.hash;
+			},
+			{ once: true }
+		);
+	}
+</script>
+
+<svelte:window on:scroll={highlight} on:resize={update} on:hashchange={() => select($page.url)} />
+
+<aside class="on-this-page">
+	<h2>On this page</h2>
+	<nav>
+		<ul>
+			<li><a href="{base}/docs/{details.slug}" class:active={hash === ''}>{details.title}</a></li>
+			{#each details.sections as { title, slug }}
+				<li><a href={`#${slug}`} class:active={`#${slug}` === hash}>{title}</a></li>
+			{/each}
+		</ul>
+	</nav>
+</aside>
+
+<style>
+	.on-this-page {
+		display: var(--on-this-page-display);
+		position: fixed;
+		padding: 0 var(--sk-page-padding-side) 0 0;
+		width: min(280px, calc(var(--sidebar-width) - var(--sk-page-padding-side)));
+		/* top: calc(var(--sk-page-padding-top) + var(--sk-nav-height)); */
+		top: var(--sk-nav-height);
+		left: calc(100vw - (var(--sidebar-width)));
+	}
+
+	h2 {
+		text-transform: uppercase;
+		font-size: 1.4rem;
+		font-weight: 400;
+		line-height: 0;
+		margin: 0 0 1rem 0 !important;
+		padding: 0 0 0 0.6rem;
+		color: var(--sk-text-3);
+	}
+
+	ul {
+		list-style: none;
+	}
+
+	a {
+		display: block;
+		padding: 0.3rem 0.5rem;
+		color: var(--sk-text-3);
+		border-left: 2px solid transparent;
+
+		font-size: 1.3rem;
+	}
+
+	a:hover {
+		text-decoration: none;
+		background: var(--sk-back-3);
+	}
+
+	a.active {
+		background: var(--sk-back-3);
+		border-left-color: var(--sk-theme-1);
+	}
+</style>