Layouts for feed and /blog

src/lib/components/blog/CategoryFilter.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import type { Tag } from '$lib/types/post';
 	export let selected: Tag | null = null;
-	let className = '';
+	export let className = '';
-	export { className as class };
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 
-	let options: Tag[] = ['DevOps', 'Philosophy', 'Updates'];
+	const tags: Tag[] = ['Blog', 'Projects', 'Updates'];
 
 	const clickHandler = (value: Tag) => {
 		if (value === selected) {
@@ -24,7 +23,7 @@
 <section class="flex justify-center flex-col items-center {className}">
 	<h3 class="h3 mb-2 md:mb-3">Sort by category</h3>
 	<ul class="flex flex-wrap justify-center gap-2">
-		{#each options as option}
+		{#each tags as option}
 			<li>
 				<button
 					class="chip {option === selected

src/lib/components/blog/Feed.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import Preview from '$lib/components/blog/Preview.svelte';
+	import CategoryFilter from '$lib/components/blog/CategoryFilter.svelte';
+	import type { Post, Tag } from '$lib/types/post';
+	import { H_ELLIPSIS_ENTITY } from '$lib/constants';
+	import { page } from '$app/stores';
+	import { onMount } from 'svelte';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+	export let posts: Post[] = [];
+
+	let filter: Tag | null = null;
+	export const displayAmount = 8;
+
+	$: showPosts = displayAmount;
+	$: postCount = posts.length;
+	$: posts = data.posts.filter((post: Post) => (filter ? post.tags?.includes(filter) : true));
+	$: displayPosts = posts.slice(displayAmount);
+
+	const handleClick = () => {
+		showPosts += displayAmount;
+	};
+
+	onMount(() => {
+		const tagParam = $page.url.searchParams.get('tag');
+
+		if (!filter && typeof tagParam == 'string') {
+			filter = tagParam as Tag;
+		}
+	});
+</script>
+
+<section role="feed">
+	<div class="space-y-8">
+		<header class="flex flex-col justify-center items-center">
+			<h1 class="h1 m-4">Blog</h1>
+			<CategoryFilter className="mb-2 md:mb-4" bind:selected={filter} />
+		</header>
+		<div
+			class="grid m-auto max-w-7xl w-full gap-6 grid-cols-none justify-center md:grid-cols-2 lg:grid-cols-3"
+		>
+			{#each posts.slice(0, displayAmount) as post, index}
+				<article
+					class="flex justify-center min-w-[20rem] max-w-sm"
+					aria-posinset={index + 1}
+					aria-setsize={postCount}
+				>
+					<Preview {post} type="blog" />
+				</article>
+			{:else}
+				<p>No posts yet!</p>
+			{/each}
+		</div>
+	</div>
+
+	{#if posts.slice(displayAmount).length > 0}
+		<div>
+			<h2 class="mb-4 text-center">Previous posts</h2>
+			<div
+				class="previous grid m-auto max-w-7xl w-full gap-6 grid-cols-none justify-center md:grid-cols-2 lg:grid-cols-3"
+			>
+				{#each displayPosts as post}
+					<div class="flex justify-center min-w-[20rem] max-w-sm">
+						<Preview {post} type="blog" />
+					</div>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	{#if showPosts < postCount}
+		<button type="submit" on:click={handleClick}>See more {H_ELLIPSIS_ENTITY}</button>
+	{/if}
+</section>

src/lib/components/blog/Preview.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import { isAnExternalLink, generateURL } from '$lib/utils/helpers';
+	import type { Post } from '$lib/types/post';
+	import { onMount, onDestroy } from 'svelte';
+	import { formatDate } from '$lib/utils/blog';
+
+	export let type: Post['type'];
+	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: string | number | NodeJS.Timeout | undefined;
+
+	onMount(() => {
+		const interval = setInterval(() => {
+			console.log(window.innerWidth);
+			iteration++;
+
+			if (iteration === 50) {
+				clearInterval(interval);
+			}
+		}, 1000);
+	});
+
+	$: href = generateURL(post['href'], post.type, post.slug);
+
+	$: target = post && post['href'] && isAnExternalLink(post['href']) ? '_blank' : undefined;
+
+	onDestroy(() => {
+		clearInterval(interval);
+	});
+</script>
+
+<a
+	{href}
+	{target}
+	class="card bg-gradient-to-br variant-glass-primary card-hover overflow-hidden flex flex-col space-y-4"
+>
+	<!-- Blog in long cols, projects in wide rows -->
+	<div class="flex {type === 'blog' ? 'flex-col' : 'flex-row'} justify-between w-full h-full">
+		<header>
+			<!-- <img
+				src={`/images/${type}/${post.slug}/${post.image}`}
+				class="bg-black/200 w-full aspect-[3/2]"
+				alt="Post preview"
+			/> -->
+			<img
+				src={post.featuredImage}
+				alt={post.title}
+				class="bg-black/200 h-[448px] w-[672px] aspect-[3/2]"
+			/>
+		</header>
+		<section class="p-4 space-y-4">
+			<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}
+					<!-- cspell:enable -->
+				</p>
+			</article>
+		</section>
+		<section>
+			<hr class="opacity-30 bg-tertiary-500" />
+			<footer class="p-4 flex justify-between">
+				<div class="flex flex-wrap gap-2">
+					{#if post.tags && post.tags.length > 0}
+						<small>tags: </small>
+						{#each post.tags as tag}
+							<a
+								data-sveltekit-preload-data="hover"
+								href="/blog?{new URLSearchParams({ tag }).toString()}"
+								class="chip variant-glass-secondary"
+							>
+								<p class="text-md text-token">{tag}</p>
+							</a>
+						{/each}
+					{/if}
+				</div>
+				<div class="mt-auto">
+					<small>
+						{#if post.datePublished}
+							<span class="text-sm ml-4">
+								{formatDate(post.datePublished)}
+							</span>
+						{/if}
+					</small>
+				</div>
+			</footer>
+		</section>
+	</div>
+</a>