Fix problem with image inside link in MDX

website/docs/usage/101/_vectors-similarity.mdx

@@ -134,7 +134,10 @@ useful for your purpose. Here are some important considerations to keep in mind:
 
 <Infobox title="Tip: Check out sense2vec" emoji="💡">
 
-[![](/images/sense2vec.jpg)](https://github.com/explosion/sense2vec)
+<Image
+  src="/images/sense2vec.jpg"
+  href="https://github.com/explosion/sense2vec"
+/>
 
 [`sense2vec`](https://github.com/explosion/sense2vec) is a library developed by
 us that builds on top of spaCy and lets you train and query more interesting and

website/docs/usage/layers-architectures.mdx

@@ -111,7 +111,10 @@ If you're using a modern editor like Visual Studio Code, you can
 custom Thinc plugin and get live feedback about mismatched types as you write
 code.
 
-[![](/images/thinc_mypy.jpg)](https://thinc.ai/docs/usage-type-checking#linting)
+<Image
+  src="/images/thinc_mypy.jpg"
+  href="https://thinc.ai/docs/usage-type-checking#linting"
+/>
 
 </Accordion>
 

website/docs/usage/projects.mdx

@@ -885,7 +885,11 @@ commands:
 
 > #### Example train curve output
 >
-> [![Screenshot of train curve terminal output](/images/prodigy_train_curve.jpg)](https://prodi.gy/docs/recipes#train-curve)
+> <Image
+>   src="/images/prodigy_train_curve.jpg"
+>   href="https://prodi.gy/docs/recipes#train-curve"
+>   alt="Screenshot of train curve terminal output"
+> />
 
 The [`train-curve`](https://prodi.gy/docs/recipes#train-curve) recipe is another
 cool workflow you can include in your project. It will run the training with

website/docs/usage/rule-based-matching.mdx

@@ -208,7 +208,11 @@ you need to describe fields like this.
 
 <Infobox title="Tip: Try the interactive matcher explorer">
 
-[![Matcher demo](/images/matcher-demo.jpg)](https://explosion.ai/demos/matcher)
+<Image
+  src="/images/matcher-demo.jpg"
+  href="https://explosion.ai/demos/matcher"
+  alt="Matcher demo"
+/>
 
 The [Matcher Explorer](https://explosion.ai/demos/matcher) lets you test the
 rule-based `Matcher` by creating token patterns interactively and running them

website/docs/usage/spacy-101.mdx

@@ -30,7 +30,11 @@ quick introduction.
 
 <Infobox title="Take the free interactive course">
 
-[![Advanced NLP with spaCy](/images/course.jpg)](https://course.spacy.io)
+<Image
+  src="/images/course.jpg"
+  href="https://course.spacy.io"
+  alt="Advanced NLP with spaCy"
+/>
 
 In this course you'll learn how to use spaCy to build advanced natural language
 understanding systems, using both rule-based and machine learning approaches. It

website/docs/usage/training.mdx

@@ -21,7 +21,11 @@ menu:
 
 <Infobox title="Tip: Try the Prodigy annotation tool">
 
-[![Prodigy: Radically efficient machine teaching](/images/prodigy.jpg)](https://prodi.gy)
+<Image
+  src="/images/prodigy.jpg"
+  href="https://prodi.gy"
+  alt="Prodigy: Radically efficient machine teaching"
+/>
 
 If you need to label a lot of data, check out [Prodigy](https://prodi.gy), a
 new, active learning-powered annotation tool we've developed. Prodigy is fast

website/docs/usage/v3-1.mdx

@@ -76,7 +76,11 @@ This project trains a span categorizer for Indonesian NER.
 
 <Infobox title="Tip: Create data with Prodigy's new span annotation UI">
 
-[![Prodigy: example of the new manual spans UI](/images/prodigy_spans-manual.jpg)](https://support.prodi.gy/t/3861)
+<Image
+  src="/images/prodigy_spans-manual.jpg"
+  href="https://support.prodi.gy/t/3861"
+  alt="Prodigy: example of the new manual spans UI"
+/>
 
 The upcoming version of our annotation tool [Prodigy](https://prodi.gy)
 (currently available as a [pre-release](https://support.prodi.gy/t/3861) for all

website/docs/usage/v3.mdx

@@ -492,7 +492,7 @@ format for documenting argument and return types.
 
 </div>
 
-[![Library architecture](/images/architecture.svg)](/api)
+<Image src="/images/architecture.svg" href="/api" alt="Library architecture" />
 
 </Grid>
 

website/src/components/embed.js

@@ -79,7 +79,7 @@ Iframe.propTypes = {
     height: PropTypes.number,
 }
 
-const Image = ({ src, alt, title, ...props }) => {
+const Image = ({ src, alt, title, href, ...props }) => {
     // This is only needed for image types that are NOT handled by
     // gatsby-remark-images, i.e. mostly SVGs. The plugin adds formatting
     // and support for captions, so this normalises that behaviour.
@@ -87,7 +87,7 @@ const Image = ({ src, alt, title, ...props }) => {
     const markdownComponents = { code: InlineCode, p: Fragment, a: Link }
     return (
         <figure className="gatsby-resp-image-figure">
-            <Link className={linkClassNames} href={src} hidden forceExternal>
+            <Link className={linkClassNames} href={href ?? src} hidden forceExternal>
                 <img className={classes.image} src={src} alt={alt} width={650} height="auto" />
             </Link>
             {title && (

website/src/remark.js

@@ -77,6 +77,12 @@ export const remarkComponents = {
     Integration,
     IntegrationLogo,
 
+    /**
+     * This is readded as `Image` it can be explicitly used in MDX files.
+     * For regular img elements it is not possible to pass properties
+     */
+    Image,
+
     Label,
     Logos,
     Colors,