Docs/status widget (#356)

* chore: status widget

* chore: include maintenance

apps/docs/pages/_meta.json

···
   "getting-started": "Getting started",
   "integrations": "Integrations",
   "developer-guide": "Developer guide",
-  "rest-api": "API",
+  "api-server": "API",
   "contact": {
     "title": "🌐 Website",
     "type": "page",

apps/docs/pages/api-server/_meta.json

···
+{
+  "auth": "Auth Token",
+  "openapi": "OpenAPI Specs",
+  "status-widget": "Status Widget"
+}

apps/docs/pages/api-server/status-widget.mdx

···
+# Public Status Widget
+
+We have added a public endpoint where you can access the status of your status
+page. To access it, you only need the unique `:slug` you have chosen for your
+page.
+
+```bash
+curl https://api.openstatus.dev/public/status/:slug
+```
+
+The response is a JSON object with the following structure:
+
+```json
+{ "status": "operational" }
+```
+
+in which the status can be one of the following values:
+
+```ts
+enum Status {
+  Operational = "operational",
+  DegradedPerformance = "degraded_performance",
+  PartialOutage = "partial_outage",
+  MajorOutage = "major_outage",
+  UnderMaintenance = "under_maintenance", // currently not in use
+  Unknown = "unknown",
+}
+```
+
+### How does it work?
+
+The status is calculated by the ratio `uptime / (uptime + downtime)` of the last
+5 cron jobs of each monitor which we accumulate together. It is a simple
+calculation that gives us a good overview of the status of your services.
+
+```ts
+function getStatus(ratio: number) {
+  if (isNaN(ratio)) return Status.Unknown;
+  if (ratio >= 0.98) return Status.Operational;
+  if (ratio >= 0.6) return Status.DegradedPerformance;
+  if (ratio >= 0.3) return Status.PartialOutage;
+  if (ratio >= 0) return Status.MajorOutage;
+  return Status.Unknown;
+}
+```
+
+We are caching the result for `30 seconds` to reduce the load on our database.
+
+> If you have a doubt about the above calculation, feel free to contact us via
+> [[e-mail]](mailto:[e-mail]) or
+> [discord](https://openstatus.dev/discord).
+
+### React Widget
+
+We currently do not provide any SDK or package to integrate the status into your
+stack. But will in the future.
+
+If you are using Nextjs and RSC with the `/app` directory, feel free to use that
+Component. Small reminder that we are using shadcn ui and tailwindcss. You might
+want to update the `bg-muted` and `text-foreground` classes to your needs.
+
+![Status Widget](/img/status-widget/widget-example.png)
+
+We are using `zod` to validate the response. You can use any other library if
+you want or just remove it. But better be safe than sorry.
+
+```tsx
+import * as z from "zod";
+
+const statusEnum = z.enum([
+  "operational",
+  "degraded_performance",
+  "partial_outage",
+  "major_outage",
+  "under_maintenance", // currently not in use
+  "unknown",
+]);
+
+const statusSchema = z.object({ status: statusEnum });
+
+const dictionary = {
+  operational: {
+    label: "Operational",
+    color: "bg-green-500",
+  },
+  degraded_performance: {
+    label: "Degraded Performance",
+    color: "bg-yellow-500",
+  },
+  partial_outage: {
+    label: "Partial Outage",
+    color: "bg-yellow-500",
+  },
+  major_outage: {
+    label: "Major Outage",
+    color: "bg-red-500",
+  },
+  unknown: {
+    label: "Unknown",
+    color: "bg-gray-500",
+  },
+  under_maintenance: {
+    label: "Under Maintenance",
+    color: "bg-gray-500",
+  },
+} as const;
+
+export async function StatusWidget({ slug }: { slug: string }) {
+  const res = await fetch(`https://api.openstatus.dev/public/status/${slug}`, {
+    next: { revalidate: 60 }, // cache request for 60 seconds
+  });
+  const data = await res.json();
+  const parsed = statusSchema.safeParse(data);
+
+  let label = "Unknown";
+  let color = "bg-gray-500";
+
+  if (parsed.success) {
+    const status = dictionary[parsed.data.status];
+    label = status.label;
+    color = status.color;
+  }
+
+  return (
+    <a
+      className="border-border text-foreground/70 hover:bg-muted hover:text-foreground inline-flex max-w-fit items-center gap-2 rounded-md border px-3 py-1 text-sm"
+      href={`https://${slug}.openstatus.dev`}
+      target="_blank"
+      rel="noreferrer"
+    >
+      {label}
+      <span className={`inline-block h-2 w-2 rounded-full ${color}`} />
+    </a>
+  );
+}
+```

apps/docs/pages/rest-api/_meta.json

···
-{
-  "auth": "Auth Token",
-  "openapi": "OpenAPI Specs"
-}

apps/docs/pages/rest-api/auth.mdx apps/docs/pages/api-server/auth.mdx

···
 
 Use the above snippet to try it out.
 
-Learn more about [all the endpoints](/rest-api/openapi) we provide.
+Learn more about [all the endpoints](/api-server/openapi) we provide.
 
 We currently do not have an SDK to make the best out of it. Any contributions
 are welcome.

apps/docs/public/sitemap-0.xml

···
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://docs.openstatus.dev</loc><lastmod>2023-10-02T15:53:57.199Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://docs.openstatus.dev/developer-guide/get-started</loc><lastmod>2023-10-02T15:53:57.199Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://docs.openstatus.dev/developer-guide/requirements</loc><lastmod>2023-10-02T15:53:57.199Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://docs.openstatus.dev/developer-guide/setup</loc><lastmod>2023-10-02T15:53:57.199Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://docs.openstatus.dev/developer-guide/setup-env</loc><lastmod>2023-10-02T15:53:57.199Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://docs.openstatus.dev/getting-started</loc><lastmod>2023-10-02T15:53:57.199Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://docs.openstatus.dev/getting-started/alerting</loc><lastmod>2023-10-02T15:53:57.199Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://docs.openstatus.dev/getting-started/heartbeat</loc><lastmod>2023-10-02T15:53:57.199Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://docs.openstatus.dev/getting-started/monitor</loc><lastmod>2023-10-02T15:53:57.199Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://docs.openstatus.dev/getting-started/status-page</loc><lastmod>2023-10-02T15:53:57.199Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://docs.openstatus.dev/integrations</loc><lastmod>2023-10-02T15:53:57.199Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://docs.openstatus.dev/integrations/discord</loc><lastmod>2023-10-02T15:53:57.199Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://docs.openstatus.dev/integrations/fly</loc><lastmod>2023-10-02T15:53:57.199Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://docs.openstatus.dev/integrations/otel</loc><lastmod>2023-10-02T15:53:57.199Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://docs.openstatus.dev/integrations/phone-call</loc><lastmod>2023-10-02T15:53:57.199Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://docs.openstatus.dev/integrations/slack</loc><lastmod>2023-10-02T15:53:57.200Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://docs.openstatus.dev/integrations/sms</loc><lastmod>2023-10-02T15:53:57.200Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://docs.openstatus.dev/integrations/telegram</loc><lastmod>2023-10-02T15:53:57.200Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://docs.openstatus.dev/integrations/vercel</loc><lastmod>2023-10-02T15:53:57.200Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://docs.openstatus.dev/rest-api/auth</loc><lastmod>2023-10-02T15:53:57.200Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://docs.openstatus.dev/rest-api/openapi</loc><lastmod>2023-10-02T15:53:57.200Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://docs.openstatus.dev</loc><lastmod>2023-10-04T17:44:38.856Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://docs.openstatus.dev/api-server/status-widget</loc><lastmod>2023-10-04T17:44:38.856Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
 </urlset>

apps/server/src/public/status.ts

···
     monitorData.map(async ({ monitors_to_pages }) => {
       return await getMonitorList(tb)({
         monitorId: String(monitors_to_pages.monitorId),
-        limit: 3, // limits the grouped cronTimestamps
+        limit: 5, // limits the grouped cronTimestamps
       });
     }),
   );

apps/web/src/components/layout/marketing-footer.tsx

···
 import Link from "next/link";
 import { ArrowUpRight } from "lucide-react";
 
+import { StatusWidget } from "@/components/status-widget";
 import { cn } from "@/lib/utils";
 import { Shell } from "../dashboard/shell";
 
···
 export function MarketingFooter({ className }: Props) {
   return (
     <footer className={cn("w-full", className)}>
-      <Shell className="grid grid-cols-2 gap-6 md:grid-cols-4">
-        <div className="flex flex-col gap-3 text-sm">
-          <p className="text-foreground font-semibold">People</p>
-          <FooterLink
-            href="https://twitter.com/thibaultleouay"
-            label="@thibaultleouay"
-          />
-          <FooterLink href="https://twitter.com/mxkaske" label="@mxkaske" />
-        </div>
-        <div className="flex flex-col gap-3 text-sm">
-          <p className="text-foreground font-semibold">Community</p>
-          <FooterLink href="/github" label="GitHub" external />
-          <FooterLink href="/discord" label="Discord" external />
-          <FooterLink href="https://twitter.com/openstatusHQ" label="X" />
-        </div>
-        <div className="flex flex-col gap-3 text-sm">
-          <p className="text-foreground font-semibold">Resources</p>
-          <FooterLink href="https://status.openstatus.dev" label="Status" />
-          <FooterLink href="/blog" label="Blog" />
-          <FooterLink href="https://docs.openstatus.dev" label="Docs" />
-          <FooterLink href="/oss-friends" label="OSS Friends" />
-        </div>
-        <div className="flex flex-col gap-3 text-sm">
-          <p className="text-foreground font-semibold">Legal</p>
-          <FooterLink href="/legal/terms" label="Terms" />
-          <FooterLink href="/legal/privacy" label="Privacy" />
+      <Shell className="grid gap-6">
+        <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
+          <div className="flex flex-col gap-3 text-sm">
+            <p className="text-foreground font-semibold">People</p>
+            <FooterLink
+              href="https://twitter.com/thibaultleouay"
+              label="@thibaultleouay"
+            />
+            <FooterLink href="https://twitter.com/mxkaske" label="@mxkaske" />
+          </div>
+          <div className="flex flex-col gap-3 text-sm">
+            <p className="text-foreground font-semibold">Community</p>
+            <FooterLink href="/github" label="GitHub" external />
+            <FooterLink href="/discord" label="Discord" external />
+            <FooterLink href="https://twitter.com/openstatusHQ" label="X" />
+          </div>
+          <div className="flex flex-col gap-3 text-sm">
+            <p className="text-foreground font-semibold">Resources</p>
+            <FooterLink href="https://status.openstatus.dev" label="Status" />
+            <FooterLink href="/blog" label="Blog" />
+            <FooterLink href="https://docs.openstatus.dev" label="Docs" />
+            <FooterLink href="/oss-friends" label="OSS Friends" />
+          </div>
+          <div className="flex flex-col gap-3 text-sm">
+            <p className="text-foreground font-semibold">Legal</p>
+            <FooterLink href="/legal/terms" label="Terms" />
+            <FooterLink href="/legal/privacy" label="Privacy" />
+          </div>
         </div>
+        <StatusWidget slug="status" />
       </Shell>
     </footer>
   );

apps/web/src/components/marketing/partners.tsx

···
 
 export function Partners() {
   return (
-    <div className="grid gap-2">
+    <div className="grid gap-4">
       <h3 className="text-muted-foreground font-cal text-center text-sm">
         Trusted By
       </h3>
-      <div className="grid grid-cols-1 gap-8 sm:grid-cols-3 sm:gap-16">
+      <div className="grid grid-cols-1 gap-8 sm:grid-cols-4 sm:gap-16">
         <div className="flex items-center justify-center">
           <a
             href="https://status.hanko.io"
···
           </a>
         </div>
         <div className="flex items-center justify-center">
-          {/* <p className="text-muted-foreground text-xs">You</p> */}
-        </div>
-        <div className="flex items-center justify-center">
-          <p className="text-muted-foreground text-md">You</p>
+          <p className="text-muted-foreground text-sm">You</p>
         </div>
       </div>
     </div>

apps/web/src/components/status-widget.tsx

···
+import * as z from "zod";
+
+const statusEnum = z.enum([
+  "operational",
+  "degraded_performance",
+  "partial_outage",
+  "major_outage",
+  "unknown",
+]);
+
+const statusSchema = z.object({ status: statusEnum });
+
+const dictionary = {
+  operational: {
+    label: "Operational",
+    color: "bg-green-500",
+  },
+  degraded_performance: {
+    label: "Degraded Performance",
+    color: "bg-yellow-500",
+  },
+  partial_outage: {
+    label: "Partial Outage",
+    color: "bg-yellow-500",
+  },
+  major_outage: {
+    label: "Major Outage",
+    color: "bg-red-500",
+  },
+  unknown: {
+    label: "Unknown",
+    color: "bg-gray-500",
+  },
+  under_maintenance: {
+    label: "Under Maintenance",
+    color: "bg-gray-500",
+  },
+} as const;
+
+export async function StatusWidget({ slug }: { slug: string }) {
+  const res = await fetch(`https://api.openstatus.dev/public/status/${slug}`, {
+    next: { revalidate: 60 }, // cache request for 60 seconds
+  });
+  const data = await res.json();
+  const parsed = statusSchema.safeParse(data);
+
+  let label = "Unknown";
+  let color = "bg-gray-500";
+
+  if (parsed.success) {
+    const status = dictionary[parsed.data.status];
+    label = status.label;
+    color = status.color;
+  }
+
+  return (
+    <a
+      className="border-border text-foreground/70 hover:bg-muted hover:text-foreground inline-flex max-w-fit items-center gap-2 rounded-md border px-3 py-1 text-sm"
+      href={`https://${slug}.openstatus.dev`}
+      target="_blank"
+      rel="noreferrer"
+    >
+      {label}
+      <span className={`inline-block h-2 w-2 rounded-full ${color}`} />
+    </a>
+  );
+}