Skip to content

Commit f1a3ca0

Browse files
upayanmazumderupayanmazumder
committed
Add Open Graph and Twitter image generation for Kargo
1 parent 75b6ea4 commit f1a3ca0

File tree

4 files changed

+214
-5
lines changed

4 files changed

+214
-5
lines changed

‎app/src/app/opengraph-image.tsx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import { ImageResponse } from 'next/og';
2+
3+
// Route segment config
4+
export const runtime = 'edge';
5+
6+
// Image metadata
7+
export const alt = 'Kargo - Deploy containerized applications with AI-powered setup';
8+
export const size = {
9+
width: 1200,
10+
height: 630,
11+
};
12+
13+
export const contentType = 'image/png';
14+
15+
// Image generation
16+
export default async function Image() {
17+
return new ImageResponse(
18+
(
19+
<div
20+
style={{
21+
background: 'linear-gradient(135deg, #1f2432 0%, #2d3548 100%)',
22+
width: '100%',
23+
height: '100%',
24+
display: 'flex',
25+
flexDirection: 'column',
26+
alignItems: 'center',
27+
justifyContent: 'center',
28+
fontFamily: 'system-ui, -apple-system, sans-serif',
29+
}}
30+
>
31+
<div
32+
style={{
33+
display: 'flex',
34+
flexDirection: 'column',
35+
alignItems: 'center',
36+
justifyContent: 'center',
37+
gap: '24px',
38+
}}
39+
>
40+
<h1
41+
style={{
42+
fontSize: '96px',
43+
fontWeight: 'bold',
44+
background: 'linear-gradient(90deg, #60a5fa, #3b82f6)',
45+
backgroundClip: 'text',
46+
color: 'transparent',
47+
margin: 0,
48+
padding: 0,
49+
}}
50+
>
51+
Kargo
52+
</h1>
53+
<p
54+
style={{
55+
fontSize: '32px',
56+
color: '#e5e7eb',
57+
margin: 0,
58+
padding: '0 80px',
59+
textAlign: 'center',
60+
maxWidth: '900px',
61+
}}
62+
>
63+
Deploy containerized applications with AI-powered setup, secure
64+
infrastructure, and Kubernetes-native scaling
65+
</p>
66+
<div
67+
style={{
68+
display: 'flex',
69+
gap: '16px',
70+
marginTop: '32px',
71+
fontSize: '20px',
72+
color: '#9ca3af',
73+
}}
74+
>
75+
<span>🚀 AI-Powered</span>
76+
<span>•</span>
77+
<span>☸️ Kubernetes</span>
78+
<span>•</span>
79+
<span>🔒 Secure</span>
80+
</div>
81+
</div>
82+
</div>
83+
),
84+
{
85+
...size,
86+
}
87+
);
88+
}

‎app/src/app/page.tsx‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,38 @@
11
import Hero from '@/components/Hero/Hero';
22
import FeaturesShowcase from '@/components/FeaturesShowcase/FeaturesShowcase';
33
import FAQSection from '@/components/FAQSection/FAQSection';
4-
import { generatePageMetadata } from '@/lib/metadata';
4+
import { Metadata } from 'next';
55

66
const title = 'Kargo';
77
const description =
88
'Kargo lets you deploy containerized applications with full flexibility — AI-powered setup, secure infrastructure, and Kubernetes-native scaling, all from a powerful web interface.';
99

10-
export const metadata = generatePageMetadata({
10+
export const metadata: Metadata = {
1111
title,
1212
description,
13-
path: '',
14-
imageAlt: 'Kargo - Deploy containerized applications with AI-powered setup',
15-
});
13+
openGraph: {
14+
title,
15+
description,
16+
url: 'https://kargo.dscvit.com',
17+
siteName: 'Kargo',
18+
images: [
19+
{
20+
url: 'https://kargo.dscvit.com/og-image.png',
21+
width: 1200,
22+
height: 630,
23+
alt: 'Kargo - Deploy containerized applications with AI-powered setup',
24+
},
25+
],
26+
locale: 'en_US',
27+
type: 'website',
28+
},
29+
twitter: {
30+
card: 'summary_large_image',
31+
title,
32+
description,
33+
images: ['https://kargo.dscvit.com/og-image.png'],
34+
},
35+
};
1636

1737
export default function Home() {
1838
return (

‎app/src/app/robots.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import type { MetadataRoute } from 'next';
2+
3+
export default function robots(): MetadataRoute.Robots {
4+
return {
5+
rules: [
6+
{
7+
userAgent: '*',
8+
allow: '/',
9+
},
10+
],
11+
sitemap: 'https://kargo.dscvit.com/sitemap.xml',
12+
};
13+
}

‎app/src/app/twitter-image.tsx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import { ImageResponse } from 'next/og';
2+
3+
// Route segment config
4+
export const runtime = 'edge';
5+
6+
// Image metadata
7+
export const alt = 'Kargo - Deploy containerized applications with AI-powered setup';
8+
export const size = {
9+
width: 1200,
10+
height: 630,
11+
};
12+
13+
export const contentType = 'image/png';
14+
15+
// Image generation
16+
export default async function Image() {
17+
return new ImageResponse(
18+
(
19+
<div
20+
style={{
21+
background: 'linear-gradient(135deg, #1f2432 0%, #2d3548 100%)',
22+
width: '100%',
23+
height: '100%',
24+
display: 'flex',
25+
flexDirection: 'column',
26+
alignItems: 'center',
27+
justifyContent: 'center',
28+
fontFamily: 'system-ui, -apple-system, sans-serif',
29+
}}
30+
>
31+
<div
32+
style={{
33+
display: 'flex',
34+
flexDirection: 'column',
35+
alignItems: 'center',
36+
justifyContent: 'center',
37+
gap: '24px',
38+
}}
39+
>
40+
<h1
41+
style={{
42+
fontSize: '96px',
43+
fontWeight: 'bold',
44+
background: 'linear-gradient(90deg, #60a5fa, #3b82f6)',
45+
backgroundClip: 'text',
46+
color: 'transparent',
47+
margin: 0,
48+
padding: 0,
49+
}}
50+
>
51+
Kargo
52+
</h1>
53+
<p
54+
style={{
55+
fontSize: '32px',
56+
color: '#e5e7eb',
57+
margin: 0,
58+
padding: '0 80px',
59+
textAlign: 'center',
60+
maxWidth: '900px',
61+
}}
62+
>
63+
Deploy containerized applications with AI-powered setup, secure
64+
infrastructure, and Kubernetes-native scaling
65+
</p>
66+
<div
67+
style={{
68+
display: 'flex',
69+
gap: '16px',
70+
marginTop: '32px',
71+
fontSize: '20px',
72+
color: '#9ca3af',
73+
}}
74+
>
75+
<span>🚀 AI-Powered</span>
76+
<span>•</span>
77+
<span>☸️ Kubernetes</span>
78+
<span>•</span>
79+
<span>🔒 Secure</span>
80+
</div>
81+
</div>
82+
</div>
83+
),
84+
{
85+
...size,
86+
}
87+
);
88+
}

0 commit comments

Comments
 (0)