Read on Twitter
Creating Custom Linked Headers with GatsbyJS and MDX One of the biggest pros of using MDX is the ability to create custom components. With these, we can create linked headers.
This is what we're going to do in this thread.
Let's get started.
1/9
ExampleWant to see what we're going to create?
Check out the gif below or if you want to see the real thing, check out one of my blog posts at the link below.
https://conermurphy.com/blog/ 2/9
PrerequisiteBefore starting this you need to have a blog already set up on GatsbyJS using MDX. If you have a GatsbyJS blog already but haven't converted it over to MDX, you can check out the MDX plugin at the link below:
https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/3/9
Initial SetupFor this to work, we need to have all our blog posts generated using custom MDX components.
We can define these in a separate file and pass the list of components to the MDXProvider component used to render our blog post in our post template file.
4/9
Adding the Linked HeadersNow we have our blog posts generated using custom MDX components, adding in linked headers is as simple as amending the MDX components.
All we need to do is:
Wrap an anchor tag with the corresponding header tag.5/9
Adding Copy To Clipboard functionalityIf you want to add Copy to Clipboard functionality on the links, all we need to is add in an onClick handler to do this for us.
6/9
Add custom styling with To replicate the design in the gif earlier on, we need to add an
emoji prior to the header text when a user hovers over the link.To do this we just need some CSS pseudo-elements to wrap the MDXProvider with.
7/9
We're done!That's an overview of how we add custom linked headers to a blog using MDX.
If you're interested in reading more, I put more detail in my blog post which you can find at the link below.
https://conermurphy.com/blog/blog-post-linked-headers-mdx-gatsbyjs/8/9
Thank you for reading 
I hope you found this thread helpful, if you did please consider:
Liking this thread
Retweeting the first tweet in this thread so others can see it.
Following me for more content like this.
9/9
I hope you found this thread helpful, if you did please consider:
Liking this thread Retweeting the first tweet in this thread so others can see it. Following me for more content like this.9/9
