docs icon indicating copy to clipboard operation
docs copied to clipboard

fix example `src/components/MarkdocFigure.astro` in markdoc.mdx

Open mrienstra opened this issue 5 months ago • 4 comments

Had src: ImageMetadata | string; but no string handling

Alternate solution would be to remove | string from type, I instead opted to use the pattern shown in the example directly above.

Without these changes, pnpm astro check results in:

error ts(2322): Type '{ src: string | ImageMetadata; alt: string; width: number; height: number; }' is not assignable to type 'IntrinsicAttributes & Props'.

PS: was tempted to make this a slightly more "kitchen sink" example, by throwing in an example of <slot/> (also functionally a nice thing to have, if someone reading the docs actually has a use for this particular component):

---
import { Image } from "astro:assets";

interface Props {
  src: ImageMetadata | string;
  alt: string;
  width: number;
  height: number;
}

const { src, alt, width, height } = Astro.props;
const hasCaptionSlot = Astro.slots.has("default");
---

<figure>
  {
    typeof src === "string" ? (
      <img {src} {alt} {width} {height} />
    ) : (
      <Image {src} {alt} {width} {height} />
    )
  }
  {
    hasCaptionSlot && (
      <figcaption>
        <slot />
      </figcaption>
    )
  }
</figure>

mrienstra avatar May 19 '25 20:05 mrienstra