feat: DR-8328 Add compute page first stage

apps/blog/src/app/(blog)/layout.tsx

@@ -11,6 +11,12 @@ export function baseOptions() {
       {
         text: "Products",
         sub: [
+          {
+            text: "Compute",
+            url: "https://www.prisma.io/compute",
+            desc: "Deploy TypeScript to production",
+            icon: "fa-regular fa-microchip",
+          },
           {
             text: "Postgres",
             url: "https://www.prisma.io/postgres",
@@ -20,7 +26,7 @@ export function baseOptions() {
           {
             text: "ORM",
             url: "https://www.prisma.io/orm",
-            desc: "Managed Postgres for global workloads",
+            desc: "Type-safe ORM for TypeScript and Node.js",
             icon: "fa-regular fa-database",
           },
           {
@@ -29,12 +35,6 @@ export function baseOptions() {
             url: "https://www.prisma.io/studio",
             desc: "Explore and manipulate your data",
           },
-          {
-            icon: "fa-regular fa-bolt",
-            text: "Accelerate",
-            desc: "Make your database global",
-            url: "https://www.prisma.io/accelerate",
-          },
         ],
       },
       {
@@ -105,10 +105,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <ThemeProvider defaultTheme="system" storageKey="theme">
       <UtmPersistence />
-      <NavigationWrapper
-        links={baseOptions().links}
-        utm={{ source: "website", medium: "blog" }}
-      />
+      <NavigationWrapper links={baseOptions().links} utm={{ source: "website", medium: "blog" }} />
       {children}
       <Footer basePath="/blog" />
     </ThemeProvider>

apps/docs/src/app/global.css

@@ -1,106 +1,121 @@
 @import "tailwindcss";
 @import "@prisma/eclipse/styles/globals.css";
+
+/* Forward the design-token font variables to the next/font/local preloaded
+   families. This :root block intentionally comes after the @import above so
+   it wins the cascade at equal specificity. The var() fallbacks preserve the
+   original CSS @font-face names in case --font-mona-sans / --font-mona-mono
+   are ever absent. */
+:root {
+    --font-sans-display:
+        var(--font-mona-sans, "Mona Sans VF"), "Inter", "Roboto",
+        "Helvetica Neue", "Arial Nova", "Nimbus Sans", "Arial", sans-serif;
+    --font-mono:
+        var(--font-mona-mono, "Mona Sans Mono VF"), ui-monospace,
+        "Cascadia Code", "Source Code Pro", "Menlo", "Consolas",
+        "DejaVu Sans Mono", monospace;
+}
 @import "fumadocs-ui/css/shadcn.css";
 @import "fumadocs-ui/css/preset.css";
 @import "fumadocs-openapi/css/preset.css";
 @import "@prisma-docs/ui/styles";
 @source "../../node_modules/streamdown/dist/*.js";
 
 #nd-sidebar {
-  @apply border-e;
-  background-color: var(--color-background);
+    @apply border-e;
+    background-color: var(--color-background);
 }
 
 header &[data-search-full] {
-  @apply rounded-xl;
+    @apply rounded-xl;
 }
 
 /* [data-header-tabs], */
 [data-header-body] {
-  @apply border-none;
+    @apply border-none;
 }
 
 #nd-page {
-  @apply @container;
+    @apply @container;
 }
 
 /* Hide reCAPTCHA badge from Kapa SDK - terms are in footer */
 .grecaptcha-badge {
-  visibility: hidden !important;
+    visibility: hidden !important;
 }
 
 @layer utilities {
-  .glitch {
-    position: relative;
-  }
-
-  .glitch::before,
-  .glitch::after {
-    content: attr(data-text);
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    overflow: hidden;
-  }
-
-  .glitch::before {
-    left: 2px;
-    text-shadow: -2px 0 red;
-    animation: glitch-1 2s infinite linear alternate-reverse;
-  }
-
-  .glitch::after {
-    left: -2px;
-    text-shadow: -2px 0 cyan;
-    animation: glitch-2 1.5s infinite linear alternate-reverse;
-  }
-
-  @keyframes glitch-1 {
-    0% {
-      clip-path: inset(20% 0 60% 0);
-    }
-    20% {
-      clip-path: inset(10% 0 85% 0);
-    }
-    40% {
-      clip-path: inset(40% 0 40% 0);
-    }
-    60% {
-      clip-path: inset(80% 0 5% 0);
+    .glitch {
+        position: relative;
     }
-    80% {
-      clip-path: inset(50% 0 30% 0);
-    }
-    100% {
-      clip-path: inset(25% 0 55% 0);
-    }
-  }
 
-  @keyframes glitch-2 {
-    0% {
-      clip-path: inset(80% 0 5% 0);
+    .glitch::before,
+    .glitch::after {
+        content: attr(data-text);
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        overflow: hidden;
     }
-    20% {
-      clip-path: inset(50% 0 30% 0);
-    }
-    40% {
-      clip-path: inset(20% 0 60% 0);
+
+    .glitch::before {
+        left: 2px;
+        text-shadow: -2px 0 red;
+        animation: glitch-1 2s infinite linear alternate-reverse;
     }
-    60% {
-      clip-path: inset(10% 0 85% 0);
+
+    .glitch::after {
+        left: -2px;
+        text-shadow: -2px 0 cyan;
+        animation: glitch-2 1.5s infinite linear alternate-reverse;
     }
-    80% {
-      clip-path: inset(40% 0 40% 0);
+
+    @keyframes glitch-1 {
+        0% {
+            clip-path: inset(20% 0 60% 0);
+        }
+        20% {
+            clip-path: inset(10% 0 85% 0);
+        }
+        40% {
+            clip-path: inset(40% 0 40% 0);
+        }
+        60% {
+            clip-path: inset(80% 0 5% 0);
+        }
+        80% {
+            clip-path: inset(50% 0 30% 0);
+        }
+        100% {
+            clip-path: inset(25% 0 55% 0);
+        }
     }
-    100% {
-      clip-path: inset(75% 0 15% 0);
+
+    @keyframes glitch-2 {
+        0% {
+            clip-path: inset(80% 0 5% 0);
+        }
+        20% {
+            clip-path: inset(50% 0 30% 0);
+        }
+        40% {
+            clip-path: inset(20% 0 60% 0);
+        }
+        60% {
+            clip-path: inset(10% 0 85% 0);
+        }
+        80% {
+            clip-path: inset(40% 0 40% 0);
+        }
+        100% {
+            clip-path: inset(75% 0 15% 0);
+        }
     }
-  }
 }
 @media (prefers-reduced-motion: reduce) {
-  .glitch::before,
-  .glitch::after {
-    animation: none;
-  }
+    .glitch::before,
+    .glitch::after {
+        animation: none;
+    }
 }

apps/docs/src/app/layout.tsx

@@ -2,6 +2,7 @@ import { Provider } from "@/components/provider";
 import { getBaseUrl } from "@/lib/urls";
 import "./global.css";
 import { Inter, Barlow } from "next/font/google";
+import localFont from "next/font/local";
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
 import Script from "next/script";
@@ -18,6 +19,30 @@ const barlow = Barlow({
   variable: "--font-barlow",
 });
 
+const monaSans = localFont({
+  src: [
+    {
+      path: "../../../../packages/eclipse/src/static/fonts/MonaSansVF[wdth,wght,opsz,ital].woff2",
+      weight: "200 900",
+      style: "normal",
+    },
+    {
+      path: "../../../../packages/eclipse/src/static/fonts/MonaSansVF[wdth,wght,opsz,ital].woff2",
+      weight: "200 900",
+      style: "italic",
+    },
+  ],
+  variable: "--font-mona-sans",
+  display: "swap",
+});
+
+const monaSansMono = localFont({
+  src: "../../../../packages/eclipse/src/static/fonts/MonaSansMonoVF[wght].woff2",
+  variable: "--font-mona-mono",
+  display: "swap",
+  weight: "200 900",
+});
+
 export const metadata: Metadata = {
   metadataBase: new URL(getBaseUrl()),
   title: {

apps/eclipse/content/design-system/tokens/typography.mdx

@@ -44,6 +44,10 @@ Title styles use the **Mona Sans VF** display font with heavy weights and extend
     <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-title-3xl &middot; 30px/36px &middot; weight 900 &middot; width 125</p>
     <p className="type-title-3xl">The quick brown fox jumps over the lazy dog</p>
   </div>
+  <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg">
+    <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-title-2xl &middot; 24px/32px &middot; weight 800 &middot; width 110</p>
+    <p className="type-title-2xl">The quick brown fox jumps over the lazy dog</p>
+  </div>
   <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg">
     <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-title-xl &middot; 20px/28px &middot; weight 800 &middot; width 110</p>
     <p className="type-title-xl">The quick brown fox jumps over the lazy dog</p>
@@ -69,6 +73,7 @@ Title styles use the **Mona Sans VF** display font with heavy weights and extend
 | `type-title-5xl` | Mona Sans VF | 64px (4rem) | 72px (4.5rem) | 900 | 125 | |
 | `type-title-4xl` | Mona Sans VF | 40px (2.5rem) | 48px (3rem) | 900 | 125 | |
 | `type-title-3xl` | Mona Sans VF | 30px (1.875rem) | 36px (2.25rem) | 900 | 125 | |
+| `type-title-2xl` | Mona Sans VF | 24px (1.5rem) | 32px (2rem) | 800 | 110 | |
 | `type-title-xl` | Mona Sans VF | 20px (1.25rem) | 28px (1.75rem) | 800 | 110 | |
 | `type-title-lg` | Mona Sans VF | 18px (1.125rem) | 28px (1.75rem) | 800 | 110 | |
 | `type-title-md` | Mona Sans VF | 16px (1rem) | 24px (1.5rem) | 800 | 110 | |

apps/eclipse/src/app/global.css

@@ -5,26 +5,40 @@
 @import "@prisma-docs/ui/styles";
 
 #nd-sidebar {
-  @apply border-e;
-  background-color: var(--color-background);
+    @apply border-e;
+    background-color: var(--color-background);
 }
 
 header &[data-search-full] {
-  @apply rounded-xl;
+    @apply rounded-xl;
 }
 
 /* [data-header-tabs], */
 [data-header-body] {
-  @apply border-none;
+    @apply border-none;
 }
 
 #nd-page {
-  @apply @container;
+    @apply @container;
 }
 h1,
 h2,
 h3,
 h4,
 h5 {
-  font-family: var(--font-sans-display);
+    font-family: var(--font-sans-display);
+}
+
+/* Wire next/font/local preloaded fonts into the design-token variables.
+   Declared after the @import so this :root wins on cascade order (same
+   specificity, later position). Falls back to the @font-face family names
+   from fonts.css if the CSS variables haven't been set yet. */
+:root {
+    --font-sans-display:
+        var(--font-mona-sans, "Mona Sans VF"), "Inter", "Roboto",
+        "Helvetica Neue", "Arial Nova", "Nimbus Sans", "Arial", sans-serif;
+    --font-mono:
+        var(--font-mona-mono, "Mona Sans Mono VF"), ui-monospace,
+        "Cascadia Code", "Source Code Pro", "Menlo", "Consolas",
+        "DejaVu Sans Mono", monospace;
 }

apps/eclipse/src/app/layout.tsx

@@ -2,6 +2,7 @@ import { Provider } from "@/components/provider";
 import Script from "next/script";
 import "./global.css";
 import { Inter, Barlow } from "next/font/google";
+import localFont from "next/font/local";
 import { FontAwesomeScript as EclipseFA } from "@prisma/eclipse";
 
 const inter = Inter({
@@ -15,11 +16,44 @@ const barlow = Barlow({
   variable: "--font-barlow",
 });
 
+const monaSans = localFont({
+  src: [
+    {
+      path: "../../../../packages/eclipse/src/static/fonts/MonaSansVF[wdth,wght,opsz,ital].woff2",
+      weight: "200 900",
+      style: "normal",
+    },
+    {
+      path: "../../../../packages/eclipse/src/static/fonts/MonaSansVF[wdth,wght,opsz,ital].woff2",
+      weight: "200 900",
+      style: "italic",
+    },
+  ],
+  variable: "--font-mona-sans",
+  display: "swap",
+});
+
+const monaSansMono = localFont({
+  src: "../../../../packages/eclipse/src/static/fonts/MonaSansMonoVF[wght].woff2",
+  variable: "--font-mona-mono",
+  display: "swap",
+  weight: "200 900",
+});
+
 export default function Layout({ children }: LayoutProps<"/">) {
   return (
-    <html lang="en" className={`${inter.variable} ${barlow.variable}`} suppressHydrationWarning>
+    <html
+      lang="en"
+      className={`${inter.variable} ${barlow.variable} ${monaSans.variable} ${monaSansMono.variable}`}
+      suppressHydrationWarning
+    >
       <head>
-        <Script src={EclipseFA} crossOrigin="anonymous" async data-auto-add-css="false" />
+        <Script
+          src={EclipseFA}
+          crossOrigin="anonymous"
+          async
+          data-auto-add-css="false"
+        />
         <Script
           src="https://widget.kapa.ai/kapa-widget.bundle.js"
           data-website-id="1b51bb03-43cc-4ef4-95f1-93288a91b560"