Add blog post view

src/global.scss

@@ -17,6 +17,10 @@
     }
   }
 
+  .page {
+    position: relative;
+  }
+
   .flex-row {
     display: flex;
     flex-direction: row;

src/lib/cms/blog.ts

@@ -23,6 +23,12 @@ export type BlogPostTeaser = {
 	};
 };
 
+export type BlogPost = BlogPostTeaser & {
+	attributes: {
+		content: any;
+	};
+};
+
 export async function getPosts(locale = "all"): Promise<BlogPostTeaser[]> {
 	return await fetchApi<BlogPostTeaser[]>({
 		endpoint: "blog-posts",
@@ -46,3 +52,33 @@ export async function getPosts(locale = "all"): Promise<BlogPostTeaser[]> {
 		},
 	});
 }
+
+export async function getPost(slug: string): Promise<BlogPost> {
+	return await fetchApi<BlogPost>({
+		endpoint: "blog-posts",
+		wrappedByKey: "data",
+		wrappedByList: true,
+		query: {
+			populate: {
+				author: {
+					populate: ["slug", "name"],
+				},
+				collection: {
+					populate: ["slug", "name"],
+				},
+				tags: {
+					populate: ["slug", "name"],
+				},
+				teaserImage: {
+					populate: "*",
+				},
+			},
+			filters: {
+				slug: {
+					$eq: slug,
+				},
+			},
+			locale: "all",
+		},
+	});
+}

src/routes/+layout.svelte

@@ -1,15 +1,17 @@
 <script>
   import "../global.scss";
   import Header from "../components/organisms/Header.svelte";
-    import Footer from "../components/organisms/Footer.svelte";
+  import Footer from "../components/organisms/Footer.svelte";
 </script>
 
-<Header />
+<div class="page">
-<div class="content">
+  <Header />
-  <slot />
+  <div class="content">
-</div>
+    <slot />
-<div class="footer-position">
+  </div>
-<Footer/>
+  <div class="footer-position">
+    <Footer />
+  </div>
 </div>
 
 <style lang="scss">
@@ -18,6 +20,16 @@
   @layer default, layout;
 
   @layer layout {
+    .page {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      margin: 0;
+      min-height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
     .content {
       margin: 0 20%;
       transition-duration: 1s;
@@ -35,8 +47,7 @@
     .footer-position {
       margin: 0;
       width: 100%;
-      position: absolute;
+      margin-top: auto;
-      bottom: 0;
     }
   }
 </style>

src/routes/blog/+page.server.ts

@@ -8,6 +8,7 @@ export const load: PageLoad = async ({ params }: { params: unknown }) => {
 
 		return {
 			posts,
+			error: undefined,
 		};
 	} catch (err: any) {
 		console.error(err);

src/routes/blog/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { PageData } from "../$types";
+  import type { PageData } from "./$types";
   import Error from "../../components/molecules/Error.svelte";
   import BlogPostTeaser from "../../components/organisms/BlogPostTeaser.svelte";
 

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

@@ -0,0 +1,26 @@
+import { getPost, getPosts } from "$lib/cms/blog";
+import { error } from "@sveltejs/kit";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async ({
+	params,
+}: { params: { slug: string } }) => {
+	try {
+		const slug = params.slug;
+		const post = await getPost(slug);
+
+		return {
+			post,
+			error: undefined,
+		};
+	} catch (err: any) {
+		console.error(err);
+		return {
+			posts: [],
+			error: {
+				message: "Could not load blog post :(",
+				code: 500,
+			},
+		};
+	}
+};

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import Error from "../../../components/molecules/Error.svelte";
+  import type { PageData } from "./$types";
+
+  export let data: PageData;
+</script>
+
+<code>{JSON.stringify(data.post, null, 2)}</code>
+
+{#if data.error}
+  <Error error={data.error} />
+{/if}