updated password section and added back stats og

apps/web/app/ui/modals/add-edit-link-modal/password-section.tsx

@@ -43,7 +43,7 @@ export default function PasswordSection({
               <SimpleTooltipContent
                 title="Restrict access to your short links by encrypting it with a password."
                 cta="Learn more."
-                href={`${HOME_DOMAIN}/help/article/how-to-create-link#password-protection`}
+                href={`${HOME_DOMAIN}/help/article/password-protected-links`}
               />
             }
           />

apps/web/pages/api/og/stats.tsx

@@ -0,0 +1,135 @@
+import { ImageResponse, NextRequest } from "next/server";
+import { getLinkViaEdge } from "#/lib/planetscale";
+import { getStats } from "#/lib/stats";
+import { DUB_LOGO, nFormatter, truncate } from "@dub/utils";
+
+export const runtime = "edge";
+export const contentType = "image/png";
+
+const satoshiBLack = fetch(
+  new URL("@/styles/Satoshi-Black.ttf", import.meta.url),
+).then((res) => res.arrayBuffer());
+
+const satoshiBold = fetch(
+  new URL("@/styles/Satoshi-Bold.ttf", import.meta.url),
+).then((res) => res.arrayBuffer());
+
+export default async function handler(req: NextRequest) {
+  const [satoshiBlackData, satoshiBoldData] = await Promise.all([
+    satoshiBLack,
+    satoshiBold,
+  ]);
+
+  const domain = req.nextUrl.searchParams.get("domain") || "dub.sh";
+  const key = req.nextUrl.searchParams.get("key") || "github";
+
+  const data = await getLinkViaEdge(domain, key);
+  if (!data?.publicStats) {
+    return new Response(`Stats for this link are not public`, {
+      status: 403,
+    });
+  }
+
+  const timeseries = await getStats({
+    domain,
+    key,
+    endpoint: "timeseries",
+    interval: "30d",
+  });
+
+  const maxClicks = Math.max(...timeseries.map((t) => t.clicks));
+  const totalClicks = timeseries.reduce((acc, t) => acc + t.clicks, 0);
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          height: "100%",
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          backgroundColor: "white",
+          backgroundImage: `url(https://dub.co/_static/background.png)`,
+        }}
+      >
+        <img
+          src={DUB_LOGO}
+          style={{
+            width: "80px",
+            height: "80px",
+            position: "absolute",
+            top: "40px",
+            right: "40px",
+          }}
+        />
+        <h1
+          style={{
+            fontSize: "90px",
+            fontFamily: "Satoshi Black",
+            background:
+              "linear-gradient(95.78deg, #C7BF00 21.66%, #E43838 86.47%)",
+            backgroundClip: "text",
+            color: "transparent",
+            marginTop: "50px",
+            lineHeight: "7rem",
+          }}
+        >
+          {domain}/{truncate(key, 12)}
+        </h1>
+        <p
+          style={{
+            fontSize: "50px",
+            fontFamily: "Satoshi Bold",
+            color: "black",
+            opacity: 0.8,
+            marginTop: "0px",
+          }}
+        >
+          {nFormatter(totalClicks)} clicks in the last 30 days
+        </p>
+        <div
+          style={{
+            position: "absolute",
+            bottom: "0px",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "flex-end",
+            justifyContent: "center",
+            marginTop: "50px",
+          }}
+        >
+          {timeseries.map(({ start, clicks }) => (
+            <div
+              key={start}
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "25px",
+                height: `${(clicks / maxClicks) * 360}px`, // normalize clicks count to scale of 360px
+                marginRight: "12px",
+                backgroundColor: "#2563eb",
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+      fonts: [
+        {
+          name: "Satoshi Black",
+          data: satoshiBlackData,
+        },
+        {
+          name: "Satoshi Bold",
+          data: satoshiBoldData,
+        },
+      ],
+    },
+  );
+}