[Website] Add GraphQL Federation and Fusion Product pages

.github/workflows/ci.yml

@@ -167,7 +167,9 @@ jobs:
         run: npm ci
         working-directory: website
 
-      - name: Install Playwright Chromium
+      # rehype-mermaid renders inline SVG with Chromium during the app build.
+      # Visual tests use their own pinned Docker browser, not this installation.
+      - name: Install Chromium for Mermaid Build
         run: npx playwright install --with-deps chromium
         working-directory: website
 
@@ -187,10 +189,25 @@ jobs:
         run: npm run build
         working-directory: website
 
+      - name: Visual Runner Contract Tests
+        run: node --test scripts/visual-tests-docker.test.mjs
+        working-directory: website
+
       - name: Visual Regression Tests
         run: npm run test:visual
         working-directory: website
 
+      - name: Clean Up Visual Test Containers
+        if: ${{ always() }}
+        shell: bash
+        run: |
+          workspace="$(pwd -P)"
+          run="${GITHUB_RUN_ID}-${GITHUB_RUN_ATTEMPT}-${GITHUB_JOB}"
+          docker ps --all --quiet --filter "label=website-visual-workspace=$workspace" --filter "label=website-visual-run=$run" |
+            xargs --no-run-if-empty docker rm --force
+          docker volume ls --quiet --filter "label=website-visual-workspace=$workspace" --filter "label=website-visual-run=$run" |
+            xargs --no-run-if-empty docker volume rm
+
       - name: Upload Playwright Report
         if: ${{ !cancelled() }}
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1

website/README.md

@@ -16,6 +16,57 @@ npm ci
 npm run dev
 ```
 
+## Visual tests
+
+Install the website dependencies with `npm ci` and start Docker Desktop (or a
+Linux Docker Engine). Visual tests require a running Linux-container daemon;
+there is no host-browser fallback. Run these commands from `website`:
+
+```bash
+npm run test:visual
+npm run test:visual -- --grep 'Button|Card' --workers=2
+npm run test:visual:update -- --grep 'Button'
+node --test scripts/visual-tests-docker.test.mjs
+```
+
+Both visual scripts build static Storybook on the host, then run the static
+server, Chromium and screenshots in the same Docker renderer used by GitHub
+Actions. Arguments after `--` are forwarded unchanged to Playwright. Direct
+`npx playwright test` execution is rejected by the configuration guard.
+
+The renderer is always `linux/amd64`, including on Apple Silicon. The official
+Playwright 1.62.1 Noble image is pinned by digest in
+`scripts/visual-tests.Dockerfile`; its only customization is npm 11.21.1 to
+satisfy the repository's npm contract. A Playwright dependency upgrade must also
+update and verify the image digest, runner version and configuration guard.
+The runner logs the image, platform, Node, npm, Playwright and Chromium versions.
+
+Each invocation stages a finite, read-only set of inputs into an owned Linux
+worktree volume before installing dependencies. The host checkout, including its
+`node_modules`, is never mounted during installation or capture. Staged inputs
+are the website package/configuration, visual tests, built Storybook, and the
+local Mocha visualizer package files needed by its `file:` dependency. The
+worktree volume is removed on completion or interruption; the
+workspace/runtime/lockfile-specific npm cache volume persists between invocations.
+
+The test container has writable host mounts only for baselines in
+`tests/visual/__screenshots__`, test artifacts in `test-results`, and CI HTML
+reports in `playwright-report`. Those directories are created as the caller, so
+written files retain the caller's UID/GID; Docker Desktop handles ownership on
+Windows. Playwright `--output` paths must be relative paths within `test-results`
+or `playwright-report`, which preserves artifacts without exposing another
+checkout path for writes.
+
+Ordinary comparisons do not update baselines, including missing images, unless
+an explicit snapshot-update argument is supplied. Review screenshot diffs before
+accepting updates: the shared renderer prevents OS, font and browser drift, but
+does not add missing baselines or fix unintended UI changes.
+
+Stories tagged `visual-reduced-motion` capture their authored static state with
+`prefers-reduced-motion: reduce` applied before navigation; untagged stories keep
+the default media preference. InsightsWindow and ProtectWindow opt in to capture
+complete telemetry and static publish verdicts.
+
 ## Authoring Markdown Content
 
 Docs live in `content/docs/<product>/...` as Markdown (`.md`) files and are

website/app/(content)/platform/graphql-federation/ExplainerPage.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { expect, within } from "storybook/test";
+
+import { ExplainerPage } from "./ExplainerPage";
+
+const meta = {
+  title: "Pages/Platform/GraphQLFederation",
+  component: ExplainerPage,
+  parameters: { layout: "fullscreen" },
+  tags: ["no-snapshot"],
+} satisfies Meta<typeof ExplainerPage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const page = canvasElement.firstElementChild;
+    const sections = Array.from(page?.children ?? []);
+
+    expect(sections.map((section) => section.tagName)).toEqual(
+      Array(8).fill("SECTION"),
+    );
+    expect(sections.map((section) => section.id)).toEqual([
+      "",
+      "what-is",
+      "problem",
+      "how-it-works",
+      "from-apollo-federation",
+      "ai-driven-development",
+      "federation-comparisons",
+      "fusion",
+    ]);
+    expect(
+      within(sections[0] as HTMLElement).getByRole("heading", {
+        level: 1,
+        name: "GraphQL Federation",
+      }),
+    ).toBeVisible();
+    const closingSection = within(sections[7] as HTMLElement);
+    expect(
+      closingSection.getByRole("heading", {
+        level: 2,
+        name: "Get started with GraphQL Federation",
+      }),
+    ).toBeVisible();
+    expect(
+      closingSection.getByRole("link", { name: "Get started with Fusion" }),
+    ).toHaveAttribute("href", "/docs/fusion/getting-started");
+  },
+};

website/app/(content)/platform/graphql-federation/ExplainerPage.tsx

@@ -0,0 +1,63 @@
+import { ButtonRow } from "@/src/components/ButtonRow";
+import { OutlineButton, SolidButton } from "@/src/design-system/Button";
+
+import { GraphBackdrop } from "./hero/GraphBackdrop";
+import { AiDevelopmentSection } from "./sections/AiDevelopmentSection";
+import { BuildingBlocksSection } from "./sections/BuildingBlocksSection";
+import { ComparisonsSection } from "./sections/ComparisonsSection";
+import { FromApolloSection } from "./sections/FromApolloSection";
+import { FusionCta } from "./sections/FusionCta";
+import { ProblemSection } from "./sections/ProblemSection";
+import { GRADIENT } from "./sections/shared";
+import { WhatIsSection } from "./sections/WhatIsSection";
+
+export function ExplainerPage() {
+  return (
+    <div className="bg-cc-bg relative left-1/2 -mt-26 w-screen -translate-x-1/2">
+      <section className="border-cc-card-border relative flex min-h-[100svh] flex-col items-center justify-center overflow-hidden border-b px-5 py-24 text-center sm:px-12">
+        <GraphBackdrop />
+        <div
+          data-hero-copy
+          className="relative z-10 flex flex-col items-center"
+        >
+          <h1 className="font-heading text-cc-heading text-h3 sm:text-h2 mx-auto w-full max-w-3xl text-balance">
+            GraphQL{" "}
+            <span
+              className="bg-clip-text text-transparent sm:whitespace-nowrap"
+              style={{ backgroundImage: GRADIENT }}
+            >
+              Federation
+            </span>
+          </h1>
+          <p
+            data-hero-paragraph
+            className="text-cc-ink mx-auto mt-7 max-w-2xl text-lg"
+          >
+            GraphQL Federation brings independent GraphQL services together into
+            a single, unified API. It enables teams to develop, deploy, and
+            scale their services independently while giving clients one coherent
+            graph to query.
+          </p>
+          <div data-hero-cta>
+            <ButtonRow className="mt-7">
+              <SolidButton href="/docs/fusion/getting-started">
+                Get Started
+              </SolidButton>
+              <OutlineButton href="/services/support/contact?subject=Sales&context=GraphQL%20Federation">
+                Contact an Expert
+              </OutlineButton>
+            </ButtonRow>
+          </div>
+        </div>
+      </section>
+
+      <WhatIsSection />
+      <ProblemSection />
+      <BuildingBlocksSection />
+      <FromApolloSection />
+      <AiDevelopmentSection />
+      <ComparisonsSection />
+      <FusionCta />
+    </div>
+  );
+}

website/app/(content)/platform/graphql-federation/hero/GraphBackdrop/camera.ts

@@ -0,0 +1,58 @@
+// A minimal perspective camera, the same idea as
+// products/fusion/hero/Tokamak/geometry.ts (never imported from here):
+// a world point with a real depth, a focal length and a perspective
+// divide. The slab has no rotation, so this only needs the divide, not
+// Tokamak's pitch tilt.
+export interface Vec3 {
+  readonly x: number;
+  readonly y: number;
+  /** Distance from the camera's near plane; 0 = nearest the camera. */
+  readonly z: number;
+}
+
+export interface Camera {
+  readonly originX: number;
+  readonly originY: number;
+  readonly focal: number;
+  /** Distance from the camera to the z = 0 plane. */
+  readonly dist: number;
+}
+
+export interface Projected {
+  readonly x: number;
+  readonly y: number;
+  /** Screen px per world unit at this depth; larger = nearer the camera. */
+  readonly scale: number;
+  readonly depth: number;
+}
+
+export function makeCamera(
+  originX: number,
+  originY: number,
+  focal: number,
+  dist: number,
+): Camera {
+  return { originX, originY, focal, dist };
+}
+
+export function project(p: Vec3, cam: Camera): Projected {
+  const depth = cam.dist + p.z;
+  const scale = cam.focal / depth;
+  return {
+    x: cam.originX + p.x * scale,
+    y: cam.originY + p.y * scale,
+    scale,
+    depth,
+  };
+}
+
+/**
+ * Screen px per world unit at depth `z` -- the forward half of `project`'s
+ * math, with no (x, y). Used to size the world-space sampling volume (how
+ * wide a world slice at this depth needs to be to cover the screen) --
+ * never to place a node at a chosen screen position, which would be the
+ * inverse of `project` and is not used anywhere in this folder.
+ */
+export function scaleAtDepth(z: number, cam: Camera): number {
+  return cam.focal / (cam.dist + z);
+}

website/app/(content)/platform/graphql-federation/hero/GraphBackdrop/color.ts

@@ -0,0 +1,54 @@
+// The single local colour helper: every colour value the folder paints
+// flows through here from hero/palette.ts (plus the words "white"/"black"),
+// so the folder itself holds no hex literals. `mix` blends one or more
+// further colours in at a low ratio each, applied in order -- how a tint
+// stays a faint wash on the structural colour instead of a second
+// saturated hue, and how the near-edge band lightens toward white a touch
+// without becoming its own bright colour. An optional `darken` blends
+// black in afterward -- how the copy-zone contrast fix keeps a node or
+// edge's alpha in its normal visible range while still lowering the actual
+// luminance it contributes under the text.
+export function rgba(
+  color: string,
+  alpha: number,
+  mix?:
+    | { readonly with: string; readonly ratio: number }
+    | readonly { readonly with: string; readonly ratio: number }[],
+  darken = 0,
+): string {
+  let [r, g, b] = toRgb(color);
+  const mixes = mix ? (Array.isArray(mix) ? mix : [mix]) : [];
+  for (const m of mixes) {
+    if (m.ratio <= 0) {
+      continue;
+    }
+    const [r1, g1, b1] = toRgb(m.with);
+    const t = m.ratio;
+    r = r + (r1 - r) * t;
+    g = g + (g1 - g) * t;
+    b = b + (b1 - b) * t;
+  }
+  if (darken > 0) {
+    r = r * (1 - darken);
+    g = g * (1 - darken);
+    b = b * (1 - darken);
+  }
+  return `rgba(${Math.round(r)},${Math.round(g)},${Math.round(b)},${alpha})`;
+}
+
+function toRgb(color: string): readonly [number, number, number] {
+  if (color === "white") {
+    return [255, 255, 255];
+  }
+  if (color === "black") {
+    return [0, 0, 0];
+  }
+  const hex = color.replace("#", "");
+  return [
+    parseInt(hex.slice(0, 2), 16),
+    parseInt(hex.slice(2, 4), 16),
+    parseInt(hex.slice(4, 6), 16),
+  ];
+}
+
+export const WHITE = "white";