From 1e11512b21a3742f835886621aa7411bdeea2481 Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Sat, 6 Jul 2024 17:15:34 +0200
Subject: [PATCH] Add blog post view

---
 src/global.scss                        |  4 +++
 src/lib/cms/blog.ts                    | 36 ++++++++++++++++++++++++++
 src/routes/+layout.svelte              | 29 ++++++++++++++-------
 src/routes/blog/+page.server.ts        |  1 +
 src/routes/blog/+page.svelte           |  2 +-
 src/routes/blog/[slug]/+page.server.ts | 26 +++++++++++++++++++
 src/routes/blog/[slug]/+page.svelte    | 12 +++++++++
 7 files changed, 100 insertions(+), 10 deletions(-)
 create mode 100644 src/routes/blog/[slug]/+page.server.ts

diff --git a/src/global.scss b/src/global.scss
index 001ea82..3abddf3 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -17,6 +17,10 @@
     }
   }
 
+  .page {
+    position: relative;
+  }
+
   .flex-row {
     display: flex;
     flex-direction: row;
diff --git a/src/lib/cms/blog.ts b/src/lib/cms/blog.ts
index 5905732..00e7097 100644
--- a/src/lib/cms/blog.ts
+++ b/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",
+		},
+	});
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4866a02..f1eb555 100644
--- a/src/routes/+layout.svelte
+++ b/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="content">
-  <slot />
-</div>
-<div class="footer-position">
-<Footer/>
+<div class="page">
+  <Header />
+  <div class="content">
+    <slot />
+  </div>
+  <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;
-      bottom: 0;
+      margin-top: auto;
     }
   }
 </style>
diff --git a/src/routes/blog/+page.server.ts b/src/routes/blog/+page.server.ts
index 6cd3194..43eda61 100644
--- a/src/routes/blog/+page.server.ts
+++ b/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);
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 761c4e2..6a7a3d9 100644
--- a/src/routes/blog/+page.svelte
+++ b/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";
 
diff --git a/src/routes/blog/[slug]/+page.server.ts b/src/routes/blog/[slug]/+page.server.ts
new file mode 100644
index 0000000..e478ca4
--- /dev/null
+++ b/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,
+			},
+		};
+	}
+};
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
index e69de29..e8e3078 100644
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/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}