medfreeman / remark-generic-extensions

!Extension[Content](Argument){Properties} -> :tada: — commonmark generic directive extension for remark

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Compatibility with Gatsby MDX

oravecz opened this issue · comments

I've been unsuccessful so far to integrate this plugin with Gatsby's MDX plugin. Anyone have any advice or working example?

module.exports = {
  siteMetadata: {
    siteUrl: "https://www.yourdomain.tld",
  },
  plugins: [
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "pages",
        path: "./src/pages/",
      },
      __key: "pages",
    },
    {
      resolve: "gatsby-plugin-mdx",
      options: {
        extensions: [ `.md`, `.mdx` ],
        gatsbyRemarkPlugins: [
          {
            resolve: 'remark-generic-extensions',
            options: {
              elements: {
                alert: {
                  html: {
                    tagName: "span",
                    children: [
                      {
                        type: "element",
                        tagName: "i",
                        properties: {
                          className: "fa fa-exclamation",
                          ariaHidden: true
                        }
                      },
                      {
                        type: "element",
                        tagName: "span",
                        children: [
                          {
                            type: "text",
                            value: "::content::"
                          }
                        ]
                      },
                      {
                        type: "element",
                        tagName: "span",
                        properties: {
                          className: "subtext"
                        },
                        children: [
                          {
                            type: "text",
                            value: "::argument::"
                          }
                        ]
                      }
                    ]
                  }
                }
              },
              youtube: {
                html: {
                  tagName: "div",
                  children: [
                    {
                      type: "element",
                      tagName: "iframe",
                      properties: {
                        width: 420,
                        height: 315,
                        src: "https://www.youtube.com/embed/::argument::"
                      }
                    },
                    {
                      tagName: "span",
                      properties: {
                        className: "::prop::spanClassName::"
                      },
                      children: [
                        {
                          type: "text",
                          value: "::content::"
                        }
                      ]
                    }
                  ]
                }
              }
            }
          }
        ],
      },
    },
  ],
}

Error I'm getting is

Invalid options provided: <...dump of my options config...>