Skip to content

Show latest post in landing page #132

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
arjunkomath merged 2 commits into from
Dec 21, 2025
Merged

Show latest post in landing page #132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8efb6a2
Show latest post in landing page
arjunkomath Dec 21, 2025
736a6db
Merge pull request #131 from techulus/docs/sdks
arjunkomath Dec 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 13 additions & 2 deletions apps/web/components/marketing/hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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"
Expand Down
111 changes: 62 additions & 49 deletions apps/web/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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} />
Expand All @@ -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,
};
}