From f9f404a1169c5509006b5009ecd2f0e6a6ec374d Mon Sep 17 00:00:00 2001
From: Thibault Le Ouay <thibaultleouay@gmail.Com>
Date: Tue, 7 Nov 2023 21:43:44 +0100
Subject: [PATCH] =?UTF-8?q?=E2=8C=9B=20add=20suspense=20=20(#447)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ⌛

* ⌛

* ⌛

* chore: suspense

* feat: widget docs and suspense

* chore: docs

* chore: bump version

* feat: add props to package.json

---------

Co-authored-by: mxkaske <maximilian@kaske.org>
---
 apps/web/src/app/page.tsx                     | 75 +--------------
 apps/web/src/app/play/page.tsx                |  2 +-
 .../components/layout/marketing-footer.tsx    |  5 +-
 .../layout/status-widget-suspense.tsx         | 21 +++++
 apps/web/src/components/marketing/example.tsx | 48 ++++++++++
 apps/web/src/components/marketing/hero.tsx    | 76 ++++++++++++++++
 apps/web/src/components/tracker.tsx           |  2 +-
 apps/web/src/lib/github.ts                    |  1 +
 packages/react/README.md                      | 91 +++++++++++++++++--
 packages/react/package.json                   | 11 ++-
 packages/react/src/widget.tsx                 |  2 +-
 11 files changed, 246 insertions(+), 88 deletions(-)
 create mode 100644 apps/web/src/components/layout/status-widget-suspense.tsx
 create mode 100644 apps/web/src/components/marketing/example.tsx
 create mode 100644 apps/web/src/components/marketing/hero.tsx

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index da708bd2..42f333e9 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,89 +1,22 @@
-import Link from "next/link";
-import { ClerkProvider } from "@clerk/nextjs";
-import { ChevronRight } from "lucide-react";
-
-import { Badge, Button } from "@openstatus/ui";
-
 import { Shell } from "@/components/dashboard/shell";
 import { MarketingLayout } from "@/components/layout/marketing-layout";
 import { Cards, SpecialCard } from "@/components/marketing/cards";
+import { Example } from "@/components/marketing/example";
 import { FAQs } from "@/components/marketing/faqs";
+import { Hero } from "@/components/marketing/hero";
 import { Partners } from "@/components/marketing/partners";
 import { Plans } from "@/components/marketing/plans";
 import { Stats } from "@/components/marketing/stats";
-import { Tracker } from "@/components/tracker";
 import { cardConfig, specialCardConfig } from "@/config/features";
-import { getGitHubStars } from "@/lib/github";
-import { getHomeMonitorListData } from "@/lib/tb";
-import { numberFormatter } from "@/lib/utils";
 
 export const revalidate = 600;
 
 export default async function Page() {
-  const data = await getHomeMonitorListData();
-  const stars = await getGitHubStars();
   return (
     <MarketingLayout>
       <div className="grid gap-8">
-        <Shell className="text-center">
-          <Link
-            href="https://twitter.com/mxkaske/status/1685666982786404352?s=20"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <Badge variant="outline">
-              Announcement Post <ChevronRight className="ml-1 h-3 w-3" />
-            </Badge>
-          </Link>
-          <h1 className="text-foreground font-cal mb-6 mt-2 text-3xl">
-            Open-source monitoring service
-          </h1>
-          <p className="text-muted-foreground mx-auto mb-6 max-w-lg text-lg">
-            OpenStatus is an open source monitoring services with incident
-            managements.
-          </p>
-          {/* much better than using flex without text alignment, text stays center even thought not same length */}
-          <div className="my-4 grid gap-2 sm:grid-cols-2">
-            <div className="text-center sm:block sm:text-right">
-              <Button className="w-48 rounded-full sm:w-auto" asChild>
-                <Link href="/app/sign-up">Get Started</Link>
-              </Button>
-            </div>
-            <div className="text-center sm:block sm:text-left">
-              <Button
-                variant="outline"
-                className="w-48 rounded-full sm:w-auto"
-                asChild
-              >
-                <Link href="/github" target="_blank">
-                  Star on GitHub{" "}
-                  <Badge variant="secondary" className="ml-1 hidden sm:block">
-                    {numberFormatter(stars)}
-                  </Badge>
-                  <Badge variant="secondary" className="ml-1 block sm:hidden">
-                    {stars}
-                  </Badge>
-                </Link>
-              </Button>
-            </div>
-          </div>
-        </Shell>
-        <Shell className="text-center">
-          <h2 className="font-cal mb-3 text-2xl">Status</h2>
-          <Button asChild variant="outline" className="rounded-full">
-            <Link href="/play">Playground</Link>
-          </Button>
-          <div className="mx-auto max-w-md">
-            {data && (
-              <Tracker
-                data={data}
-                id="openstatusPing"
-                name="Ping"
-                url="https://www.openstatus.dev/api/ping"
-              />
-            )}
-          </div>
-        </Shell>
+        <Hero />
+        <Example />
         <Cards {...cardConfig.monitors} />
         <Stats />
         <Cards {...cardConfig.incidents} />
diff --git a/apps/web/src/app/play/page.tsx b/apps/web/src/app/play/page.tsx
index 6fd10b20..0e4e01d3 100644
--- a/apps/web/src/app/play/page.tsx
+++ b/apps/web/src/app/play/page.tsx
@@ -13,7 +13,7 @@ export default async function PlayPage() {
         {data && (
           <Tracker
             data={data}
-            id="1"
+            id={1}
             name="Ping"
             url="https://www.openstatus.dev/api/ping"
           />
diff --git a/apps/web/src/components/layout/marketing-footer.tsx b/apps/web/src/components/layout/marketing-footer.tsx
index d0bd6040..fb622b2b 100644
--- a/apps/web/src/components/layout/marketing-footer.tsx
+++ b/apps/web/src/components/layout/marketing-footer.tsx
@@ -1,10 +1,9 @@
 import Link from "next/link";
 import { ArrowUpRight } from "lucide-react";
 
-import { StatusWidget } from "@openstatus/react";
-
 import { cn } from "@/lib/utils";
 import { Shell } from "../dashboard/shell";
+import { StatusWidgetContainer } from "./status-widget-suspense";
 
 interface Props {
   className?: string;
@@ -16,7 +15,7 @@ export function MarketingFooter({ className }: Props) {
       <Shell className="grid gap-6">
         <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
           <div className="order-4 md:order-1">
-            <StatusWidget slug="status" />
+            <StatusWidgetContainer slug="status" />
           </div>
           <div className="order-1 flex flex-col gap-3 text-sm md:order-2">
             <p className="text-foreground font-semibold">Community</p>
diff --git a/apps/web/src/components/layout/status-widget-suspense.tsx b/apps/web/src/components/layout/status-widget-suspense.tsx
new file mode 100644
index 00000000..45999bd4
--- /dev/null
+++ b/apps/web/src/components/layout/status-widget-suspense.tsx
@@ -0,0 +1,21 @@
+import { Suspense } from "react";
+
+import type { StatusWidgetProps } from "@openstatus/react";
+import { StatusWidget } from "@openstatus/react";
+
+export function StatusWidgetFallback() {
+  return (
+    <div className="flex max-w-fit items-center gap-2 rounded-md border border-gray-200 px-3 py-1 text-sm text-gray-700 hover:bg-gray-100 hover:text-black">
+      <span className="h-5 w-20 animate-pulse rounded-md bg-gray-600/10" />
+      <span className="relative inline-flex h-2 w-2 rounded-full bg-black/10" />
+    </div>
+  );
+}
+
+export function StatusWidgetContainer(props: StatusWidgetProps) {
+  return (
+    <Suspense fallback={<StatusWidgetFallback />}>
+      <StatusWidget {...props} />
+    </Suspense>
+  );
+}
diff --git a/apps/web/src/components/marketing/example.tsx b/apps/web/src/components/marketing/example.tsx
new file mode 100644
index 00000000..3aa99e21
--- /dev/null
+++ b/apps/web/src/components/marketing/example.tsx
@@ -0,0 +1,48 @@
+import { Suspense } from "react";
+import Link from "next/link";
+
+import { Button } from "@openstatus/ui";
+
+import { Shell } from "@/components/dashboard/shell";
+import { Tracker } from "@/components/tracker";
+import { getHomeMonitorListData } from "@/lib/tb";
+
+export async function Example() {
+  return (
+    <Shell className="text-center">
+      <h2 className="font-cal mb-3 text-2xl">Status</h2>
+      <Button asChild variant="outline" className="rounded-full">
+        <Link href="/play">Playground</Link>
+      </Button>
+      <div className="mx-auto max-w-md">
+        <Suspense fallback={<ExampleTrackerFallback />}>
+          <ExampleTracker />
+        </Suspense>
+      </div>
+    </Shell>
+  );
+}
+
+function ExampleTrackerFallback() {
+  return (
+    <Tracker
+      data={[]}
+      id={1}
+      name="Ping"
+      url="https://www.openstatus.dev/api/ping"
+    />
+  );
+}
+
+async function ExampleTracker() {
+  const data = await getHomeMonitorListData();
+  if (!data) return null;
+  return (
+    <Tracker
+      data={data}
+      id={1}
+      name="Ping"
+      url="https://www.openstatus.dev/api/ping"
+    />
+  );
+}
diff --git a/apps/web/src/components/marketing/hero.tsx b/apps/web/src/components/marketing/hero.tsx
new file mode 100644
index 00000000..d2388474
--- /dev/null
+++ b/apps/web/src/components/marketing/hero.tsx
@@ -0,0 +1,76 @@
+import { Suspense } from "react";
+import Link from "next/link";
+import { ChevronRight } from "lucide-react";
+
+import { Badge, Button } from "@openstatus/ui";
+
+import { Shell } from "@/components/dashboard/shell";
+import { getGitHubStars } from "@/lib/github";
+import { numberFormatter } from "@/lib/utils";
+
+export function Hero() {
+  return (
+    <Shell className="text-center">
+      <Link
+        href="https://twitter.com/mxkaske/status/1685666982786404352?s=20"
+        target="_blank"
+        rel="noreferrer"
+      >
+        <Badge variant="outline">
+          Announcement Post <ChevronRight className="ml-1 h-3 w-3" />
+        </Badge>
+      </Link>
+      <h1 className="text-foreground font-cal mb-6 mt-2 text-3xl">
+        Open-source monitoring service
+      </h1>
+      <p className="text-muted-foreground mx-auto mb-6 max-w-lg text-lg">
+        OpenStatus is an open source monitoring services with incident
+        managements.
+      </p>
+      {/* much better than using flex without text alignment, text stays center even thought not same length */}
+      <div className="my-4 grid gap-2 sm:grid-cols-2">
+        <div className="text-center sm:block sm:text-right">
+          <Button className="w-48 rounded-full sm:w-auto" asChild>
+            <Link href="/app/sign-up">Get Started</Link>
+          </Button>
+        </div>
+        <div className="text-center sm:block sm:text-left">
+          <Button
+            variant="outline"
+            className="w-48 rounded-full sm:w-auto"
+            asChild
+          >
+            <Link href="/github" target="_blank">
+              Star on GitHub{" "}
+              <Suspense fallback={<StarsBadgeFallback />}>
+                <StarsBadge />
+              </Suspense>
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </Shell>
+  );
+}
+
+function StarsBadgeFallback() {
+  return (
+    <Badge variant="secondary" className="ml-1">
+      ~
+    </Badge>
+  );
+}
+
+async function StarsBadge() {
+  const stars = await getGitHubStars();
+  return (
+    <>
+      <Badge variant="secondary" className="ml-1 hidden sm:block">
+        {numberFormatter(stars)}
+      </Badge>
+      <Badge variant="secondary" className="ml-1 block sm:hidden">
+        {stars}
+      </Badge>
+    </>
+  );
+}
diff --git a/apps/web/src/components/tracker.tsx b/apps/web/src/components/tracker.tsx
index d1e6c80f..56ee16ef 100644
--- a/apps/web/src/components/tracker.tsx
+++ b/apps/web/src/components/tracker.tsx
@@ -157,7 +157,7 @@ const Bar = ({
               <p className="text-sm font-semibold">{getStatus(ratio).label}</p>
               {context === "play" ? (
                 <Link
-                  href={`/monitor/openstatusPing?fromDate=${cronTimestamp}&toDate=${toDate}`}
+                  href={`/monitor/1?fromDate=${cronTimestamp}&toDate=${toDate}`}
                   className="text-muted-foreground hover:text-foreground"
                 >
                   <Eye className="h-4 w-4" />
diff --git a/apps/web/src/lib/github.ts b/apps/web/src/lib/github.ts
index b63f836c..c78e0174 100644
--- a/apps/web/src/lib/github.ts
+++ b/apps/web/src/lib/github.ts
@@ -7,6 +7,7 @@ const schema = z.object({
 export async function getGitHubStars() {
   const res = await fetch(
     "https://api.github.com/repos/openstatusHQ/openstatus",
+    { next: { revalidate: 600 } }, // 10min
   );
   const json = await res.json();
   const github = schema.safeParse(json);
diff --git a/packages/react/README.md b/packages/react/README.md
index 606bb17d..1c2c33e0 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -1,24 +1,97 @@
 ## Status Widget
 
-Create an account on [openstatus.dev](https://openstatus.dev) and integrate a
-simple wiget into your React Application.
+Create an account on [openstatus.dev](https://openstatus.dev), start monitoring
+your endpoints and include your own StatusWidget into your React Application.
+
+![Image of StatusWidget on openstatus.dev](https://openstatus.dev/assets/changelog/status-widget.png)
 
 ### Install
 
 ```bash
 npm install @openstatus/react
+pnpm add @openstatus/react
+yarn add @openstatus/react
+bun add @openstatus/react
 ```
 
-```bash
-pnpm add @openstatus/react
+### How to use the StatusWidget in your Next.js App Router
+
+#### Include the styles.css
+
+If you are using tailwind, extend your config with:
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    "./app/**/*.{tsx,ts,mdx,md}",
+    // OpenStatus Widget
+    "./node_modules/@openstatus/react/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
 ```
 
-```bash
-yarn add @openstatus/react
+Otherwise, include the styles in your App:
+
+```tsx
+// app/layout.tsx
+import "@openstatus/react/dist/styles.css";
 ```
 
-```bash
-bun add @openstatus/react
+The `StatusWidget` is a React Server Component. Include the `slug` to your
+status-page.
+
+```tsx
+import { StatusWidget } from "@openstatus/react";
+
+export function Page() {
+  return <StatusWidget slug="status" />;
+}
 ```
 
-Learn more [here](https://docs.openstatus.dev/packages/react).
+### Headless getStatus utility function
+
+If you would like to style it yourself, you can use the `getStatus` function to
+access the type response of the api call to:
+
+`https://api.openstatus.dev/public/status/:slug`
+
+Learn more about our supported
+[API endpoints](https://docs.openstatus.dev/api-reference/auth).
+
+```ts
+import { getStatus } from "@openstatus/react";
+
+// React Server Component
+async function CustomStatusWidget() {
+  const res = await getStatus("slug");
+  // ^StatusResponse = { status: Status }
+
+  const { status } = res;
+  // ^Status = "unknown" | "operational" | "degraded_performance" | "partial_outage" | "major_outage" | "under_maintenance"
+
+  return <div>{/* customize */}</div>;
+}
+```
+
+```ts
+export type Status =
+  | "operational"
+  | "degraded_performance"
+  | "partial_outage"
+  | "major_outage"
+  | "under_maintenance"
+  | "unknown";
+```
+
+Learn more in the [docs](https://docs.openstatus.dev/packages/react).
+
+#### About OpenStatus
+
+OpenStatus is an open source monitoring services with incident managements.
+
+Follow our journey [@openstatusHQ](https://x.com/openstatusHQ).
diff --git a/packages/react/package.json b/packages/react/package.json
index 1999a6f9..43188fc4 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,12 @@
 {
   "name": "@openstatus/react",
-  "version": "0.0.1",
+  "version": "0.0.2",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/openstatusHQ/openstatus.git"
+  },
+  "keywords": ["openstatus", "react", "monitoring"],
+  "homepage": "https://github.com/openstatusHQ/openstatus#readme",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "module": "./dist/index.mjs",
@@ -9,7 +15,8 @@
   ],
   "license": "MIT",
   "scripts": {
-    "dev":"tsup && pnpm run build:tailwind",
+    "dev":"tsup --watch && pnpm run dev:tailwind",
+    "dev:tailwind": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch",
     "build:tailwind": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify",
     "build": "tsup && pnpm run build:tailwind"
   },
diff --git a/packages/react/src/widget.tsx b/packages/react/src/widget.tsx
index f0491720..08d20a7a 100644
--- a/packages/react/src/widget.tsx
+++ b/packages/react/src/widget.tsx
@@ -23,7 +23,7 @@ export async function getStatus(slug: string): Promise<StatusResponse> {
   return { status: "unknown" };
 }
 
-type StatusWidgetProps = {
+export type StatusWidgetProps = {
   slug: string;
   href?: string;
 };
-- 
2.51.2