Read on TwitterOne 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& #39;re going to do in this thread.
Let& #39;s get started.
1/9
Creating Custom Linked Headers with GatsbyJS and MDX https://abs.twimg.com/emoji/v2/... draggable="false" alt="🟣" title="Violetter Kreis" aria-label="Emoji: Violetter Kreis"> 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& #39;re going to do in this thread. Let& #39;s get started. https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread"> https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇" title="Rückhand Zeigefinger nach unten" aria-label="Emoji: Rückhand Zeigefinger nach unten"> 1/9" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="🟣" title="Violetter Kreis" aria-label="Emoji: Violetter Kreis"> Creating Custom Linked Headers with GatsbyJS and MDX https://abs.twimg.com/emoji/v2/... draggable="false" alt="🟣" title="Violetter Kreis" aria-label="Emoji: Violetter Kreis"> 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& #39;re going to do in this thread. Let& #39;s get started. https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread"> https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇" title="Rückhand Zeigefinger nach unten" aria-label="Emoji: Rückhand Zeigefinger nach unten"> 1/9" class="img-responsive" style="max-width:100%;"/>
Want to see what we& #39;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.
2/9">https://conermurphy.com/blog/&quo...
Before starting this you need to have a blog already set up on GatsbyJS using MDX. If you have a GatsbyJS blog already but haven& #39;t converted it over to MDX, you can check out the MDX plugin at the link below:
3/9">https://www.gatsbyjs.com/plugins/g...
For 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
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" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="2️⃣" title="Tastenkappe Ziffer 2" aria-label="Emoji: Tastenkappe Ziffer 2"> 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">
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" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="2️⃣" title="Tastenkappe Ziffer 2" aria-label="Emoji: Tastenkappe Ziffer 2"> 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">
Now 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:
5/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:https://abs.twimg.com/emoji/v2/... draggable="false" alt="👉" title="Rückhand Zeigefinger nach rechts" aria-label="Emoji: Rückhand Zeigefinger nach rechts"> Wrap an anchor tag with the corresponding header tag.5/9" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="3️⃣" title="Tastenkappe Ziffer 3" aria-label="Emoji: Tastenkappe Ziffer 3"> 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:https://abs.twimg.com/emoji/v2/... draggable="false" alt="👉" title="Rückhand Zeigefinger nach rechts" aria-label="Emoji: Rückhand Zeigefinger nach rechts"> Wrap an anchor tag with the corresponding header tag.5/9" class="img-responsive" style="max-width:100%;"/>
If 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
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" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="4️⃣" title="Tastenkappe Ziffer 4" aria-label="Emoji: Tastenkappe Ziffer 4"> 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" class="img-responsive" style="max-width:100%;"/>
To replicate the design in the gif earlier on, we need to add an
To do this we just need some CSS pseudo-elements to wrap the MDXProvider with.
7/9
Add custom styling with https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔗" title="Link Symbol" aria-label="Emoji: Link Symbol"> To replicate the design in the gif earlier on, we need to add an https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔗" title="Link Symbol" aria-label="Emoji: Link Symbol"> 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" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="5️⃣" title="Tastenkappe Ziffer 5" aria-label="Emoji: Tastenkappe Ziffer 5"> Add custom styling with https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔗" title="Link Symbol" aria-label="Emoji: Link Symbol"> To replicate the design in the gif earlier on, we need to add an https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔗" title="Link Symbol" aria-label="Emoji: Link Symbol"> 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">
Add custom styling with https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔗" title="Link Symbol" aria-label="Emoji: Link Symbol"> To replicate the design in the gif earlier on, we need to add an https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔗" title="Link Symbol" aria-label="Emoji: Link Symbol"> 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" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="5️⃣" title="Tastenkappe Ziffer 5" aria-label="Emoji: Tastenkappe Ziffer 5"> Add custom styling with https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔗" title="Link Symbol" aria-label="Emoji: Link Symbol"> To replicate the design in the gif earlier on, we need to add an https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔗" title="Link Symbol" aria-label="Emoji: Link Symbol"> 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">
That& #39;s an overview of how we add custom linked headers to a blog using MDX.
If you& #39;re interested in reading more, I put more detail in my blog post which you can find at the link below.
8/9">https://conermurphy.com/blog/blog...
Thank you for reading 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🙏" title="Gefaltete Hände" aria-label="Emoji: Gefaltete Hände">
I hope you found this thread helpful, if you did please consider:
https://abs.twimg.com/emoji/v2/... draggable="false" alt="❤️" title="Rotes Herz" aria-label="Emoji: Rotes Herz"> Liking this thread
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔄" title="Pfeile abwärts und aufwärts in offenem Kreis gegen den Uhrzeigersinn" aria-label="Emoji: Pfeile abwärts und aufwärts in offenem Kreis gegen den Uhrzeigersinn"> Retweeting the first tweet in this thread so others can see it.
https://abs.twimg.com/emoji/v2/... draggable="false" alt="👤" title="Silhouette einer Büste" aria-label="Emoji: Silhouette einer Büste"> Following me for more content like this.
9/9
I hope you found this thread helpful, if you did please consider:
9/9
