Fix 'on this page' widget (#96)

* fix on-this-page widget

* fix

* remove

* sanitize titles

* better styles

* tweaks

* remove on-this-page from blog posts, it's weird to have it there

* fix

Author: Rich-Harris

apps/svelte.dev/src/lib/icons/arrow-left.svg

@@ -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));

apps/svelte.dev/src/lib/server/content.ts

@@ -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
+		}))
 	};
 }

apps/svelte.dev/src/routes/blog/+page.server.js

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

apps/svelte.dev/src/routes/blog/+page.svelte

@@ -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)
 	};
 }

apps/svelte.dev/src/routes/blog/[slug]/+page.server.js

@@ -1,29 +1,31 @@
-<script>
+<script lang="ts">
 	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;
+	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" />
 </svelte:head>
 
 <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>
 

apps/svelte.dev/src/routes/blog/[slug]/+page.svelte

@@ -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, {

apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts

@@ -1,13 +1,13 @@
 <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">
 	<img src="https://sveltejs.github.io/assets/artwork/svelte-machine.png" alt="Svelte Machine" />
 
 	<div class="text">
 		<h1>{title}</h1>
-		<p class="date">{date_formatted}</p>
+		<p class="date">{date}</p>
 	</div>
 </div>
 

apps/svelte.dev/src/routes/blog/[slug]/card.png/Card.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,15 +62,23 @@
 
 	@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;
 		}
 
 		.page {
 			--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;
 		}
 	}

apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte

@@ -1,11 +1,14 @@
-<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 { setupDocsHovers } from '@sveltejs/site-kit/docs';
+	import OnThisPage from './OnThisPage.svelte';
 
 	let { data } = $props();
 
 	setupDocsHovers();
+
+	let content = $state() as HTMLElement;
 </script>
 
 <svelte:head>
@@ -20,21 +23,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">