♻️Investigate Plugin alternative to `gatsby-remark-custom-blocks`

[christianmorfordwaitessw]

Cc:

Hi Team,

Pain

gatsby-remark-custom-blocks is a plugin that is no longer compatible with newer versions of gatsby-transformer-remark
This makes it difficult to update packages and keep SSW.People maintained.

What code could be improved?

gatsby-remark-custom-blocks needs to be replaced with an alternative solution.

Tasks

• Investigate other alternatives to gatsby-remark-custom-blocks
• Implement the new solution

Acceptance Criteria

• gatsby-remark-custom-blocks is removed

More Information

https://www.gatsbyjs.com/plugins/gatsby-remark-custom-blocks/

https://github.com/SSWConsulting/SSW.People/blob/main/package.json

   "⚠️  gatsby-remark-custom-blocks": "Locked to ^3.2.0 - Higher versions are incompatible with gatsby-transformer-remark@^4.0.0 as per https://www.gatsbyjs.com/plugins/gatsby-remark-custom-blocks/",
 "⚠️  gatsby-transformer-remark": "Locked to ^3.2.0 - Due to gatsby-remark-custom-blocks relying on the locked version",

Thanks!

[christianmorfordwaitessw]

Replacement:
remark-directive is the replacement for the remark-custom-blocks plugin
https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins
⚠️ remark-custom-blocks — new syntax for custom blocks (new node types, rehype compatible) (👉 note: remark-directive is similar and up to date)

Problems/Issues:

• The latest version of remark-directive v3 is published as ESM-only(ES Modules) and does not have a CJS(CommonJS) export.
• remark-directive@1.x that has CommonJS support doesn’t work with our current Gatsby solution.

Relevant Links/Docs:
ES Modules (ESM) and Gatsby
https://www.gatsbyjs.com/docs/how-to/custom-configuration/es-modules/
gatsbyjs/gatsby#37069

Proposed Solution:

• Update Gatsby to use the new ES Modules instead of CommonJS
• Use the replacement plugin remark-directive
• Remove remark-custom-blocks and dependency on gatsby-transformer-remark