Blog Layout improvements, css revision

src/content/blog/third-post.md

@@ -0,0 +1,15 @@
+---
+title: Third post
+excerpt: This is the most interesting post that you will ever read. It is the third post, which is extremely interesting and I am too lazy to even input lorem ipsum xd.
+date: 2023-01-01
+tags:
+    - first
+    - post
+published: true
+image: Feature.jpg
+
+---
+
+## Svelte
+
+Media inside the **Svelte** folder is server from the `static` folder.

src/lib/components/blog/BlogLayout.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import PostContentLayout from './PostLayout.svelte';
+	import PostLayout from './PostLayout.svelte';
 
 	import type { BlogPost } from '$lib/types/blog';
 
 	export let post: BlogPost;
 </script>
 
-<PostContentLayout {...post} imagesDirectoryName="blog">
+<PostLayout {...post} imagesDirectoryName="blog">
 	<slot />
-</PostContentLayout>
+</PostLayout>

src/lib/components/blog/CategoryFilter.svelte

@@ -6,7 +6,7 @@
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 
-	let options: BlogTag[] = ['Projects', 'Blog', 'Updates'];
+	let options: BlogTag[] = ['DevOps', 'AI', 'Updates'];
 
 	const clickHandler = (value: BlogTag) => {
 		if (value === selected) {
@@ -22,12 +22,18 @@
 </script>
 
 <section class="flex justify-center flex-col items-center {className}">
-	<p class="text-semibold mb-2 md:mb-4">Sort by category</p>
+	<header class="flex flex-col justify-center items-center">
+		<h1 class="h1">Blog</h1>
+		<span />
+	</header>
+	<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}
 			<li>
 				<button
-					class="btn btn-md variant-filled-primary"
+					class="chip {option === selected
+						? 'variant-filled-tertiary'
+						: 'variant-soft-primary'}"
 					on:click={() => clickHandler(option)}
 				>
 					{option}

src/lib/components/blog/PostLayout.svelte

@@ -11,7 +11,7 @@
 	export let tags: string[] = [];
 </script>
 
-<article>
+<article class="text-token">
 	<div class="flex justify-center mt-4 mb-8">
 		<div class="w-full lg:w-[50rem] leading-[177.7%]">
 			<header>

src/lib/components/blog/PostPreview.svelte

@@ -2,8 +2,10 @@
 	import { isAnExternalLink } from '$lib/utils/helpers';
 	import type { BlogPost } from '$lib/types/blog';
 
+	export let isMostRecent: boolean = false;
+	export let type: 'blog' | 'projects';
+	export let layout: 'row' | 'column' = 'column';
 	export let post: BlogPost;
-	export let type: 'blog';
 	// export let published: boolean;
 	// export let headlineOrder: 'h3' | '' = '';
 	// export let badge: string = '';
@@ -25,58 +27,72 @@
 	});
 </script>
 
-<a
+<div class="grid auto-rows-auto w-full h-full text-token">
-	{href}
+	<a
-	{target}
+		{href}
-	data-sveltekit-preload-data="hover"
+		{target}
-	class="card"
+		data-sveltekit-preload-data="hover"
-	data-analytics={`{"context":"grid","variant":"preview"}`}
+		class="card bg-gradient-to-br variant-gradient-primary-secondary card-hover overflow-hidden flex flex-col space-y-4"
->
+		data-analytics={`{"context":"grid","variant":"preview"}`}
-	<div class="w-full text-token grid grid-cols-1 md:grid-cols-2 gap-4">
+	>
 		<!-- Detailed -->
-		<a
+		<!-- <a
-			class="card bg-gradient-to-br variant-gradient-tertiary-primary card-hover overflow-hidden"
+				class="card "
-			href="/blog/{post.slug}"
+				href="/blog/{post.slug}"
-		>
+			> -->
-			<header>
+		<header>
-				<img
+			<img
-					src="/images/blog/{post.slug}/{post.image}"
+				src="/images/blog/{post.slug}/{post.image}"
-					class="bg-black/50 w-full aspect-[21/9]"
+				class="bg-black/50 w-full aspect-[3/2]"
-					alt="Post"
+				alt="Post"
-				/>
+			/>
-			</header>
+		</header>
-			<div class="p-4 space-y-4">
+		<section class="p-4 space-y-4">
-				<h6 class="text-2" data-toc-ignore>
+			<h6 class="text-2" data-toc-ignore>
-					<div class="items-center flex gap-2">
+				<div class="items-center flex gap-2">
-						{#if post.tags}
+					{#if post.tags}
-							{#each post.tags as tag}
+						{#each post.tags as tag}
-								<span class="chip variant-ghost-surface">{tag}</span>
+							<span class="chip variant-ghost-tertiary">{tag}</span>
-							{/each}
+						{/each}
-						{/if}
+					{/if}
-					</div>
-				</h6>
-				<h3 class="h3" data-toc-ignore>{post.title}</h3>
-				<article>
-					<p>
-						<!-- cspell:disable -->
-						{post.excerpt}
-						<!-- cspell:enable -->
-					</p>
-				</article>
-			</div>
-			<hr class="opacity-50" />
-			<footer class="p-4 flex justify-start items-center space-x-4">
-				<div class="flex-auto flex justify-between items-center">
-					<h6 class="font-bold" data-toc-ignore>By Matt</h6>
-					<small>
-						{#if post.date}
-							<span class="date text-p-small ml-macro">
-								{displayDate}
-							</span>
-						{/if}
-					</small>
 				</div>
-			</footer>
+			</h6>
-		</a>
+			<h3 class="h3" data-toc-ignore>{post.title}</h3>
-	</div>
+			<article>
-</a>
+				<p>
+					<!-- cspell:disable -->
+					{post.excerpt}
+					<!-- cspell:enable -->
+				</p>
+			</article>
+		</section>
+		<hr class="opacity-50" />
+		<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()}"
+						>
+							<h6 class="chip variant-ghost-surface">{tag}</h6>
+						</a>
+					{/each}
+				{/if}
+			</div>
+			<div class="mt-auto">
+				<small>
+					{#if post.date}
+						<span class="text-sm ml-4">
+							{displayDate}
+						</span>
+					{/if}
+				</small>
+			</div>
+		</footer>
+	</a>
+</div>
+
+<style lang="postcss">
+</style>