(feat) Img component

[hestonhoffman]

Adds an Img component:

• Images added at images/content/**
• Img component
• For local image paths, I wired up an Astro import in src/config/images.ts. Videos needed a separate import.
• Component test file with several img uses.
• Added a lightbox to replicate behavior on Hugo.
• Added a plaintext twin that renders an img tag with the prod src, caption, and alt text. For inline images, it drops the tag. I decided to just grab the prod source for the image here instead of rendering the path for each environment. I don't think we gain much from rendering the local path in local etc.

Note: Because the image URLs paths pivot on import.meta.env.PROD, you have to use yarn dev for the local images to render (yarn preview uses the prod environment).

Image props

I carried over most of the props used in the Hugo shortcode.

• I removed the ones that appear to be dead (href, target, wide, img_param, pop_param, figure_class, and figure_style).
• I replaced the style prop with widthPercent and added a validation error that prevents writers from using widthPercent with height/width.

Things im unsure about

Images

• Is this the best way to wire up images for local dev? The images are using the native Astro import, which seems right, but the current implementation requires you to run yarn dev for them to render.
• I currently only have a local and prod URL handled. Do we need a staging URL as well?
• The build fails on a missing image locally. I'm wondering if we want to add something on the browser side to detect a missing image in staging/prod and alert somewhere - we can probably do that later?

Lightbox

I'm the least sure about this. I went back and forth with Claude for a bit on how I should implement the lightbox behavior. Wasn't sure about using a global interaction for all images vs some JS in the Img component itself (preact island?). Claude was concerned with the performance implications of adding the interaction to the component: "N hydrated islands on a page with N images — real JS cost multiplied by however many images are on the page, versus the global approach's flat one-time cost regardless of image count." I ended up going with the global option and wiring it into BaseLayout. This bumped the island IDs and caused some snapshot noise.

[datadog-datadog-prod-us1]

⚠️ Warnings

🚦 2 Pipeline jobs failed

DataDog/documentation | build_preview     

Merge label check | Merge is not allowed when 'Do Not Merge' label is present     

See error

Merge is not allowed due to presence of 'Do Not Merge' label.

Useful? React with 👍 / 👎

_{This comment will be updated automatically if new data arrives.
🔗 Commit SHA: 964f72e | Docs | Datadog PR Page | Give us feedback!}

[hestonhoffman]

Closed in favor of #39214 (WIP)