Add Ghost CMS blog section (list + article pages)

2026-07-23 20:59:29 +05:30
parent 9a42e8b6e5
commit 5e457f4f39
9 changed files with 767 additions and 0 deletions
@@ -0,0 +1,52 @@
+import { getPosts } from "@/lib/ghost";
+import { BlogCard, FeaturedBlogCard } from "@/components/BlogCard";
+
+export const metadata = {
+  title: "Blog — UP Parivaar Dallas",
+  description:
+    "Stories, event recaps, and reflections from the UP Parivaar Dallas community.",
+};
+
+// Revalidation is driven by the Ghost fetch layer (GHOST_REVALIDATE).
+export const revalidate = 60;
+
+export default async function BlogPage() {
+  const posts = await getPosts();
+  const [featured, ...rest] = posts;
+
+  return (
+    <>
+      <section className="page-glow page-hero--tight">
+        <div className="container hero-center">
+          <span className="eyebrow">Blog</span>
+          <h1 className="display-title ts-36-48 events-hero__title">
+            Stories from our community
+          </h1>
+          <p className="events-hero__lead">
+            Event recaps, member spotlights, and reflections on the traditions we
+            carry forward together.
+          </p>
+        </div>
+      </section>
+
+      <section className="section-white">
+        <div className="container blog-list">
+          {posts.length === 0 ? (
+            <p className="blog-empty">No posts published yet. Check back soon.</p>
+          ) : (
+            <>
+              {featured && <FeaturedBlogCard post={featured} />}
+              {rest.length > 0 && (
+                <div className="blog-grid">
+                  {rest.map((post) => (
+                    <BlogCard key={post.id} post={post} />
+                  ))}
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </section>
+    </>
+  );
+}