openstatus.dev
Openstatus
www.openstatus.dev
feat(web): private-locations landing (#1482)
* feat: new private-location landing
* fix: hero size
authored by
Maximilian Kaske
and committed by
GitHub
2f6778c2
5de8e39f
+119
-9
+4
-2
apps/web/src/app/(pages)/(content)/(landing)/[slug]/page.tsx
+4
-2
apps/web/src/app/(pages)/(content)/(landing)/[slug]/page.tsx
···
91
91
92
92
function Hero({ hero, description }: { hero: string; description: string }) {
93
93
return (
94
-
<div className="mx-auto my-12 flex flex-col items-center gap-4 sm:my-16 md:gap-6">
94
+
<div className="mx-auto my-12 flex flex-col items-center gap-4 md:my-16 md:gap-6">
95
95
<div className="flex flex-col gap-2 text-center md:gap-4">
96
-
<h1 className="font-cal text-5xl leading-tight md:text-6xl">{hero}</h1>
96
+
<h1 className="max-w-md font-cal text-3xl leading-tight md:max-w-3xl md:text-5xl">
97
+
{hero}
98
+
</h1>
97
99
<h2 className="mx-auto max-w-md text-muted-foreground text-xl md:max-w-xl md:text-2xl">
98
100
{description}
99
101
</h2>
+2
apps/web/src/components/icons.tsx
+2
apps/web/src/components/icons.tsx
+76
-6
apps/web/src/components/marketing/feature/index.tsx
+76
-6
apps/web/src/components/marketing/feature/index.tsx
···
1
1
import { PasswordFormSuspense } from "@/app/status-page/[domain]/_components/password-form";
2
2
import { SubscribeButton } from "@/app/status-page/[domain]/_components/subscribe-button";
3
3
import { Mdx } from "@/components/content/mdx";
4
+
import { Icons } from "@/components/icons";
4
5
import { Chart } from "@/components/monitor-charts/chart";
5
6
import { RegionsPreset } from "@/components/monitor-dashboard/region-preset";
6
7
import { ResponseDetailTabs } from "@/components/ping-response-analysis/response-detail-tabs";
···
102
103
);
103
104
}
104
105
105
-
export function FeatureCharts(
106
-
props: Partial<Pick<InteractiveFeatureProps, "position">>,
107
-
) {
106
+
export function FeatureCharts({
107
+
title = "Opinionated Dashboard.",
108
+
subTitle = "Keep an overview about Uptime, P50, P75, P90, P95, P99 of your monitors. Share it with your team or make it public.",
109
+
position = "top",
110
+
}: Partial<Pick<InteractiveFeatureProps, "position" | "title" | "subTitle">>) {
108
111
return (
109
112
<InteractiveFeature
110
113
icon="line-chart"
111
114
iconText="Charts"
112
-
title="Opinionated Dashboard."
113
-
subTitle="Keep an overview about Uptime, P50, P75, P90, P95, P99 of your monitors. Share it with your team or make it public."
115
+
title={title}
116
+
subTitle={subTitle}
114
117
action={
115
118
<div className="mt-2">
116
119
<Button variant="outline" className="rounded-full" asChild>
···
126
129
</div>
127
130
}
128
131
col={2}
129
-
position={props.position || "top"}
132
+
position={position}
130
133
withGradient
131
134
/>
132
135
);
···
584
587
/>
585
588
);
586
589
}
590
+
591
+
export function FeaturePrivateLocationsDockerImage(
592
+
props: Partial<Pick<InteractiveFeatureProps, "position">>,
593
+
) {
594
+
return (
595
+
<InteractiveFeature
596
+
icon="cpu"
597
+
iconText="Performance"
598
+
title="Run anywhere."
599
+
position={props.position || "left"}
600
+
col={1}
601
+
subTitle="The Docker image is so small, you can run it on your own homelab or Raspberry Pi."
602
+
component={
603
+
<div className="flex h-full flex-col items-center justify-center gap-3">
604
+
<Icons.cpu className="size-8 text-muted-foreground" />
605
+
<p className="font-medium">8.5MB</p>
606
+
</div>
607
+
}
608
+
action={
609
+
<Button variant="outline" className="w-max rounded-full" asChild>
610
+
<Link href="https://docs.openstatus.dev/blog/deploy-private-locations-raspberry-pi">
611
+
Blog Post
612
+
</Link>
613
+
</Button>
614
+
}
615
+
/>
616
+
);
617
+
}
618
+
619
+
export function FeaturePrivateLocationsDockerInstall(
620
+
props: Partial<Pick<InteractiveFeatureProps, "position">>,
621
+
) {
622
+
const blockCLI = allUnrelateds.find(
623
+
(unrelated) => unrelated.slug === "cli-docker-private-locations",
624
+
);
625
+
626
+
if (!blockCLI) {
627
+
throw new Error("CLI Docker Private Locations block not found");
628
+
}
629
+
return (
630
+
<InteractiveFeature
631
+
icon="terminal"
632
+
iconText="Docker"
633
+
title="Deploy anywhere."
634
+
subTitle="Run our Docker container on your infrastructure."
635
+
component={
636
+
<Mdx
637
+
code={blockCLI.mdx}
638
+
className="my-auto max-w-none prose-pre:overflow-hidden"
639
+
/>
640
+
}
641
+
action={
642
+
<Button variant="outline" className="w-max rounded-full" asChild>
643
+
<a
644
+
href="https://docs.openstatus.dev/tutorial/how-to-create-private-location/"
645
+
rel="noreferrer"
646
+
target="_blank"
647
+
>
648
+
Documentation
649
+
</a>
650
+
</Button>
651
+
}
652
+
col={1}
653
+
position={props.position || "top"}
654
+
/>
655
+
);
656
+
}
+15
-1
apps/web/src/components/ping-response-analysis/multi-region-chart.tsx
+15
-1
apps/web/src/components/ping-response-analysis/multi-region-chart.tsx
···
102
102
</div>
103
103
);
104
104
}}
105
-
formatter={(value, name) => (
105
+
formatter={(value, name, item, index) => (
106
106
<>
107
107
<div
108
108
className="h-2.5 w-2.5 shrink-0 rounded-[2px] bg-(--color-bg)"
···
120
120
ms
121
121
</span>
122
122
</div>
123
+
{index === Object.keys(chartConfig).length - 1 && (
124
+
<div className="flex basis-full items-center border-t pt-1.5 font-medium text-foreground text-xs">
125
+
Latency
126
+
<div className="ml-auto flex items-baseline gap-0.5 font-medium font-mono text-foreground tabular-nums">
127
+
{Object.keys(chartConfig).reduce((acc, key) => {
128
+
if (key === "transfer") return acc;
129
+
return acc + item.payload[key];
130
+
}, 0)}
131
+
<span className="font-normal text-muted-foreground">
132
+
ms
133
+
</span>
134
+
</div>
135
+
</div>
136
+
)}
123
137
</>
124
138
)}
125
139
/>
+19
apps/web/src/config/landings.tsx
+19
apps/web/src/config/landings.tsx
···
12
12
FeatureOpenTelemetry,
13
13
FeatureOperationalBanner,
14
14
FeaturePasswordProtection,
15
+
FeaturePrivateLocationsDockerImage,
16
+
FeaturePrivateLocationsDockerInstall,
15
17
FeatureRaycastIntegration,
16
18
FeatureRegions,
17
19
FeatureResponseDetails,
···
121
123
/>,
122
124
<FeatureTerraformProvider key="feature-terraform-provider" />,
123
125
<BookingBanner key="booking-banner" />,
126
+
],
127
+
},
128
+
"private-locations": {
129
+
icon: "globe",
130
+
title: "Private Locations",
131
+
hero: "Monitor from anywhere. Literally anywhere.",
132
+
description: "Monitor your services from your own infrastructure.",
133
+
blocks: [
134
+
<SpeedBanner key="speed-banner" />,
135
+
<FeaturePrivateLocationsDockerImage key="feature-private-locations-docker-image" />,
136
+
<FeaturePrivateLocationsDockerInstall key="feature-private-locations-docker-install" />,
137
+
<FeatureCharts
138
+
key="feature-charts"
139
+
title="Private Locations."
140
+
subTitle="Latency, availability and performance of your internal services. Always be close to your users."
141
+
/>,
142
+
<BookingBanner key="enterprise-banner" />,
124
143
],
125
144
},
126
145
} satisfies Record<string, Landing>;