Update blog metrics; add vercel imsights

src/components/analytics.tsx

@@ -0,0 +1,11 @@
+import { Analytics } from "@vercel/analytics/react";
+import { SpeedInsights } from "@vercel/speed-insights/react";
+
+export default function VercelAnalytics() {
+  return (
+    <>
+      <Analytics />
+      <SpeedInsights />
+    </>
+  );
+}

src/components/blog/post-list.tsx

@@ -77,7 +77,7 @@ export const BlogPostList = ({ posts }: BlogPostListProps) => {
                           className="text-xs md:text-base text-aqua hover:text-aqua-bright transition-colors duration-200"
                           onClick={(e) => {
                             e.preventDefault();
-                            window.location.href = `/blog/tag/${tag}`;
+                            window.location.href = `/blog/tags/${encodeURIComponent(tag)}`;
                           }}
                         >
                           #{tag}

src/components/blog/tag-list.tsx

@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
+import { AnimateIn } from "@/components/animate-in";
 
 interface BlogPost {
   title: string;
@@ -11,47 +12,49 @@ interface TagListProps {
   posts: BlogPost[];
 }
 
-const TagList: React.FC<TagListProps> = ({ posts }) => {
-  const spectrumColors = [
-    'text-red-bright',
-    'text-orange-bright',
-    'text-yellow-bright',
-    'text-green-bright',
-    'text-aqua-bright',
-    'text-blue-bright',
-    'text-purple-bright'
-  ];
+const spectrumColors = [
+  'text-red-bright',
+  'text-orange-bright',
+  'text-yellow-bright',
+  'text-green-bright',
+  'text-aqua-bright',
+  'text-blue-bright',
+  'text-purple-bright'
+];
 
+const sizeClasses = [
+  'text-3xl sm:text-4xl',
+  'text-2xl sm:text-3xl',
+  'text-xl sm:text-2xl',
+  'text-lg sm:text-xl',
+  'text-base sm:text-lg',
+];
+
+const TagList = ({ posts }: TagListProps) => {
   const tagData = useMemo(() => {
     if (!Array.isArray(posts)) return [];
-    
-    const tagMap = new Map();
+
+    const tagMap = new Map<string, number>();
     posts.forEach(post => {
-      if (post?.data?.tags && Array.isArray(post.data.tags)) {
-        post.data.tags.forEach(tag => {
-          if (!tagMap.has(tag)) {
-            tagMap.set(tag, {
-              name: tag,
-              count: 1
-            });
-          } else {
-            const data = tagMap.get(tag);
-            data.count++;
-          }
-        });
-      }
+      post?.data?.tags?.forEach(tag => {
+        tagMap.set(tag, (tagMap.get(tag) || 0) + 1);
+      });
     });
 
-    const tagArray = Array.from(tagMap.values());
-    const maxCount = Math.max(...tagArray.map(t => t.count));
-    
-    return tagArray
-      .sort((a, b) => b.count - a.count)
-      .map((tag, index) => ({
-        ...tag,
-        color: spectrumColors[index % spectrumColors.length],
-        frequency: tag.count / maxCount
-      }));
+    const tags = Array.from(tagMap.entries())
+      .sort((a, b) => b[1] - a[1]);
+    const maxCount = tags[0]?.[1] || 1;
+
+    return tags.map(([name, count], i) => {
+      const ratio = count / maxCount;
+      const sizeIndex = ratio > 0.8 ? 0 : ratio > 0.6 ? 1 : ratio > 0.4 ? 2 : ratio > 0.2 ? 3 : 4;
+      return {
+        name,
+        count,
+        color: spectrumColors[i % spectrumColors.length],
+        size: sizeClasses[sizeIndex],
+      };
+    });
   }, [posts]);
 
   if (tagData.length === 0) {
@@ -63,50 +66,25 @@ const TagList: React.FC<TagListProps> = ({ posts }) => {
   }
 
   return (
-    <div className="flex-1 w-full bg-background p-4">
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-        {tagData.map(({ name, count, color, frequency }) => (
+    <div className="flex flex-wrap items-baseline justify-center gap-x-6 gap-y-4 sm:gap-x-8 sm:gap-y-5 px-4 py-8 max-w-4xl mx-auto">
+      {tagData.map(({ name, count, color, size }, i) => (
+        <AnimateIn key={name} delay={i * 50}>
           <a
-            key={name}
             href={`/blog/tags/${encodeURIComponent(name)}`}
             className={`
-              group relative
-              flex flex-col items-center justify-center
-              min-h-[5rem]
-              px-6 py-4 rounded-lg
-              text-xl
-              transition-all duration-300 ease-in-out
-              hover:scale-105
-              hover:bg-foreground/5
-              ${color}
+              ${color} ${size}
+              font-medium
+              hover:opacity-70 transition-opacity duration-200
+              cursor-pointer whitespace-nowrap
             `}
           >
-            {/* Main tag display */}
-            <div className="font-medium text-center">
-              #{name}
-            </div>
-            
-            {/* Post count */}
-            <div className="mt-2 text-base opacity-60">
-              {count} post{count !== 1 ? 's' : ''}
-            </div>
-
-            {/* Background gradient */}
-            <div 
-              className="absolute inset-0 -z-10 rounded-lg opacity-10"
-              style={{
-                background: `
-                  linear-gradient(
-                    45deg,
-                    currentColor ${frequency * 100}%,
-                    transparent
-                  )
-                `
-              }}
-            />
+            #{name}
+            <span className="text-foreground/30 text-xs ml-1 align-super">
+              {count}
+            </span>
           </a>
-        ))}
-      </div>
+        </AnimateIn>
+      ))}
     </div>
   );
 };

src/components/blog/tagged-posts.tsx

@@ -0,0 +1,123 @@
+import { AnimateIn } from "@/components/animate-in";
+import { RssIcon, TagIcon, TrendingUpIcon } from "lucide-react";
+
+type BlogPost = {
+  id: string;
+  data: {
+    title: string;
+    author: string;
+    date: string;
+    tags: string[];
+    description: string;
+    image?: string;
+    imagePosition?: string;
+  };
+};
+
+interface TaggedPostsProps {
+  tag: string;
+  posts: BlogPost[];
+}
+
+const formatDate = (dateString: string) => {
+  return new Date(dateString).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  });
+};
+
+const TaggedPosts = ({ tag, posts }: TaggedPostsProps) => {
+  return (
+    <div className="w-full max-w-6xl mx-auto">
+      <div className="w-full px-4 pt-24 sm:pt-24">
+        <AnimateIn>
+          <h1 className="text-2xl sm:text-3xl font-bold text-purple mb-3 text-center px-4 leading-relaxed">
+            #{tag}
+          </h1>
+        </AnimateIn>
+        <AnimateIn delay={100}>
+          <div className="flex flex-wrap justify-center gap-4 mb-12 text-sm sm:text-base">
+            <a
+              href="/rss"
+              className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-background border border-foreground/20 text-orange hover:text-orange-bright hover:border-orange/50 transition-colors duration-200"
+            >
+              <RssIcon className="w-4 h-4" />
+              <span>RSS Feed</span>
+            </a>
+            <a
+              href="/blog/tags"
+              className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-background border border-foreground/20 text-aqua hover:text-aqua-bright hover:border-aqua/50 transition-colors duration-200"
+            >
+              <TagIcon className="w-4 h-4" />
+              <span>Browse Tags</span>
+            </a>
+            <a
+              href="/blog/popular"
+              className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-background border border-foreground/20 text-blue hover:text-blue-bright hover:border-blue/50 transition-colors duration-200"
+            >
+              <TrendingUpIcon className="w-4 h-4" />
+              <span>Most Popular</span>
+            </a>
+          </div>
+        </AnimateIn>
+      </div>
+
+      <ul className="space-y-6 md:space-y-10">
+        {posts.map((post, i) => (
+          <AnimateIn key={post.id} delay={200 + i * 80}>
+            <li className="group px-4 md:px-0">
+              <a href={`/blog/${post.id}`} className="block">
+                <article className="flex flex-col md:flex-row md:items-center gap-4 md:gap-8 p-2 md:p-4 border-b border-foreground/20 last:border-b-0 rounded-lg group-hover:outline group-hover:outline-2 group-hover:outline-purple transition-all duration-200">
+                  <div className="w-full md:w-1/3 aspect-[16/9] overflow-hidden rounded-lg bg-background flex-shrink-0">
+                    <img
+                      src={post.data.image || "/blog/placeholder.png"}
+                      alt={post.data.title}
+                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                      style={{ objectPosition: post.data.imagePosition || "center center" }}
+                    />
+                  </div>
+                  <div className="w-full md:w-2/3 flex flex-col gap-2 md:gap-3">
+                    <div className="space-y-1.5 md:space-y-3">
+                      <h2 className="text-lg md:text-2xl font-semibold text-yellow group-hover:text-purple transition-colors duration-200 line-clamp-2">
+                        {post.data.title}
+                      </h2>
+                      <div className="flex flex-wrap items-center gap-2 md:gap-3 text-sm md:text-base text-foreground/80">
+                        <span className="text-orange">{post.data.author}</span>
+                        <span className="text-foreground/50">&bull;</span>
+                        <time dateTime={post.data.date} className="text-blue">
+                          {formatDate(post.data.date)}
+                        </time>
+                      </div>
+                    </div>
+                    <p className="text-foreground/90 text-sm md:text-lg leading-relaxed line-clamp-2 mt-0.5 md:mt-0">
+                      {post.data.description}
+                    </p>
+                    <div className="flex flex-wrap gap-1.5 md:gap-3 mt-1 md:mt-2">
+                      {post.data.tags.map((t) => (
+                        <span
+                          key={t}
+                          className={`text-xs md:text-base transition-colors duration-200 ${
+                            t === tag ? "text-aqua-bright" : "text-aqua hover:text-aqua-bright"
+                          }`}
+                          onClick={(e) => {
+                            e.preventDefault();
+                            window.location.href = `/blog/tags/${encodeURIComponent(t)}`;
+                          }}
+                        >
+                          #{t}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                </article>
+              </a>
+            </li>
+          </AnimateIn>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default TaggedPosts;