Show latest post in landing page

arjunkomath · arjunkomath · commit 8efb6a271e19 · 2025-12-21T15:23:39.000+11:00
diff --git a/apps/web/components/marketing/hero.tsx b/apps/web/components/marketing/hero.tsx
@@ -4,9 +4,16 @@ import Link from "next/link";
 import { ROUTES } from "../../data/routes.data";
 import capture from "../../public/images/hero/capture.png";
 import appLogo from "../../public/images/logo.png";
+import { Post } from "@changespage/react";
 const version = require("../../package.json").version;
 
-export default function Hero({ stars = null }: { stars?: string | null }) {
+export default function Hero({
+  stars = null,
+  latestPost = null,
+}: {
+  stars?: string | null;
+  latestPost: Post | null;
+}) {
   return (
     <div className="relative isolate overflow-hidden bg-gray-900">
       <svg
@@ -83,7 +90,11 @@ export default function Hero({ stars = null }: { stars?: string | null }) {
                   What&apos;s new
                 </span>
                 <span className="inline-flex items-center space-x-2 text-sm font-medium leading-6 text-gray-300">
-                  <span>Just shipped v{version}</span>
+                  {latestPost ? (
+                    <span>{latestPost.title}</span>
+                  ) : (
+                    <span>Just shipped v{version}</span>
+                  )}
                   <ChevronRightIcon
                     className="h-5 w-5 text-gray-500"
                     aria-hidden="true"
diff --git a/apps/web/pages/index.tsx b/apps/web/pages/index.tsx
@@ -6,12 +6,72 @@ import Features from "../components/marketing/features";
 import GetStartedHero from "../components/marketing/get-started-hero";
 import Hero from "../components/marketing/hero";
 import PricingSection from "../components/marketing/pricing-section";
+import { createChangesPageClient } from "@changespage/react";
+import { InferGetStaticPropsType } from "next";
 
 const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
 
 const FAQs = dynamic(() => import("../components/marketing/faq"));
 
-export default function Index({ addons, unit_amount, stars }) {
+async function getGitHubStars(): Promise<string | null> {
+  try {
+    const response = await fetch(
+      "https://api.github.com/repos/techulus/changes-page",
+      {
+        headers: {
+          Accept: "application/vnd.github+json",
+        },
+      }
+    );
+
+    if (!response?.ok) {
+      return null;
+    }
+
+    const json = await response.json();
+
+    return parseInt(json.stargazers_count, 10).toLocaleString();
+  } catch {
+    return null;
+  }
+}
+
+export async function getStaticProps() {
+  const { unit_amount } = await stripe.prices.retrieve(
+    process.env.STRIPE_PRICE_ID
+  );
+  const { unit_amount: email_unit_amount } = await stripe.prices.retrieve(
+    process.env.EMAIL_NOTIFICATION_STRIPE_PRICE_ID
+  );
+  const stars = await getGitHubStars();
+
+  const client = createChangesPageClient({
+    baseUrl: "https://hey.changes.page",
+  });
+  const latestPost = await client.getLatestPost();
+
+  return {
+    props: {
+      unit_amount,
+      addons: [
+        {
+          name: "email notification",
+          price: email_unit_amount / 100,
+        },
+      ],
+      stars,
+      latestPost,
+    },
+    revalidate: 86400,
+  };
+}
+
+export default function Index({
+  addons,
+  unit_amount,
+  stars,
+  latestPost,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
     <div className="h-full dark:bg-gray-800">
       <Head>
@@ -127,7 +187,7 @@ export default function Index({ addons, unit_amount, stars }) {
 
       <main>
         <section>
-          <Hero stars={stars} />
+          <Hero stars={stars} latestPost={latestPost} />
         </section>
         <Features />
         <PricingSection addons={addons} unit_amount={unit_amount} />
@@ -139,50 +199,3 @@ export default function Index({ addons, unit_amount, stars }) {
     </div>
   );
 }
-
-async function getGitHubStars(): Promise<string | null> {
-  try {
-    const response = await fetch(
-      "https://api.github.com/repos/techulus/changes-page",
-      {
-        headers: {
-          Accept: "application/vnd.github+json",
-        },
-      }
-    );
-
-    if (!response?.ok) {
-      return null;
-    }
-
-    const json = await response.json();
-
-    return parseInt(json.stargazers_count, 10).toLocaleString();
-  } catch {
-    return null;
-  }
-}
-
-export async function getStaticProps() {
-  const { unit_amount } = await stripe.prices.retrieve(
-    process.env.STRIPE_PRICE_ID
-  );
-  const { unit_amount: email_unit_amount } = await stripe.prices.retrieve(
-    process.env.EMAIL_NOTIFICATION_STRIPE_PRICE_ID
-  );
-  const stars = await getGitHubStars();
-
-  return {
-    props: {
-      unit_amount,
-      addons: [
-        {
-          name: "email notification",
-          price: email_unit_amount / 100,
-        },
-      ],
-      stars,
-    },
-    revalidate: 86400,
-  };
-}
