Openstatus
www.openstatus.dev
shared metadata for basic info (#212)
+56
-32
+8
-1
apps/web/src/app/blog/[slug]/page.tsx
+8
-1
apps/web/src/app/blog/[slug]/page.tsx
···
3
3
import { notFound } from "next/navigation";
4
4
import { allPosts } from "contentlayer/generated";
5
5
6
+
import {
7
+
defaultMetadata,
8
+
ogMetadata,
9
+
twitterMetadata,
10
+
} from "@/app/shared-metadata";
6
11
import { Mdx } from "@/components/content/mdx";
7
12
import { Shell } from "@/components/dashboard/shell";
8
13
import { BackButton } from "@/components/layout/back-button";
···
29
34
const { title, publishedAt: publishedTime, description, slug, image } = post;
30
35
31
36
return {
37
+
...defaultMetadata,
32
38
title,
33
39
description,
34
40
openGraph: {
41
+
...ogMetadata,
35
42
title,
36
43
description,
37
44
type: "article",
···
44
51
],
45
52
},
46
53
twitter: {
47
-
card: "summary_large_image",
54
+
...twitterMetadata,
48
55
title,
49
56
description,
50
57
images: [
+8
-15
apps/web/src/app/layout.tsx
+8
-15
apps/web/src/app/layout.tsx
···
6
6
import { ClerkProvider } from "@clerk/nextjs";
7
7
import PlausibleProvider from "next-plausible";
8
8
9
+
import {
10
+
defaultMetadata,
11
+
ogMetadata,
12
+
twitterMetadata,
13
+
} from "@/app/shared-metadata";
9
14
import { TailwindIndicator } from "@/components/tailwind-indicator";
10
15
import { Toaster } from "@/components/ui/toaster";
11
16
import { ClientAnalytics } from "./_components/analytics";
···
18
23
variable: "--font-calsans",
19
24
});
20
25
21
-
const TITLE = "OpenStatus";
22
-
const DESCRIPTION =
23
-
"Open-Source uptime monitoring with beautiful status pages.";
24
-
25
26
export const metadata: Metadata = {
26
-
title: TITLE,
27
-
description: DESCRIPTION,
28
-
metadataBase: new URL("https://www.openstatus.dev"),
27
+
...defaultMetadata,
29
28
twitter: {
30
-
images: [`/api/og`],
31
-
card: "summary_large_image",
32
-
title: TITLE,
33
-
description: DESCRIPTION,
29
+
...twitterMetadata,
34
30
},
35
31
openGraph: {
36
-
type: "website",
37
-
images: [`/api/og`],
38
-
title: TITLE,
39
-
description: DESCRIPTION,
32
+
...ogMetadata,
40
33
},
41
34
};
42
35
+8
-13
apps/web/src/app/play/layout.tsx
+8
-13
apps/web/src/app/play/layout.tsx
···
1
1
import * as React from "react";
2
2
import type { Metadata } from "next";
3
3
4
+
import {
5
+
defaultMetadata,
6
+
ogMetadata,
7
+
twitterMetadata,
8
+
} from "@/app/shared-metadata";
4
9
import { Shell } from "@/components/dashboard/shell";
5
10
import { BackButton } from "@/components/layout/back-button";
6
11
import { MarketingLayout } from "@/components/layout/marketing-layout";
7
12
8
-
const TITLE = "OpenStatus";
9
-
const DESCRIPTION =
10
-
"Open-Source alternative to your current monitoring service with beautiful status page";
11
-
12
13
export const metadata: Metadata = {
13
-
title: TITLE,
14
-
description: DESCRIPTION,
15
-
metadataBase: new URL("https://www.openstatus.dev"),
14
+
...defaultMetadata,
16
15
twitter: {
16
+
...twitterMetadata,
17
17
images: [`/api/og?monitorId=openstatus`],
18
-
card: "summary_large_image",
19
-
title: TITLE,
20
-
description: DESCRIPTION,
21
18
},
22
19
openGraph: {
23
-
type: "website",
20
+
...ogMetadata,
24
21
images: [`/api/og?monitorId=openstatus`],
25
-
title: TITLE,
26
-
description: DESCRIPTION,
27
22
},
28
23
};
29
24
+9
-3
apps/web/src/app/status-page/[domain]/page.tsx
+9
-3
apps/web/src/app/status-page/[domain]/page.tsx
···
1
1
import type { Metadata } from "next";
2
2
import { notFound } from "next/navigation";
3
3
4
+
import {
5
+
defaultMetadata,
6
+
ogMetadata,
7
+
twitterMetadata,
8
+
} from "@/app/shared-metadata";
4
9
import { Header } from "@/components/dashboard/header";
5
10
import { Shell } from "@/components/dashboard/shell";
6
11
import { IncidentList } from "@/components/status-page/incident-list";
···
13
18
};
14
19
15
20
export default async function Page({ params }: Props) {
16
-
// We should fetch the the monitors and incident here
21
+
// We should fetch the monitors and incident here
17
22
// also the page information
18
23
if (!params.domain) return notFound();
19
24
const page = await api.page.getPageBySlug.query({ slug: params.domain });
···
41
46
const firstMonitor = page?.monitors?.[0]; // temporary solution
42
47
43
48
return {
49
+
...defaultMetadata,
44
50
title: page?.title,
45
51
description: page?.description,
46
52
icons: page?.icon,
47
53
twitter: {
54
+
...twitterMetadata,
48
55
images: [
49
56
`/api/og?monitorId=${firstMonitor?.id}&title=${page?.title}&description=${
50
57
page?.description || `The ${page?.title} status page}`
51
58
}`,
52
59
],
53
-
card: "summary_large_image",
54
60
title: page?.title,
55
61
description: page?.description,
56
62
},
57
63
openGraph: {
58
-
type: "website",
64
+
...ogMetadata,
59
65
images: [
60
66
`/api/og?monitorId=${firstMonitor?.id}&title=${page?.title}&description=${
61
67
page?.description || `The ${page?.title} status page}`