Skip to content

Commit 6b47f35

Browse files
Llewellyn500Llewellyn500
committed
feat: Add Open Graph image generation for main, posts, and team pages.
1 parent 854a4ed commit 6b47f35

3 files changed

Lines changed: 88 additions & 157 deletions

File tree

‎app/opengraph-image.tsx‎

Lines changed: 32 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -20,71 +20,46 @@ export default async function Image() {
2020
width: "100%",
2121
display: "flex",
2222
flexDirection: "column",
23+
alignItems: "center",
24+
justifyContent: "center",
2325
fontFamily: "sans-serif",
2426
position: "relative",
2527
}}
2628
>
27-
{/* Fake Navbar */}
28-
<div style={{
29-
width: "100%",
30-
height: "80px",
31-
display: "flex",
32-
alignItems: "center",
33-
justifyContent: "space-between",
34-
padding: "0 60px",
35-
borderBottom: "1px solid #222"
36-
}}>
37-
{/* Logo Icon */}
38-
<div style={{
39-
width: "40px",
40-
height: "40px",
41-
background: "#9D4EDD",
42-
clipPath: "polygon(0 100%, 50% 0, 100% 100%)", // Triangle-ish
43-
display: "flex"
44-
}} />
29+
{/* Logo Shape */}
30+
<div style={{
31+
width: "100px",
32+
height: "100px",
33+
background: "#9D4EDD",
34+
marginBottom: "50px",
35+
clipPath: "polygon(50% 0%, 0% 100%, 100% 100%)", // Proper Triangle
36+
display: "flex"
37+
}} />
4538

46-
{/* Nav Links */}
47-
<div style={{ display: "flex", gap: "20px", color: "#ccc", fontSize: 18, fontWeight: 600 }}>
48-
<span>Posts</span>
49-
<span>Team</span>
50-
<span>YouTube</span>
51-
<span>GitHub</span>
52-
</div>
39+
{/* Main Text */}
40+
<div
41+
style={{
42+
display: "flex",
43+
alignItems: "center",
44+
justifyContent: "center",
45+
fontWeight: 900,
46+
}}
47+
>
48+
<span style={{ color: "#9D4EDD", fontSize: 180, letterSpacing: "-0.04em", lineHeight: 0.8 }}>L.A.P</span>
49+
<span style={{ color: "white", fontSize: 180, margin: "0 30px", lineHeight: 0.8 }}>-</span>
50+
<span style={{ color: "#9D4EDD", fontSize: 180, letterSpacing: "-0.04em", lineHeight: 0.8 }}>DOCS</span>
5351
</div>
54-
55-
{/* Hero Section */}
52+
53+
{/* Tagline */}
5654
<div style={{
57-
flex: 1,
58-
display: "flex",
59-
flexDirection: "column",
60-
alignItems: "center",
61-
justifyContent: "center",
62-
marginTop: "-40px" // Slight offset up to balance nav
55+
marginTop: "60px",
56+
color: "white",
57+
fontSize: 32,
58+
letterSpacing: "0.2em",
59+
textTransform: "uppercase",
60+
fontWeight: 600
6361
}}>
64-
<div
65-
style={{
66-
display: "flex",
67-
alignItems: "center",
68-
justifyContent: "center",
69-
fontWeight: 900,
70-
}}
71-
>
72-
<span style={{ color: "#9D4EDD", fontSize: 200, letterSpacing: "-0.04em", lineHeight: 0.8 }}>L.A.P</span>
73-
<span style={{ color: "#9D4EDD", fontSize: 200, margin: "0 30px", lineHeight: 0.8 }}>-</span>
74-
<span style={{ color: "#9D4EDD", fontSize: 200, letterSpacing: "-0.04em", lineHeight: 0.8 }}>DOCS</span>
75-
</div>
76-
77-
<div style={{
78-
marginTop: "40px",
79-
padding: "10px 20px",
80-
background: "#9D4EDD",
81-
color: "white",
82-
fontSize: 24,
83-
fontWeight: "bold",
84-
textTransform: "uppercase"
85-
}}>
86-
Simplicity in Tech
87-
</div>
62+
Simplicity in Tech
8863
</div>
8964
</div>
9065
),

‎app/posts/opengraph-image.tsx‎

Lines changed: 28 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -20,64 +20,42 @@ export default async function Image() {
2020
width: "100%",
2121
display: "flex",
2222
flexDirection: "column",
23+
alignItems: "center",
24+
justifyContent: "center",
2325
fontFamily: "sans-serif",
2426
position: "relative",
2527
}}
2628
>
27-
{/* Fake Navbar */}
28-
<div style={{
29-
width: "100%",
30-
height: "80px",
31-
display: "flex",
32-
alignItems: "center",
33-
justifyContent: "space-between",
34-
padding: "0 60px",
35-
borderBottom: "1px solid #222"
36-
}}>
37-
<div style={{
38-
width: "40px",
39-
height: "40px",
40-
background: "#9D4EDD",
41-
display: "flex"
42-
}} />
29+
<div style={{
30+
width: "80px",
31+
height: "80px",
32+
background: "#9D4EDD",
33+
marginBottom: "40px",
34+
clipPath: "polygon(50% 0%, 0% 100%, 100% 100%)",
35+
display: "flex"
36+
}} />
4337

44-
<div style={{ display: "flex", gap: "20px", color: "#ccc", fontSize: 18, fontWeight: 600 }}>
45-
<span style={{ color: "#9D4EDD" }}>Posts</span>
46-
<span>Team</span>
47-
<span>YouTube</span>
48-
</div>
38+
<div
39+
style={{
40+
display: "flex",
41+
alignItems: "center",
42+
justifyContent: "center",
43+
fontWeight: 900,
44+
}}
45+
>
46+
<span style={{ color: "#fff", fontSize: 200, letterSpacing: "-0.05em", lineHeight: 0.8 }}>L.A.P</span>
47+
<span style={{ color: "#9D4EDD", fontSize: 200, marginLeft: "40px", letterSpacing: "-0.05em", lineHeight: 0.8 }}>POSTS</span>
4948
</div>
50-
51-
{/* Hero Section */}
49+
5250
<div style={{
53-
flex: 1,
54-
display: "flex",
55-
flexDirection: "column",
56-
alignItems: "center",
57-
justifyContent: "center",
51+
marginTop: "30px",
52+
color: "#888",
53+
fontSize: 32,
54+
fontWeight: 500,
55+
textAlign: "center",
56+
letterSpacing: "0.05em"
5857
}}>
59-
<div
60-
style={{
61-
display: "flex",
62-
alignItems: "center",
63-
justifyContent: "center",
64-
fontWeight: 900,
65-
}}
66-
>
67-
<span style={{ color: "#fff", fontSize: 180, letterSpacing: "-0.04em", lineHeight: 0.8 }}>LATEST</span>
68-
<span style={{ color: "#9D4EDD", fontSize: 180, marginLeft: "30px", letterSpacing: "-0.04em", lineHeight: 0.8 }}>POSTS</span>
69-
</div>
70-
71-
<div style={{
72-
marginTop: "30px",
73-
color: "#888",
74-
fontSize: 32,
75-
fontWeight: 500,
76-
textAlign: "center",
77-
maxWidth: "800px"
78-
}}>
79-
Explore our tutorials, guides, and articles.
80-
</div>
58+
Latest Articles & Guides
8159
</div>
8260
</div>
8361
),

‎app/team/opengraph-image.tsx‎

Lines changed: 28 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -20,64 +20,42 @@ export default async function Image() {
2020
width: "100%",
2121
display: "flex",
2222
flexDirection: "column",
23+
alignItems: "center",
24+
justifyContent: "center",
2325
fontFamily: "sans-serif",
2426
position: "relative",
2527
}}
2628
>
27-
{/* Fake Navbar */}
28-
<div style={{
29-
width: "100%",
30-
height: "80px",
31-
display: "flex",
32-
alignItems: "center",
33-
justifyContent: "space-between",
34-
padding: "0 60px",
35-
borderBottom: "1px solid #222"
36-
}}>
37-
<div style={{
38-
width: "40px",
39-
height: "40px",
40-
background: "#9D4EDD",
41-
display: "flex"
42-
}} />
29+
<div style={{
30+
width: "80px",
31+
height: "80px",
32+
background: "#9D4EDD",
33+
marginBottom: "40px",
34+
clipPath: "polygon(50% 0%, 0% 100%, 100% 100%)",
35+
display: "flex"
36+
}} />
4337

44-
<div style={{ display: "flex", gap: "20px", color: "#ccc", fontSize: 18, fontWeight: 600 }}>
45-
<span>Posts</span>
46-
<span style={{ color: "#9D4EDD" }}>Team</span>
47-
<span>YouTube</span>
48-
</div>
38+
<div
39+
style={{
40+
display: "flex",
41+
alignItems: "center",
42+
justifyContent: "center",
43+
fontWeight: 900,
44+
}}
45+
>
46+
<span style={{ color: "#fff", fontSize: 200, letterSpacing: "-0.05em", lineHeight: 0.8 }}>L.A.P</span>
47+
<span style={{ color: "#9D4EDD", fontSize: 200, marginLeft: "40px", letterSpacing: "-0.05em", lineHeight: 0.8 }}>TEAM</span>
4948
</div>
50-
51-
{/* Hero Section */}
49+
5250
<div style={{
53-
flex: 1,
54-
display: "flex",
55-
flexDirection: "column",
56-
alignItems: "center",
57-
justifyContent: "center",
51+
marginTop: "30px",
52+
color: "#888",
53+
fontSize: 32,
54+
fontWeight: 500,
55+
textAlign: "center",
56+
letterSpacing: "0.05em"
5857
}}>
59-
<div
60-
style={{
61-
display: "flex",
62-
alignItems: "center",
63-
justifyContent: "center",
64-
fontWeight: 900,
65-
}}
66-
>
67-
<span style={{ color: "#fff", fontSize: 180, letterSpacing: "-0.04em", lineHeight: 0.8 }}>OUR</span>
68-
<span style={{ color: "#9D4EDD", fontSize: 180, marginLeft: "30px", letterSpacing: "-0.04em", lineHeight: 0.8 }}>TEAM</span>
69-
</div>
70-
71-
<div style={{
72-
marginTop: "30px",
73-
color: "#888",
74-
fontSize: 32,
75-
fontWeight: 500,
76-
textAlign: "center",
77-
maxWidth: "800px"
78-
}}>
79-
Meet the creators behind L.A.P Docs
80-
</div>
58+
Meet the Creators
8159
</div>
8260
</div>
8361
),

0 commit comments

Comments
 (0)