simple blog post layout

Author: andnorda

src/routes/blog/posts/+layout.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	interface Props {
+		title?: string;
+		children: Snippet;
+	}
+
+	let { title, children }: Props = $props();
+</script>
+
+<svelte:head>
+	<title>{title} — Nais blog</title>
+</svelte:head>
+
+<div class="wrapper">
+	<h1>{title}</h1>
+	{@render children()}
+</div>
+
+<style>
+	.wrapper {
+		padding: min(4vw, 3.6rem);
+		max-width: 67ch;
+		margin-inline: auto;
+		display: flex;
+		flex-direction: column;
+		gap: 2rem;
+	}
+</style>

src/routes/blog/posts/layout.svelte

@@ -3,17 +3,17 @@ import path from "path";
 import { mdsvex } from "mdsvex";
 import remarkRelativeImages from "mdsvex-relative-images";
 
-
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://github.com/sveltejs/svelte-preprocess
 	// for more information about preprocessors
-	extensions: ['.svelte', '.svx', '.md'],
+	extensions: [".svelte", ".svx", ".md"],
 	preprocess: [
 		mdsvex({
-			extensions: ['.svx', '.md', '.mdx'],
+			extensions: [".svx", ".md", ".mdx"],
 			remarkPlugins: [remarkRelativeImages],
-		})
+			layout: "/src/routes/blog/posts/layout.svelte",
+		}),
 	],
 
 	kit: {