Merge branch 'main' into main

Author: akshy-rai

apps/docs/public/prisma-management-api.postman_collection.json

@@ -6,7 +6,6 @@ slug: "2026-07-24"
 headline: "Store files with Object Store buckets and see your workspace at a glance"
 tags:
   - "Prisma"
-  - "Prisma Postgres"
   - "Prisma Compute"
   - "Prisma Next"
 canonical: "/changelog#log2026-07-24"
@@ -73,12 +72,6 @@ App detection moved into the public SDK, and app URLs are now correct before you
 - **Improved** · The GitHub repository picker in the Prisma Console loads repositories page by page, so installations with more than 100 repositories can reach all of them, and switching accounts mid-load no longer briefly shows the wrong account's list.
 - **Fixed** · The app URL returned before your first deployment now names the domain your app will actually serve on. Previously it could point at the wrong region and never resolve.
 
-## Prisma Postgres
-
-One reliability improvement for databases waking from idle.
-
-- **Improved** · Cold starts no longer run through a single per-region coordinator, so one degraded coordinator cannot block databases from waking across its region.
-
 ## Prisma docs
 
 The prisma.io docs are now built for coding agents.

apps/site/content/changelog/2026-07-24.mdx

@@ -20,6 +20,7 @@
     "@prisma/eclipse": "workspace:^",
     "@react-three/fiber": "^9.5.0",
     "cobe": "^2.0.1",
+    "codehike": "^1.1.0",
     "cors": "^2.8.6",
     "fumadocs-core": "catalog:",
     "fumadocs-mdx": "catalog:",

apps/site/package.json

@@ -0,0 +1,50 @@
+"use client";
+
+import { cn } from "@/lib/cn";
+import { useRef, useState } from "react";
+
+/**
+ * The primary CTA: the scaffold command with a copy button. The command is
+ * plain text in the DOM (crawlable, selectable); the button is labelled and
+ * announces success politely.
+ */
+export function CopyCommand({ command, className }: { command: string; className?: string }) {
+  const [copied, setCopied] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(command);
+      setCopied(true);
+      clearTimeout(timer.current);
+      timer.current = setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Clipboard can be unavailable (permissions, http); the text stays selectable.
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-3 rounded-square-high border border-stroke-neutral bg-background-neutral-weaker py-2.5 pl-4 pr-2.5",
+        className,
+      )}
+    >
+      <code className="font-mono text-sm text-foreground-neutral md:text-base">
+        <span className="select-none text-foreground-neutral-weaker">$ </span>
+        {command}
+      </code>
+      <button
+        type="button"
+        onClick={copy}
+        aria-label={`Copy the command ${command}`}
+        className="grid size-8 shrink-0 place-items-center rounded-square border border-stroke-neutral text-foreground-neutral-weak transition-colors hover:border-stroke-ppg hover:text-foreground-ppg"
+      >
+        <i className={copied ? "fa-regular fa-check" : "fa-regular fa-copy"} aria-hidden />
+      </button>
+      <span aria-live="polite" className="sr-only">
+        {copied ? "Command copied to clipboard" : ""}
+      </span>
+    </div>
+  );
+}

apps/site/public/og/og-stack.png

@@ -0,0 +1,68 @@
+import { BunMark } from "./bun-mark";
+import { PrismaMark } from "./prisma-mark";
+import styles from "./stack.module.css";
+
+const heroLayers = [
+  {
+    id: "app",
+    eyebrow: "You write",
+    title: "Your application",
+    icon: <i className="fa-regular fa-laptop" aria-hidden />,
+    accent: "violet" as const,
+  },
+  {
+    id: "orm",
+    eyebrow: "Talks through",
+    title: "Prisma ORM",
+    icon: <PrismaMark className="size-[14px]" />,
+    accent: "orm" as const,
+  },
+  {
+    id: "postgres",
+    eyebrow: "Stores in",
+    title: "Prisma Postgres",
+    icon: <i className="fa-regular fa-database" aria-hidden />,
+    accent: "ppg" as const,
+  },
+  {
+    id: "compute",
+    eyebrow: "Runs on",
+    title: "Prisma Compute + Bun",
+    icon: <BunMark className="size-[15px]" />,
+    accent: "ppg" as const,
+  },
+];
+
+/**
+ * The hero's animated stack: the four layers enter staggered, then a request
+ * pulse travels the connectors on a loop. The layers widen toward the base so
+ * the visual previews the stack pyramid the reader meets one scroll later.
+ * Pure CSS, server-rendered; under prefers-reduced-motion everything is
+ * simply visible and static, so the relationship reads the same without
+ * animation.
+ */
+export function HeroVisual() {
+  return (
+    <div className={styles["hero-visual"]} aria-hidden>
+      {heroLayers.map((layer, index) => (
+        <div
+          key={layer.id}
+          className={styles["hero-layer-slot"]}
+          style={{ "--row": index } as React.CSSProperties}
+        >
+          {index > 0 && <span className={styles["hero-connector"]} />}
+          <div
+            className={`${styles["hero-layer"]} ${styles[`accent-${layer.accent}`]}`}
+            style={{ animationDelay: `${index * 140}ms` }}
+          >
+            <span className={styles["hero-layer-icon"]}>{layer.icon}</span>
+            <span className={styles["hero-layer-text"]}>
+              <span className={styles["hero-layer-eyebrow"]}>{layer.eyebrow}</span>
+              <span className={styles["hero-layer-title"]}>{layer.title}</span>
+            </span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

apps/site/src/app/stack/copy-command.tsx

@@ -0,0 +1,68 @@
+import { prisma_highlighter } from "@/lib/shiki_prisma";
+import type { HighlightedCode } from "codehike/code";
+import type { CSSProperties } from "react";
+import { journeySteps, type JourneyStep } from "./journey-steps";
+
+/** Code Hike token: plain text, or [text, color, style?]. */
+type CodeToken = string | [string, string, CSSProperties?];
+
+/**
+ * Tokenize with the site's shiki `prisma-dark` theme (CSS-variable colors, so
+ * it adapts to both themes) and re-shape into Code Hike's token format. Tokens
+ * are split per word because Code Hike's transitions move tokens
+ * independently; coarser tokens make the animation lurch.
+ */
+function toCodeTokens(text: string, color: string, out: CodeToken[]) {
+  for (const part of text.split(/(\s+)/)) {
+    if (!part) continue;
+    if (/^\s+$/.test(part)) {
+      out.push(part);
+    } else {
+      out.push([part, color]);
+    }
+  }
+}
+
+async function highlightStep(code: string, lang: JourneyStep["lang"]): Promise<HighlightedCode> {
+  const tokens: CodeToken[] = [];
+  if (lang === "text") {
+    // Plain-text steps (the project tree): names in the normal code color,
+    // trailing `# …` annotations dimmed like comments.
+    code.split("\n").forEach((line, index) => {
+      if (index > 0) tokens.push("\n");
+      const hash = line.indexOf("# ");
+      if (hash > -1) {
+        toCodeTokens(line.slice(0, hash), "var(--color-foreground-neutral-weak)", tokens);
+        toCodeTokens(line.slice(hash), "var(--color-disabled)", tokens);
+      } else {
+        toCodeTokens(line, "var(--color-foreground-neutral-weak)", tokens);
+      }
+    });
+  } else {
+    const highlighter = await prisma_highlighter();
+    const lines = highlighter.codeToTokensBase(code, {
+      lang,
+      theme: highlighter.getTheme("prisma-dark"),
+    });
+    lines.forEach((line, index) => {
+      if (index > 0) tokens.push("\n");
+      for (const token of line) {
+        toCodeTokens(token.content, token.color ?? "currentColor", tokens);
+      }
+    });
+  }
+  return {
+    tokens,
+    code,
+    lang,
+    meta: "",
+    themeName: "prisma-dark",
+    style: {},
+    annotations: [],
+  } as unknown as HighlightedCode;
+}
+
+/** Highlight every journey step on the server; the player receives plain data. */
+export async function highlightJourney(): Promise<HighlightedCode[]> {
+  return Promise.all(journeySteps.map((step) => highlightStep(step.code, step.lang)));
+}