feat: add recommended blog post depending on current post tags (#514)

apps/classroomio-com/src/lib/Blog/BlogListItem.svelte

@@ -0,0 +1,45 @@
+<script>
+  import Chip from '$lib/Chip/Chip.svelte';
+  import { formatDate } from '$lib/utils/formatDate';
+
+  export let post;
+  export let isRecommended = false;
+</script>
+
+{#if !isRecommended}
+  <div class="mb-5 flex md:flex-row flex-col md:items-center gap-2">
+    <!-- Date -->
+    <p class="text-sm text-slate-500">{formatDate(post.date)}</p>
+
+    <!-- Tags  -->
+    <div class="flex flex-col">
+      <div class="flex flex-wrap gap-2">
+        {#each post.tags as tag}
+          <Chip label={tag} />
+        {/each}
+      </div>
+    </div>
+  </div>
+{/if}
+
+<a href="/blog/{post.slug}" class="group">
+  <img
+    loading="lazy"
+    src={post.imageUrl}
+    alt={post.title}
+    class="w-70 h-48 object-cover rounded-md"
+  />
+  <p class="font-bold text-lg py-2 h-[60px] line-clamp-2 group-hover:text-slate-500">
+    {@html post.title}
+  </p>
+
+  <p class="text-slate-500 pt-2 mb-4 line-clamp-3">{post.description}</p>
+</a>
+
+<div class="flex items-center justify-start gap-4 my-2">
+  <img loading="lazy" src={post.avatar} alt="avatar" class="w-10 h-10 rounded-full" />
+  <span>
+    <p class="font-semibold">{post.author}</p>
+    <p class="text-slate-500">{post.role}</p>
+  </span>
+</div>

apps/classroomio-com/src/lib/types.ts

@@ -1,5 +1,10 @@
 export type Categories = 'sveltekit' | 'svelte';
 
+export type RawBlogPost = {
+  metadata: BlogPost;
+  default: any;
+};
+
 export type BlogPost = {
   title: string;
   slug: string;