Skip to content

Commit 854a4ed

Browse files
Llewellyn500Llewellyn500
committed
feat: add OpenGraph images for main, posts, team, and dynamic article pages, and implement Google Analytics tracking.
1 parent e8e9104 commit 854a4ed

5 files changed

Lines changed: 298 additions & 80 deletions

File tree

‎app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export default function RootLayout({
6868
</>
6969
)}
7070
</head>
71-
<body>
71+
<body suppressHydrationWarning>
7272
<Container>
7373
<Header />
7474
{children}

‎app/opengraph-image.tsx‎

Lines changed: 58 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -15,45 +15,77 @@ export default async function Image() {
1515
(
1616
<div
1717
style={{
18-
backgroundColor: "#050505", // Very dark background matching the site
18+
backgroundColor: "#050505",
1919
height: "100%",
2020
width: "100%",
2121
display: "flex",
2222
flexDirection: "column",
23-
alignItems: "center",
24-
justifyContent: "center",
2523
fontFamily: "sans-serif",
2624
position: "relative",
2725
}}
2826
>
29-
<div
30-
style={{
31-
display: "flex",
32-
alignItems: "center",
33-
justifyContent: "center",
34-
fontWeight: 900, // Extra bold
35-
}}
36-
>
37-
<span style={{ color: "#9D4EDD", fontSize: 160, letterSpacing: "-0.02em" }}>L.A.P</span>
38-
<span style={{ color: "#9D4EDD", fontSize: 160, margin: "0 30px" }}>-</span>
39-
<span style={{ color: "#9D4EDD", fontSize: 160, letterSpacing: "-0.02em" }}>DOCS</span>
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+
}} />
45+
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>
4053
</div>
4154

42-
{/* Subtitle/Tagline matching the site header feel */}
55+
{/* Hero Section */}
4356
<div style={{
44-
marginTop: "40px",
45-
color: "white",
46-
fontSize: 32,
47-
letterSpacing: "0.1em",
48-
textTransform: "uppercase",
49-
fontWeight: "bold"
57+
flex: 1,
58+
display: "flex",
59+
flexDirection: "column",
60+
alignItems: "center",
61+
justifyContent: "center",
62+
marginTop: "-40px" // Slight offset up to balance nav
5063
}}>
51-
Simplicity in Tech
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>
5288
</div>
53-
54-
{/* Decorative purple bar on the side/top like the screenshot? Or just keep it clean.
55-
The screenshot has a purple accent line. Let's add a subtle one. */}
56-
<div style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "8px", background: "#9D4EDD" }} />
5789
</div>
5890
),
5991
{

‎app/posts/[title]/opengraph-image.tsx‎

Lines changed: 63 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -62,69 +62,79 @@ export default async function Image({
6262
(
6363
<div
6464
style={{
65-
backgroundColor: "#050505",
66-
height: "100%",
67-
width: "100%",
68-
display: "flex",
69-
flexDirection: "column",
70-
alignItems: "flex-start",
71-
justifyContent: "space-between",
72-
padding: "60px",
73-
fontFamily: "sans-serif",
74-
position: "relative",
65+
backgroundColor: "#050505",
66+
height: "100%",
67+
width: "100%",
68+
display: "flex",
69+
flexDirection: "column",
70+
fontFamily: "sans-serif",
71+
position: "relative",
7572
}}
7673
>
77-
<div style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "8px", background: "#9D4EDD" }} />
74+
{/* Fake Navbar */}
75+
<div style={{
76+
width: "100%",
77+
height: "80px",
78+
display: "flex",
79+
alignItems: "center",
80+
justifyContent: "space-between",
81+
padding: "0 60px",
82+
borderBottom: "1px solid #222"
83+
}}>
84+
<div style={{
85+
width: "40px",
86+
height: "40px",
87+
background: "#9D4EDD",
88+
display: "flex"
89+
}} />
7890

79-
{/* Top: Branding */}
80-
<div style={{ display: "flex", alignItems: "center" }}>
81-
<div style={{
82-
fontSize: 48,
83-
fontWeight: 900,
84-
color: "#9D4EDD", // Purple
85-
letterSpacing: "-0.02em"
86-
}}>
87-
L.A.P - DOCS
88-
</div>
91+
<div style={{ display: "flex", gap: "20px", color: "#ccc", fontSize: 18, fontWeight: 600 }}>
92+
<span style={{ color: "#9D4EDD" }}>Posts</span>
93+
<span>Team</span>
94+
<span>YouTube</span>
95+
</div>
8996
</div>
9097

91-
{/* Center: Title & Author */}
92-
<div style={{ display: "flex", flexDirection: "column", gap: "10px", marginBottom: "40px" }}>
93-
<div style={{
94-
fontSize: 80,
95-
fontWeight: "bold",
96-
lineHeight: 1.1,
97-
color: "white",
98-
textTransform: "uppercase"
99-
}}>
98+
{/* Hero Section / Content */}
99+
<div style={{
100+
flex: 1,
101+
display: "flex",
102+
flexDirection: "column",
103+
alignItems: "flex-start",
104+
justifyContent: "center",
105+
padding: "0 80px"
106+
}}>
107+
<div style={{
108+
color: "#9D4EDD",
109+
fontSize: 24,
110+
fontWeight: "bold",
111+
marginBottom: "20px",
112+
textTransform: "uppercase"
113+
}}>
114+
AUTHOR: {authorName}
115+
</div>
116+
117+
<div style={{
118+
fontSize: 80,
119+
fontWeight: 900,
120+
lineHeight: 1.1,
121+
color: "white",
122+
textTransform: "uppercase",
123+
marginBottom: "40px"
124+
}}>
100125
{articleTitle}
101126
</div>
127+
102128
<div style={{
103-
fontSize: 28,
104-
color: "#9D4EDD", // Purple accent for label or "author"
105-
fontWeight: "bold",
106-
marginTop: "10px"
107-
}}>
108-
AUTHOR: <span style={{ color: "white" }}>{authorName.toUpperCase()}</span>
129+
display: "flex",
130+
alignItems: "center",
131+
gap: "20px"
132+
}}>
133+
<div style={{ padding: "10px 20px", background: "#333", borderRadius: "50px", color: "white", fontSize: 20 }}>
134+
Read Article
135+
</div>
109136
</div>
110137
</div>
111-
112-
{/* Bottom: Footer Info */}
113-
<div style={{
114-
width: "100%",
115-
display: "flex",
116-
justifyContent: "space-between",
117-
alignItems: "flex-end",
118-
borderTop: "2px solid #333",
119-
paddingTop: "24px"
120-
}}>
121-
<div style={{ fontSize: 24, color: "#888" }}>
122-
lap-docs.netlify.app
123-
</div>
124-
<div style={{ fontSize: 24, color: "#9D4EDD", fontWeight: "bold" }}>
125-
SIMPLICITY IN TECH
126-
</div>
127-
</div>
128138
</div>
129139
),
130140
{

‎app/posts/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+
export const runtime = "edge";
4+
5+
export const alt = "L.A.P Docs Posts";
6+
export const size = {
7+
width: 1200,
8+
height: 630,
9+
};
10+
11+
export const contentType = "image/png";
12+
13+
export default async function Image() {
14+
return new ImageResponse(
15+
(
16+
<div
17+
style={{
18+
backgroundColor: "#050505",
19+
height: "100%",
20+
width: "100%",
21+
display: "flex",
22+
flexDirection: "column",
23+
fontFamily: "sans-serif",
24+
position: "relative",
25+
}}
26+
>
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+
}} />
43+
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>
49+
</div>
50+
51+
{/* Hero Section */}
52+
<div style={{
53+
flex: 1,
54+
display: "flex",
55+
flexDirection: "column",
56+
alignItems: "center",
57+
justifyContent: "center",
58+
}}>
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>
81+
</div>
82+
</div>
83+
),
84+
{
85+
...size,
86+
}
87+
);
88+
}

0 commit comments

Comments
 (0)