From 258ccf204b304671ae382641e8609ea428963c8e Mon Sep 17 00:00:00 2001
From: Romain l'Ourson <rcrestey@gmail.com>
Date: Mon, 10 Jul 2023 21:35:14 +0200
Subject: [PATCH] docs: add category heading in docs pages (#8918)

Co-authored-by: Romain Crestey <romain.crestey@radiofrance.com>
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
---
 sites/svelte.dev/src/lib/server/docs/index.js   |  1 +
 sites/svelte.dev/src/lib/server/docs/types.d.ts |  1 +
 sites/svelte.dev/src/routes/docs/+layout.svelte | 16 +++++++++++++++-
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/sites/svelte.dev/src/lib/server/docs/index.js b/sites/svelte.dev/src/lib/server/docs/index.js
index eef9e4e2a9..29457886ea 100644
--- a/sites/svelte.dev/src/lib/server/docs/index.js
+++ b/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}`
diff --git a/sites/svelte.dev/src/lib/server/docs/types.d.ts b/sites/svelte.dev/src/lib/server/docs/types.d.ts
index 425d3a9251..99c7324135 100644
--- a/sites/svelte.dev/src/lib/server/docs/types.d.ts
+++ b/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;
diff --git a/sites/svelte.dev/src/routes/docs/+layout.svelte b/sites/svelte.dev/src/routes/docs/+layout.svelte
index 55ced57717..097fde98ff 100644
--- a/sites/svelte.dev/src/routes/docs/+layout.svelte
+++ b/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));