docs
docs copied to clipboard
fix example `src/components/MarkdocFigure.astro` in markdoc.mdx
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>