new image component

[gingerwizard]

Summary

First attempt at an image component. Lazy loads all images and enforces consistent sizes and placement.

import chServer from '@site/static/images/deployment-modes/ch-server.png';

Image img={chServer} alt="ClickHouse Server" size="sm"/>
<Image img={chServer} alt="ClickHouse Server" size="sm"/>

sizes can be sm, md or lg.

Note that this is a draft as all images must be migrated for this to work - non migrated images won't render

Pending:

• Shadow for lightmode
• Rounded corners on top and bottom of screenshot - 4px.
• Enforce min res on images (likely build check)
• Enforce background color for light mode

Checklist

• Delete items not relevant to your PR
• URL changes should add a redirect to the old URL via https://github.com/ClickHouse/clickhouse-docs/blob/main/docusaurus.config.js
• If adding a new integration page, also add an entry to the integrations list here: https://github.com/ClickHouse/clickhouse-docs/blob/main/docs/integrations/index.mdx

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
clickhouse-docs-ru	⬜️ Ignored (Inspect)	Visit Preview		Mar 14, 2025 8:19pm
clickhouse-docs-zh	⬜️ Ignored (Inspect)	Visit Preview		Mar 14, 2025 8:19pm

[gingerwizard]

3 samples:

sm - https://clickhouse-docs-76tdlpv0p-clickhouse.vercel.app/docs/deployment-modes
md - https://clickhouse-docs-76tdlpv0p-clickhouse.vercel.app/docs/use-cases/observability/introduction
lg - https://clickhouse-docs-76tdlpv0p-clickhouse.vercel.app/docs/parts

@Blargian

[gingerwizard]

md images need to be reduced to small if screen size is small.