From 57584635f51d23f707c072e84ac303b2fbcf3b3b Mon Sep 17 00:00:00 2001
From: matthieu42morin <matthieu.bernard.morin@gmail.com>
Date: Thu, 4 Apr 2024 02:41:49 +0200
Subject: [PATCH] blog / projects logic update

---
 .../components/blog/BlogContentLayout.svelte  | 11 ++++++
 src/lib/components/blog/PostPreview.svelte    | 34 ++++++++++++++-----
 .../projects/ProjectsContentLayout.svelte     |  8 ++---
 src/routes/blog/[slug]/+layout.server.ts      |  3 +-
 src/routes/blog/[slug]/+page.svelte           |  2 +-
 src/routes/blog/feed/+page.server.ts          |  5 +++
 src/routes/projects/+page.server.ts           |  1 -
 7 files changed, 49 insertions(+), 15 deletions(-)
 create mode 100644 src/lib/components/blog/BlogContentLayout.svelte
 create mode 100644 src/routes/blog/feed/+page.server.ts

diff --git a/src/lib/components/blog/BlogContentLayout.svelte b/src/lib/components/blog/BlogContentLayout.svelte
new file mode 100644
index 0000000..02380c2
--- /dev/null
+++ b/src/lib/components/blog/BlogContentLayout.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import PostLayout from './PostLayout.svelte';
+
+	import type { Post } from '$lib/types/post';
+
+	export let post: Post;
+</script>
+
+<PostLayout {...post} imagesDirectoryName="blog">
+	<slot />
+</PostLayout>
diff --git a/src/lib/components/blog/PostPreview.svelte b/src/lib/components/blog/PostPreview.svelte
index 8754aab..c67706f 100644
--- a/src/lib/components/blog/PostPreview.svelte
+++ b/src/lib/components/blog/PostPreview.svelte
@@ -1,15 +1,31 @@
 <script lang="ts">
 	import { isAnExternalLink } from '$lib/utils/helpers';
-	import type { BlogPost } from '$lib/types/blog';
+	import type { Post } from '$lib/types/post';
+	import { onMount, onDestroy } from 'svelte';
 
 	export let isMostRecent: boolean = false;
-	export let type: 'blog' | 'projects';
-	export let post: BlogPost;
+	export let type: Post['type'] = 'blog' | 'projects';
+	export let post: Post;
 	// export let published: boolean;
 	// export let headlineOrder: 'h3' | '' = '';
 	// export let badge: string = '';
 	// export let textWidth: string = '';
 
+	//window width
+	let iteration = 0;
+	let interval;
+
+	onMount(() => {
+		const interval = setInterval(() => {
+			console.log(window.innerWidth);
+			iteration++;
+
+			if (iteration === 50) {
+				clearInterval(interval);
+			}
+		}, 1000);
+	});
+
 	const generateURL = (href?: string, slug?: string) => {
 		if (href) return href;
 		return `/${type}/${slug}`;
@@ -23,7 +39,10 @@
 		year: 'numeric',
 		month: 'short',
 		day: 'numeric'
-	});
+	}); 
+	onDestroy(() => {
+        clearInterval(interval);
+    });
 </script>
 
 <a
@@ -31,19 +50,18 @@
 	{target}
 	data-sveltekit-preload-data="hover"
 	class="card bg-gradient-to-br variant-glass-primary card-hover overflow-hidden flex flex-col space-y-4"
-	data-analytics={`{"context":"grid","variant":"preview"}`}
 >
 	<div class="flex flex-col justify-between auto-rows-auto w-full h-full text-token">
 		<header>
 			<img
 				src="/images/blog/{post.slug}/{post.image}"
 				class="bg-black/200 w-full aspect-[3/2]"
-				alt="Post"
+				alt="Post preview"
 			/>
 		</header>
 		<section class="p-4 space-y-4">
-			<h2 class="h2" data-toc-ignore>{post.title}</h2>
-			<article>
+			<h2 class="h2 text-ellipsis overflow-hidden" data-toc-ignore>{post.title}</h2>
+			<article class="text-ellipsis break-words overflow-hidden max-h-[128px] max-w-4">
 				<p>
 					<!-- cspell:disable -->
 					{post.excerpt}
diff --git a/src/lib/components/projects/ProjectsContentLayout.svelte b/src/lib/components/projects/ProjectsContentLayout.svelte
index 26695ae..ad1b8dd 100644
--- a/src/lib/components/projects/ProjectsContentLayout.svelte
+++ b/src/lib/components/projects/ProjectsContentLayout.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import type { Project } from '$lib/types/projects';
-	import ProjectContentLayout from '../blog/PostLayout.svelte';
+	import ProjectLayout from '$lib/components/blog/PostLayout.svelte';
+	import type { Post } from '$lib/types/post';
 
 	export let post: Project;
 </script>
 
-<ProjectContentLayout {...post} imagesDirectoryName="blog">
+<ProjectLayout {...post} imagesDirectoryName="projects">
 	<slot />
-</ProjectContentLayout>
+</ProjectLayout>
diff --git a/src/routes/blog/[slug]/+layout.server.ts b/src/routes/blog/[slug]/+layout.server.ts
index e78820f..7519c47 100644
--- a/src/routes/blog/[slug]/+layout.server.ts
+++ b/src/routes/blog/[slug]/+layout.server.ts
@@ -1,4 +1,5 @@
-import { listBlogPosts } from '$content/blog';
+// layout.server.ts
+import { listPosts } from '$content/blog';
 import { error } from '@sveltejs/kit';
 
 function shuffle<T>(array: T[]) {
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
index 5dbd929..9eb2451 100644
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/src/routes/blog/[slug]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import BlogContentLayout from '$lib/components/blog/BlogLayout.svelte';
+	import BlogContentLayout from '$lib/components/blog/BlogContentLayout.svelte';
 	import type { PageData } from './$types';
 
 	export let data: PageData;
diff --git a/src/routes/blog/feed/+page.server.ts b/src/routes/blog/feed/+page.server.ts
new file mode 100644
index 0000000..8a0d6d2
--- /dev/null
+++ b/src/routes/blog/feed/+page.server.ts
@@ -0,0 +1,5 @@
+import { redirect } from '@sveltejs/kit';
+
+export async function load() {
+	throw redirect(301, '/blog/rss.xml');
+}
diff --git a/src/routes/projects/+page.server.ts b/src/routes/projects/+page.server.ts
index 8a5b4cb..b9caa36 100644
--- a/src/routes/projects/+page.server.ts
+++ b/src/routes/projects/+page.server.ts
@@ -1,5 +1,4 @@
 import { listProjects } from '$content/projects';
-import type { LayoutServerLoad } from './$types';
 
 export const load = () => {
 	return {