menu
Channels
Team

Clarification about gatsby-theme-blog and markdown transformation

July 31, 2019 at 3:37am

Clarification about gatsby-theme-blog and markdown transformation

July 31, 2019 at 3:37am
I have spent the past few days building a really basic blogging theme in order to learn more about gatsby themes. I drew a lot of inspiration from gatsby-theme-blog, but didn't directly copy it since I chose to use regular markdown instead of mdx. While I was digging into gatsby-theme-blog, (particulary gatsby-node.js), it stuck out to me that there's a lot of code and a lot of data transformation happening there, and I don't have a clear idea about why it's necessary. This might be a good opportunity for additional documentation, or a tutorial about transforming markdown (or mdx) to query blog posts or pages. Thoughts on this?

July 31, 2019 at 7:04am
Hi ... I don't know what is your case but in general you use gatsby-node to create page from your MD files and to accomplish it you need to define a path for each of them, usually creating a slug from the MD filename or using a field from the frontmatter with this value instead. For the first case (generate a slug from a filename) you need to add this info to the new created node also for query it by slug for example.
  • reply
  • like
Hey there. I totally see your point of view. Let me explain a bit about what’s going on in gatsby-theme-blog as well as transforming markdown in Gatsby in general:
  • To transform markdown, you need to use gatsby-transformer-remark and other helper plugins in this format: gatsby-remark-*.
  • The theme gatsby-theme-blog set this up for you in its gatsby-config.js
  • In gatsby-node.js, the Gatsby team is experimenting with establishing a generic interface BlogPost. To transform markdown, you totally do not need to do this at all. You can skip this and use the node MarkdownRemark instead.
I know you’re trying to wrap up your theme for ThemeJam. Feel free to reach out if you still have questions, and I’d be happy to help finishing it in time.
Edited
like-fill
1
  • reply
  • like

August 11, 2019 at 5:56pm
it stuck out to me that there's a lot of code and a lot of data transformation happening there, and I don't have a clear idea about why it's necessary.
  • reply
  • like
The data transformation code in gatsby-theme-blog is in there because we're targetting the ability to swap data sources between CMSs arbitraryily for that theme using GraphQL interfaces and such, as seen in this PR -- https://github.com/gatsbyjs/gatsby/pull/16166
This is not necessarily a common case and I would expect this code to be more complex than the average theme's right now
  • reply
  • like
Yep, that’s basically what I needed to know. I understand the basic markdown transformation and creating slugs for posts, but I just wasn’t sure what was happening with the more complex mdx resolvers.
  • reply
  • like