feat: add blog

src/pages/workshop/index.astro

@@ -1,4 +1,4 @@
-<!-----
+<!-- ---
 import "../../styles/global.css"
 import Layout from "../../layouts/Layout.astro"
 import { getCollection } from 'astro:content';
@@ -32,26 +32,21 @@ const posts = (await getCollection('workshop'))
                 alt={post.data.title}
                 width={800}
                 height={450}
-                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                class="w-full h-full object-cover grayscale group-hover:grayscale-0 group-hover:scale-105 transition-all duration-300"
                 loading="lazy"
               />
             </div>
           )}
-          
           <div class="p-4 sm:p-6 flex flex-col flex-grow">
             {/* Title */}
             <h2 class="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-neutral-100 group-hover:text-neutral-700 dark:group-hover:text-neutral-300 transition-colors mb-2 line-clamp-2">
               {post.data.title}
             </h2>
-            
-            {/* Subtitle/Description */}
             {post.data.description && (
               <p class="text-sm sm:text-base text-neutral-600 dark:text-neutral-400 mb-4 line-clamp-3 leading-relaxed flex-grow">
                 {post.data.description}
               </p>
             )}
-            
-            {/* Tags */}
             {post.data.tags && post.data.tags.length > 0 && (
               <div class="flex flex-wrap gap-1.5 mb-4">
                 {post.data.tags.slice(0, 3).map((tag) => (
@@ -66,8 +61,6 @@ const posts = (await getCollection('workshop'))
                 )}
               </div>
             )}
-            
-            {/* Publication Date */}
             {post.data.pubDate && (
               <div class="flex items-center text-xs sm:text-sm text-neutral-500 dark:text-neutral-400 mt-auto">
                 <svg class="w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">