franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): add og image

Browse Source
This commit is contained in:
Aman Varshney
2025-08-29 23:48:43 +05:30
parent 9f309a8db3
commit f37412f076
17 changed files with 159 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/src/app/(home)/_components/footer.tsx
View File

@@ -10,7 +10,7 @@ const Footer = () => {
<div className="mb-8 grid gap-8 sm:mb-12 sm:grid-cols-2 lg:grid-cols-3 lg:gap-12">
<div className="sm:col-span-2 lg:col-span-1">
<h3 className="mb-3 flex items-center gap-2 font-semibold text-base text-foreground sm:mb-4">
<span>Better-T Stack</span>
<span>Better-T-Stack</span>
</h3>
<p className="mb-4 text-muted-foreground text-sm leading-relaxed sm:mb-6 sm:text-base lg:pr-4">
Type-safe, modern TypeScript scaffolding for full-stack web
@@ -94,7 +94,7 @@ const Footer = () => {
<div className="flex flex-col items-center justify-between gap-4 border-border border-t pt-6 sm:flex-row sm:gap-6 sm:pt-8">
<p className="text-center text-muted-foreground text-xs sm:text-left sm:text-sm">
© {new Date().getFullYear()} Better-T Stack. All rights reserved.
© {new Date().getFullYear()} Better-T-Stack. All rights reserved.
</p>
<p className="flex items-center gap-1.5 text-muted-foreground text-xs sm:text-sm">
Built with

12
apps/web/src/app/(home)/_components/stats-section.tsx
View File

@@ -73,11 +73,11 @@ export default function StatsSection({
</div>
<div className="border-border/50 border-t pt-3">
<div className="flex items-center justify-between text-xs">
<div className="flex items-center justify-between gap-2 text-xs">
<span className="font-mono text-muted-foreground">
Last Updated
</span>
<span className="font-mono text-accent">
<span className="truncate font-mono text-accent">
{analyticsData?.lastUpdated ||
new Date().toLocaleDateString("en-US", {
month: "short",
@@ -134,11 +134,11 @@ export default function StatsSection({
</div>
<div className="border-border/50 border-t pt-3">
<div className="flex items-center justify-between text-xs">
<div className="flex items-center justify-between gap-2 text-xs">
<span className="font-mono text-muted-foreground">
Repository
</span>
<span className="font-mono text-accent">
<span className="truncate font-mono text-accent">
AmanVarshney01/create-better-t-stack
</span>
</div>
@@ -196,9 +196,9 @@ export default function StatsSection({
</div>
<div className="border-border/50 border-t pt-3">
<div className="flex items-center justify-between text-xs">
<div className="flex items-center justify-between gap-2 text-xs">
<span className="font-mono text-muted-foreground">Package</span>
<span className="font-mono text-accent">
<span className="truncate font-mono text-accent">
create-better-t-stack
</span>
</div>

25
apps/web/src/app/(home)/analytics/page.tsx
View File

@@ -1,5 +1,30 @@
import type { Metadata } from "next";
import AnalyticsPage from "./_components/analytics-page";
export const metadata: Metadata = {
title: "Analytics - Better-T-Stack",
description: "Project creation analytics for Better-T-Stack.",
openGraph: {
title: "Analytics - Better-T-Stack",
description: "Project creation analytics for Better-T-Stack.",
url: "https://better-t-stack.dev/analytics",
images: [
{
url: "https://r2.better-t-stack.dev/og.png",
width: 1200,
height: 630,
alt: "Better-T-Stack Analytics",
},
],
},
twitter: {
card: "summary_large_image",
title: "Analytics - Better-T-Stack",
description: "Project creation analytics for Better-T-Stack.",
images: ["https://r2.better-t-stack.dev/og.png"],
},
};
export default async function Analytics() {
const response = await fetch(
"https://r2.better-t-stack.dev/analytics-data.json",

30
apps/web/src/app/(home)/new/layout.tsx Normal file
View File

@@ -0,0 +1,30 @@
import type { Metadata } from "next";
import type { ReactNode } from "react";
export const metadata: Metadata = {
title: "Stack Builder - Better-T-Stack",
description: "Interactive Ui to roll your own stack",
openGraph: {
title: "Stack Builder - Better-T-Stack",
description: "Interactive Ui to roll your own stack",
url: "https://better-t-stack.dev/new",
images: [
{
url: "https://r2.better-t-stack.dev/og.png",
width: 1200,
height: 630,
alt: "Better-T-Stack Stack Builder",
},
],
},
twitter: {
card: "summary_large_image",
title: "Stack Builder - Better-T-Stack",
description: "Interactive Ui to roll your own stack",
images: ["https://r2.better-t-stack.dev/og.png"],
},
};
export default function NewLayout({ children }: { children: ReactNode }) {
return children;
}

25
apps/web/src/app/(home)/showcase/page.tsx
View File

@@ -2,8 +2,33 @@ export const dynamic = "force-static";
import { api } from "@better-t-stack/backend/convex/_generated/api";
import { fetchQuery } from "convex/nextjs";
import type { Metadata } from "next";
import ShowcasePage from "./_components/showcase-page";
export const metadata: Metadata = {
title: "Showcase - Better-T-Stack",
description: "Projects created with Better-T-Stack",
openGraph: {
title: "Showcase - Better-T-Stack",
description: "Projects created with Better-T-Stack",
url: "https://better-t-stack.dev/showcase",
images: [
{
url: "https://r2.better-t-stack.dev/og.png",
width: 1200,
height: 630,
alt: "Better-T-Stack Showcase",
},
],
},
twitter: {
card: "summary_large_image",
title: "Showcase - Better-T-Stack",
description: "Projects created with Better-T-Stack",
images: ["https://r2.better-t-stack.dev/og.png"],
},
};
export default async function Showcase() {
const showcaseProjects = await fetchQuery(api.showcase.getShowcaseProjects);
return <ShowcasePage showcaseProjects={showcaseProjects} />;

25
apps/web/src/app/docs-og/[...slug]/route.tsx Normal file
View File

@@ -0,0 +1,25 @@
import { generateOGImage } from "fumadocs-ui/og";
import { notFound } from "next/navigation";
import { source } from "@/lib/source";
export async function GET(
_req: Request,
{ params }: { params: Promise<{ slug: string[] }> },
) {
const { slug } = await params;
const page = source.getPage(slug.slice(0, -1));
if (!page) notFound();
return generateOGImage({
title: page.data.title,
description: page.data.description,
site: "Better-T-Stack",
});
}
export function generateStaticParams() {
return source.generateParams().map((page) => ({
...page,
slug: [...page.slug, "image.png"],
}));
}

9
apps/web/src/app/docs/[[...slug]]/page.tsx
View File

@@ -49,8 +49,17 @@ export async function generateMetadata({
const { slug = [] } = await params;
const page = source.getPage(slug);
if (!page) notFound();
const image = `/docs-og/${slug.join("/")}/image.png`;
return {
title: page.data.title,
description: page.data.description,
openGraph: {
images: image,
},
twitter: {
card: "summary_large_image",
images: image,
},
};
}

21
apps/web/src/app/layout.tsx
View File

@@ -19,11 +19,10 @@ const geistMono = Geist_Mono({
variable: "--font-geist-mono",
});
const ogImage =
"https://api.screenshothis.com/v1/screenshots/take?api_key=ss_live_NQJgRXqHcKPwnoMTuQmgiwLIGbVfihjpMyQhgsaMyNBHTyesvrxpYNXmdgcnxipc&url=https%3A%2F%2Fbetter-t-stack.dev%2F&width=1200&height=630&block_ads=true&block_cookie_banners=true&block_trackers=true&device_scale_factor=0.65&prefers_color_scheme=dark&is_cached=true&cache_key=cbts2";
const ogImage = "https://r2.better-t-stack.dev/og.png";
export const metadata: Metadata = {
title: "Better-T Stack",
title: "Better-T-Stack",
description:
"A modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations",
keywords: [
@@ -43,12 +42,12 @@ export const metadata: Metadata = {
"Better-Auth",
"convex",
"monorepo",
"Better-T Stack",
"Better-T-Stack",
"create-better-t-stack",
],
authors: [{ name: "Better-T Stack Team" }],
creator: "Better-T Stack",
publisher: "Better-T Stack",
authors: [{ name: "Better-T-Stack Team" }],
creator: "Better-T-Stack",
publisher: "Better-T-Stack",
formatDetection: {
email: false,
telephone: false,
@@ -58,17 +57,17 @@ export const metadata: Metadata = {
canonical: "/",
},
openGraph: {
title: "Better-T Stack",
title: "Better-T-Stack",
description:
"A modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations",
url: "https://better-t-stack.dev",
siteName: "Better-T Stack",
siteName: "Better-T-Stack",
images: [
{
url: ogImage,
width: 1200,
height: 630,
alt: "Better-T Stack",
alt: "Better-T-Stack",
},
],
locale: "en_US",
@@ -76,7 +75,7 @@ export const metadata: Metadata = {
},
twitter: {
card: "summary_large_image",
title: "Better-T Stack",
title: "Better-T-Stack",
description:
"A modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations",
images: [ogImage],