withastro/astro @astrojs/markdoc@0.9.0

on GitHub

Minor Changes

• #9958 14ce8a6ebfc9daf951d2dca54737d857c229667c Thanks @Princesseuh! - Adds support for using a custom tag (component) for optimized images

  Starting from this version, when a tag called image is used, its src attribute will automatically be resolved if it's a local image. Astro will pass the result ImageMetadata object to the underlying component as the src prop. For non-local images (i.e. images using URLs or absolute paths), Astro will continue to pass the src as a string.

  // markdoc.config.mjs
  import { component, defineMarkdocConfig, nodes } from '@astrojs/markdoc/config';
  
  export default defineMarkdocConfig({
    tags: {
      image: {
        attributes: nodes.image.attributes,
        render: component('./src/components/MarkdocImage.astro'),
      },
    },
  });

  ---
  // src/components/MarkdocImage.astro
  import { Image } from 'astro:assets';
  
  interface Props {
    src: ImageMetadata | string;
    alt: string;
    width: number;
    height: number;
  }
  
  const { src, alt, width, height } = Astro.props;
  ---
  
  <Image {src} {alt} {width} {height} />

  {% image src="./astro-logo.png" alt="Astro Logo" width="100" height="100" %}