Como usar gatsbyImageData no corpo do MDX

Eu tive uma certa dificuldade para conseguir utilizar tudo o que o gatsby-plugin-sharp tem a oferecer quando se trata de imagens dentro do corpo dos meus posts.

A ideia aqui é mostrar a solução que eu consegui. Não consigo afirmar que é a melhor solução, mas funciona.

O código desse post pode ser visto nesse repositório.

Estou começando um projeto do zero para criar um exemplo funcional, como sempre, usando interpretador remoto. Falei sobre isso no meu blog em outro post: Remote interpreter. A new word for develops.

Uma vez o projeto inicial pronto, vamos instalar os plugins:

docker compose run --rm app npm --prefix ./image-mdxbody install --save gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp
docker compose run --rm app npm --prefix ./image-mdxbody install --save gatsby-plugin-mdx gatsby-source-filesystem @mdx-js/react
docker compose run --rm app npm --prefix ./image-mdxbody install --save gatsby-remark-images

Nosso package.json fica da seguinte forma:

  "dependencies": {
    "@mdx-js/react": "^2.2.1",
    "gatsby": "^5.3.3",
    "gatsby-plugin-image": "^3.3.2",
    "gatsby-plugin-mdx": "^5.3.1",
    "gatsby-plugin-sharp": "^5.3.2",
    "gatsby-remark-images": "^7.3.1",
    "gatsby-source-filesystem": "^5.3.1",
    "gatsby-transformer-sharp": "^5.3.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }

Precisamos configurar os plugins, vai ficar assim:

  plugins: [
    "gatsby-transformer-sharp",
    "gatsby-plugin-image",
    "gatsby-plugin-sharp",
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1200,
            },
          },
        ],
      },
    },
  ],

O post não tem como objetivo configuar o MDX, então vou pular a parte de renderizar o MDX na tela.

Uma vez renderizando o MDX você pode usar direto o <img> no body, mas com isso você não tem o benefício do processamento de imagens.

Para conseguir utilizar o maximo possível que o Gatsby pode dar vamos precisar criar o seguinte componente:

import React from 'react';
import { GatsbyImage } from "gatsby-plugin-image";

const MDXImageBody = (props) => {
    console.log(props);
    const image = props.img.mdx.frontmatter.embeddedImagesLocal[props.index].childImageSharp.gatsbyImageData;
    return <GatsbyImage image={image} alt={props.alt}/>

}
export default MDXImageBody;

No body do MDX vamos usar assim:

---
title: Render image in Body
slug: render-image-in-body
embeddedImagesLocal:
  - typeface.jpg
---

import MDXImageBody from "../src/components/MDXImageBody";

# {props.pageContext.frontmatter.title}
My processed image: {props.pageContext.frontmatter.embeddedImagesLocal}

<MDXImageBody img={props.data} index={0} alt={"A new project windows of WebStorm"}/>

A imagem typeface.jpg está no mesmo diretório que o mdx.

Quando você abrir o seu post, a imagem mostrada é uma webp :

Espero conseguir ajudar mais alguém que tenha a mesma dificuldade… Essa é a vida do BackEnd se aventurando em um FrontEnd