openstatus.dev
Openstatus
www.openstatus.dev
feat: about page (#618)
* feat: about page
* fix: middleware
* chore: marketing header navigation
* fix: mdx font-cal and group-hover heading
* 🥰 update about us
* 🥰 update about us
* chore: little updates
---------
Co-authored-by: Thibault Le Ouay <thibaultleouay@gmail.Com>
authored by
Maximilian Kaske
Thibault Le Ouay
and committed by
GitHub
2d96755a
ecade014
+279
-26
+2
-1
apps/web/contentlayer.config.ts
+2
-1
apps/web/contentlayer.config.ts
···
6
6
import { FAQ } from "./src/contentlayer/documents/faq";
7
7
import { LegalPost } from "./src/contentlayer/documents/legal";
8
8
import { Post } from "./src/contentlayer/documents/post";
9
+
import { Unrelated } from "./src/contentlayer/documents/unrelated";
9
10
import autolinkHeadings from "./src/contentlayer/plugins/autolink-headings";
10
11
import prettyCode from "./src/contentlayer/plugins/pretty-code";
11
12
12
13
export default makeSource({
13
14
contentDirPath: "src/content/",
14
-
documentTypes: [Post, LegalPost, Changelog, FAQ],
15
+
documentTypes: [Post, LegalPost, Changelog, FAQ, Unrelated],
15
16
mdx: {
16
17
remarkPlugins: [remarkGfm],
17
18
rehypePlugins: [rehypeSlug, prettyCode, autolinkHeadings],
+1
-1
apps/web/package.json
+1
-1
apps/web/package.json
+43
apps/web/src/app/about/_components/member.tsx
+43
apps/web/src/app/about/_components/member.tsx
···
1
+
import Image from "next/image";
2
+
import Link from "next/link";
3
+
4
+
import { Button } from "@openstatus/ui";
5
+
import { cn } from "@openstatus/ui/src/lib/utils";
6
+
7
+
import { Icons } from "@/components/icons";
8
+
import type { ValidIcon } from "@/components/icons";
9
+
10
+
export interface MemberProps {
11
+
name: string;
12
+
role: string;
13
+
image: { src: string };
14
+
socials?: { label: string; href: string; icon: ValidIcon }[];
15
+
}
16
+
17
+
export function Member({ name, role, image, socials }: MemberProps) {
18
+
return (
19
+
<div className="grid w-full gap-3">
20
+
<div className="border-border relative aspect-square max-w-full overflow-hidden rounded-lg border">
21
+
<Image src={image.src} alt={name} layout="fill" objectFit="contain" />
22
+
</div>
23
+
<div className="flex items-start justify-between gap-2">
24
+
<div className="grid gap-1">
25
+
<h3 className="font-medium">{name}</h3>
26
+
<p className="text-muted-foreground">{role}</p>
27
+
</div>
28
+
<div className="grid gap-1">
29
+
{socials?.map((item) => {
30
+
const Icon = Icons[item.icon];
31
+
return (
32
+
<Button key={item.href} variant="ghost" size="icon" asChild>
33
+
<Link href={item.href} target="_blank">
34
+
{item.icon ? <Icon className={cn("h-4 w-4")} /> : null}
35
+
</Link>
36
+
</Button>
37
+
);
38
+
})}
39
+
</div>
40
+
</div>
41
+
</div>
42
+
);
43
+
}
+75
apps/web/src/app/about/page.tsx
+75
apps/web/src/app/about/page.tsx
···
1
+
import { allUnrelateds } from "contentlayer/generated";
2
+
3
+
import { Separator } from "@openstatus/ui";
4
+
5
+
import { Mdx } from "@/components/content/mdx";
6
+
import { Shell } from "@/components/dashboard/shell";
7
+
import { MarketingLayout } from "@/components/layout/marketing-layout";
8
+
import { Member } from "./_components/member";
9
+
import type { MemberProps } from "./_components/member";
10
+
11
+
const story = allUnrelateds.find((unrelated) => unrelated.slug === "our-story");
12
+
13
+
export default function AboutPage() {
14
+
return (
15
+
<MarketingLayout>
16
+
<div className="my-8 grid w-full gap-8">
17
+
<h1 className="text-foreground font-cal text-4xl">About OpenStatus</h1>
18
+
<div className="text-muted-foreground grid max-w-2xl gap-2 text-lg">
19
+
<p>
20
+
OpenStatus is on a mission to provide a{" "}
21
+
<span className="text-foreground font-medium">reliable</span>,{" "}
22
+
<span className="text-foreground font-medium">easy</span> and{" "}
23
+
<span className="text-foreground font-medium">fast</span> way to
24
+
synthetically monitor your APIs and websites.
25
+
</p>
26
+
<p className="italic">Made by developers for developers.</p>
27
+
</div>
28
+
<ul className="grid grid-cols-2 gap-4 sm:grid-cols-3 sm:gap-6 md:gap-8">
29
+
{members.map((member) => (
30
+
<li key={member.name}>
31
+
<Member {...member} />
32
+
</li>
33
+
))}
34
+
<li></li>
35
+
</ul>
36
+
<Separator className="my-2" />
37
+
<Shell className="dark:border-card-foreground/30 mx-auto w-auto shadow sm:px-8 sm:py-8 md:px-12 md:py-12">
38
+
{story ? (
39
+
<Mdx
40
+
code={story.body.code}
41
+
className="sm:prose-lg prose-li:my-0 mx-auto"
42
+
/>
43
+
) : null}
44
+
</Shell>
45
+
</div>
46
+
</MarketingLayout>
47
+
);
48
+
}
49
+
50
+
const members: MemberProps[] = [
51
+
{
52
+
name: "Maximilian Kaske",
53
+
role: "Pilsner Advocate",
54
+
image: { src: "/assets/authors/max.png" },
55
+
socials: [
56
+
{
57
+
label: "Twitter",
58
+
href: "https://twitter.com/mxkaske",
59
+
icon: "twitter",
60
+
},
61
+
],
62
+
},
63
+
{
64
+
name: "Thibault Le Ouay Ducasse",
65
+
role: "Gose Lover",
66
+
image: { src: "/assets/authors/thibault.jpeg" },
67
+
socials: [
68
+
{
69
+
label: "Twitter",
70
+
href: "https://twitter.com/thibaultleouay",
71
+
icon: "twitter",
72
+
},
73
+
],
74
+
},
75
+
];
+1
apps/web/src/app/sitemap.ts
+1
apps/web/src/app/sitemap.ts
+9
-2
apps/web/src/components/content/mdx.tsx
+9
-2
apps/web/src/components/content/mdx.tsx
···
1
1
import { getMDXComponent } from "next-contentlayer/hooks";
2
2
3
+
import { cn } from "@/lib/utils";
3
4
import { components } from "./mdx-components";
4
5
5
6
interface MdxProps {
6
7
code: string;
8
+
className?: string;
7
9
}
8
10
9
-
export function Mdx({ code }: MdxProps) {
11
+
export function Mdx({ code, className }: MdxProps) {
10
12
const MDXComponent = getMDXComponent(code);
11
13
12
14
return (
13
15
// FIXME: weird behaviour when `prose-headings:font-cal` and on mouse movement font gets bigger
14
-
<div className="prose prose-slate dark:prose-invert prose-pre:border prose-pre:border-border prose-pre:rounded-lg prose-img:rounded-lg prose-img:border prose-img:border-border">
16
+
<div
17
+
className={cn(
18
+
"prose-headings:font-cal prose-headings:font-normal prose prose-slate dark:prose-invert prose-pre:border prose-pre:border-border prose-pre:rounded-lg prose-img:rounded-lg prose-img:border prose-img:border-border",
19
+
className,
20
+
)}
21
+
>
15
22
<MDXComponent components={{ ...components }} />
16
23
</div>
17
24
);
+5
-5
apps/web/src/components/layout/marketing-header.tsx
+5
-5
apps/web/src/components/layout/marketing-header.tsx
···
18
18
19
19
return (
20
20
<header
21
-
className={cn("grid w-full grid-cols-2 gap-2 sm:grid-cols-5", className)}
21
+
className={cn("grid w-full grid-cols-2 gap-2 md:grid-cols-5", className)}
22
22
>
23
-
<div className="flex items-center sm:col-span-1">
23
+
<div className="flex items-center md:col-span-1">
24
24
<BrandName />
25
25
</div>
26
-
<div className="hidden items-center justify-center sm:col-span-3 sm:flex sm:gap-1">
26
+
<div className="border-border mx-auto hidden items-center justify-center rounded-full border px-2 backdrop-blur-[2px] md:col-span-3 md:flex md:gap-1">
27
27
<Button variant="link" asChild>
28
28
<Link href="/blog">Blog</Link>
29
29
</Button>
···
42
42
</Link>
43
43
</Button>
44
44
</div>
45
-
<div className="flex items-center justify-end gap-3 sm:col-span-1">
46
-
<div className="block sm:hidden">
45
+
<div className="flex items-center justify-end gap-3 md:col-span-1">
46
+
<div className="block md:hidden">
47
47
<MarketingMenu />
48
48
</div>
49
49
<Button asChild className="rounded-full">
+1
-1
apps/web/src/components/layout/marketing-layout.tsx
+1
-1
apps/web/src/components/layout/marketing-layout.tsx
···
8
8
return (
9
9
<PlausibleProvider domain="openstatus.dev">
10
10
<ClerkProvider>
11
-
<main className="flex min-h-screen w-full flex-col items-center justify-center space-y-6 p-4 md:p-8">
11
+
<main className="flex min-h-screen w-full flex-col items-center justify-center gap-8 p-4 md:p-8">
12
12
<MarketingHeader className="mx-auto w-full max-w-4xl" />
13
13
<div className="mx-auto flex w-full max-w-4xl flex-1 flex-col items-start justify-center">
14
14
{children}
+4
-1
apps/web/src/contentlayer/plugins/autolink-headings.ts
+4
-1
apps/web/src/contentlayer/plugins/autolink-headings.ts
···
5
5
rehypeAutolinkHeadings,
6
6
{
7
7
behavior: "append",
8
+
headingProperties: {
9
+
className: "group",
10
+
},
8
11
properties: {
9
12
className: [
10
-
"no-underline after:content-['#'] after:text-muted-foreground/50 after:hover:text-muted-foreground ml-1 after:p-1",
13
+
"no-underline group-hover:after:content-['#'] after:text-muted-foreground/30 after:hover:text-muted-foreground ml-1 after:p-1",
11
14
],
12
15
"aria-hidden": "true",
13
16
},
+2
apps/web/src/middleware.ts
+2
apps/web/src/middleware.ts
+93
-15
pnpm-lock.yaml
+93
-15
pnpm-lock.yaml
···
328
328
specifier: 8.4.31
329
329
version: 8.4.31
330
330
rehype-autolink-headings:
331
-
specifier: 6.1.1
332
-
version: 6.1.1
331
+
specifier: 7.1.0
332
+
version: 7.1.0
333
333
rehype-slug:
334
334
specifier: 5.1.0
335
335
version: 5.1.0
···
5150
5150
dependencies:
5151
5151
'@types/unist': 2.0.9
5152
5152
5153
+
/@types/hast@3.0.4:
5154
+
resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
5155
+
dependencies:
5156
+
'@types/unist': 2.0.9
5157
+
dev: true
5158
+
5153
5159
/@types/http-errors@2.0.3:
5154
5160
resolution: {integrity: sha512-pP0P/9BnCj1OVvQR2lF41EkDG/lWWnDyA203b/4Fmi2eTyORnBtcDoKDwjWQthELrBvWkMOrvSOnZ8OVlW6tXA==}
5155
5161
dev: false
···
5337
5343
/@types/unist@2.0.9:
5338
5344
resolution: {integrity: sha512-zC0iXxAv1C1ERURduJueYzkzZ2zaGyc+P2c95hgkikHPr3z8EdUZOlgEQ5X0DRmwDZn+hekycQnoeiiRVrmilQ==}
5339
5345
5346
+
/@types/unist@3.0.2:
5347
+
resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==}
5348
+
dev: true
5349
+
5340
5350
/@types/validator@13.11.6:
5341
5351
resolution: {integrity: sha512-HUgHujPhKuNzgNXBRZKYexwoG+gHKU+tnfPqjWXFghZAnn73JElicMkuSKJyLGr9JgyA8IgK7fj88IyA9rwYeQ==}
5342
5352
dev: false
···
5488
5498
eslint-visitor-keys: 3.4.3
5489
5499
dev: false
5490
5500
5501
+
/@ungap/structured-clone@1.2.0:
5502
+
resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
5503
+
dev: true
5504
+
5491
5505
/@unkey/api@0.16.0:
5492
5506
resolution: {integrity: sha512-y7loET+ULNQIxfujwMv39Cu1h5I9eNPh9VBwxarhWWBSsRo6Id7nmb4cUYF6ltbarZ5BMqrVGeBjOyKtPpJPrg==}
5493
5507
dev: false
···
6753
6767
defined: 1.0.1
6754
6768
minimist: 1.2.8
6755
6769
dev: false
6770
+
6771
+
/devlop@1.1.0:
6772
+
resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
6773
+
dependencies:
6774
+
dequal: 2.0.3
6775
+
dev: true
6756
6776
6757
6777
/didyoumean@1.2.2:
6758
6778
resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
···
8300
8320
'@types/hast': 2.3.7
8301
8321
dev: true
8302
8322
8303
-
/hast-util-is-element@2.1.3:
8304
-
resolution: {integrity: sha512-O1bKah6mhgEq2WtVMk+Ta5K7pPMqsBBlmzysLdcwKVrqzZQ0CHqUPiIVspNhAG1rvxpvJjtGee17XfauZYKqVA==}
8323
+
/hast-util-heading-rank@3.0.0:
8324
+
resolution: {integrity: sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==}
8305
8325
dependencies:
8306
-
'@types/hast': 2.3.7
8307
-
'@types/unist': 2.0.9
8326
+
'@types/hast': 3.0.4
8327
+
dev: true
8328
+
8329
+
/hast-util-is-element@3.0.0:
8330
+
resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==}
8331
+
dependencies:
8332
+
'@types/hast': 3.0.4
8308
8333
dev: true
8309
8334
8310
8335
/hast-util-parse-selector@3.1.1:
···
11501
11526
rc: 1.2.8
11502
11527
dev: true
11503
11528
11504
-
/rehype-autolink-headings@6.1.1:
11505
-
resolution: {integrity: sha512-NMYzZIsHM3sA14nC5rAFuUPIOfg+DFmf9EY1YMhaNlB7+3kK/ZlE6kqPfuxr1tsJ1XWkTrMtMoyHosU70d35mA==}
11529
+
/rehype-autolink-headings@7.1.0:
11530
+
resolution: {integrity: sha512-rItO/pSdvnvsP4QRB1pmPiNHUskikqtPojZKJPPPAVx9Hj8i8TwMBhofrrAYRhYOOBZH9tgmG5lPqDLuIWPWmw==}
11506
11531
dependencies:
11507
-
'@types/hast': 2.3.7
11508
-
extend: 3.0.2
11509
-
hast-util-has-property: 2.0.1
11510
-
hast-util-heading-rank: 2.1.1
11511
-
hast-util-is-element: 2.1.3
11512
-
unified: 10.1.2
11513
-
unist-util-visit: 4.1.2
11532
+
'@types/hast': 3.0.4
11533
+
'@ungap/structured-clone': 1.2.0
11534
+
hast-util-heading-rank: 3.0.0
11535
+
hast-util-is-element: 3.0.0
11536
+
unified: 11.0.4
11537
+
unist-util-visit: 5.0.0
11514
11538
dev: true
11515
11539
11516
11540
/rehype-pretty-code@0.10.0(shiki@0.14.4):
···
12918
12942
trough: 2.1.0
12919
12943
vfile: 5.3.7
12920
12944
12945
+
/unified@11.0.4:
12946
+
resolution: {integrity: sha512-apMPnyLjAX+ty4OrNap7yumyVAMlKx5IWU2wlzzUdYJO9A8f1p9m/gywF/GM2ZDFcjQPrx59Mc90KwmxsoklxQ==}
12947
+
dependencies:
12948
+
'@types/unist': 3.0.2
12949
+
bail: 2.0.2
12950
+
devlop: 1.1.0
12951
+
extend: 3.0.2
12952
+
is-plain-obj: 4.1.0
12953
+
trough: 2.1.0
12954
+
vfile: 6.0.1
12955
+
dev: true
12956
+
12921
12957
/unist-util-generated@2.0.1:
12922
12958
resolution: {integrity: sha512-qF72kLmPxAw0oN2fwpWIqbXAVyEqUzDHMsbtPvOudIlUzXYFIeQIuxXQCRCFh22B7cixvU0MG7m3MW8FTq/S+A==}
12923
12959
dev: false
···
12930
12966
resolution: {integrity: sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==}
12931
12967
dependencies:
12932
12968
'@types/unist': 2.0.9
12969
+
12970
+
/unist-util-is@6.0.0:
12971
+
resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
12972
+
dependencies:
12973
+
'@types/unist': 3.0.2
12974
+
dev: true
12933
12975
12934
12976
/unist-util-position-from-estree@1.1.2:
12935
12977
resolution: {integrity: sha512-poZa0eXpS+/XpoQwGwl79UUdea4ol2ZuCYguVaJS4qzIOMDzbqz8a3erUCOmubSZkaOuGamb3tX790iwOIROww==}
···
12955
12997
dependencies:
12956
12998
'@types/unist': 2.0.9
12957
12999
13000
+
/unist-util-stringify-position@4.0.0:
13001
+
resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
13002
+
dependencies:
13003
+
'@types/unist': 3.0.2
13004
+
dev: true
13005
+
12958
13006
/unist-util-visit-parents@2.1.2:
12959
13007
resolution: {integrity: sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==}
12960
13008
dependencies:
···
12967
13015
'@types/unist': 2.0.9
12968
13016
unist-util-is: 5.2.1
12969
13017
13018
+
/unist-util-visit-parents@6.0.1:
13019
+
resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
13020
+
dependencies:
13021
+
'@types/unist': 3.0.2
13022
+
unist-util-is: 6.0.0
13023
+
dev: true
13024
+
12970
13025
/unist-util-visit@1.4.1:
12971
13026
resolution: {integrity: sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==}
12972
13027
dependencies:
···
12979
13034
'@types/unist': 2.0.9
12980
13035
unist-util-is: 5.2.1
12981
13036
unist-util-visit-parents: 5.1.3
13037
+
13038
+
/unist-util-visit@5.0.0:
13039
+
resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
13040
+
dependencies:
13041
+
'@types/unist': 3.0.2
13042
+
unist-util-is: 6.0.0
13043
+
unist-util-visit-parents: 6.0.1
13044
+
dev: true
12982
13045
12983
13046
/universal-user-agent@6.0.0:
12984
13047
resolution: {integrity: sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==}
···
13146
13209
'@types/unist': 2.0.9
13147
13210
unist-util-stringify-position: 3.0.3
13148
13211
13212
+
/vfile-message@4.0.2:
13213
+
resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
13214
+
dependencies:
13215
+
'@types/unist': 3.0.2
13216
+
unist-util-stringify-position: 4.0.0
13217
+
dev: true
13218
+
13149
13219
/vfile@5.3.7:
13150
13220
resolution: {integrity: sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==}
13151
13221
dependencies:
···
13153
13223
is-buffer: 2.0.5
13154
13224
unist-util-stringify-position: 3.0.3
13155
13225
vfile-message: 3.1.4
13226
+
13227
+
/vfile@6.0.1:
13228
+
resolution: {integrity: sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==}
13229
+
dependencies:
13230
+
'@types/unist': 3.0.2
13231
+
unist-util-stringify-position: 4.0.0
13232
+
vfile-message: 4.0.2
13233
+
dev: true
13156
13234
13157
13235
/victory-vendor@36.6.11:
13158
13236
resolution: {integrity: sha512-nT8kCiJp8dQh8g991J/R5w5eE2KnO8EAIP0xocWlh9l2okngMWglOPoMZzJvek8Q1KUc4XE/mJxTZnvOB1sTYg==}