Fix problem with image inside link in MDX

This commit is contained in:
Marcus Blättermann 2022-11-17 18:25:10 +01:00
parent 84db6ea20f
commit 92436c0663
No known key found for this signature in database
GPG Key ID: A1E1F04008AC450D
10 changed files with 42 additions and 10 deletions

View File

@ -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

View File

@ -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>

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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>

View File

@ -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 && (

View File

@ -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,