Gatsby and Sanity.io - Part 1 (Live Stream)

I'm gonna start I'm gonna start by just kind of explaining what what I'm looking at here and why so this is gonna this is gonna be pretty heavily involved in Gatsby Gatsby is I think they want to get away from the ranting of their not just a static site generator but it's a it's a framework built on top of react where you can do static sites but it also has this like you can mix dynamic and static pages as well so it's not limited to static sites but I'm using it as my static site generator as my framework for my personal site James q quick and I've got several things on the site that need data sources of some sort the main thing and this is the most common is the blog and if you missed the stream last week I know a couple of you in the stream now were there last week on the cs degree versus programming boot camp versus self-taught I just wrote an article kind of summarizing some of those thoughts and included in there as the video so you can go and check that out too but like the blog actually the data for the blog is stored somewhere and I've got several things that will be like that one is my upcoming and previous streams page I want to have a list of all the streams I've done and the ones that are coming up and maybe yeah I don't know if I need anyway I don't know if I need the previous ones but I want to have a list of those and the problem I'm having is like I want to go ahead and add all these streams but it's a little bit cumbersome to add them and I'll show you why so let's just start with like the idea of a blog all of the content for the blog is stored inside of my source code so it's inside a source and then inside of I'll make this a little bit bigger if that helps inside of a data directory inside of posts and then I have a folder for each one of my blog post inside of each folder I have an index MD which is a markdown file and then it has this sort of metadata up here so title slug that's the URL the publish date the tags the whether or not it's actually published and then a cover image and then some of these actually have images embedded in them so they have an images directory inside to store the image is specific for that blog post most of the posts I do I don't actually include images because I don't want to store them which is a little bit sad so mostly it's just like code snippets and writing but anyway so to create a new blog post what I would do is I would basically copy and paste this folder I would rename it I would go into the markdown file I would get rid of all of the main content get rid of like all of this and then update all the metadata are the frontmatter is what they call it for the specifics for this post so update the title slug publish date tags etc and there's a couple of things that are just really not nice about that to be honest the copying pasting is not great because then I have to go and update everything then I type in a title but then I also have to like convert that to a slug manually I don't really like that I also have to like decide specifically on what the publish date is and for make sure that's formatted correctly and all in all honestly it's just it's just kind of a hassle I like that my files or are included in the source code that's nice brad says a comment you could do the slug manually yes I could the problem potential problem maybe not necessarily is I may not want the full I may not want the slug to be the full title that's slugga fide I guess I might want to have it be something slightly different mainly because of length and that that may be less of a problem than I think it may just be that the best thing is to go ahead and slug off' i this thing programmatically and that'll take care of it the thing we're about to look at actually gives me both of those options which is nice so anyway I'm just kind of looking for something different and headless CMS's are this big hot topic and there's so many different options and I tweeted about this recently and actually had like a really engaging post where I said there's like a gap in headless CMS options where there's a free tier but then the next level up is like a hundred bucks or like some of them is like a couple hundred bucks and it's like a big jump for someone on a side project to spin and I got all these comments and I got lots of comments about sanity IO and how people love sanity and the founder what's up Chris hi thanks for coming the founder of sanity actually like got into the conversation and messaged me as well and specified like pretty generous free tier and then on top of the free tier you can pay for individual things if you want to scale those up so let me let me actually I have this page up earlier let me open up the sanity pricing and so one part of this is really intimidating the zero to 199 I think they could probably do a better job of specifying that you get the ability to where was this generous quota included you get the ability to have all these different things and then pay specific for those different categories that you may need so like if you need assets a dollar for two years a month documents datasets requests you can pay for those individually and still keep a pretty low cost which I'm excited about Chris the super super transient about to crash and I probably am not gonna help you out too much in terms of staying awake but I'll try to entertain you as best I can why are you here Chris alright so I'm interested in sanity because it's got a free tier that is pretty generous and then it looks like I get scale up and spent a couple bucks a month in different categories if I needed to which I think I'm a long way away from anyway to be able to support the things that I'm doing so my goal is to incorporate sanity as my backend my data source for my blog posts my streaming schedule my I don't know who's calling me I think some other things like reaiiy have a resources page that I haven't really advertised yet I've got a users page that I haven't really advertised yet anyway all of that stuff can go and live inside of this backend so I'm going to check out get check out a branch called add sanity from master and I'll just actually might be installing packages here so I'll hold off on that but let's just look at like a sanity getting started and I think this is actually unique thing where you can run run sanity as its own thing and then basically just connect to it from your Gatsby site so I think this will end up like to deployed applications I think so they've got some starter templates here say I could create a project I'm not even sure what this is gonna do signing with sanity connected github connected metafile and this is this is gonna create like a whole blog I think that's gonna include the Gatsby part to that I don't need I don't know if anyone actually knows specifically I don't know where the best place to get started without that maybe just this part down here fresh landed yep I thought Brad is saying I thought sanity was hosted so my interpretation of this is that it is not hosted and this was a surprise for me so this is something you can run locally and then host yourself and like the database behind the scenes I guess is hosted I'm not actually really sure since you have a front-end you should just start a new project from the CLI yeah I think I think we're all on the same page I think that's what Corey was saying as well so I'm gonna start with like a brand new sanity project I think that's just with installing the CLI globally and then doing a sanity in it so I think I think we're probably good there yeah the database is hosted and then like my instance of sanity that I host is connected to that database I think so let me just end sign up here I'm gonna install this package globally and I'm not really sure what this is going to do I'm gonna go back a directory into my code directory sanity comes with a real-time datastore and the sanity studio the CMS is a react app that connects to it makes sense yep that's I'm kind of formalizing my understanding of what's going on so that does make sense to me good Jess just my wife said that they rescheduled my dentist appointment which I didn't know I had one so anyway so I guess from here I do a sanity an it and I think this this will create a project here it's gonna ask me how I want to authenticate usually with anything like Deborah later I just get hub this will probably open a website for me to authenticate with github maybe I thought it would have uh seems to just be sitting there I'm not really sure hmm anybody know where how this is supposed to like start the authentication process with github that didn't seem to do it huh maybe I don't know let me cancel that do you have another browser window open I looked at all of my so I've got this one here and then I've got these and as far as I know that's it I've got the other tab open which is just a twitch stream so I can see myself and what the people on the chat are saying I'm not sure let me just try it again sanity an it and I'll try with github again okay alright for whatever reason that didn't seem that worked the first time but cool if you've never done anything like this this is a pretty pretty common workflow where you you authenticate with some other application to be able to basically log in to that application and this gets into identity and for what it's worth for everyone that's out there I do work for off zero which is an identity company and we do authentication and authorization services for developers so making that as easy as possible to integrate into your applications I was actually working on some integration earlier that I'll probably stream about sometime soon anyway gonna go ahead and authorize sanity this should redirect after I except I'm not a newsletter guy for the most part so I'll probably skip that login was successful and now close the tab and return to the terminal so back in the terminal this is a project name and this is just gonna be James q quick so this is my site I think that'll work as a project name and then I use the default data set let's see your content will be stored in data set that can be public or private depending on whether you want to query your content with or without authentication which I do I think the default data set has a public day named main production so I don't I don't think I want I don't want it public although I don't necessarily know I don't think it why I came over I would you so it's less complicated is there any like like it would just be read-only access right I want is there any reason why I would not want people to have read access I mean in theory like they could just go and grab all of my posts you want to come on and say hi okay love you have fun they feel bad for you for going to work by the way yeah okay love you it will be read only and only published post yeah so I guess like I mean if people wanted to read from it they could do the same thing by coming to like scraping my XML feed right so this price I'll go public for now I think that's fine so I use default dataset configuration yes do a capital y there it's gonna create the data set I'm assuming what's going on is out there somewhere in the world it's creating this stuff inside of a database to maintain this stuff and then project path actually rats I should have I should have renamed this to be like James you quick back-end or sanity or something see you Chris have a good nap so anyway rats what was dang what path did they have in their shoes what let me get a new terminal just so I can double check my path can I use a relative in here no probably not can I see how do you see a full path in Linux without doing the shorthand there is it slash users is that what it is yeah okay so slash users james q quick and then inside of my root directory i've got a code and then a new directory that'll be james q quick and i'll just call the sanity so we'll do a blog that's what we're working with and we get access denied rats so I'm gonna have to start the whole thing over mmm okay I create a new dataset or choose that one project output path why well let me just choose that one well that worked okay I don't know that that's exactly what I want because I think that's gonna put it inside of my source code for my main project which I think there's - all right Walker see KML says suspect vs code doesn't have write access I actually just updated my Mac and like I've had to deal with a lot of permission things recently so maybe that is what's going on but it did it to this directory which is interesting so I don't know oh and I guess like my maybe I can just rename the folder when we get done that's probably what I will do so that'll take a little bit and then I'll go and rename that folder just to add on the like the sanity part how many people in here have actually used sanity before sounds like a couple people are at least aware of what it is I don't know if you've used it specifically or not but if you have that's great that you're here to be able to help me out all right then I'm going to brad says not me Dita says across I don't know if that means yes or no to be honest I'm gonna open up actually let me look at this directory there's James - quick I'm going to rename James XI quick - James Q quick sanity and then open up sanity I should open up here and now I gotta figure out what the hell we're looking at so inside of the package.json luke holster says I have cool so if you if you know anything to help me get started as I'm missing feel free to throw it in there really quickly so it looks like there's a start command for sanity start it's got these different things in there it's a react application and I could run the start command I think this will start up sanity at port 3 3 3 we'll see if that's right here in a second by the way like I kind of said this at the start like I haven't I created my upcoming streams page but I haven't really updated the content because of how much of a hassle it is to add multiple things so I'm like desperate to start looking at something like this let's see localhost 3 3 3 3 and how so there's gonna be like some sort of config page or something in here that knows what to sanity JSON there's a project ID so that'll be the unique identifier and then it must be associated with my github account so it should I'm assuming prevent anyone else getting in here once this thing is hosted so I get in here and here's here's what I got so I've got three different types of content I've got a post with no posts in there so let me do let me create a new document and say this is a test post test post and then here's a here's what I was talking about earlier is I can generate this log based on that and then I could go and customize it to you I don't need an author and then I don't I don't have an image right the second you can add categories of tests and is it only lets us we have to choose category school I like that I kind of like that actually so that'll be good and then I've got a date picker which is nice I don't have to like go in and format dates that's cool and then the body I'm assuming you can just put markdown in here I don't know for sure DJ is asking how to studio work with Gatsby preview I'm curious what studio you're you're talking about so I can publish this thing and cool so now I've got this post and in theory like I could go and hit this hit the correct a free API endpoint and go and get this information to start so I'll come back to that I think what I want to do is look inside of these schemas and here's here's the definition the type definitions for each of these things so what they appear to have is a few properties the name the title the type it's a document and then all the fields so what I want to do is map over let's see all of these things I'm just gonna copy these over to make sure I get them so this is not real code I'm just making sure I get them so title check we've got a title property we've got a do they call it slug yeah we've got a slug property great there's a author which I probably don't need categories which I will published at so I could update all of my publish date to be published at that's fine or actually why don't we go ahead and rename that since like let's just stick with what we're doing so let's say publish publish date and then publish date and it's gonna be a type of date/time which is nice and it looks like KML says you can either make a shortcut that takes you to your Gatsby preview or you split panes to embed it I'm not sure what that means I might have to get caught up on that then we've got the body and I think the body is just the HTML property so we're gonna have to change how we reference that we've got tags and publish date we don't have to check if it's published I don't think getting ahead of you James don't worry so we'll get there and then cover image it's got a property down here for main image which I'll just change to cover image so this way it'll at least match as much of the stuff as I've already stubbed out as possible okay now so with this with that updated if I come back to my dashboard and I look at post refreshed it inside of here did it rename these things publish actually I think so so publish date and then what was another one that we renamed unknown fields what are the unknown fields published at okay so did we get no we didn't get the publish date so what it did is it got rid of published at because now it's no longer a field that we care about so let's get rid of that one and then we'll update the publish date this is the one that we do care about so this is starting to look almost exactly like what I need I'm wanting to add categories that's really cool I love having like a full list because right now actually so I'll show you inside of my blog the not the sanity one but this one my site inside of the blog or yeah blog page I've just got a little hard coded list of tags or categories here so I can definitely definitely use like a clear clear like set of categories brad says I can see the clear mapping between the scheme and the sanded you react at serving up the editor yeah that seems nice so far all right I'll we can go into categories and this I mean I'm assuming this will just have like just a title right I mean web development is gonna be one I don't need the description to be honest I can add another one of react and anybody get some popular ones react node just javascript in general publish that one I've been doing a lot of like people skills so people will skill something like that sweet so there's a couple of a couple of ones to start with and then in my post I should be able to go and grab from categories I should be able to choose from that list so people skills or react or whatever so that works pretty well that's cool so we've got the react one there and I can publish that article and then again I should whatever the API is I could be able to go out and make a query to it people that have some experience with sanity anything I need to I think my next step or I think my next step is to go into gatsby and add like a sanity plugin to be able to read from this sanity yeah that's kind of where I'm going next Brad as there's I'm assuming there's a gas we sort sanity yes we'll see that in a second anything I need to be aware of or check in the meantime before we jump to like trying to integrate this into gatsby anything for people that have are more familiar with us and Brad's gonna make it as easy on me as possible to go ahead and install that thing sweet so I'll actually copy should be good to go sweet don't necessarily assuming you're using like a relatively modern version of NPM you don't have to do this a flag anymore which is kind of nice so let's go into [Music] not Haynes but James Q quick site let's go back into that directory that's the folder that I have open and let's just install gas resource sanity and while that's installing I want to open gatsby source sanity to see how to use this thing so inside of cats beam source plug-in for pulling data from sanity and the gatsby sites developing compatible with gatsby image that's actually really nice that's one of the issues that I had before when checking out excuse me cosmic j/s is you couldn't use Gatsby image what Gatsby images I don't know if you'll be able to see this let's see if i refresh my page and you look really closely I like my picture icon it gives like a fuzzy image to start and then it loads the real one so it like optimizes the like loading of images Gatsby image takes care of all of that stuff it's a little cumbersome to set up to be honest a little confusing for me and but after you get it set up and use it then it's just super nice because it takes care of everything did cosmic send down actual HTML instead of markdown No question mark I don't think so I'm pretty sure that that I got actual markdown I'm not positive about that actually I I'm not sure it's been a while since I looked at it so actually I would lie to you if I told you one way or another maybe maybe we can look at that later all right on the documentation for this let's go to basic usage just getting started what need to add this plugin and for that plug-in we're going to need let's just copy this thing we're gonna need a project ID and I think I'll have to check actually where to get that but let's go to the config in Gatsby I'm gonna move this thing down like if you were reading markdown from cosmic not sure why it wasn't compatible oh you know I don't know and honestly it could have been that I just wasn't quite as aware of how to use Gatsby image so I'm I don't remember exactly what it was I just remember I couldn't figure it out at the time I know a lot more than I did then but I don't know so so inside of here I don't know if you if if people out there have like a specific like structure for adding new things I just ended up adding them to the end so I'm copying this in it's saying that we're gonna use the gatsby source sanity this is the freaking amazing thing about Gatsby is all these plugins and it's so easy to do and then the we want a project ID and a data set now the the data set is probably just are actually post I guess here so we'll do data set or is data set the type or is it the overall is James Q quick the name of my data site data set or is it post I don't actually know about this data set is production okay so why did they have interesting okay so the data sets you can have like a prod data set and then a test data set I wonder can you a data set as all of your documents so just just to double check that both of you agree the data set is James Q quick in this case I'm sorry not okay it is production so everybody seems to agree that its production okay cool so the data set is production does that mean I can have different data sets for development and then can I tell like Gatsby to go depending on which mode I'm running in to go and get different ones is that what that means can you find that in the GUI somewhere okay so it sounds like I'm on the right page I like that that's cool Brad says can you find that in the GUI I don't know I'm assuming Brad well we probably can find is in the source code maybe for the sanity JSON there's the data set and the project ID exactly what we needed so inside of the configuration file for sanity there's the project ID and the the data set cool so I'll paste that in there that should do everything it needs to be able to connect hi this is open so I don't need a token this still feels weird I'm gonna I'm gonna trust you all for now it feels weird for that to be open but Michael logically it makes sense for it to be open cuz it's just stuff that other people could get anyway emotionally it feels odd and then it's the sanity graph QL API was deployed using tag name use graph kill tag to specify the tag name defaults to default okay so this is just a default setting I don't think I did anything special so hopefully that will stay as a default so lots of good conversation over here if you do a dollar sign sanity data set export production and check the files you get a pretty clear idea of what goes on a document is just a collection of fields can be as big as a page or as small as like an author yeah and you saw like when I created the category category here only has two different properties I actually only need one of them for me I don't need a description so actually let's go ahead and update that inside of my other project let's open AK open back up the category and let's just get rid of description and I'm thinking that we'll just go away so if I come back to the GUI and actually it's already gone so it's got like a live reloading thing that's pretty sweet I'm liking what I'm seeing so far now let's see what it's like to incorporate this into Gatsby so I'm gonna make one of the things I'm curious what people think when people stream and they've got like code and browser side by side from a develop ment from a developer perspective it drives me crazy because they're both so small so I end up like swiping through screens and that might be a little jarring for everyone but like it drives me crazy having such a small screen so I don't know if let me know if it bugs you either way and I always like 20 minutes into a stream I'm like yeah I don't feel like standing anymore so I'm gonna sit down that's why code with two monitors so yes I definitely have two monitors going but remember I'm trying to get the code for for you to see so I'm streaming from one monitor which means for you to see everything that means it has to be there it set the title bar color and vs code to distinguish between the two open window so that's probably using the the peacock extension by John Papa due to the different colors I don't necessarily find myself having that issue that much it's built in oh where if you go to like probably one of the title bar as they're setting title bar style custom I don't know if you're if you're just talking about the ability to distinguish between front and back in that doesn't really doesn't matter a whole lot to me I've never I haven't quite and quite and I haven't gotten to that point where I needed that that much so for what it's worth alright so let's go back to you go back to Gatsby and let's just start this up so Gatsby develop dint intent and how many people have used Gatsby for something that they work on themselves also I haven't done this yet I've got my stream deck down here and I've got like one little thing button to say that I just that I'm live on Twitch and I wonder if that thing actually went through let me go to my home and profile and see I'm live right now yeah cool so that button works from a stream deck but it looked like I had a problem okay graph QL API not deployed interesting so Gatsby in this case is going to be trying to reach out to that back-end through graph QL and it's saying that it's not deployed so hopefully someone can help me figure that out you should deploy the craft QL API from sanity first if I would read the comments cool I'm super glad you guys are here in all honesty I say guys which I shouldn't do with I shouldn't assume with names because I don't know but people are glad that you're here so says I need to deploy that graph QL back in so should I think of this as like in the WordPress days you can have like it deployed like your actual WordPress thing out there on a server and then I can also have a copy of WordPress running locally and that thing is what I'm working with but you're saying I need to actually deploy that thing out somewhere in my my saying that correctly and then DJ says he's got a 1700 page site with Gatsby suite that's cool when it starts up thanks for the detailed description here when it starts up it does three things it fetches the graph QL schema definition to prevent missing fields are you talking about Gatsby maybe hey streams all your documents in a Gatsby it sets up a listener if you enable that which enables changes in real time so it's the three API requests to to build the whole site suite thank you for that so how do I actually deploy this thing do I just deploy this by like deploying it to nullify or something I don't [Music] okay sweet let's do that let's see inside of this project I guess I can cancel this out and then in your console sanity graph QL graph QL deploy so I'm thank you for saying this confusing for you so I think my interpretation of this would be like the gradual deploy is basically like deploying the database changes to the database or is this actually setting up graph QL for the first time I'm guess I'm wondering like when when will I need to continue to do this in the future is what I don't quite understand but I'll go ahead and run that and you want to enable a graph QL playground yeah let's do that I'm assuming that'll give like a graphical end point okay so when are you so you're saying when I make changes to the schema of the names and fields I need to redeploy those things out yeah okay that makes sense so I wonder up until this point where I just deployed did I need to deploy because I never it never got deployed at all before had it been deployed already and I just needed to update the schema or was there nothing out there previously I'm thinking there was probably nothing out there previously and now from now on I'll just update it when things change this just republish as a graphical schema so other integration is relying on it including gatsby you had nothing out there previously sweet all right I think I'm good thank you guys so much again people thank you people for so much for being here this is incredibly helpful to have people help me through this so that is deployed now it sounds like I should be able to run my Gatsby develop and it will talk okay we need another stream about gr o Q sanity IO native query language for JSON sure you're gonna have to walk me through all of that I've never even heard of it but that would be fun and I think SP is doing more than it had before so that looks good so can I see a local copy of my site yes so we can what I can get is my embedded version with Gatsby of graphical and what I should be able to do if I'm understanding this correctly is I can go to all sanity post and do nodes and then get let's say the what is it it's in fields or actually let's go ahead and get all these let's start with title so if this is configured correctly I should be able to query all the posts which I don't really have any I've just got the test post and that is freaking sweet so graphical in Gatsby the way it knows the definitions for the objects gives me a intellisense gives me a GUI to be able to create these queries is freaking awesome love it okay so let's just look at everything that I will need what is the raw categories is that just gonna be like is that just a string no it's not okay so probably I don't think I want well I don't know raw cover image Ross slug I wonder what these there's a slug down here and there's a key and a type and a current I don't know what those things are so looks as current current looks like it's gonna be the most relevant value for these things so their slug and then the body is huh now this is getting interesting because I don't know all of these properties slug current is where you'll find your slug okay so what about what about body list I don't know why it would be list I don't know what that is style I wouldn't think it would be style normal sanity children text nope sanity's rich-text is saved we needed to talk about portable - there's so many things to learn we need to talk about portable text sanity's rich text is saved as JSON structure okay inside of sanity can I restart this oh I killed the sanity server let me restart that p.m. start sanity's rich text to save is JSON which lets you output rich text content as native react components wow that is I don't quite fully understand what that means yet so we'll have to get there and I'm starting up the sanity server again inside of this like what type of so posts the data type for the cover image categories publish date the body type of block content so I'm not sure exactly what that is minimal demo here go into the block content Oh didn't know that was there this is a schema definition for the rich text fields used for this blog studio when you import it it can be reused in other parts so block content array huh so there are those things that I just saw I just I don't know what that is so let me super customize well I think I think there's a there's definitely a learning curve to this that I will have to get into let me ask you one question that hopefully is pretty easy what's the best thing if I want to store like raw mark down inside of sanity what's the best type to store a raw markdown in don't want markdown okay what do I want so if you like when you do is this what people will typically use with blog post is this thing there's a markdown type with a plug-in okay so this block content thing I'm still I've got like a big gap here and understanding what it is in relation to replacing the main content for my there's a plug-in type yeah so I've already got marked down and I think I would continue to use markdown I'm wondering like what would you use all these marks and things for it looks like they this is got the ability to do some sort of like basic markdown type stuff sort of insanity sends down react components auginaush stream later and a lighting you about the wonderful wonders of affordable text I appreciate that that would actually be helpful there's an NPM package you can add with a react component you just hand the block data to me and I'm like my eyes are wide open now because I'm still still trying to put all this stuff together let's look at this thing that you just sent and in the meantime the local host should be up and running again for sanity suite so it's there and this thing is block content to react render an array of blocked X from sanity with react native serializers wow this is like a whole new world of things that I have like no idea what's going on so with like with Gatsby Gatsby basically or with the Gatsby all remark whatever that plug-in is that does markdown it basically takes all the markdown and converts it to HTML and I I just don't really know what all these things are doing so this package is blocked content and then you have a block content component in react that you can set the blocks to the article body and the serializers you just pass the block content props to this block and yeah like that I mean custom serializers right now the simpler version of what you're saying is just to import it then do the block content so can you help me understand maybe I can maybe I can run with you inside of graphical for the body for the body property see where's that for body which one of these things will get me that block content does that make sense what I'm asking you just want rob body so this thing and do I have to huh okay raw body and then that raw body thing will that's all it'll return JSON so it'll be a JSON representation of I don't need this anymore JSON representation of this is out you're saying and do I write markdown in this or no that sounds right bread no mock down just use the formatting bar okay so if so here's one of the potential issues or maybe not an issue maybe this if I if I move everything over to sanity and for some reason I don't like it and I want to go back to having markdown embedded in my project then I potentially got an issue like markdown is pretty universal so I thought I would be able to stay with markdown what I be able to choose is there any sort of like can I cannot type markdown directly into you can serialize portable text to anything which means wow man this is like a whole new world of stuff that I'd like didn't know about coming into this are you saying that I can write markdown in this and then I can serialize it I can convert it to markdown on the front end and use it basically the way I've been using it alright there's another plug-in nice let's look at this sanity plug-in markdown input component and schema type for sanity sanity install markdown so you can install it right down into your thing basic usage just type markdown on a field in your schema type markdown okay so I think I want to try this if you don't want to dive in a pourable text at the moment markdown plugin will let you okay yeah I think that's what I want to do for now I am really interested in what all these other things are but just for portability and getting started for what I've already got quicker I do want to go ahead and start with markdown cool so I think I think I would do this so let's go ahead and install this thing into sanity so let's close this install the thing and then inside of my post I will determine this body stuff to be of type just markdown write blog post type document Fields type markdown okay so type mark down all right and then I will do NPM start because I want to see this in the editor first and then I need to also publish then I need to publish the graph QL and point out so gasps we can see it again at least use reacts markdown I don't know exactly what react markdown is is that like and the front is that like like MDX rector I render react markdown and then you give it a source what's the what's the difference in that I guess like right now for a blog post for a post nope wrong project for a post and this one not CSS but blog posts inside of here so I am doing dangerously set HTML based on Gatsby converts the markdown to HTML well react markdown will do is it'll allow me to just take the raw markdown and then use it in Gatsby to display markdown so it'll do probably does something similar where it converts it to HTML and then cause dangerously set HTML so I'll probably use that in a second so two things I got to do I want to see the GUI because I want to see I want to refresh this and I want to see what that post looks like okay remove value and then body now this should be a title and some text publish so that thing is published now let's publish the graph QL part of this so sanity graph QL deploy let's put that out there yes enable the playground I guess if you have the wiring in place it's fine but react markdown will let you use components for different markdown elements so more control over rendering I prefer markdown to JSX so many different things but both it and will actually parse markdown and render full components instead of using what kind of components does it render exactly like it will like instead of just dumping a raw markdown string as the HTML it will actually like convert it to like h1 tags react elements for basic HTML elements okay interesting okay found breaking changes body raw yeah think I want to do that so let's go ahead and deploy this let's do an NPM start to get that back up and running in the meantime the Gatsby project I can restart and this should go out and connect to the newly deployed graph QL definition that includes the ability to do markdown and we should be able to go from there hopefully so you have have a component for code examples hmm yeah I don't have a component for that I've got styles for it but I'll have like a specific component is this getting into like like an MDX type thing where you can define you can write react components or use react components inside of your markdown is that kind of what you're talking about okay gotcha so I haven't done any of that yet so I'm kind of far away from that but I think we're at least making progress in the right direction but even for basic elements okay so then I would have control over styling in h1 and blah blah blah oh yes so if you have a custom image component or something okay nothing nothing that fancy yet so here's my item inside of my test post if I come to graphical now if i refresh this it should get the new definition for a body that thing is gone and now I want to grab the body which just is the markdown string sweet there that is okay so that'll work all right so let's I want to make sure that I'm grabbing all of the right property so inside of the blog page and the query over here what are all the things that I'm grabbing so I need an ID is that this guy's the underscore ID so there's an ID my publish date so I need that thing which is here and what does this one do is there a prettier one or there's a locale from now wonder what that is can I send from now to true in six days in six days oh I pray that thing in the future cool all right I'm gonna just keep it as format string so I'll give me this thing I should be able to convert that to a manual date and then just play it how I want and I guess I'll have to do the excerpt thing myself so I can I can figure that out myself in JavaScript so I got did I get tags or categories is what they're called now raw raw categories resolve references oh yeah gross type category that's not what I want categories here and what's the present idle for the category yeah so this thing only had okay cool so getting the category there this is a title property of the category object and I'm gonna have to convert all these to make sense with what I've got okay so let's recap got title of got published eight I've got tagged slug the cover image I don't even want to get into yet unless yeah I'm gonna skip the cover image for now because I don't images just end up getting tricky to be honest with the Gatsby image that looks to be about what I need so let's just try it out let's grab all of this query let's just post it or paste it in here so there's our new query and like honestly I mean I'm just gonna comment all the stuff house and I just want to see what the data looks like so we'll see if we're actually getting data inside of my blog page looks like there's some sort of error these things down here not defined yeah cuz I don't have anything so is there a better way that people go through like I mean I'm completely changing the way I do this so I'm just hacking this along so it can't do that well it respects that why did this just get so big I don't care about that I'm coming down the bottom okay it's doing something let's go to the website running locally here you start it up and there was an air while doing a query encounter duplicate definitions for one or more element each document must have a unique name and I guess this is in the graph QL thing so I think before like inside of here I just had query I don't I don't know that that makes I don't know what difference that makes to be honest all right so that's getting something we're getting somewhere inside of the console we see an object which will have an all sanity post and note suite we got the data that's pretty sweet that'll work and what we want to do is now get rid of all these tags I think it's get rid of all those I may have eventually I might use the ability to do this stuff the sorting let's just get let's just get raw post again so raw post is gonna be data all all sanity post all sanity postage is that filter and actually I don't want to filter yet so this is actually gonna be just nodes is gonna be each item so nodes so I'll come back to the filtering so here's my blog editor using the code input for let's see what you got there interesting so those inserts are those custom things you did those are okay sweet interesting so I like the like the YouTube embed it's cool I've actually got like let me show you inside of one of these markdown files I actually like have plugins to work with this but I don't know if it's gonna work going forward with what I've got set up now so like I might need something that will be able to do YouTube stuff so that might be worth looking into you and here's the pollute polemical is pull em is that what you thought of worried that I just don't know let's see and here's the actual blog post and you got some fancy I like the way that that code is elevated like with the Box shadow and stuff that's cool sweet built with sanity and Gatsby nice okay I definitely I definitely want to learn all about that more intimate stuff Sam julene is rating with a party of two Sam is a developer advocate on we're on the same team not on my team but on our team so Sam just got done with a stream hopefully went well Sam we are looking at moving all of my content to sanity io so we've got sanity set up it's actually pretty freaking sweet so far and we're at least able to query query the data from sanity inside of Gatsby which is pretty sick you got prism working suite and that was for your your code syntax highlighting inside of inside your blog post I don't actually remember oh I can't see it cuz well I guess I could go to my regular site I can't remember what I did for mine which plug-in it was some gas we plugin I found and I got I don't love that color scheme but it's alright so I might might need to revisit that guess for your remark vs code that might be what I'm using to be honest and then you can you like choose the vs code theme let me let me see if that's what I'm using let me go package.json and code yeah gasps we were arc vs Co that's what I'm using sweet MDX doesn't work with the regular plugin so you replace code and pre tags with custom components okay so you get some extra things that you got to figure out there but Brad I'm using the same thing you are and maybe I need to they're just NPM packages so maybe I can actually install the theme that I use the cobalt 2 theme from West boss but anyway whoo alright so going back to our blog post page we'll get the raw post dated all sanity posts edges nodes let's log those out to make sure I'm getting those correctly and then I'll probably want to map those to a format that I'm used to property nodes of undefined I don't think I need edges so let's log of that out do we see that here cool so there's there's all of our blog posts so that is all the stuff that I need I think which is good and then like slug like slug I don't necessarily want to be current so I'm gonna go through and say formatted posts or I could I mean this could just be posts let's do a map and let's get each map and then what we want to return is a new object so we'll probably well we'll see how we're gonna do this so we'll take the slug is going to be the post slug current maybe and actually let's just copy in all of the original properties and then we'll customize the ones we want to you let me know if if people have any ideas on better way to do this I just want to get these in a format that like each of the properties are in the places that I expect so we'll copying all the properties from the original post then we'll update the slug property with post dot slug that current so we get rid of like it's object type and then we've got the body so we'll use that a second we've got published date and then categories I want too I might take categories I don't can I do this right in line categories is gonna be postdoc categories dot map is that can I do that and we'll say for each category I feel like this is gonna get like way too hacky I can clean this up later but for each category I want to return the category dot title so category category dot title and then do a dot join separated by a comma space is that this hat makes sense to just do that right in line so it's just one string because I don't think I need to do anything special with them I just want to have like the one string um actually I might not so up above when I did this I had a separate function for this and it's because I wanted them to be in like tags themselves so yeah maybe more what I want to do maybe I just want to do like the categories that map so this will be an array of the category and just get rid of the fact that it's an object and it'll just have the category like string inside okay categories array so I think that'll be good categories is that all the properties that I need sweet let's look at what that looks like and we can take this one step further if we wanted to and get fancy and get rid of the return and then just have the object right there is that work and let's logout posts hacking with JavaScript I like it let's do a refresh here's our new post and on here we've got title slug body ID categories is a array awesome so that works sweet I like this there's our posts and then we got some filtering that I can do later on this is actually doing like the same kind of formatting that I just did which is a lot simpler and this I want to enable now and this is going to be post tags map so this is gonna take instead of tags I'm going to let me do a replace for categories everywhere and then for capital tags will do categories capital C and we'll see if that works alright let's start I mean honestly I can just uncomment all this stuff now so let's grab all this markup and maybe except for well actually this is passing it to a card so we'll need to go to the card and update it so post map and then we'll have the categories in here and actually why don't we just pass the post categories into that so this thing will just accept an array of categories and this would be like this alright and so we'll do posts on title and then publish date and an excerpt I don't have an excerpt so maybe what I need to do is also add a property in here for excerpt and I don't know if anyone have any suggestions on the best way to do this I would just do like post dot Oh actually this could get interesting because right now it's markdown which might not be a problem that might be okay so post up body dot sub string and I want this to start and go 0 to 100 or something 100 characters for SEO reasons you might want an actual excerpt what do you mean by actual excerpt not sure exactly what you mean there like if I wanted as part of the post I had a specific two sentences that like was the actual episode except cert excerpt like that was more targeted at like SEO is that what you mean a customized text that pops up in social media previews and so on gotcha okay I don't have that yet but I think that's a good idea so I will I will add that later for now I'll just take the post-op body substring zero to 100 actually you know what that's like that's easy enough to let's just add it I'm I'm good with that or I'll wait I'll do this for now I'm going back and forth on everything I'll do this for now and then we'll come back to it so then we're passing in to our card the post on title published eight excerpts should be there slug I mean that should be reasonably close and holy it actually like that works now we need to update the markdown so what are we actually okay so the excerpt we'll need to figure out the conversion of markdown to HTML which looks like we could install react markdown and just do that that way so let's let's try it out let's do npm install react markdown let's kill this install it and then inside of the card not all of these are gonna be marked down for these cards so do I want to convert all of these to use the markdown maybe is that what I want to do maybe let's see so let's require this thing up here and then I'm gonna give two different that I'm gonna display this twice I'm gonna display the react markdown and then what property is it source source equals and then this will be the description like that all that work I got too many tabs open that did wait why is the title up here I don't know where that's coming from isn't HTML valid markdown so it should work regardless if I jet you mean well so never thought of so are you saying instead of doing dangerously set in our HTML I could just do this is that what you're saying let's try it maybe not is that still I don't know where where's this title thing coming from you could pass HTML into the react markdown component oh I got you so you're saying I could just choose to react markdown component regardless and not worry about it so we take out this we kill this now what do we get oh I'm I'm an idiot we get this title thing because inside of sanity I'd add a damn title in here which doesn't need to be there so that's another that's another great reason to have the excerpt specifically so that we're not having to deal with like displaying markdown because there's no guarantee that the first two sentences are first hundred characters of this thing is not markdown so I wish I had I wish I had some lorem ipsum but here I can just save this thing like this after you hit publish so good question I was actually just about to check that so let's let's do publish and then come back and it doesn't look like it if i refresh does it No I need a key prop in there I think they're hopin to gatsby config yes will do config and you just need to enable it I thought there was a thing for that so any idea what let's look up the gas peace or sanity and like reload or watch mode truth is that just in the suite so in the options probably watch mode boolean true so let's restart this I am super glad I had so much help here today the sort of calm like drastically different if I didn't have your help in the chat okay let's let's come back to our site let's refresh to see if we see this let's fix this key issue if it is still an issue let's go to blog where did I do that wrong blog and then card doesn't have this in there before surely I had that before right key equals post underscore did I grab the ID yeah so does that solve that problem refresh yes okay sweet this stuff is showing up good and oh so let's test if we set some new text I said that to publish does this refresh with new text that's cool that's totally sweet does that have any implications in production or anything I'm assuming it's smart enough to know Gatsby like won't do that live in production will it or will it I don't know if you know let me know nope since Gatsby is built so statically - static yeah I mean I mean yes it's built statically but it's also built statically what like right now is that is that thing actually triggering a rebuild of Gatsby is that what it's doing cuz it happened way too fast for it to be like a full rebuild you know I mean and development gasps he runs the server and it renders yeah so I guess I mean it's got intelligence just to do that one little piece really quickly okay cool when you build it's just yeah that I know build it's just HTML files and JSON files yeah I was just wondering about the specifics of yeah you write because it's actually running the server and it has whatever intelligence to do that came out says to add a token why now I had a token what uh what is the token do for me now if you had a token with read writes it will update as you type demos well okay so as I type without even publishing you get to preview your drafts live huh Joo Wow interesting okay so where in the hell do I get my token so you actually have to get your token on sanity io right like on their page login like github and this one and I'm assuming I have to like choose to show the thing API and token add new token all right so I'm gonna take this off of actually I'll just hide you all for a second no because I don't have my audio set up I need a I need a new scene for doing credentials I'll do that later on I'm gonna take this away from you yes thanks for reminding me add a new token she created token please provide a label for it I mean this is just my sanity token I don't know what else I need to do add a new token there that thing is okay so now I can bring the website back over and make that full screen again and then I need to put the token inside of my environment variables to then read in to put that in and yeah and then develop a file in the does that need to be it doesn't need to be prefixed with Gatsby right cuz then we're running node like if you use environment variables inside of gatsby browser code you need to prefix it with gatsby but in this case it should just be not prefixed I think so let me I'm gonna bring this over to the side and go into NV dot development and this will be my what are we working on sanity API or sanity token is that what it is sanity token yeah all right so I've got my sanity token in the dot E and V dot development and then inside of config now is it just well how did they set that up before let's see this token goes here okay so what yeah they did it same way under this stuff and I didn't call mine my I just did that sweet so with so I have the token I can use the token does that mean I need to change the way that the database is configured to require the token you need dot E and V or something yeah I've got I should have dot E and V because I've used it for other things that should work I think not that let's do a guess we develop again I'm really excited about this by the way I'm like super excited I think this is gonna be so nice the one question that I haven't quite wrapped my head around is how do I and maybe that token answers this question how do our preview stuff how do I write stuff in preview it before I'm actually ready to hit publish does that make sense so let's go to our site and I guess I can make the side-by-sides let me open up this window on that side that's without that part and then this one on that side that little collapsed thing is pretty cool so is what we're saying that was part of the question early on to how to make it work with Gatsby preview ah okay and I haven't tied Gatsby preview I've not connected anything and here to guess we preview yet so anyway if I are you saying if I start typing this should be I don't know if it refreshed or not are you expecting now that we have that token that if I'm typing in here it should reload over here without me having to do anything was that what we were expecting it to do I don't see that happening I just don't know if if I've got the right expectation or if I'm missing something yeah that was supposed to supposed to happen okay I suspect it didn't pick up your dot env development file I can I'm gonna go ahead and make these fullscreen so inside of here I'm using processed ID and V maybe I'm not I thought I was we're in this project am i creating or using process ID and V and this thing all of my functions directory yes that makes sense this is a blog post that's a blog post streaming process ID and V yeah that's B twitch so let me I'm gonna try I copy and paste from okay let me yeah let me open up that one and let's just see where he put this thing I said he he or she whoever it is the Roth article if you don't want to attach your sanity projects ID to the repo you can move it to Donny and V files like this in your so they're using dot env not [Music] not dot env development maybe that's one of the issues so let me take this thing off screen again and let's go into my dotting V file and let's add that sanity token there as well all right let's just try to run that again so the required env thing is what you need oh so I like I said this all cocky like yeah I know what I'm doing I've done this before I guess I haven't actually done that in this project I'm assuming I do have da T and V installed yes but I'm not requiring it so inside of here we have to require dot a and V and then call dot config it's alright yeah thanks for double-checking me on that I I could have sworn I was already doing that in this project but apparently I'm not so let's try it one more time and then I think I've got that property in a dot env development and dot E and V so anyway hopefully it'll pick it up from one or the other we'll see I want to make this go fullscreen again and then see that gets done let's refresh let's come over to our let me close a couple of these down close this one that one don't need that one and where is my actual oh this is the thing I want okay so it doesn't look like so the acquired a and B thing is what you need I did that right right the required dot envy and it should be dot config if I remember correctly required yeah you have to turn on overlay dry-ass which is where duplicate I like that you can duplicate in here too and then gatsby config options okay so back in the code down here and I guess this is why you're saying I should just copy all of that stuff so let me double check what they have I don't see they don't seem to have that in this in this one but let me look at this one to see over know what in the world that's not what I wanted overlay giraffe so just said overlay drafts to true and then scroll up on this page so such a sure you in order for drafts to replace their published versions yeah gotcha alright so overlay drafts it's true I'll restart this again sorry lag no worries mmm I'm definitely taking a nap out for this by the way see when that gets up and running so again I just want to make sure like this because I'm running Gatsby like the server itself this is working this will not happen in production right it seems like it's pretty obvious at this point but I'm just double checking all right so refresh this thing and now I see some stuff change and now if I do this holy that's cool test post Wow this works that's crazy cool hi like amazingly cool that is sick okay Wow so assuming I'm right and that this will not affect prod like when it's actually hosted nullify that I mean that should be true when back to the question earlier sounds like it might be a Gatsby cloud thing long as you don't have the token to the build environment it won't show unpublished content on prod would it even be able to do that regardless cuz like it like on prod again it's already it's already been through like a build process so it wouldn't be able to do the real-time connection stuff right I normally do over dry ass processing v okay that's a good idea but right no real-time introduction yeah so like it wouldn't affect my production stuff anyway right even if I left it all the same but I do like I do like the idea of just doing this to process the MV dot production I think that's a good idea sweet that works ok so right but if you had a draft of Draft at Build time okay cool oh so this is this is the easier answer than getting into Gatsby preview potentially is I can always I can always just use in a developer so in a develop branch well a develop branch will still run as prod on so some way in net liffe I I can figure out how to detect the branch and then decide whether or not to turn that thing on maybe here's how we do config for our starters I bet I could figure that out and that would be super slick by the came elf do you are you a sanity employee ah no wonder what do you do at sanity running Devereux what sick I don't I don't know if you know this about me but I'm endeavor Ella yeah obviously I'm endeavour all at all zero super cool to make the connection I would love to do like a livestream on one of our respective channels like the austere channel or if you have a sanity channel to collaborate there I would love to make that connection what's your what's your Twitter handle I want to make sure go ahead and find you on Twitter if you don't mind is it same came elf already following you nice alright sweet I bet I bet I came across something you said before about insanity you can teach me how to make an Aussie or a custom login for sanity yeah we'll have to do some digging together to figure that out but I've been working on doing authentication in Gatsby and Sam julene who I don't know if he's still in the chat has been working on that as well and doing like authentication on sir but listen points and stuff so that's that's the kind of like osteo related stuff I've been working on but that would be super sick to work on that so cool thanks for being here again for in for everybody else that's been helping out and I really appreciate it and you showed me the default setup so it uses whatever the config stuff is that you have and then the token watch mode is prod and this is cool that makes sense is this dot no D and V is this any safer then I kind of like this actually I wonder if that's any safer than doing process dot e NV dot production I don't know but I kind of like this so let's do let's do this at the top there's an is prod because I might I might reuse this prod for something else and then let's take watch mode and overlay drafts to be not proud so looks like this and this and then this and then let's restart this bad we'll wait and see if it works so one question does when I'm working on a post inside of sanity I never I never had so it saves automatically so by publishing it makes it actually live if I don't publish it still saves but it saves it as a draft and that's where we're getting these like overrides with the real-time stuff it's like Google Docs okay makes sense sweet so I can do this again auto-update there which is insanely cool and then I could go ahead and publish that as well so the boring part of this process is I'm gonna have to copy over all of my posts eventually - it's a sanity to get this to work here's the last thing I want to do is I want to tie this in to the create pages API and Gatsby because after that if I get all that working then I just need to actually move my content over you can use sanity API to migrate them really easily that's a good idea - ah I'm getting like all the excitement right now this is cool I want to make sure also my streaming stuff still oh I've got a built-in like live feed of my stream on my computer which is kind of cool or on that page and I want to make sure that these things these links still look right oh this is so this is changing it to a P tag so I need to figure out that anyway that's not a huge deal so I'll get back to that in a little bit all right let's go back to blog and then I need to actually generate the test fate or the actual pages for these the entire studio runs on top of the API suite that's how austere os/2 by the way like the osteo management API the GUI the dashboard actually uses the management API so that makes sense so I need to go into the node and let's just start with post and let's I'm gonna copy a bunch of this stuff from here so the query that we wrote earlier let's just copy that over and we're going to replace this post query with this new post query this is post query maybe post result or is that maybe that's not how I set up what did this do before this called okay so we need to pass we need to just pass the query inside of here so let's just grab the query itself so this thing so let's just grab that query and let's replace all of this query is everybody I'm assuming like people seem pretty familiar with with gatsby so far so probably most people that are still active in the chat understand what I'm doing if you don't you can let me know but we'll get the post that way post result dot airs throw airs and then we want post result let's see what did we say it was earlier post results dot data dot all sanity post nodes posters old data all sanity dot nodes and then I took out some of this filtering stuff so I'm not doing that right now and then I'm going through each post and I'm using the slug so in this case and is this nodes or yeah no it's post-op length and I don't actually need the node here how did I do and I'm not actually using these right now we've gotta run it was fun and tag along let's connect after yeah please do really good to meet you thanks a ton for being here and just out of curiosity for people that other people have been really active Cory what what's your background what do you do and Brad was another one of the really active ones here and I've talked to him a lot and then Lou toaster if you're here to let me know what you all do I'd love to make connections with you as well and talk about this fun stuff later on I'm gonna get rid of I'm not actually using any of this so I'm gonna get rid of this for now Brad Brad's a front-end debited OB I knew that Corey is a freelance developer sweet Corey what's your do you get are you on twitter what's your handle maybe that's the same thing see Cory Ward right there huge fan of Gatsby insanity io sweet awesome glad to make a connection and Chris on code is silently gonna jump in to say that he makes codes Chris how long have you been here you might have you might have actually rated when Sam came over but you haven't talked until now Lou toaster is a front-end Devon agency in Vegas I've been doing lots of things with sanity lately Chris no worries for being late Christie you and Lou toaster if I'm saying that right or maybe Luke coaster do you guys know each other both in Vegas yeah you ought to make that connection and then Lou coaster are you on Twitter as well Luke hoster I don't know if that's yeah friend of Guatemala I tweet in a Spanglish podemos a lot on poke on a pony old si quieres and we can mix with a Spanglish - yeah just added you just followed you on twitter I did I you you two will have to connect cool making connections all the way around all right so what am i doing back in the code I want to iterate through these and grab what did we say the slug was so the slug is what's the other file to get the slug it is a slug current so it will look like this hopefully yeah Chris I wouldn't I wouldn't say well so here's the thing at some point in my life I've considered myself to be fluent in Spanish I don't anymore at least speaking I can read fluently fun fact I've read all the Harry Potter books in Spanish it helps when you know the story really well I don't have much of a use to speak Spanish I just don't speak very often and so like I yeah I don't know I don't speak all it often so I would consider myself fluent in reading and like highly conversational in Spanish wife is Mexican I have great comprehension but I speak slowly sweet yeah you I mean all I don't know it's just cool to learn a different language and be able to communicate regardless so I think that's super cool and especially when you have the connection at home to be able to learn and speak I don't know if she does she enjoy you learning does she enjoy like teaching and correcting and that kind of stuff because I've I've spent a lot of time around people and I just want to like ask ask ask and I feel like I could be annoying about it but it's fun to learn regardless so okay so she may or may not speak all that much yeah I bet I bet like grammatically she may not be as good but she can speak probably just from being around family oh she's so okay I've got my one of my best friends that I actually learned Spanish for him and his family like my grammar is much better than his because I learned Spanish alongside him in school so especially like writing like spelling I'm a better speller in Spanish than he is but he is like completely fluent in speaking Spanish so it's an interesting interesting dynamic there all right let's see if we're making any progress so for each one of these posts I want to get post that slug got current and that's all and that should post it too that should create that page for it based on that slug if we're lucky yeah and it's funny he used to he used to kind of struggle with the test in Spanish oddly enough because he liked grammatically wouldn't quite know and he's from Argentina and some of the commands look man that those are different in Argentina because I do heard specifically Buenos Aires they do some specific things so he would like he would mess up cuz he would like say the things that he speaks but it's not technically correct in Spain or like proper Spanish that you would learn in the classroom so alright let's I think if I click on this link it should take us to a page and it says four four so that didn't quite work all right so that didn't work I wonder did any of the page not found on test post did any of this fail you studied query contact form I got a while look at all those things I got a face did any of crack you all query and the non page component will not be run exported queries are only flogged blog posts oh we also need to update this thing so we need to add the same query here so the same query we had to get the post we need to actually I want to know why this is in this page query we don't need our yeah we do I guess we do for for the SEO stuff I guess all right I'm gonna let's see what's the best way to copy this in here copy that and and get rid of the query line and the all sanity posts I think that looks formatted correctly and then we want a query something like this so let me copy this and then get rid of all the markdown stuff and we will I call this all sanity post and get rid of that one and then we want to check that the slug field equals the slug and that may not actually can you put a period in there like that like that variable slug current because the problem is and the Gatsby node like we're passing just the slug string or no sorry here for the path oh why don't we not do why don't why not do that here two contacts so this should be post slug doc current and I don't know how to compare that in graph QL will see I don't know if you can do that dot so we're the slug dot current property maybe that'll work I don't know let's try it out Oh usually I use that makes total that makes much more sense let's actually do that to use the ID so the context will be ID and then this will be post dot underscore ID I like that a lot more and then inside of here we'll do the the thing that comes in is the ID so we'll say the ID equals the underscore ID I think what do we mess up here on an argument fields on type all sanity post they maybe it's not I'm not that great at no just dollar ID this one is dollar ID doesn't that need to match the actual property on or is this which one is which is this thing pointing to this thing up here that's probably what it is so this one is probably needs to be underscore ID I think and then I might have been wrong about field so on the blog query where is the ID do we need well I guess here we can just paste this thing in to you want I'm just gonna copy this because I don't feel like messing around with it all right still should be all sanity post and there's no fields I wonder why was fields like the front now that wasn't the front matter why did I have fields before I don't know and this should be all sanity posts like that and I think I still need to restart this so both of those are just dollar sign ID expected name found let me restart this just in case I'm not sure you only want one post in no nodes ah you're right okay who is equally what's going on then you have okay yep you're right so that's why you had the sanity post and then I don't have nodes so get rid of that thing like that I think I messed that up does that still I don't know if that works or not then you have dated a sanity post you missed it opening curly bracket this is the worst so on this side all right and then I get rid of nodes and then get rid of that thing there I think I'm still oh this is fun so this should definitely have this should definitely have an opening bracket there and I shouldn't need the nodes property because it should just be one so I would think it's this one and that one does the do we have an example in that I can just copy actually well where is the sanity plug-in there's a have an example of a query sanity person so something like this on my bad sanity post I gave you an extra I knew one of those wasn't supposed to be a dollar sign I say that I thought it was but I also think I also think that would probably be underscore ID right because the property on that object and the model is underscore ID I think I'll say that and see all right what does that compiled at least okay so this should be underscore ID okay man cuz I was starting to feel real lost right there and I don't know if I need to pose I might need to come back to that so let's just see let's just see if we even generate this page successfully this has fuel type name is just conflicts with internal renaming nope blogposts it is a page component possible you're trying to create two pages that's failing okay so something's going wrong so let's look at let's look at in here let's log out the post and the post slug current seems like your guess we know it isn't specifying their correct template Gatsby isn't picking should have it and change that part but I can double-check so here's the query and then we've got blog posts is the object and we'll pass that as the component blog post here I didn't change that so I don't think that's messing up although I don't I don't know for sure obviously so can i log these out when it's trying to build if post is empty yeah I don't know it looks like so now that's getting it so there it is it looks like it's getting getting that object and you can see you're getting that array it's got the one object in it and then it's printing out the slug current too so that looks right this loads that's better okay sweet so that actually made it to the page I don't know what was wrong I don't maybe I didn't restart the server or something so that's like at least making it to the page now this will be I didn't let's convert this thing like I did before so it's in the format that I want so well actually it's just one post mmm anyway alright so one post will be post title I think is fine we don't have an excerpt yet so I need to create one I don't know mmm images is kind of a stretch URL this is for the share stuff is post dot frontmatter so not frontmatter but slug current in this case and I want to clean this up to convert this post actually let's just go ahead and do that because I want to go ahead and just have this be in a format that I look for so here's here's the post and I'm gonna change this to be actually we can do this all online so we'll take we'll take these properties will spill them out and then we will overwrite just like we did in blogs these things like this so dot and this is not markdown remark rats what is I mean log this out it'll be well I guess it'll be the sanity post hopefully props are data does sanity posts I think and then all of this will be the post here so that that and that and then let's try to log out the actual post itself and then on the front matter from at a dot I'm going to replace with nothing so get rid of frontmatter dot and I'm going to comment that out for now and just set this string all right let's see if that gets us any closer that loads a page sweet so we got the page created and it actually loads now the [Music] what we send down to the let's see there's the title the published date and actually let's look at what we logged out in there of how we converted that object console object here so it has title slug body has publish date I think I just I think I called this publish date yep and I'll probably have to fix that on the other one to you so there's there's a date I need to format that and then what else we trying to display the title date then we do the HTML so just like we did with our card we can do this thing I don't know if I need to wrap that and a section tag and this will be the post dot body is that what it ended up being called looks like new react marking out oh we got to import the reaction markdown all that work sweet I'm amazed that's the majority of the way there now I just need to get into testing like some more difficult markdown and stuff sweet this has been like super super fun and super incredibly helpful to have people here to help me do this I think I'm gonna call it a day and and then I'll work on this like converting the data over later myself like the boring part obviously any any last questions or comments or anything before we wrap up I'm glad to make some good connections with people on here thanks again for helping out and all the all the feedback and advice and stuff I never would have made it this far without it so show the pricing once again sanity pricing and I'm curious I'm curious to know like when if ever I would hit anything any of these limits but on here the the one that I care about is the free tier with like then there's the extra so 5000 or 500 requests per month no 500 yeah five hundred thousand says a ton per month for free ten gigs of bandwidth and you pay a dollar a month for extra bandwidth 100 listeners API requests I think you use syntax FM code to double the fare oh sweet I need to do that because syntax is one of the big places that I heard about sanity - I wonder if if I log in where can I create my account delete me or maybe I did I need it to sign up hopefully not not that manage developer account you already did so like I don't have I don't yeah I don't have the way or plan is there you're currently developer playing this is great at payment details not yet see playing right there you can reach out okay yeah I'll reach out to him then and ask him about that I'm really really happy with this I'm really glad I did this I'm really excited about the disc content going forward to be honest yeah I think this is gonna be really sweet all right yeah I will I'll reach out to him to get that set up later on are any any last thoughts as we wrap up I'm gonna stand up in the mean time all right um all right I'm gonna call it quits I'm gonna get some food and honestly probably take a nap but this has been a ton of fun thanks again for being here I appreciate all the help if I can return the favor in some way please let me know and I will do my best to do so so thanks again for me being here and I will see you all tomorrow or later see ya

Channel: James Q Quick

Views: 4,358

Keywords: gatsby and sanity.io, gatsbyjs tutorial, gatsbyjs and headless cms, headless cms, web development, sanity.io headless cms, how to create a gatsby blog, web development tutorial, jamstack, jamstack tutorial, jamstack blog, gatsbyjs blog, content management system, gatsbyjs blog tutorial, jamstack cms, javascript, programming, headless cms gatsby, headless cms tutorial, content management system tutorial, headless cms react

Id: 5idNI1Qpy40

Length: 115min 58sec (6958 seconds)

Published: Mon Apr 13 2020