chore(gatsby-source-contentful): Fix RichText example

[fbuireu]

Hi everyone!

First of all, I want to thank you and congratulate you on the amazing job you've been doing through these years. I love Gatsby and the way it's evolving 💜. Also sending hugs and high-fives cause they're great conversation starters.

Description and Documentation

I was reading the documentation about Contentful + Gatsby integration and I've spotted a dummy issue in the documentation, where the aim of this dummy PR is trying to fix.

In the #rendering section there's a mistake; the destructured property is bodyRichText while in the renderRichText function it's being lifted richTextField where it should be bodyRichText. So:

import { BLOCKS, MARKS } from "@contentful/rich-text-types"
import { renderRichText } from "gatsby-source-contentful/rich-text"

const Bold = ({ children }) => <span className="bold">{children}</span>
const Text = ({ children }) => <p className="align-center">{children}</p>

const options = {
  renderMark: {
    [MARKS.BOLD]: text => <Bold>{text}</Bold>,
  },
  renderNode: {
    [BLOCKS.PARAGRAPH]: (node, children) => <Text>{children}</Text>,
    [BLOCKS.EMBEDDED_ASSET]: node => {
      return (
        <>
          <h2>Embedded Asset</h2>
          <pre>
            <code>{JSON.stringify(node, null, 2)}</code>
          </pre>
        </>
      )
    },
  },
}

function BlogPostTemplate({ data }) {
  const { bodyRichText } = data.contentfulBlogPost

  return <div>{bodyRichText && renderRichText(richTextField, options)}</div>
}

Should be:

import { BLOCKS, MARKS } from "@contentful/rich-text-types"
import { renderRichText } from "gatsby-source-contentful/rich-text"

const Bold = ({ children }) => <span className="bold">{children}</span>
const Text = ({ children }) => <p className="align-center">{children}</p>

const options = {
  renderMark: {
    [MARKS.BOLD]: text => <Bold>{text}</Bold>,
  },
  renderNode: {
    [BLOCKS.PARAGRAPH]: (node, children) => <Text>{children}</Text>,
    [BLOCKS.EMBEDDED_ASSET]: node => {
      return (
        <>
          <h2>Embedded Asset</h2>
          <pre>
            <code>{JSON.stringify(node, null, 2)}</code>
          </pre>
        </>
      )
    },
  },
}

function BlogPostTemplate({ data }) {
  const { bodyRichText } = data.contentfulBlogPost

  return <div>{bodyRichText && renderRichText(bodyRichText, options)}</div>
}

Summarizing, it gets reduced as:

-  return <div>{bodyRichText && renderRichText(richTextField, options)}</div>
+  return <div>{bodyRichText && renderRichText(bodyRichText, options)}</div>

Last but not least

Personally, I think that all PR in the world must include some kind of cute animal, I'll fight against all odds and until my last breath to reach this goal, so here it goes:

---

Of course, if I missed something from the contribution guidelines, please let me know and I'll try to provide all the information required.

[LekoArts]

Thank you! 🎉