search

panr / gatsby-starter-hello-friend

Pretty basic starter for Gatsby that covers all of the essentials. All you have to do is start typing!
MIT License
165 stars 71 forks source link

Use custom React components in Markdown files #5

Closed Shackless closed 1 year ago

Shackless commented 5 years ago

Hi,

I'm building a travel blog based on your starter and wanted to be able to insert a GoogleMap showing the location I visited to my blog posts.

Therefore, I followed this guide to add a cool feature that I think many people using your starter might use at some point and also opens up your kit for custom components: The ability to use custom React components in Markdown.

I added a small demo to your showcase page. Feel free to ignore my PR in case you don't want to include this in your starter.

Thanks for the nice work, I really like your project!

panr commented 5 years ago

Hi @Shackless I was thinking about this, but using MDX. What do you think about implementing it this way?

I almost added this feature before, but I was struggling with some issues with other plugins I'm using. I think it's good time to revisit this idea, maybe things will go better this time ;-D

Shackless commented 5 years ago

I wasn't aware of MDX but it looks very cool and seems to lose some of the caveats rehype-react brings with it. I read in their issue tracker that there are some problems if you use it together with gatsby-remark-embed-video but I'll check it out and get back to you.

Shackless commented 5 years ago

I'm finally getting somewhere and the dynamic components are rendering. I added one to the showcase page. There are several issues though like:

I'll try to get these fixed so you can ignore the updated PR for now.

panr commented 5 years ago

These bugs occur probably because of the plugins order in gatsby-config.js as far as I remember 😉

panr commented 5 years ago

Any progress? ;-)

Shackless commented 5 years ago

I was able to fix the PrismJS problem by changing the order in the config like you suggested but I don't know how to fix the video issue. I read in the MDX issues that using a custom video component is preferred instead of trying to render it using gatsby-transformer-remark and gatsby-remark-embed-video.

The fact that the image, tags and next/previous navigation are missing seems to be another issue: To use MDX, you have to set node.fileAbsolutePath instead of pageTemplate as component in the createPage call. This results in MDX using it's own defaultLayout which is configured to be

defaultLayouts: { 
          posts: require.resolve('./src/components/layout.js'), 
          default: require.resolve('./src/components/layout.js'), 
},

This is of course the generic layout template and not the correct template for posts, tags etc. I guess we have to change these templates so that they can accept children like the layout.js template does and then we have to configure the layout for posts to be posts.js and so on.

I was kind of busys and am not that deep into Gatsby nor your starter yet. Could you help with that?

panr commented 5 years ago

I'll do my best! I should have time at the end of the week for Gatsby stuff ;-)

If I have something earlier, I'll let you know 😉

Shackless commented 5 years ago

any news on this?