Relative image syntax does not work with Markdoc custom image node

sarimabbas commented 7 months ago

Astro Info

Astro                    v4.5.9
Node                     v18.18.0
System                   Linux (x64)
Package Manager          unknown
Output                   server
Adapter                  none
Integrations             @astrojs/markdoc

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

I am following the example here: https://docs.astro.build/en/guides/integrations-guide/markdoc/#override-markdocs-default-image-node
I created a custom image node but relative images don't work (only public folder images work)

What's the expected result?

I expect relative syntax to work with custom image node in markdoc

Link to Minimal Reproducible Example

Please run the example and navigate to /projects/test to see the markdoc page.

https://stackblitz.com/edit/withastro-astro-pnpmhg?file=src%2Fcomponents%2FMarkdocImage.astro

Participation

[ ] I am willing to submit a pull request for this issue.

Princesseuh commented 7 months ago

Thank you for reporting this issue, I can confirm that it doesn't work. You can workaround the issue in the meantime by doing this:

import { defineMarkdocConfig, nodes, component } from '@astrojs/markdoc/config';
import shiki from '@astrojs/markdoc/shiki';

export default defineMarkdocConfig({
  nodes: {
    image: {
      ...nodes.image,
+      attributes: {
+        ...nodes.image.attributes,
+        __optimizedSrc: { type: "Object" }
+      },
      render: component('./src/components/MarkdocImage.astro'),
    },
  },
});

and accessing __optimizedSrc in your component.

sarimabbas commented 7 months ago

Thank you for the help! The workaround worked for me! My component is:

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

interface Props {
  alt: string;
  __optimizedSrc: ImageMetadata;
}

const { alt, __optimizedSrc } = Astro.props;
---

<Image src={__optimizedSrc} alt={alt} />

I removed the typeof src === 'string' case as I'm assuming __optimizedSrc will always be of type ImageMetadata?

chappelo commented 3 months ago

will try to solve this issue!

ascorbic commented 1 month ago

This is fixed if you update to use content layer

withastro / astro