blog / projects logic update

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>

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 type: Post['type'] = 'blog' | 'projects';
-	export let post: BlogPost;
+	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}`;
@@ -24,6 +40,9 @@
 		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>
+			<h2 class="h2 text-ellipsis overflow-hidden" data-toc-ignore>{post.title}</h2>
-			<article>
+			<article class="text-ellipsis break-words overflow-hidden max-h-[128px] max-w-4">
 				<p>
 					<!-- cspell:disable -->
 					{post.excerpt}

src/lib/components/projects/ProjectsContentLayout.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import type { Project } from '$lib/types/projects';
+	import ProjectLayout from '$lib/components/blog/PostLayout.svelte';
-	import ProjectContentLayout from '../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>

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[]) {

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;

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');
+}

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

@@ -1,5 +1,4 @@
 import { listProjects } from '$content/projects';
-import type { LayoutServerLoad } from './$types';
 
 export const load = () => {
 	return {