style blog list

Author: andnorda

package.json

@@ -34,6 +34,7 @@
 	"dependencies": {
 		"@amplitude/analytics-browser": "^2.11.9",
 		"@nais/ds-svelte-community": "^0.7.5",
+		"date-fns": "^4.1.0",
 		"svelte-preprocess": "^6.0.3"
 	}
 }

src/routes/blog/+page.svelte

@@ -1,11 +1,44 @@
 <script lang="ts">
+	import { format } from "date-fns";
 	import type { PageData } from "./$types";
 
 	let { data }: { data: PageData } = $props();
-
 </script>
 
-{#each data.posts as post}
-<a href="{post.route}"><h1>{post.metadata.title}</h1></a>
-	<p>{post.metadata.description}</p>
-{/each}
+<ul class="list">
+	{#each data.posts as post}
+		<li class="item">
+			<a class="link" href={post.route}>
+				<h2 class="heading">{post.metadata.title}</h2>
+			</a>
+			<p class="description">{post.metadata.description}</p>
+			<p>{format(post.metadata.date, "MMMM d, yyyy")}</p>
+		</li>
+	{/each}
+</ul>
+
+<style>
+	.list {
+		list-style: none;
+		padding: min(4vw, 3.6rem);
+		max-width: 67ch;
+		margin-inline: auto;
+		display: flex;
+		flex-direction: column;
+		gap: 2rem;
+	}
+	.link {
+		display: inline-block;
+		color: var(--color-primary);
+	}
+	.link:hover {
+		text-decoration: none;
+	}
+	.item {
+		display: grid;
+		gap: 0.2rem;
+	}
+	.description {
+		font-size: 1.2rem;
+	}
+</style>