Skip to content

feat: DR-8328 Add compute page first stage #7859

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
carlagn wants to merge 42 commits into
base: main
Choose a base branch
from
Open

feat: DR-8328 Add compute page first stage #7859

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
dd6154c
Add compute page first stage
carlagn Apr 30, 2026
d7c463f
Update children
carlagn Apr 30, 2026
5621589
Update flex positioning
carlagn Apr 30, 2026
bba9660
Update how-it-works
carlagn Apr 30, 2026
674de46
Update flex distance
carlagn Apr 30, 2026
121e62d
Add globe hero to compute page
carlagn May 4, 2026
72bced2
remove import
carlagn May 4, 2026
021de20
Improve fade in
carlagn May 4, 2026
9551710
Update cobeglobe performance
carlagn May 4, 2026
2f94a9a
Add network component
carlagn May 4, 2026
25ec2b9
Add network globe and fix build
carlagn May 4, 2026
288fc1a
Push no networkglobe
carlagn May 4, 2026
42963ad
remove both globes
carlagn May 4, 2026
6d8405d
Add back globes and fix issues*
carlagn May 4, 2026
64d5e61
Remove hero globe
carlagn May 4, 2026
d297c0e
Fix globe hero
carlagn May 4, 2026
ccd5ec9
Update location/zone legend
carlagn May 4, 2026
a822db8
Update how-it-works icons
carlagn May 4, 2026
a6bf6e3
Optimise animations
carlagn May 4, 2026
7c6e1a0
Update how it works
carlagn May 4, 2026
d690cde
Add dynamic updates
carlagn May 4, 2026
d3bb903
Update live pulse
carlagn May 4, 2026
eadbbf3
Update font families
carlagn May 4, 2026
567d8f0
update type
carlagn May 4, 2026
eb14522
feat(docs): add compute docs content
mhartington May 4, 2026
fe37564
docs(compue): fix builds
mhartington May 4, 2026
8e9bf0f
docs(compue): fix builds
mhartington May 4, 2026
73fde4c
Update fonts
carlagn May 5, 2026
29afa36
Pretty text on title
carlagn May 5, 2026
57434ef
Update icons
carlagn May 5, 2026
95786ef
Update icons
carlagn May 5, 2026
3ba1aad
Update fonts for <h2> and eyebrow
carlagn May 5, 2026
c6f84a5
Update margin for 02/features
carlagn May 5, 2026
9af3564
Update navbar
carlagn May 5, 2026
9ab7d7b
Update font-size for text 4xl and 5xl
carlagn May 5, 2026
1c29864
feat(docs): add Netlify and Vercel Compute migration guides
aidankmcalister May 5, 2026
d68d391
feat(site): homepage rework
mhartington May 6, 2026
1fd0625
Merge branch 'main' into feat/DR-8328-compute-page
mhartington May 6, 2026
56f9d16
design rework
mhartington May 7, 2026
7928ca7
seo audit of homepage
mhartington May 7, 2026
264152d
adjust images
mhartington May 7, 2026
a62d7f5
update
mhartington May 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
155 changes: 85 additions & 70 deletions apps/docs/src/app/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Comment on lines +9 to 22
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🌐 Web query:

In standard CSS, what happens to @importrules that appear after a qualified rule like:root { ... }? Also, for Tailwind CSS v4 with Lightning CSS/PostCSS, does the toolchain safely process late @import rules in source CSS?

💡 Result:

In standard CSS, @import rules that appear after a qualified rule like :root { ... } are invalid and ignored by user agents (browsers). The CSS specification (Cascading and Inheritance Levels 3-6) requires all @import rules to precede all other valid at-rules and style rules (except @charset, @layer statements, and @supports-condition), or else they are invalid. A qualified rule is a style rule (selector + block), so any @import after it is ignored. This is confirmed by MDN, W3C specs, and browser behavior. For Tailwind CSS v4 with Lightning CSS/PostCSS, the toolchain does not safely process late @import rules in source CSS. Tailwind v4 uses Lightning CSS for processing, which enforces the same CSS validity rules: late @import rules cause errors or are invalid. Tailwind's built-in @import handling (replacing postcss-import) processes valid @import rules at the top, inlining them while preserving order and conditions, but late @imports remain invalid per CSS rules and Lightning CSS bundling docs explicitly state they cause errors. Issues in Tailwind repos confirm late @imports (e.g., after @import "tailwindcss") are ignored or fail, requiring them at the top (e.g., before Tailwind import for fonts). No evidence of special handling for late @imports; source CSS must follow standard CSS positioning rules.

Citations:

Move the :root block below all @import rules—this placement violates CSS specifications.

Per the CSS Cascade specification (Levels 3–6), all @import rules must precede any qualified rules (like :root { ... }). Any @import that appears after a qualified rule is invalid and ignored by browsers and build tools alike. Tailwind CSS v4 with Lightning CSS enforces these same rules strictly—it doesn't provide special handling for late imports.

The current code at lines 9–17 places :root before the imports at lines 18–22, which means fumadocs-ui, fumadocs-openapi, and @prisma-docs/ui styles will be silently dropped during the build, leaving your UI incomplete.

Proposed fix 
 `@import` "tailwindcss";
 `@import` "@prisma/eclipse/styles/globals.css";
-
-: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";
+
+: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;
+}
🧰 Tools
🪛 Stylelint (17.9.0)

[error] 18-18: Invalid position for @import rule (no-invalid-position-at-import-rule)

(no-invalid-position-at-import-rule)

[error] 19-19: Invalid position for @import rule (no-invalid-position-at-import-rule)

(no-invalid-position-at-import-rule)

[error] 20-20: Invalid position for @import rule (no-invalid-position-at-import-rule)

(no-invalid-position-at-import-rule)

[error] 21-21: Invalid position for @import rule (no-invalid-position-at-import-rule)

(no-invalid-position-at-import-rule)

[error] 22-22: Unexpected unknown at-rule "@source" (scss/at-rule-no-unknown)

(scss/at-rule-no-unknown)

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@apps/docs/src/app/global.css` around lines 9 - 22, The :root rule block
currently appears before several `@import` rules (e.g., `@import`
"fumadocs-ui/css/shadcn.css", `@import` "fumadocs-ui/css/preset.css", `@import`
"fumadocs-openapi/css/preset.css", `@import` "@prisma-docs/ui/styles"), which
violates CSS `@import` ordering; move the entire :root { ... } block so it comes
after all `@import` statements to ensure those imports are recognized by browsers
and build tools (adjust the file so all `@import` lines appear first, then the
:root block).


#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;
}
}
37 changes: 35 additions & 2 deletions apps/docs/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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: {
Expand All @@ -30,9 +55,17 @@ export const metadata: Metadata = {

export default function Layout({ children }: { children: ReactNode }) {
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" data-auto-add-css="false" />
<Script
src={EclipseFA}
crossOrigin="anonymous"
data-auto-add-css="false"
/>
<Script
src="https://ingest.promptwatch.com/js/client.min.js"
strategy="afterInteractive"
Expand Down
26 changes: 20 additions & 6 deletions apps/eclipse/src/app/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
38 changes: 36 additions & 2 deletions apps/eclipse/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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"
Expand Down
Loading
Loading