withastro/astro @astrojs/mdx@1.1.0

on GitHub

Minor Changes

• #8468 a8d72ceae Thanks @bholmesdev! - Support the img component export for optimized images. This allows you to customize how optimized images are styled and rendered.

  When rendering an optimized image, Astro will pass the ImageMetadata object to your img component as the src prop. For unoptimized images (i.e. images using URLs or absolute paths), Astro will continue to pass the src as a string.

  This example handles both cases and applies custom styling:

  ---
  // src/components/MyImage.astro
  import type { ImageMetadata } from 'astro';
  import { Image } from 'astro:assets';
  
  type Props = {
    src: string | ImageMetadata;
    alt: string;
  };
  
  const { src, alt } = Astro.props;
  ---
  
  {
    typeof src === 'string' ? (
      <img class="custom-styles" src={src} alt={alt} />
    ) : (
      <Image class="custom-styles" {src} {alt} />
    )
  }
  
  <style>
    .custom-styles {
      border: 1px solid red;
    }
  </style>

  Now, this components can be applied to the img component props object or file export:

  import MyImage from '../../components/MyImage.astro';
  
  export const components = { img: MyImage };
  
  # My MDX article

Patch Changes

• #8533 74dc3edb3 Thanks @bluwy! - Improve MDX rendering performance by sharing processor instance

• Updated dependencies [7522bb491, ecc65abbf, 2c4fc878b, d93987824, c92e0acd7, 7522bb491, f95febf96, b85c8a78a, 45364c345]:

  • astro@3.1.0
  • @astrojs/markdown-remark@3.2.0