Gatsby Tutorial #12 - Markdown & Transformer Plugins

okay then so in the last video we saw that we could create this markdown file right here so it can be added to our graphql layer and it was called dojo coffeehouse.md so dot md is the extension for a markdown file now when you're making a static site using something like gatsby markdown files can be used as a content source for things like blog posts new pages or in our case portfolio projects now the reason behind this is that markdown syntax is very very simple even much more simple than html so it means that you can get anyone to help you make content for your website they don't need to understand html just the very basics of markdown syntax and then we can dynamically pump all of that data all of those files into our application using graphql queries so right now before we go on i just want to give you a quick overview of how we can make markdown file content so markdown syntax allows us to format text differently using these very simple syntax rules for example this right here means bold text so we use double asterisks to surround words we want to be bold if it was single asterix it would make that text italic we can also create headings using hash symbols like this and the number of hashes we use dictates the type of heading we get so three hashes would be like an h3 one hash would be like an h1 for example a normal text is just normal text now there's a lot more we can do with markdown files and if you want to explore that you can read this guide and i'm going to leave the link to this down below in the description so it tells you how to do things like lists add images headers quotes code and other things as well so that's marked down in a nutshell but we can also add this other stuff to the top of a markdown file which is called front matter and front matter is basically metadata or extra information about that particular file so you can see it starts with three dashes and it ends with three dashes and in between we have the different properties and values now the property names can be whatever you want i've got one called title which is the title of the project i've got one called stack which would be the different technologies i've used to maybe create this portfolio project and the third one is going to be a slug which eventually is going to be part of the route for this particular project in our website we're going to use that later on so now we have this markdown file it would be nice if we could query it from our graphql layer and get all this information in a way that we can easily use inside our components now we can currently query it and that's because we added this source plugin right here for the file system and said we can look inside the project's directory and by the way i deleted the notes instance and the notes folder from the last lesson because we don't need those anymore so we're currently adding this to the graphql layer that's already there but we can't really get any good information about it if we come over to graphical and go to all file and then if we go to nodes to grab all the nodes it's just going to be that single file to begin with because that's all we have but this information that we have right here none of it really is relevant to us we want the content inside of it yeah we can get stuff about the file the file size the path of it etc but we don't want to output that inside our project what we want to do is grab the different information we have inside that file for example it would be nice to query these properties right here so we can output those inside the react components or maybe transform this into html based on this markdown syntax that we have right here now in order for us to do this we need to use what's known as a transformer plugin in gatsby so transformer plugins in gatsby take a data source and they transform it into something easier to use in our components that we can query in our graphql layer in our case what i want to do is use this gatsby transformer remark one this is for markdown files so if we take a look at this we can see first of all we need to install it and then we need to configure it inside our plugins so what i'm going to do is just copy this and then i'm going to close this down and the first thing i want to do is install it so let me open up a new terminal and paste this in so that we can install it and then once that's done all i need to do is come to gatsby config and then inside plugins i'm going to register this now we don't need to have an object for this particular one because there's nothing special we need to do at the moment to configure this plugin all i'm going to do is add in the name of the plugin we just installed right here so that gatsby can use it and that was called gatsby hyphen transformer hyphen remark so what this is going to do is basically transform our markdown files into a more useful interface in the graphql layer for us so we can get all the content from it so if i save this i'm going to open up the terminal again come to our gatsby develop panel i'm going to control c to cancel out the process to restart the server run gatsby develop again and remember we have to do that when we change our gatsby config file and then let's close that and go over to a graphical over here i'm just gonna refresh the page so we can see all the new properties here and notice we've got a couple of new ones we have all markdown remark and markdown remark right here so this would be for a single markdown file and this for all of them so let's stick with all of them and if we click that open we go to nodes again and then we have these different properties right here so when we went into all file and just got the raw file before we didn't get these things but if we use all markdown remark which this plugin has added for us and by the way this won't work unless we configure this as well gatsby still needs to read those files but then this right here is responsible for displaying it or giving us a better interface for those markdown files in the graphql layer but we didn't have those before now we have all of these different things including for example the html and also the front matter so i can add these different properties inside our markdown file so the title for example and the stack if i play this now we're going to get all that information back so notice it makes this into an html string all of the contents inside this file all of this stuff right here it makes it html notice when we had double asterisks it's strong so it's turned those into a strong tag we have paragraph tags we also have an h3 for the heading down here so we get all that back which is really nice because later we can inject that into our components and also down here we have the front matter the title and the stack so we could potentially now query this from our different pages to use it we're going to do that in the next video but first of all what i'd like to do is just add in a few more md files so i've already prepared these earlier i'm just going to drag them into the project folder and you can get all of these from my github repo just select the lesson 12 branch so if we take a look in each of these we can see they all have the same front matter at the top just different values and they've all got a bit of content down here as well so these different markdown files they all represent our different projects and in the next video what we'll see is how to make queries like this from our pages inside our gatsby project so we can list out this information in our project right here on portfolio projects

Channel: The Net Ninja

Views: 8,348

Rating: 5 out of 5

Keywords: gatsby, gatsby tutorial, tutorial, gatsby vs react, what is gatsby, gatsby react, ssg, ssg tutorial, what is ssg, react ssg, gatsby ssg, static site generator, gatsby graphql, graphql, react graphql, gatsby vs next.js, how to use gatsby, gatsby crash course, crash course

Id: OBmzziUPXyg

Length: 7min 53sec (473 seconds)

Published: Mon Mar 08 2021