Allow mdx extension in gatsby-theme-minimal-blog-core

[jsg2021]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @lekoarts/gatsby-theme-minimal-blog-core@6.1.0 for the project I'm working on.

What would you think of allowing the mdx config option to allow additional plugins? I tried to turn mdx off from the theme, and copy that block and add my own extensions, but gatsby failed to start (maybe I'm missing something?)... extending your package with this line, simply allowed me to add the plugin.

Here is the diff that solved my problem:

diff --git a/node_modules/@lekoarts/gatsby-theme-minimal-blog-core/gatsby-config.mjs b/node_modules/@lekoarts/gatsby-theme-minimal-blog-core/gatsby-config.mjs
index e514cc2..da19748 100755
--- a/node_modules/@lekoarts/gatsby-theme-minimal-blog-core/gatsby-config.mjs
+++ b/node_modules/@lekoarts/gatsby-theme-minimal-blog-core/gatsby-config.mjs
@@ -37,6 +37,7 @@ const config = (themeOptions) => {
           },
           extensions: [`.mdx`, `.md`],
           gatsbyRemarkPlugins: [
+			...(options.mdx.remarkPlugins || []),
             {
               resolve: `gatsby-remark-images`,
               options: {

This issue body was partially generated by patch-package.

[LekoArts]

Hi!

With the mdx option you can completely disable the inclusion of the plugin in the core theme. You then can configure gatsby-plugin-mdx on your own. Thus there is no need for any changes. Can you share your code of what you tried?

[jsg2021]

I was attempting to avoid re-declaring all the mdx config just to add another plugin

resolve: `@lekoarts/gatsby-theme-minimal-blog`,
      // See the theme's README for all available options
      options: {
        mdx: {
          remarkPlugins: [
            {
              resolve: 'gatsby-remark-embedder',
              options: {
                customTransformers: [vimeo],
              },
            },
          ],
        },
...

However, in hindsight, that may be the safest approach.

[LekoArts]

gatsby-remark-embedder has to go into gatsbyRemarkPlugins, notmdxOptions.remarkPlugins.

Other than that, this should work. You need to set mdx: false in the -core theme and then redeclare the complete MDX plugin config + your additions.

[jsg2021]

by re-declare, do you also mean all the gatsby-node page definitions too? (which is what I'm trying to avoid) or just the plugin config in gatsby-config?

[LekoArts]

just the plugin config in gatsby-config

this

[jsg2021]

Sorry for the delayed response, just got a moment to try this... i couldn't get it to work.

I tried a new blank project with only the mdx: false config and copied the themes' mdx config into the project...

https://github.com/jsg2021/theme-options-mdx-example

When I start it, I get the same errors.

[melloware]

I cannot get this to work either. Same GraphQL errors