#16 added error checks for fetch calls, #30 basic head info

src/lib/components/PostsList.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { MdMeta } from '$lib/api/content/types';
+	import type { MdMeta } from '../../routes/api/content/types';
 
 	export let posts: MdMeta[];
 	export let postsPath: string = '/posts';

src/routes/+layout.ts

@@ -1,28 +1,9 @@
 import type { LayoutLoad } from './$types';
 
-// set all pages to prerendered
 export const prerender = true;
-
-// JS is needed on the client for page transitions and link prefetching.
-// change to false to ship without any JS
-// or to dev for HMR in development
-// import { dev } from '$app/environment';
-// export const csr = dev;
 export const csr = true;
 
 export const load = (({ url }) => {
-	// import { error } from '@sveltejs/kit';
-	// try {
-	// 	return {
-	// 		/**
-	// 		 * The current path
-	// 		 */
-	// 		path: url.pathname
-	// 	};
-	// } catch (err) {
-	// 	throw error(500, err);
-	// }
-
 	return {
 		/**
 		 * The current path

src/routes/api/content/[slug]/+server.ts

@@ -13,6 +13,10 @@ export const GET: RequestHandler = async ({ params, fetch }) => {
 	}
 
 	const response = await fetch('/api/content');
+	if (!response.ok) {
+		throw error(400, 'error loading data from endpoint');
+	}
+
 	const result = (await response.json()) as MdMeta[];
 
 	if (id >= result.length) {

src/routes/posts/+layout.server.ts

@@ -1,10 +1,14 @@
+import { error } from '@sveltejs/kit';
 import type { LayoutServerLoad } from './$types';
 import type { MdMeta } from '../api/content/types';
 
 export const load = (async ({ fetch }) => {
-	const res = await fetch('/api/content');
+	const response = await fetch('/api/content');
+	if (!response.ok) {
+		throw error(400, 'error loading data from endpoint');
+	}
 
 	return {
-		posts: (await res.json()) as MdMeta[]
+		posts: (await response.json()) as MdMeta[]
 	};
 }) satisfies LayoutServerLoad;

src/routes/posts/+page.svelte

@@ -5,6 +5,15 @@
 	export let data: LayoutServerData;
 </script>
 
-<div class="flex flex-col space-y-4">
-	<PostsList posts={data.posts} />
+<svelte:head>
+	<title>Posts</title>
+	<meta name="Posts" content="Posts" />
+</svelte:head>
+
+<div>
+	<h1 class="mb-8 px-2">Posts</h1>
+
+	<div class="flex flex-col space-y-4">
+		<PostsList posts={data.posts} />
+	</div>
 </div>

src/routes/posts/[slug]/+page.server.ts

@@ -1,15 +1,17 @@
+import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 import type { MdBody } from '../../api/content/types';
 
 export const load = (async ({ parent, params, fetch }) => {
 	const { posts } = await parent();
-
-	// find index of file that matches the slug
 	const postId = posts.findIndex((x) => x.slug === params.slug);
 
-	const res = await fetch(`/api/content/${postId}`);
+	const response = await fetch(`/api/content/${postId}`);
+	if (!response.ok) {
+		throw error(400, 'error loading data from endpoint');
+	}
 
 	return {
-		postBody: (await res.json()) as MdBody
+		postBody: (await response.json()) as MdBody
 	};
 }) satisfies PageServerLoad;

src/routes/posts/[slug]/+page.svelte

@@ -1,8 +1,41 @@
 <script lang="ts">
+	import Tag from '$lib/components/Tag.svelte';
 	import type { PageServerData } from './$types';
+
 	export let data: PageServerData;
+	const { meta, html } = data.postBody;
 </script>
 
-<article class="prose">
-	{@html data.postBody.html}
-</article>
+<svelte:head>
+	<title>Posts | {meta.title}</title>
+	<meta name="Post" content="Post" />
+</svelte:head>
+
+<div>
+	<div class="flex flex-col">
+		<h1>{meta.title}</h1>
+
+		<div class="flex space-x-4">
+			<p>{meta.date}</p>
+			<a href="/posts/categories">{meta.category}</a>
+		</div>
+
+		{#if meta.tags.length}
+			<ul class="flex space-x-2">
+				{#each meta.tags as tag}
+					<li>
+						<Tag tagsPage="/posts/tags" {tag} />
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</div>
+
+	<span>
+		{meta.description}
+	</span>
+
+	<article class="prose">
+		{@html html}
+	</article>
+</div>

src/routes/posts/categories/+page.server.ts

@@ -1,8 +1,13 @@
+import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 import type { MdMeta } from '../../api/content/types';
 
 export const load = (async ({ fetch }) => {
 	const response = await fetch('/api/content');
+	if (!response.ok) {
+		throw error(400, 'error loading data from endpoint');
+	}
+
 	const result = (await response.json()) as MdMeta[];
 
 	const allCategories = result.map((x) => x.category);

src/routes/posts/categories/+page.svelte

@@ -4,6 +4,11 @@
 	export let data: PageServerData;
 </script>
 
+<svelte:head>
+	<title>Posts | Categories</title>
+	<meta name="Posts | Categories" content="Posts | Categories" />
+</svelte:head>
+
 <div class="flex flex-wrap gap-2">
 	{#each data.categories as category}
 		<a

src/routes/posts/categories/[slug]/+page.server.ts

@@ -1,11 +1,17 @@
+import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 import type { MdMeta } from '../../../api/content/types';
 
 export const load = (async ({ params, fetch }) => {
 	const response = await fetch('/api/content');
+	if (!response.ok) {
+		throw error(400, 'error loading data from endpoint');
+	}
+
 	const result = (await response.json()) as MdMeta[];
 
 	return {
-		posts: result.filter((x) => x.category === params.slug)
+		posts: result.filter((x) => x.category === params.slug),
+		category: params.slug
 	};
 }) satisfies PageServerLoad;

src/routes/posts/categories/[slug]/+page.svelte

@@ -5,6 +5,11 @@
 	export let data: PageServerData;
 </script>
 
+<svelte:head>
+	<title>Posts in {data.category}</title>
+	<meta name="Posts per category" content="Posts per category" />
+</svelte:head>
+
 <div class="flex flex-col space-y-4">
 	<PostsList posts={data.posts} />
 </div>

src/routes/posts/tags/+page.server.ts

@@ -1,8 +1,13 @@
+import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 import type { MdMeta } from '../../api/content/types';
 
 export const load = (async ({ fetch }) => {
 	const response = await fetch('/api/content');
+	if (!response.ok) {
+		throw error(400, 'error loading data from endpoint');
+	}
+
 	const result = (await response.json()) as MdMeta[];
 
 	const allTags = result.map((x) => x.tags).flat();

src/routes/posts/tags/+page.svelte

@@ -4,6 +4,11 @@
 	export let data: PageServerData;
 </script>
 
+<svelte:head>
+	<title>Posts | Tags</title>
+	<meta name="Posts | Tags" content="Posts | Tags" />
+</svelte:head>
+
 <div class="flex flex-wrap gap-2">
 	{#each data.tags as tag}
 		<a

src/routes/posts/tags/[slug]/+page.server.ts

@@ -1,13 +1,17 @@
+import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import type { MdMeta } from '../../api/content/types';
+import type { MdMeta } from '../../../api/content/types';
 
 export const load = (async ({ params, fetch }) => {
 	const response = await fetch('/api/content');
-	const result = (await response.json()) as MdMeta[];
+	if (!response.ok) {
+		throw error(400, 'error loading data from endpoint');
+	}
 
-	const allMatchedMetdata = result.filter((x) => x.tags.includes(params.slug));
+	const result = (await response.json()) as MdMeta[];
 
 	return {
-		allMatchedMetdata
+		posts: result.filter((x) => x.tags.includes(params.slug)),
+		tag: params.slug
 	};
 }) satisfies PageServerLoad;

src/routes/posts/tags/[slug]/+page.svelte

@@ -5,6 +5,11 @@
 	export let data: PageServerData;
 </script>
 
+<svelte:head>
+	<title>Posts tagged #{data.tag}</title>
+	<meta name="Posts per tag" content="Posts per tag" />
+</svelte:head>
+
 <div class="flex flex-col space-y-4">
-	<PostsList posts={data.allMatchedMetdata} />
+	<PostsList posts={data.posts} />
 </div>