Archived package - gatsby-custom-md

@pierssinclairssw @bradystroud @adamcogan

Hi,

The greybox in SSW Rules currently uses the gatsby-custom-md package to render the Greybox component where needed. However, this package has been archived by the owner, and hasn't been updated in 2 years.

Figure: gatsby-custom-md package archived and not updated - https://github.com/akzhy/gatsby-custom-md

This package not being updated is also preventing us from updating the rehype-react package, as the change made in its latest version will break the deprecated gatsby-custom-md package.

The other custom markdown elements such as info boxes, China boxes and CodeAuditor boxes all replace their markdown syntax with a <div> of a particular class. Perhaps this approach can be used to render the greybox instead of the current setup.
See https://github.com/SSWConsulting/SSW.Rules/blob/main/src/cms/previewTemplate.js#L18

There is also a plugin called gatsby-plugin-mdx which allows users to write components in markdown using MDX. This may be a potential solution, as well as a way to add more customisation to Rules and change the way custom markdown elements are used in the future.
See https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/

• Change the greybox to render without needing gatsby-custom-md
• Remove gatsby-custom-md from SSW Rules
• Update rehype-react

AB#63660

Start at src/cms/previewTemplate.js around line 18 and compare how the other custom markdown elements render their divs. Determine how the greybox can render without gatsby-custom-md, then verify that the package is removed, rehype-react can be updated, and the greybox still renders correctly.