gatsby-theme-wordpress-mdx/src/components/sections/GeneralSection/GeneralSection.js

<p align="center"> <img width='200px' alt="Gatsby Theme" src="https://raw.githubusercontent.com/artezan/gatsby-theme-wordpress-mdx/master/%40artezan/gatsby-theme-wordpress-mdx/dn.png" />

/** @jsx jsx */
import React from 'react'
import { jsx, useThemeUI } from 'theme-ui'
import { MDXRenderer } from 'gatsby-plugin-mdx'

export const GeneralSection = ({ body, frontmatter }) => {
  const { images } = frontmatter
  const context = useThemeUI()
  const convertArrayToObject = (array, key) =>
    array.reduce(
      (obj, item) => ((obj[[item[key]]] = item.childImageSharp.fluid), obj),
      {}
    )
  let imagesFluid = {}
  if (images) {
    imagesFluid = convertArrayToObject(images, 'name')
  }
  return (
    <MDXRenderer
      scope={{
        ...frontmatter,
        context,
        imagesFluid
      }}
    >
      {body}
    </MDXRenderer>
  )
}