Add typeahead search for the blog index page

Author: zackproser

src/actions/tool-actions.ts

@@ -63,4 +63,29 @@ export async function getAllTools(): Promise<Tool[]> {
     console.error("Error fetching tools:", error)
     return []; // Return empty array on error
   }
+}
+
+export async function getToolBySlug(slug: string): Promise<Tool | null> {
+  console.log(`Fetching tool by slug: ${slug} (using Prisma)`)
+  try {
+    // Convert slug back to a readable name for searching
+    const searchName = slug
+      .split('-')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ');
+    
+    const tool = await prisma.tool.findFirst({
+      where: { 
+        OR: [
+          { name: { equals: searchName, mode: 'insensitive' } },
+          { name: { contains: slug, mode: 'insensitive' } },
+          { name: { contains: searchName, mode: 'insensitive' } }
+        ]
+      }
+    });
+    return tool;
+  } catch (error) {
+    console.error("Error fetching tool by slug:", error)
+    return null;
+  }
 } 

src/app/blog/blog-client.tsx

@@ -4,33 +4,40 @@ import { useState, useEffect } from "react";
 import { Search } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { ContentCard } from "@/components/ContentCard";
+import { track } from "@vercel/analytics";
+import debounce from "lodash.debounce";
 import type { ArticleWithSlug } from "@/types";
 
 interface BlogClientProps {
   articles: ArticleWithSlug[];
   years: string[];
-  allTags: string[];
 }
 
-export default function BlogClient({ articles, years, allTags }: BlogClientProps) {
+export default function BlogClient({ articles, years }: BlogClientProps) {
   const [searchTerm, setSearchTerm] = useState("");
   const [selectedYear, setSelectedYear] = useState("");
-  const [selectedTag, setSelectedTag] = useState("");
   const [filteredArticles, setFilteredArticles] = useState<ArticleWithSlug[]>(articles);
-  const [view, setView] = useState("grid");
+
+  // Debounced tracking function for search analytics
+  const debouncedTrack = debounce((query: string) => {
+    if (query.trim()) {
+      track('blog-search', { term: query });
+    }
+  }, 1200);
 
   useEffect(() => {
-    let filtered = articles;
+    let filtered = [...articles];
+
+    // Sort articles by date in chronological order (newest first)
+    filtered.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
 
     if (searchTerm) {
       const term = searchTerm.toLowerCase();
@@ -45,40 +52,40 @@ export default function BlogClient({ articles, years, allTags }: BlogClientProps
       filtered = filtered.filter((article) => article.date.startsWith(selectedYear));
     }
 
-    if (selectedTag && selectedTag !== "All Tags") {
-      filtered = filtered.filter((article) => Array.isArray(article.tags) && article.tags.includes(selectedTag));
-    }
-
     setFilteredArticles(filtered);
-  }, [searchTerm, selectedYear, selectedTag, articles]);
+  }, [searchTerm, selectedYear, articles]);
+
+  const handleSearchChange = (value: string) => {
+    setSearchTerm(value);
+    debouncedTrack(value);
+  };
 
   const resetFilters = () => {
     setSearchTerm("");
     setSelectedYear("");
-    setSelectedTag("");
   };
 
   return (
     <div className="w-full">
-      <header className="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 sticky top-0 z-10">
-        <div className="container mx-auto px-4 py-6">
-          <h1 className="text-4xl font-bold text-slate-900 dark:text-white mb-2">Blog</h1>
-          <p className="text-slate-600 dark:text-slate-400 max-w-2xl">
-            My thoughts on engineering, AI, and modern development.
+      <div className="container mx-auto px-4 py-16">
+        <div className="text-center mb-12">
+          <h1 className="text-5xl font-bold text-slate-900 dark:text-white mb-4">
+            I write to learn, and publish to share
+          </h1>
+          <p className="text-xl text-slate-600 dark:text-slate-400 max-w-3xl mx-auto">
+            All of my technical tutorials, musings and developer rants
           </p>
         </div>
-      </header>
 
-      <div className="container mx-auto px-4 py-8">
-        <div className="bg-white dark:bg-slate-900 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 p-4 mb-8">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="bg-white dark:bg-slate-900 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 p-4 mb-8 max-w-4xl mx-auto">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div className="relative">
               <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" size={18} />
               <Input
                 placeholder="Search articles..."
                 className="pl-10"
                 value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
+                onChange={(e) => handleSearchChange(e.target.value)}
               />
             </div>
 
@@ -95,20 +102,6 @@ export default function BlogClient({ articles, years, allTags }: BlogClientProps
                 ))}
               </SelectContent>
             </Select>
-
-            <Select value={selectedTag} onValueChange={setSelectedTag}>
-              <SelectTrigger className="bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700">
-                <SelectValue placeholder="Tag" />
-              </SelectTrigger>
-              <SelectContent className="bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700">
-                <SelectItem value="All Tags">All Tags</SelectItem>
-                {allTags.map((tag) => (
-                  <SelectItem key={tag} value={tag}>
-                    {tag}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
           </div>
 
           <div className="flex justify-between items-center mt-4">
@@ -123,82 +116,14 @@ export default function BlogClient({ articles, years, allTags }: BlogClientProps
 
         <div className="space-y-8">
           <section>
-            <h2 className="text-2xl font-semibold text-slate-900 dark:text-white mb-4">All Articles</h2>
-
-            <div className="flex items-center justify-end gap-2 mb-4">
-              <span className="text-sm text-slate-500 dark:text-slate-400">View:</span>
-              <Tabs value={view} onValueChange={setView} className="w-full">
-                <div className="flex justify-end">
-                  <TabsList className="grid w-[160px] grid-cols-2">
-                    <TabsTrigger value="grid">Grid</TabsTrigger>
-                    <TabsTrigger value="list">List</TabsTrigger>
-                  </TabsList>
-                </div>
-
-                <TabsContent value="grid" className="mt-4">
-                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                    {filteredArticles.map((article) => (
-                      <Card key={article.slug} className="overflow-hidden hover:shadow-md transition-shadow duration-300 h-full flex flex-col bg-white dark:bg-slate-800">
-                        <CardHeader className="pb-2">
-                          <div className="flex justify-between items-start">
-                            <div className="flex items-center text-sm text-slate-500 dark:text-slate-400">
-                              {new Date(article.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}
-                            </div>
-                          </div>
-                          <CardTitle className="text-xl font-bold hover:text-primary transition-colors">
-                            <a href={article.slug} className="flex items-center gap-1">
-                              {article.title}
-                            </a>
-                          </CardTitle>
-                          <CardDescription className="text-sm line-clamp-2 mt-1">
-                            {article.description}
-                          </CardDescription>
-                        </CardHeader>
-                        {article.tags && article.tags.length > 0 && (
-                          <CardContent className="pb-2 flex-grow">
-                            <div className="flex flex-wrap gap-1 mt-2">
-                              {article.tags.map((tag) => (
-                                <Badge key={tag} variant="secondary" className="text-xs">
-                                  {tag}
-                                </Badge>
-                              ))}
-                            </div>
-                          </CardContent>
-                        )}
-                      </Card>
-                    ))}
-                  </div>
-                </TabsContent>
-
-                <TabsContent value="list" className="mt-4">
-                  <div className="space-y-3">
-                    {filteredArticles.map((article) => (
-                      <div key={article.slug} className="flex flex-col gap-2 p-4 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 hover:shadow-sm transition-shadow">
-                        <h3 className="text-lg font-semibold mb-1">
-                          <a href={article.slug} className="hover:text-primary transition-colors">
-                            {article.title}
-                          </a>
-                        </h3>
-                        <p className="text-sm text-slate-600 dark:text-slate-400 mb-2 line-clamp-1">
-                          {article.description}
-                        </p>
-                        <div className="flex items-center justify-between">
-                          <div className="flex flex-wrap gap-1">
-                            {article.tags && article.tags.map((tag) => (
-                              <Badge key={tag} variant="secondary" className="text-xs">
-                                {tag}
-                              </Badge>
-                            ))}
-                          </div>
-                          <span className="text-sm text-slate-500 dark:text-slate-400">
-                            {new Date(article.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}
-                          </span>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </TabsContent>
-              </Tabs>
+            <h2 className="text-2xl font-semibold text-slate-900 dark:text-white mb-6 text-center">All Articles</h2>
+            
+            <div className="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40">
+              <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+                {filteredArticles.map((article) => (
+                  <ContentCard key={article.slug} article={article} />
+                ))}
+              </div>
             </div>
           </section>
         </div>

src/app/blog/page.tsx

@@ -20,8 +20,7 @@ export default async function ArticlesIndex() {
   const articles = await getAllContent('blog');
 
   const years = [...new Set(articles.map((a) => new Date(a.date).getFullYear().toString()))].sort((a, b) => parseInt(b) - parseInt(a));
-  const allTags = [...new Set(articles.flatMap((a) => a.tags ?? []))].sort();
 
-  return <BlogClient articles={articles} years={years} allTags={allTags} />;
+  return <BlogClient articles={articles} years={years} />;
 }
 

src/components/ui/skeleton.jsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton } 

src/utils/comparison-helpers.js

@@ -0,0 +1,44 @@
+/**
+ * Utility functions for tool comparison pages
+ */
+
+/**
+ * Convert a slug back to a readable tool name
+ * @param {string} slug - The slugified tool name
+ * @returns {string} - The readable tool name
+ */
+export function deslugifyToolName(slug) {
+  return slug
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+}
+
+/**
+ * Generate comparison prose for two tools
+ * @param {Object} tool1 - First tool object
+ * @param {Object} tool2 - Second tool object
+ * @returns {Array} - Array of prose paragraphs
+ */
+export function generateComparisonProse(tool1, tool2) {
+  const paragraphs = [];
+  
+  // Introduction paragraph
+  paragraphs.push(
+    `When comparing ${tool1.name} and ${tool2.name}, developers need to consider several key factors including ease of use, feature set, pricing, and integration capabilities. Both tools serve the developer community but with different approaches and strengths.`
+  );
+  
+  // Feature comparison
+  if (tool1.description && tool2.description) {
+    paragraphs.push(
+      `${tool1.name} focuses on ${tool1.description.toLowerCase()}, while ${tool2.name} emphasizes ${tool2.description.toLowerCase()}. This fundamental difference in approach affects how each tool fits into different development workflows.`
+    );
+  }
+  
+  // Use case paragraph
+  paragraphs.push(
+    `The choice between ${tool1.name} and ${tool2.name} often depends on your specific use case, team size, and technical requirements. Consider factors like learning curve, community support, and long-term maintenance when making your decision.`
+  );
+  
+  return paragraphs;
+}