Deploy

2026-07-27 18:34:58 +00:00
parent 45c3980c87
commit a12bb9612f
1 changed files with 52 additions and 0 deletions
@@ -0,0 +1,52 @@
+import Link from 'next/link'
+import Image from 'next/image'
+import { getBlogPosts } from '@/lib/cms'
+
+export const revalidate = 60
+
+export default async function BlogPage() {
+  const posts = await getBlogPosts(20)
+
+  return (
+    <div className="min-h-screen bg-white">
+      <div className="max-w-5xl mx-auto px-4 py-16">
+        <div className="mb-10">
+          <Link href="/" className="text-sm text-zinc-500 hover:text-zinc-800 transition-colors mb-4 inline-block">← Home</Link>
+          <h1 className="text-3xl font-bold text-zinc-900">Blog</h1>
+        </div>
+
+        {posts.length === 0 ? (
+          <p className="text-zinc-500">No posts published yet.</p>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {posts.map(post => {
+              const { title, excerpt, cover_image, author, category } = post.data as {
+                title?: string; excerpt?: string; cover_image?: string; author?: string; category?: string
+              }
+              const date = post.publishedAt
+                ? new Date(post.publishedAt).toLocaleDateString('en-ZA', { month: 'short', day: 'numeric', year: 'numeric' })
+                : ''
+              return (
+                <Link key={post.id} href={`/blog/${(post.data.slug as string) ?? post.id}`} className="group">
+                  {cover_image && (
+                    <div className="relative h-48 rounded-xl overflow-hidden mb-4">
+                      <Image src={cover_image} alt={title || ''} fill className="object-cover group-hover:scale-105 transition-transform duration-300" />
+                    </div>
+                  )}
+                  {category && <span className="text-xs font-semibold uppercase tracking-wider text-indigo-600">{category}</span>}
+                  <h2 className="text-lg font-semibold text-zinc-900 mt-1 mb-2 group-hover:text-indigo-700 transition-colors">{title}</h2>
+                  {excerpt && <p className="text-sm text-zinc-500 line-clamp-2">{excerpt}</p>}
+                  <div className="flex items-center gap-2 mt-3 text-xs text-zinc-400">
+                    {author && <span>{author}</span>}
+                    {author && date && <span>·</span>}
+                    {date && <span>{date}</span>}
+                  </div>
+                </Link>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}