Enhance comparisons

Author: zackproser

package.json

@@ -5,15 +5,14 @@
   "packageManager": "[email protected]",
   "scripts": {
     "dev": "concurrently \"next dev\" \"pnpm stripe:webhook\"",
-    "prebuild": "node scripts/check-metadata.js && node scripts/generate-collections.js && node scripts/create-vector-db-comparison-posts.js && node scripts/create-ai-assisted-dev-tools-comparison-post.js && node scripts/create-ai-assisted-dev-tools-comparison-pages.js",
+    "prebuild": "node scripts/check-metadata.js && node scripts/generate-collections.js",
     "build": "npm run prebuild && prisma generate && (prisma migrate deploy || echo 'Database migration failed, continuing with build...') && NODE_OPTIONS=--max-old-space-size=6144 next build",
     "build-no-db": "npm run prebuild && prisma generate && NODE_OPTIONS=--max-old-space-size=6144 next build",
     "build-with-tests": "npm run test && npm run prebuild && prisma generate && prisma migrate deploy && NODE_OPTIONS=--max-old-space-size=6144 next build",
     "build-only": "prisma generate && NODE_OPTIONS=--max-old-space-size=6144 next build",
     "start": "next start",
     "lint": "next lint",
     "stripe:webhook": "stripe listen --forward-to localhost:3000/api/webhooks/stripe",
-    "debug-comparisons": "node scripts/create-ai-assisted-dev-tools-comparison-pages.js --debug",
     "check-metadata": "node scripts/check-metadata.js",
     "debug-metadata": "node scripts/check-metadata.js --debug",
     "grant-access": "node scripts/grant-free-access.js",
@@ -167,4 +166,4 @@
     "ts-node": "^10.9.2",
     "tsx": "^4.19.3"
   }
-}
+}

src/app/comparisons/page.jsx

@@ -1,22 +1,25 @@
 import { SimpleLayout } from '@/components/SimpleLayout'
-import { getAllComparisons } from '@/lib/comparisons'
+import { getAllTools } from '@/actions/tool-actions'
 import { createMetadata } from '@/utils/createMetadata'
-import  ComparisonSearch  from '@/components/ComparisonSearch'
+import { DynamicComparisonSearch } from '@/components/dynamic-comparison-search'
 
 export const metadata = createMetadata({
-  title: "Vector Database Comparisons",
-  description: "Compare different vector databases side by side"
+  title: "Developer Tool Comparisons",
+  description: "Compare developer tools side by side to find the best fit for your needs"
 });
 
 export default async function ComparisonsIndex() {
-  let comparisons = await getAllComparisons()
+  const tools = await getAllTools()
 
   return (
     <SimpleLayout
-      title="Vector Database and Dev tools compared"
-      intro="Compare different vector databases and devtools to find the best fit for your needs"
+      title="Developer Tools Compared"
+      intro="Compare developer tools side by side to find the perfect fit for your project needs. All comparisons are generated dynamically from our comprehensive database."
     >
-      <ComparisonSearch comparisons={JSON.parse(JSON.stringify(comparisons))} />
+      <DynamicComparisonSearch tools={tools} />
     </SimpleLayout>
   )
-}
+}
+
+// Enable ISR with 1 hour revalidation
+export const revalidate = 3600

src/components/ComparisonPageLayout.jsx

@@ -129,4 +129,5 @@ const ComparisonPageLayout = ({ tool1, tool2, proseParagraphs }) => {
   );
 };
 
-export default ComparisonPageLayout;
+export default ComparisonPageLayout;
+export { ComparisonPageLayout };

src/components/ComparisonPageLayout.tsx

@@ -0,0 +1,37 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+export function ComparisonPageSkeleton() {
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white p-4">
+      <div className="max-w-6xl mx-auto">
+        {/* Hero section skeleton */}
+        <div className="mb-8 bg-white rounded-xl shadow-md p-6">
+          <div className="flex flex-col md:flex-row items-center justify-center gap-8 mb-6">
+            <Skeleton className="h-24 w-24 rounded-xl" />
+            <div className="text-center md:text-4xl text-2xl font-bold">vs</div>
+            <Skeleton className="h-24 w-24 rounded-xl" />
+          </div>
+          <Skeleton className="h-8 w-3/4 mx-auto mb-4" />
+          <Skeleton className="h-4 w-2/3 mx-auto" />
+        </div>
+        
+        {/* Newsletter section skeleton */}
+        <Skeleton className="h-32 w-full rounded-lg mb-12" />
+        
+        {/* Overview section skeleton */}
+        <div className="mb-12">
+          <Skeleton className="h-8 w-48 mb-6" />
+          <Skeleton className="h-4 w-full mb-3" />
+          <Skeleton className="h-4 w-full mb-3" />
+          <Skeleton className="h-4 w-2/3" />
+        </div>
+        
+        {/* Pros/cons skeleton */}
+        <Skeleton className="h-64 w-full rounded-lg mb-12" />
+        
+        {/* Feature comparison skeleton */}
+        <Skeleton className="h-96 w-full rounded-lg mb-12" />
+      </div>
+    </div>
+  )
+}