docs(nx-dev): add vattenfall article (#29896)

- **doccs(nx-dev): add vattenfall article**
- **feat(nx-dev): add testimonial markdown component**

docs/blog/2025-02-06-hetzner-cloud-success-story.md

@@ -54,11 +54,12 @@ After evaluating Nx and Turborepo, Hetzner Cloud selected Nx for its advanced mo
 
 Beyond modularization, Nx helped consolidate fragmented projects into a single, structured workspace. This reduced the overhead of maintaining multiple repositories and simplified dependency management. Using the [Nx Graph](/features/explore-graph), the team gained visibility into their project relationships, making it easier to coordinate work and optimize collaboration.
 
-{% quote
-  quote="Junior developers were amazed at how fast things became. They'd run tests expecting them to take 20 minutes, and they'd finish in seconds!"
-  author="Pavlo Grosse"
-  title="Senior Software Engineer, Hetzner Cloud"
- /%}
+{% testimonial
+    name="Pavlo Grosse"
+    title="Senior Software Engineer, Hetzner Cloud"
+    image="/documentation/blog/images/articles/pavlo-grosse.avif" %}
+Junior developers were amazed at how fast things became. They'd run tests expecting them to take 20 minutes, and they'd finish in seconds!
+{% /testimonial %}
 
 To tackle the CI performance bottleneck, Hetzner Cloud adopted [Nx Cloud](/ci/features/remote-cache), highly leveraging its [Nx Replay feature](/ci/features/remote-cache), ability to [distribute runs](/ci/features/distribute-task-execution) and re-run [flaky tasks automatically](/ci/features/flaky-tasks). These capabilities allowed them to optimize their CI workflows and eliminate inefficiencies that had previously slowed down development cycles.
 

docs/blog/2025-02-12-nx-agents-changes-the-math.md

@@ -0,0 +1,78 @@
+---
+title: 'Vattenfall changes the math on concurrent PRs with Nx Agents'
+slug: nx-agents-changes-the-math
+authors: [Philip Fulcher]
+tags: ['customer story']
+cover_image: /blog/images/2025-02-12/header.avif
+description: 'Vattenfall solves their CI runner limitation using Nx Cloud, improving from 4 concurrent PRs to 100.'
+metrics:
+  - value: '4→100'
+    label: 'concurrent PRs on CI'
+  - value: '44%'
+    label: 'reduction in CI runtimes'
+  - value: '> 1 year'
+    label: 'of computation saved every 30 days'
+---
+
+[Vattenfall](https://group.vattenfall.com/), a world leader in energy production, has been rapidly expanding their IT organization over the past few years – exponentially growing both their development teams and their codebase. As more developers joined and modular frontends proliferated, what started as a performant CI pipeline began showing signs of strain. The increasing complexity of their applications and test suites, combined with their commitment to maintaining high quality standards, created unprecedented demands on their CI infrastructure. Their CI provider had a limit of 100 CI runners in a pool, combined with a limit of one pool. If a single runner per PR would be enough, this would lead to 100 concurrent PRs. More than enough for most teams. However, their workspace needed 25+ runners to complete in a timely manner. This resulted in only four concurrent PRs available, slowing down their team immensely and blocking important work from making it through CI.
+
+## Hitting the limits of CI providers
+
+It's typical for some limits to be imposed by your CI provider. You may have a set number of persistent runners that can't be increased. Even if you have ephemeral runners, you likely have a limit on how many of those runners can be active at a time. These limits might be driven by cost control or technical limitations by the provider, but they all mean the same thing: **the number of concurrent PRs you can run is limited by your number of runners**.
+
+In a world where each PR needs one runner for CI, you can have one concurrent PR running for each runner you have. But a single runner per PR just doesn’t scale. Instead, you’ll need to distribute tasks across multiple runners.
+
+Now you're in a balancing act of how many runners can be assigned to a PR so that it completes faster vs how many PRs can be run at the same time. Your number of concurrent PRs becomes your available runners divided by the number of runners for each PR.
+
+![Formula for calcuating number of concurrent PRs: "Available Runners" divided by "Runners per PR" equals "Concurrent PRs".](/blog/images/2025-02-12/previous-formula.avif)
+
+## Nx Agents unlocks concurrency
+
+Working with our [Nx Enterprise](/enterprise) team, Vattenfall was able to unblock their team with Nx Agents enabling **more concurrent PR runs**. Not only that, but Nx Agents **lowered PR runtimes by 44%** and unlocked other features and tools that had been limited by their number of runners.
+
+Nx Agents makes it quick and easy to enable task distribution in your PR runs without consuming CI runners. How?
+
+When using Nx Agents, the tasks for your PR are now completed by Nx Agents rather than your CI runners. Your CI runner starts, runs your configured Nx commands to collect the tasks that need to be completed, and sends them to Nx Cloud. From there, Nx Agents are spun up and complete the work for each task to report back to the CI runner.
+
+![Illustration showing Nx Agents pulling a task to complete.](/blog/images/2025-02-12/agents.avif)
+
+This reduces our concurrency calculation to be 1:1 with our number of runners while still reaping the benefits of parallelism across multiple agents.
+
+![Modified Formula for calcuating number of concurrent PRs: "Runners per PR" is scratched out and replaced by "Nx Cloud" leaving "Available Runners" equals "Concurrent PRs".](/blog/images/2025-02-12/new-formula.avif)
+
+## From 4 concurrent PRs to 100
+
+So, how did Nx Agents help with the concurrent PR runs problem Vattenfall was facing? Our Nx Enterprise team was able to [trial Agents](/enterprise/trial) with them, quickly resulting in huge benefits for their team. They were able to re-enable that 100 PR concurrency by distributing all work to Nx Agents. Their limited pool of 100 runners was again able to handle 100 concurrent PRs, while still retaining the benefits of distributing tasks across Nx Agents. Nx Agents will continue to scale, adding more agents as needed to keep PR runtimes within reason. Concurrent PR runs will continue to match their number of CI runners no matter how many agents they need to distribute tasks.
+
+![Graph showing pipeline improvements before and after Nx Agents. CI pipeline times (in minutes) improve from 70 moinutes to less than 10 minutes. Concurrent PRs improve from 4 to 100.](/blog/images/2025-02-12/pipeline-improvements.avif)
+
+## Unlocking more than just concurrent PR runs
+
+What else did Vattenfall unlock with more concurrent PR runs?
+
+### Reduced CI runtimes by 44%
+
+This increase in concurrent PRs is a big win in and of itself, but it also resulted in faster CI run times. Average CI runtimes went from 39 minutes to 22 minutes, a **44% improvement**. Not only are there more PRs running concurrently, they're running faster.
+
+### Enabling flaky test detection to avoid PR re-runs
+
+Using Nx Agents has also enabled flaky task retries for them, reducing the number of times that PRs have to be re-run. Tasks that fail only sometimes and only in certain environments are called "flaky tasks." They are enormously time-consuming to identify and debug. **Nx Cloud can reliably detect flaky tasks and automatically schedule them to be re-run on a different agent**. By re-running flaky tasks until they pass, Nx Cloud ensures that the PR run completes the first time and doesn’t have to be re-run just to get a flaky task to pass.
+
+### Unlocking RenovateBot
+
+RenovateBot helps automate dependency updates by creating pull requests when dependencies need to be updated. Previously, this PR would have consumed more CI runners and would have been yet another blocker on their team for making progress. They had to prioritize the runners for PRs created by engineers rather than allow RenovateBot to run. With the increased concurrency allowed by Nx Agents, they are now able to run RenovateBot on a regular basis.
+
+{% testimonial
+name="Martijn van der Meij"
+title="Solution Designer, Vattenfall"
+image="/documentation/blog/images/2025-02-12/martijn.avif" %}
+Other engineers in other business units are seeing the advantage of Nx, and their managers are talking to our managers about copying the way we work. **They're saying "Nx is solving this problem we didn't even know we had"**
+{% /testimonial %}
+
+## What could Nx Agents unlock for you?
+
+What's blocking you from getting your products to market fast? Let our team figure it out for you! With Nx Enterprise, you receive expert guidance from day one, ensuring your setup is optimized for maximum efficiency. Whether you're starting fresh, migrating, or scaling your developer platform, we'll work with you to tailor the perfect solution for your team.
+
+{% call-to-action title="Get a Free Trial of Nx Enterprise" url="/enterprise" icon="nxcloud" description="Learn more about our enterprise offerings or request a free trial of Nx Enterprise" %}
+
+{% /call-to-action %}

nx-dev/ui-markdoc/src/index.ts

@@ -54,8 +54,7 @@ import { FenceWrapper } from './lib/nodes/fence-wrapper.component';
 import { VideoPlayer, videoPlayer } from './lib/tags/video-player.component';
 import { TableOfContents } from './lib/tags/table-of-contents.component';
 import { tableOfContents } from './lib/tags/table-of-contents.schema';
-import { Quote } from './lib/tags/quote.component';
-import { quote } from './lib/tags/quote.schema';
+import { Testimonial, testimonial } from './lib/tags/testimonial.component';
 import { metrics } from './lib/tags/metrics.schema';
 import { Metrics } from './lib/tags/metrics.component';
 export { CallToAction };
@@ -87,12 +86,12 @@ export const getMarkdocCustomConfig = (
       personas,
       'project-details': projectDetails,
       pill,
-      quote,
       'short-embeds': shortEmbeds,
       'short-video': shortVideo,
       'side-by-side': sideBySide,
       tab,
       tabs,
+      testimonial,
       toc: tableOfContents,
       tweet,
       youtube,
@@ -119,13 +118,13 @@ export const getMarkdocCustomConfig = (
     Personas,
     ProjectDetails,
     Pill,
-    Quote,
     ShortEmbeds,
     ShortVideo,
     SideBySide,
     Tab,
     Tabs,
     TableOfContents,
+    Testimonial,
     Tweet,
     YouTube,
     VideoLink,

nx-dev/ui-markdoc/src/lib/tags/quote.component.tsx

@@ -1,57 +0,0 @@
-import { cx } from '@nx/nx-dev/ui-primitives';
-
-export interface QuoteProps {
-  quote: string;
-  author: string;
-  title?: string;
-  companyIcon?: string;
-}
-
-export function Quote({
-  quote,
-  author,
-  title,
-  companyIcon,
-}: QuoteProps): JSX.Element {
-  return (
-    <figure className="not-prose relative my-8 rounded-2xl bg-white p-8 shadow-lg ring-1 ring-slate-900/5 dark:bg-slate-800">
-      <svg
-        className="absolute left-6 top-6 h-12 w-12 text-slate-100 dark:text-slate-700"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        aria-hidden="true"
-      >
-        <path d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 01-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179zm10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 01-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179z" />
-      </svg>
-
-      <blockquote className="relative">
-        <p className="pl-12 text-lg font-semibold tracking-tight text-slate-900 dark:text-white">
-          {quote}
-        </p>
-      </blockquote>
-
-      <div className="mt-6 flex items-center gap-x-4 pl-12">
-        <div className="flex-auto">
-          <div className="text-sm font-semibold text-slate-700 dark:text-slate-300">
-            {author}
-          </div>
-          {title && (
-            <div className="text-xs text-slate-500 dark:text-slate-400">
-              {title}
-            </div>
-          )}
-        </div>
-        {companyIcon && (
-          <div className="h-10 w-10 flex-none overflow-hidden">
-            <img
-              src={companyIcon}
-              aria-hidden="true"
-              className="h-full w-full object-contain"
-              alt="Company logo"
-            />
-          </div>
-        )}
-      </div>
-    </figure>
-  );
-}

nx-dev/ui-markdoc/src/lib/tags/quote.schema.ts

@@ -1,27 +0,0 @@
-import { Schema } from '@markdoc/markdoc';
-
-export const quote: Schema = {
-  render: 'Quote',
-  attributes: {
-    quote: {
-      type: 'String',
-      required: true,
-    },
-    author: {
-      type: 'String',
-      required: true,
-    },
-    title: {
-      type: 'String',
-      required: false,
-    },
-    image: {
-      type: 'String',
-      required: false,
-    },
-    companyIcon: {
-      type: 'String',
-      required: false,
-    },
-  },
-};

nx-dev/ui-markdoc/src/lib/tags/testimonial.component.tsx

@@ -0,0 +1,72 @@
+import { Schema } from '@markdoc/markdoc';
+import { image } from '@markdoc/markdoc/dist/src/schema';
+import { ReactNode } from 'react';
+
+export const testimonial: Schema = {
+  render: 'Testimonial',
+  children: ['paragraph'],
+  attributes: {
+    name: {
+      type: 'String',
+    },
+    title: {
+      type: 'String',
+    },
+    image: {
+      type: 'String',
+    },
+  },
+};
+
+export function Testimonial({
+  children,
+  name,
+  title,
+  image,
+}: {
+  title: string;
+  name: string;
+  children: ReactNode;
+  image: string;
+}) {
+  return (
+    <figure className="not-prose">
+      <blockquote className="relative pt-6">
+        <svg
+          className="absolute start-0 top-0 size-24 -translate-x-8 -translate-y-4 transform text-slate-200 dark:text-slate-800"
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+        >
+          <path
+            d="M7.39762 10.3C7.39762 11.0733 7.14888 11.7 6.6514 12.18C6.15392 12.6333 5.52552 12.86 4.76621 12.86C3.84979 12.86 3.09047 12.5533 2.48825 11.94C1.91222 11.3266 1.62421 10.4467 1.62421 9.29999C1.62421 8.07332 1.96459 6.87332 2.64535 5.69999C3.35231 4.49999 4.33418 3.55332 5.59098 2.85999L6.4943 4.25999C5.81354 4.73999 5.26369 5.27332 4.84476 5.85999C4.45201 6.44666 4.19017 7.12666 4.05926 7.89999C4.29491 7.79332 4.56983 7.73999 4.88403 7.73999C5.61716 7.73999 6.21938 7.97999 6.69067 8.45999C7.16197 8.93999 7.39762 9.55333 7.39762 10.3ZM14.6242 10.3C14.6242 11.0733 14.3755 11.7 13.878 12.18C13.3805 12.6333 12.7521 12.86 11.9928 12.86C11.0764 12.86 10.3171 12.5533 9.71484 11.94C9.13881 11.3266 8.85079 10.4467 8.85079 9.29999C8.85079 8.07332 9.19117 6.87332 9.87194 5.69999C10.5789 4.49999 11.5608 3.55332 12.8176 2.85999L13.7209 4.25999C13.0401 4.73999 12.4903 5.27332 12.0713 5.85999C11.6786 6.44666 11.4168 7.12666 11.2858 7.89999C11.5215 7.79332 11.7964 7.73999 12.1106 7.73999C12.8437 7.73999 13.446 7.97999 13.9173 8.45999C14.3886 8.93999 14.6242 9.55333 14.6242 10.3Z"
+            fill="currentColor"
+          />
+        </svg>
+
+        <div className="relative z-10 ">
+          <div className="text-xl font-medium italic text-slate-800 md:text-2xl md:leading-normal xl:text-3xl xl:leading-normal dark:text-neutral-200">
+            {children}
+          </div>
+        </div>
+
+        <figcaption className="mt-6 flex flex-wrap items-center gap-4 sm:flex-nowrap">
+          <img
+            alt={name}
+            src={image}
+            className="!m-0 !size-12 flex-none rounded-full bg-gray-50"
+          />
+          <div className="flex-auto">
+            <div className="text-base font-semibold">{name}</div>
+            <div className="text-xs text-slate-600 dark:text-slate-500">
+              {title}
+            </div>
+          </div>
+        </figcaption>
+      </blockquote>
+    </figure>
+  );
+}