[docs-infra] Demo Screenshots as OpenGraph Images

[dav-is]

Note

Based on #1232

Update screenshots using pnpm docs:screenshot.

See in GitHub

Uses regular playwright test format added to docs/app/docs-infra/components/code-highlighter/demos/demo-variants/test.ts:

test('code highlighter with multiple variants', async ({ page }) => {
  await page.goto(route);
  await page.waitForLoadState('networkidle');

  // open the variant selector
  await page.getByRole('combobox').click();

  await page
    .locator('.demo')
    .first()
    /* file://./../../../../../../public/docs-infra/components/code-highlighter/demos/demo-variants.png */
    .screenshot({ path: `public/${route}.png` });
});

By adding the file:// in a comment, Ctrl+Clicking to open the image works in VS Code.

Then add the screenshot as the OpenGraph image at the bottom of the page:

export const metadata =
  /** @type {import('@mui/internal-docs-infra/createSitemap/types').NextMetadata} */ ({
    openGraph: {
      images: [
        {
          /* file://./../../../../public/docs-infra/components/code-highlighter/demos/demo-variants.png */
          url: '/docs-infra/components/code-highlighter/demos/demo-variants.png',
          alt: 'Highlighted Code with Variants',
        },
      ],
    },
  });

Displayed in Pages Index:

Renders nicely on GitHub:

Renders in rich diff mode:

[code-infra-dashboard]

Deploy preview

• docs/app/docs-infra/components/code-highlighter/page.mdx
• docs/app/docs-infra/components/page.mdx

Bundle size

Bundle	Parsed size	Gzip size
@base-ui/react	0B(0.00%)	0B(0.00%)
@mui/x-charts-pro	0B(0.00%)	0B(0.00%)

Details of bundle changes

Performance

Total duration: 15.47 ms ▼-1.18 ms^(-7.1%) | Renders: 4 ⁽⁺⁰⁾ | Paint: 65.80 ms ▼-7.22 ms^(-9.9%)

Test	Duration	Renders
DataGrid mount with paint timing	2.09 ms ▼-0.58 ms(-21.8%)	1 (+0)
HeavyList mount	9.21 ms ▼-0.56 ms(-5.8%)	1 (+0)
Counter click	4.17 ms ▼-0.04 ms(-0.9%)	2 (+0)

Details of benchmark changes

---

Check out the code infra dashboard for more information about this PR.