 Hello everyone good evening. So today I am going to talk about code waves in Gatsby block. So how many of you know what is code waves? So the code waves is a simple plug-in which was written by Radhika Pombo. So he had actually written a plug-in called code surfer for the MDX deck and he extended the same kind of technology for the Gatsby also. So with this plug-in we can actually make our block very presentable, very pleasant to read, pretty. So that is what I am going to show you today, especially for the tech blocks. And this inspiration actually came from Zain Fatuni, thank you. In his last talk, I met him in the last talk, so he built the deck using this technology. So from there I got an inspiration and then started researching about. So the good thing is Radhika actually built his entire website with this plug-in and very recently he published a post how to build a react from scratch. You should definitely go and read his blog, definitely. So myself, Vimal Raj Selvam and you can find me anywhere with this name. Otherwise my social account is email to Vimal Raj. So Twitter, GitHub, everywhere I am, email to Vimal Raj. So this particular deck has been developed using the code surfer plug-in which is again written by as I mentioned, you know, Pombo. So to get started, we are going to create a new Gatsby block and this is a simple, you know, blog plug-in like, you know, so you just execute this command, say Gatsby new Gatsby side, so that means you will be having the small Gatsby starter side in your system. So I am just going to do that, Gatsby download. So after that, we will install the required plug-ins. So we need the MDX plug-ins because we are going to write our posts in the markdown with the JSX support as well. So the plug-in that supports, it is called, you know, MDX. So we have to install a couple of dependencies for the, after that we will install the code-based Gatsby theme. So very recently Gatsby actually came up with an approach called Gatsby themes other than the Gatsby plug-in, you know, plug-ins. So Gatsby themes will help you to install, so any starter kits, like say for an example, to start a new Gatsby side, you have to run a starter kit. So like the, so if you look at here, the Gatsby new uses the basic starter kit from the Gatsby's GitHub. But the only problem here is the next time someone updates that particular starter kit, you will not be able to, you know, get those changes. You have to rewrite or you have to rebuild your entire web application. So Gatsby came up with a theme approach, wherein the themes can be installed as an NPM packages. So that is what this, you know, the code-based plug-in is also going to do. It has been published as a theme. So that means you can install it and whenever there is an update, you can easily update and get the changes. And for this theme, so, I mean, for this plug-in, there are few additional dependencies we need. That is, you know, Emotion code, that is, as you, you are aware about those. Those are CSS and JS plug-ins. And yeah, so this uses a theme UI that is again, you know, to basically style your site. It is pretty configurable. So after installing, so this is a Gatsby config, a small Gatsby config byte. So this is one, which is by default generator, when you create a new site using a starter kit, basic starter kit. So these are the few, you know, basic information that is readily available. So what are we going to do is we are going to add the MDX plug-in because we are going to build our block with the MDX. So I am going to add this as a plug-in. And after that, we are going to add two more, you know, plugins in the same way. So that is a Gatsby theme waves, which will help us to, you know, add the waves plug-in, code waves plug-in. And obviously, yeah, we have to add a theme UI. The reason is theme waves is dependent on theme UI. So that is it. So now we can actually create a MDX page. We can go and create a MDX page. So that is simple, just input the code wave plug-in and we will start creating our MDX page. Okay. So let us see a demo quickly. Yeah. So if you look at here, this is a small MDX page that has been created. So I import a code wave component from the Gatsby theme waves. And you can start writing your code wave here. So every code wave will be rendered in your application as a separate component. So I am going to show you how it is rendered actually. So just a glance. So I am going to show you a small demo now. So this site has been already built. It doesn't have much actually. So it just have a, you know, apart from your basic starter kit code. And as I shown, these are the three items that has been added. And I just written a mdx.mdx file. So this, right? So I didn't apply much styles. I kept it very basic, but we can actually extend styles. So if you take a look at this, on your left side there is a, you know, code block. And on your right side, the content of that particular code block. So as a user actually, you know, scrolls, this changes. So this is the actual, you know, good experience as a, you know, the person who is reading this post, right? So they will know, instead of, you know, going back and forth, going back and forth to understand the code, it is very easier for me, okay, at this point of time, what is the code which I am, I should be, you know, reading it. What are the other things which I don't want to read it, you can hide it. So that's a code source gives you, right? So let's see how it has been built. So if you look at here, within your code component, again, you are going to, all your children's are just a mockdown content. So like say, for example, here I just put a small code snippet. And then I write my explanation for that particular code snippet here, just a dummy content here. So for example, this particular content is for this code snippet. So that means I am explaining this code snippet with my content. And then I will say, highlight, I am in the same snippet, but I am adding further more few lines. And I am saying like highlight the line number from 3 to 7. So that is what you see here. So when I am scrolling here on my heading 2, so these lines are highlighted. So this pretty animation is coming and actually, you know, the other lines are blurred. And only what is interest are you are going to show that. So that's pretty much. So another one is like you can add any number of code waves. Say for an example, there is no connection between this code snippet and the next code snippet. You can actually put it as a separate code wave component. So that will actually render it as a separate component in the same page. Yeah, that's pretty much. Thank you.