docs: add category heading in docs pages (#8918)

Co-authored-by: Romain Crestey <[email protected]>
Co-authored-by: Ben McCann <[email protected]>

Author: 3 people

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

@@ -75,6 +75,7 @@ export async function get_docs_data(base = CONTENT_BASE_PATHS.DOCS) {
 				title: page_title,
 				slug: page_slug,
 				content: page_content,
+				category: category_title,
 				sections: get_sections(page_content),
 				path: `${app_base}/docs/${page_slug}`,
 				file: `${category_dir}/${filename}`

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

@@ -17,6 +17,7 @@ export type Category = {
 
 export type Page = {
 	title: string;
+	category: string;
 	slug: string;
 	file: string;
 	path: string;

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

@@ -4,7 +4,10 @@
 
 	export let data;
 
-	$: title = $page.data.page?.title;
+	$: pageData = $page.data.page;
+
+	$: title = pageData?.title;
+	$: category = pageData?.category;
 </script>
 
 <div class="container">
@@ -13,6 +16,9 @@
 	</div>
 
 	<div class="page content">
+		{#if category}
+			<p class="category">{category}</p>
+		{/if}
 		{#if title}
 			<h1>{title}</h1>
 		{/if}
@@ -41,6 +47,14 @@
 		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));