feat: OnThisPage blog

sites/svelte.dev/package.json

@@ -30,7 +30,7 @@
     "@resvg/resvg-js": "^2.4.1",
     "@sveltejs/adapter-vercel": "^3.0.3",
     "@sveltejs/kit": "^1.24.1",
-    "@sveltejs/site-kit": "6.0.0-next.45",
+    "@sveltejs/site-kit": "6.0.0-next.46",
     "@sveltejs/vite-plugin-svelte": "^2.4.6",
     "@types/cookie": "^0.5.2",
     "@types/node": "^20.5.9",

sites/svelte.dev/src/lib/server/blog/index.js

@@ -2,6 +2,7 @@
 import { extractFrontmatter } from '@sveltejs/site-kit/markdown';
 import { CONTENT_BASE_PATHS } from '../../../constants.js';
 import { render_content } from '../renderer.js';
+import { get_sections } from '../docs/index.js';
 
 /**
  * @param {import('./types').BlogData} blog_data
@@ -47,7 +48,8 @@ export async function get_blog_data(base = CONTENT_BASE_PATHS.BLOG) {
 			author: {
 				name: metadata.author,
 				url: metadata.authorURL
-			}
+			},
+			sections: await get_sections(body)
 		});
 	}
 

sites/svelte.dev/src/lib/server/blog/types.d.ts

@@ -1,3 +1,5 @@
+import type { Section } from '../docs/types';
+
 export interface BlogPost {
 	title: string;
 	description: string;
@@ -11,6 +13,7 @@ export interface BlogPost {
 	};
 	draft: boolean;
 	content: string;
+	sections: Section[];
 }
 
 export type BlogData = BlogPost[];

sites/svelte.dev/src/lib/server/docs/index.js

@@ -107,11 +107,12 @@ const titled = async (str) =>
 			.replace(/"/g, '"')
 			.replace(/&lt;/g, '<')
 			.replace(/&gt;/g, '>')
+			.replace(/&amp;/, '&')
 			.replace(/<(\/)?(em|b|strong|code)>/g, '')
 	);
 
 /** @param {string} markdown */
-async function get_sections(markdown) {
+export async function get_sections(markdown) {
 	const lines = markdown.split('\n');
 	const root = /** @type {import('./types').Section} */ ({
 		title: 'Root',

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

@@ -1,7 +1,7 @@
 <script>
 	import { page } from '$app/stores';
 	import { copy_code_descendants } from '@sveltejs/site-kit/actions';
-	import { setupDocsHovers } from '@sveltejs/site-kit/docs';
+	import { DocsOnThisPage, setupDocsHovers } from '@sveltejs/site-kit/docs';
 
 	export let data;
 
@@ -20,17 +20,31 @@
 	<meta name="og:image" content="https://svelte.dev/blog/{$page.params.slug}/card.png" />
 </svelte:head>
 
-<article class="post listify text" use:copy_code_descendants>
-	<h1>{data.post.title}</h1>
-	<p class="standfirst">{data.post.description}</p>
-
-	<p class="byline">
-		<a href={data.post.author.url}>{data.post.author.name}</a>
-		<time datetime={data.post.date}>{data.post.date_formatted}</time>
-	</p>
-
-	{@html data.post.content}
-</article>
+<div class="content">
+	<article class="post listify text" use:copy_code_descendants>
+		<h1>{data.post.title}</h1>
+		<p class="standfirst">{data.post.description}</p>
+
+		<p class="byline">
+			<a href={data.post.author.url}>{data.post.author.name}</a>
+			<time datetime={data.post.date}>{data.post.date_formatted}</time>
+		</p>
+
+		<DocsOnThisPage
+			details={{
+				content: '',
+				file: '',
+				path: `/blog/${data.post.slug}`,
+				sections: data.post.sections,
+				slug: data.post.slug,
+				title: data.post.title
+			}}
+			orientation="inline"
+		/>
+
+		{@html data.post.content}
+	</article>
+</div>
 
 <!-- the crawler doesn't understand twitter:image etc, so we have to add this hack. TODO fix in sveltekit -->
 <img hidden src="/blog/{$page.params.slug}/card.png" alt="Social card for {data.post.title}" />
@@ -54,7 +68,7 @@
 	}
 
 	.byline {
-		margin: 0 0 6rem 0;
+		margin: 0 0 1rem 0;
 		padding: 1.6rem 0 0 0;
 		border-top: var(--sk-thick-border-width) solid #6767785b;
 		font-size: var(--sk-text-xs);