feat: OnThisPage blog

### Before submitting the PR, please make sure you do the following

- [ ] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
- [ ] Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`.
- [ ] This message body should clearly illustrate what problems it solves.
- [ ] Ideally, include a test that fails without this PR but passes with it.

### Tests and linting

- [ ] Run the tests with `pnpm test` and lint the project with `pnpm lint`

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,6 +1,6 @@
 <script>
 	import { page } from '$app/stores';
-	import { setupDocsHovers } from '@sveltejs/site-kit/docs';
+	import { DocsOnThisPage, setupDocsHovers } from '@sveltejs/site-kit/docs';
 
 	export let data;
 
@@ -28,6 +28,18 @@
 		<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>
 
@@ -53,7 +65,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);