I found understanding the Gatsby plugin system a bit overwhelming to start. The configuration file is fine and I find this modular system very good. What makes it difficult is it is very modular and thus, you need to know exactly, what plugin it is that you need across very minute details. Without going into too much detail, an example of this is using plugins to embed image links. There are 2 separate plugins if you plan to use static images which won't change for the page a well as dynamic ones. On top of this you will have plugins for using .mdx vs regular .md markdown files, the former allowing you to embed jsx into the markdown and thus you will require embedding images differently.
Given all this, you'll also need to manage yourself possible plugin conflicts. So, the short story here, think of as vim with all the plugin options for your terminal, or like VSCode with all the extensions available. It is highly customizable with plugins, but that comes at a cost of plugin incompatibility.
Quick Takeaway
So the plugin management system of Gatsby is incredible. The learning curve is understanding the vast plugins available and intermixing them to your system needs. However, to be proficient, expect a learning curve lot understanding the plugin management system and identifying the various plugins for use for your development. If you know what you need, begin with one of the various starter templates available and start your learning journey there.
Embedding Images Into Markdown
So to really understand this you'll need to know to formats of markdown. The traditional ones you may already know in .md extension and .mdx. You can think of MDX as Markdown content side-by-side with also JSX. JSX will help you incorporate more interactive content within a traditional Mardown file. You know, those case when you find wanting to add a bit more interactivity into the file.
I started off trying MDX first since it was what I wanted. However, I recommend doing a traditional Markdown file first and doing inline image embedding using gatsby-transformer-remark. This way you have less plugins to worry about and save countless hours on plugin management and configuration. Thank me later if your installation and first experience is a success.
gatsby-config.json
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images
options: {
maxWidth: 1200,
},
},
],
},
}
I had additional plugins installed, so here I list them in case curious of any I have installed. Also, this will convey here how to resolve additional sub-plugins as shown below using gatsby-remark-images.
plugins: [
"gatsby-plugin-catch-links",
"gatsby-plugin-react-helmet",
"gatsby-plugin-sharp",
"gatsby-transformer-sharp",
"gatsby-transformer-remark",
"gatsby-remark-images",
{
resolve: `gatsby-plugin-mdx`,
options: {
gatsbyRemarkPlugins: [
resolve: 'gatsby-remark-images',
options: {
maxWidth: 1200
}
]
}
}
]
Then inline your images into Markdown the way you are already familiar. This will your inline images using gatsby-image.
