openstatus.dev
Openstatus
www.openstatus.dev
fix: description post og image
+28
-21
+2
-2
apps/web/src/app/(content)/blog/[slug]/page.tsx
+2
-2
apps/web/src/app/(content)/blog/[slug]/page.tsx
···
43
43
url: `https://www.openstatus.dev/blog/${slug}`,
44
44
images: [
45
45
{
46
-
url: `https://openstatus.dev/api/og/post?title=${title}&description=&image=${image}`,
46
+
url: `https://openstatus.dev/api/og/post?title=${title}&image=${image}`,
47
47
},
48
48
],
49
49
},
···
52
52
title,
53
53
description,
54
54
images: [
55
-
`https://openstatus.dev/api/og/post?title=${title}&description=${description}&image=${image}`,
55
+
`https://openstatus.dev/api/og/post?title=${title}&image=${image}`,
56
56
],
57
57
},
58
58
};
+5
-3
apps/web/src/app/api/og/_components/basic-layout.tsx
+5
-3
apps/web/src/app/api/og/_components/basic-layout.tsx
···
8
8
tw,
9
9
}: {
10
10
title: string;
11
-
description?: string;
11
+
description?: string | null;
12
12
children?: React.ReactNode;
13
13
tw?: string;
14
14
}) {
···
20
20
<h1 style={{ fontFamily: "Cal" }} tw="text-6xl">
21
21
{title}
22
22
</h1>
23
-
<p tw="text-slate-600 text-3xl">{description}</p>
23
+
{description ? (
24
+
<p tw="text-slate-600 text-3xl">{description}</p>
25
+
) : null}
24
26
</div>
25
27
</div>
26
28
<div
27
29
tw={cn(
28
30
"flex flex-col justify-center shadow-2xl mt-1 bg-white rounded-t-lg border-t-2 border-r-2 border-l-2 border-slate-200 px-12",
29
-
tw,
31
+
tw
30
32
)}
31
33
>
32
34
{children}
+17
-15
apps/web/src/app/api/og/post/route.tsx
+17
-15
apps/web/src/app/api/og/post/route.tsx
···
15
15
16
16
export async function GET(req: Request) {
17
17
const [interRegularData, interLightData, calSemiBoldData] = await Promise.all(
18
-
[interRegular, interLight, calSemiBold],
18
+
[interRegular, interLight, calSemiBold]
19
19
);
20
20
21
21
const { searchParams } = new URL(req.url);
22
22
23
23
const title =
24
24
(searchParams.has("title") && searchParams.get("title")) || TITLE;
25
-
const description =
26
-
(searchParams.has("description") && searchParams.get("description")) ||
27
-
DESCRIPTION;
25
+
const description = searchParams.has("description")
26
+
? searchParams.get("description")
27
+
: undefined;
28
28
const image = searchParams.has("image")
29
29
? searchParams.get("image")
30
30
: undefined;
31
31
32
32
return new ImageResponse(
33
-
<BasicLayout title={title} description={description}>
34
-
{image ? (
35
-
<img
36
-
alt=""
37
-
style={{ objectFit: "cover", height: 350 }} // h-80 = 320px
38
-
tw="flex w-full"
39
-
src={new URL(image, DEFAULT_URL).toString()}
40
-
/>
41
-
) : null}
42
-
</BasicLayout>,
33
+
(
34
+
<BasicLayout title={title} description={description}>
35
+
{image ? (
36
+
<img
37
+
alt=""
38
+
style={{ objectFit: "cover", height: 350 }} // h-80 = 320px
39
+
tw="flex w-full"
40
+
src={new URL(image, DEFAULT_URL).toString()}
41
+
/>
42
+
) : null}
43
+
</BasicLayout>
44
+
),
43
45
{
44
46
...SIZE,
45
47
fonts: [
···
62
64
weight: 600,
63
65
},
64
66
],
65
-
},
67
+
}
66
68
);
67
69
}
+4
-1
apps/web/src/content/posts/reflecting-1-year-building-openstatus.mdx
+4
-1
apps/web/src/content/posts/reflecting-1-year-building-openstatus.mdx
···
205
205
height={575}
206
206
/>
207
207
208
-
To infinity and beyond 🚀
208
+
To infinity and beyond 🚀
209
+
210
+
Want to join us on this journey? [Star us on GitHub](https://www.github.com/openstatusHQ/openstatus)! 🌟
211
+
Or create an account on [Openstatus](https://www.openstatus.dev/app/login) and start monitoring your services today!