Embedding github gists?

[macintacos]

I'm trying to embed a GitHub gist into a page, and I can't seem to get it to render. Tried using the script tag that it gives me and it's not working out (and the iframe isn't exactly pretty, but it works). I tried using the gatsby-remark-embed-gist plugin in gatsby and I managed to get all the errors to go away, but....it still doesn't render. Probably because it's not using remark for markdown parsing of the pages, right?

Here's my gatsby-config.js file:

module.exports = {
  siteMetadata: {
    siteTitle: 'macintacos',
    siteDescription: 'this is a place where I occasionally write stuff',
    siteImage: '/banner.png', // main image of the site for metadata
    siteUrl: 'https://macintacos.github.io/',
    pathPrefix: '/',
    siteLanguage: 'en',
    ogLanguage: `en_US`,
    author: 'Julian Torres', // for example - 'Ivan Ganev'
    authorDescription: 'this is a place where I occasionally write stuff', // short text about the author
    avatar: '/avatar.jpg',
    twitterSite: 'https://twitter.com/macintacos', // website account on twitter
    twitterCreator: '', // creator account on twitter
    social: [
      {
        icon: `twitter`,
        url: `https://twitter.com/macintacos`
      },
      {
        icon: `github`,
        url: `https://github.com/macintacos`
      }
    ]
  },
  plugins: [
    {
      resolve: 'gatsby-theme-chronoblog',
      options: {
        uiText: {
          // ui text fot translate
          feedShowMoreButton: 'show more',
          feedSearchPlaceholder: 'search',
          cardReadMoreButton: 'read more →',
          allTagsButton: 'all tags'
        },
        feedItems: {
          // global settings for feed items
          limit: 50,
          yearSeparator: false,
          yearSeparatorSkipFirst: true,
          contentTypes: {
            links: {
              beforeTitle: '🔗 '
            }
          }
        },
        feedSearch: {
          symbol: '🔍'
        }
      }
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Chronoblog Gatsby Theme`,
        short_name: `Chronoblog`,
        start_url: `/`,
        background_color: `#fff`,
        theme_color: `#3a5f7d`,
        display: `standalone`,
        icon: `src/assets/favicon.png`
      }
    },
    {
      resolve: `gatsby-plugin-sitemap`
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-embed-gist',
            options: {
              // Optional:

              // the github handler whose gists are to be accessed
              username: 'weirdpattern',

              // a flag indicating whether the github default gist css should be included or not
              // default: true
              includeDefaultCss: true
            }
          }
        ]
      }
    }
  ]
};

Any help would be greatly appreciated! Thanks!

[ganevdev]

So, the problem is that - Chronoblog uses plugin "gatsby-plugin-mdx", and does not use the plugin "gatsby-transformer-remark". The "gatsby-plugin-mdx" plugin itself can work with remark plugins, but they must be declared in "gatsby-plugin-mdx".

That is, I could just add "gatsby-remark-embed-gist" directly to the theme. But of course, I don’t want to pull all possible “remark” plugins into the project.

You can not declare "gatsby-plugin-mdx" in the starter - gatsby does not like it and it gives an error.

So far I see only one solution - try to make an option in Chronoblog, something like gatsbyRemarkPlugins, it should be an array that will be sent to the gatsbyRemarkPlugins option inside "gatsby-plugin-mdx" plugin.

However, maybe there is a more elegant solution? Some more standard way? I want to better explore this issue before adding new options.

[macintacos]

Thanks for the reply! I'm new to Gatsby in general, so unfortunately I don't think I can give you any pointers on how to tackle this, but what you proposed definitely sounds reasonable. I volunteer to test whatever you come up with, though! 😄

[m0rtyn]

@Ganevru

So far I see only one solution - try to make an option in Chronoblog, something like gatsbyRemarkPlugins, it should be an array that will be sent to the gatsbyRemarkPlugins option inside "gatsby-plugin-mdx" plugin.

Where is exacly you advise to add option gatsbyRemarkPlugins? I tried to add it as option of plugin gatsby-plugin-mdx and it's make error with already declared _frontmatter variable.

My gatsby-config.js:

module.exports = {
  <...>
  plugins: [
    <...>
    {
      resolve: 'gatsby-plugin-mdx',
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-table-of-contents`,
            options: {
              exclude: 'Table of Contents'
            }
          },
        ]
      }
    }
  ]
};

Can you help?

[m0rtyn]

This solution doesn't work for me either

https://github.com/gatsbyjs/gatsby/issues/16593#issuecomment-580037645

[ganevdev]

Where is exacly you advise to add option gatsbyRemarkPlugins? I tried to add it as option of plugin gatsby-plugin-mdx and it's make error with already declared _frontmatter variable.

Sorry, I probably accidentally confused you 😓.

This was a reflection on how, perhaps, it would be possible to implement this feature in the project (gatsby-theme-chronoblog), and not an instruction on what to do.