Live Code: How to work with data in a real project (travel blog!)

[Music] welcome I hope you're doing all right today we're going to get started here in just a moment but uh let a couple people will come in still here but here's where we're going to be building out this well you can kind of see a splash screen here of it but we're going to be trying to build out this uh landing page all right there you go Branson I like that all right okay well I think we'll get started I see a couple people coming in here now so let's go ahead and get everything set up on my end and transition over there I am for some reason my face is extremely white right now all all right there we go some some Auto balance well we're going to build this uh landing page out and a lot of times what I do when I'm trying to just practice stuff for you know I I kind of just like to rep stuff over and over again so I'll go into the figma community and there's a lot of free stuff that you can look at and uh so I'll just find something like this and then I'll build it out so that's what I figur we do today I definitely have a time limit today and I am probably not going to get anywhere near done on this but so I'm going to do two things I'm going to say I'm going to do two things whether or not we do them I don't know uh the first thing is I'm going to try to move a little bit faster than I normally do on streams and the second thing is I'm going to use Tailwind so we'll just style it as we go but the um the focus today I want to focus in on is kind of getting data into a site and we're going to use a bunch of different methods in Astro because there's a bunch of different ways to work with data in Astro um if you're interested more in Astro I know a couple people have mentioned it but I do have a course that's out right now on Early Access it's maybe a third done if that um probably more like a quarter done of what it will finally be in its full version so you can join now for like a reduced price and kind of help me build it out and give me feedback along the way or if you want to wait that's fine too um but uh like I said this will be the cheapest I offer it right now so if you're interested in that I'm so bad at plugging my own stuff but it's at um learn A.D you can sign up for it here right now it's $50 and uh you're welcome to check that out if you have questions let me know but uh that's what we're going to be doing is building this out right here here and uh I figured let's just go ahead and get something up and running and like I said we're going to try to move a little bit faster than I normally do on stream but uh Astro hat yeah got to wear the Astro hat you know I actually have my own uh coding in public or let's see can I move hoodie on too so you know got to stay uh got to stay cozy when you're when you're cing you know enjoy yourself all right uh so let's go ahead and jump over this way and I'm just going to say uh PM PM crate uh let's see Astro at latest and we'll call this uh figma Community I do have the actual a link to this in the description and uh and so that way if you want to check it out yourself you can do that hey what's up well glad to have you join again all right let's start with an empty project yeah as hat that's what's up and uh let's not install dependencies yet strict sure that's fine all right and the reason is I'm going to install a couple other things so figure we might as well kind of do that all at the same time so let's do pnpx Astro add and I'm going to add tailin I don't I might add react just so I can show how to work with data and again my focus here is on the data as well welcome Elton hi from Argentina or Ola I've been working on Spanish so there you go um so by doing this what we're going to do is allow Astro to basically add both tailin and react to our project so we can use them um and it does all the setup for us and uh it's really nice to work with so that's what we're going with but now we have to wait for this to install so if you have any questions let me know if you want to talk about anything let me know cuz once this installs we're going to move maybe I promised to move quickly on streams before and it never really happens so don't get your hopes up I guess just waiting we probably are going to use Aster image so I probably should also install um sharp because I think if pmpm you still have to install that separately so I should have probably done that as well I know 24 of us are just watching dependencies install this is how you want to use your Friday do I make as templates I do not I'd love to but there's so many details you have to get right and then I would want to keep it super up to date that basically I would do that or do my channel and so there are a lot of really smart people who are doing oh it can't I can't install those yeah I forgot now we can add these um it needs Astro already installed in order to do that so now with Astro installed it will be able to find that config I should have remembered that um but yeah there's a lot of really smart people out there making really great Astro templates so yeah you broke Houston oh no it's not your fault I think so you have to install Astro first and then it can basically do like the adding because it actually uses some stuff in the Astro package at least I think so because that that's what happened to me the other day do I use yarn not honestly uh not really I use pmpm mostly just because I think it's a lot faster it's still not done all right let me just get this thing let me make sure it's actually installed and then we'll rryy this again another from Argentina nice welcome I'm slowly learning Spanish uh so I'm not going to attempt anything right now there we go okay so now it's installed we're going to try this again it's going to be awesome this time third time and then you'll see uh the beauty of the asro CI if you haven't seen it before unicorn character that is not as white as our normal characters oh well I'm glad to produce this bug report for you okay so see this is what I was saying how easy it is then you hit yes I should have just installed the dependencies like it prompted me to in the first place and then it will generate a config file it'll update everything I mean look at that I don't have to do anything and I'm ready okay uh I do also need I think I still need sharp um the way this is set up and I probably should have also added Astra icon because we probably use that as well so sharp is an image service that's used when we use the assets um which we're going to be using and with pmpm you have to install it separately at least you used to uh Astro or next I mean I'm not going to say next over Astro I I think there are use cases for next but to me the new default is Astro um it just doesn't make sense to like next is like let me add everything just in case I might possibly need it and asra's like let me add what I need when I need it and for me that's what I would much prefer hey thanks Diego I mean I think it's the framework of 2024 I think it's going to be a big year for Astra but you know what do I know so we'll see I mean it's such a small little corner of development too that you know it doesn't need to take over the entire world for it to be a big year for Astro but okay let me get this thing up and running and I'll be back with you let me switch this over just because I don't know exactly how this is gonna open stuff up and uh that way we're all set and ready to go together yes I trust these authors I is the author okay me get this here ah okay I think we are ready Dante welcome wow alien thanks for the uh the massive teaser there so much in the pipeline for 2024 those of you who don't know he I think you're on the core team right um but yeah as's at such a crazy Pace too um like honestly that's the reason I wanted to do a course is because I want to be able to keep it up to date and like add new stuff and with YouTube you can't ever update anything that was my initial um motivation was just like I want something that I can point to that's like generally keeping up to date and can add the new things as they come so that would be my plan but um yeah I think you do just pmpm Dante just with pmpm you need sharp installed as well hey nice convincing clients to let you use Astro I love that yep seeing hundreds and page speed I mean seriously hey thanks so much for the congrats on the course yeah it's been such a better response than I ever dreamt like I don't know what I expected but yeah hola welcome okay I promise to move quickly um what I'll just flip back and forth then that's fine all right so let's go ahead and get this thing up and running I'm just going to use the local server right here and let's see it's going to be a lot faster if I can log into figma let me let me do that sorry and then we'll move fast see I warned you ahead of time this probably it's going to open my browser and ask me to log in all this kind of stuff I don't want to have to worry about um making sure I'm not showing stuff so uh let's see here we are I told you I don't always move fast when I say I will but I'm sure I will at some point here once we actually get moving like I said I want to focus mostly on uh data in Astro so that's my intention here okay all right here we are um this isn't really showing yet but I'm sure it will show at some point here so unless aha here it is okay that way we can just download assets directly inside here and stuff so we'll get to that all right so like I said I want to focus on working with data and Astro today so let's go ahead and get this thing up and running with pmpm randev now we're officially going to get started and hopefully move a little faster migrating an xjs a site to Astro want to surprise this client nice yeah I think uh a lot of it too is like because you can just import react components directly you can even use use you know it obviously depends how you set up your project but to me it's it's a nice way to quickly convert to something because you're not having to like rewrite everything from scratch you can just use TSX components or whatever jsx components and render just the plain HTML if you want to it doesn't make any sense to use next for normal landing pages yeah totally yeah complex web applications next is great as not like next is a bad tool just use the right tool for the job and to me most of the stuff I'm personally doing is step static and I'll have like little kind of sprinkles of interactivity but if you're building full apps you know you can do full you know full stack apps in Astro but it just takes a little bit more knowhow and and work because it's not really set up for that as the starting point but I think that's what makes it so good okay so here we go we've got this I've been running over this way uh the way Astro works if you're not familiar with it all the routing is done here in this Pages directory first thing I'm going to do is come over here and we'll do a layout folder and that way we can have kind of a wrap out a wrapper I'll do Bas layout. Astro that's what I typically do I drop all this stuff in here and then right here we'll just have a slot like this where we'll drop all the rest of the content and then all I have to do is come inside here and do base layout see this thing not going to work for me just waiting on vs code Sol 30% of my life there we go okay and then anything I put inside here like if I have an H1 this say like High um then we can get this in here and now it will say hi over here and any other route I can basically wrap in the same thing I don't know that we're going to have other routes in this case but we'll call this the travelo travel site or something all right uh other things I might want to do since we're using Tailwind let's go ahead and just do like I don't know let's do Max with of 2,000 pixels and then put everything in the middle you can do whatever you want there but I think that's what I'll do um just to kind of do some basic stuff uh I think we've got some full bleed on all this but what I probably want to do I come over here container wow container there we go let's do padding like two pixels sorry two R this and then let's do Center of true this is how I typically set stuff up like this I'm not going to go like super all out in CSS I think today CU again I got to be a little bit more careful on my time let me make sure I can actually see my time my mic has a problem anybody else having problems with my mic oh so you're having problems too with the Astro files not loading automatically I figured it was an extension for me but I don't know I can't seem to figure it out it doesn't always happen it just happens like maybe a third of the time so I don't know okay so back over this [Music] way let's go ahead and get some of the stuff copied out so I've got this sequential pasteboard I used from an app called uh pastebot so let's grab these kind of one after the other and then we can add them later and this will be our first chance at looking at how to actually set up um stuff in Astro uh there's some static feedback on my mic oh man I do have a small heater on because it's kind of cold here so let me turn that off in case that's what's causing it but sorry for the trouble all right let me know if that improves the mic situation at all so all right um so let's go and work on this nav bar and because this will be at the same on every site uh or every page we should probably add it right here right so let me come inside here we'll do components now it's good okay so that was it all right I'm just trying to stay warm over here um so uh let's do nav bar. asro all right so we can do this in a couple different ways but the first way I want to work with data in Astro is let's just have an actual data folder so I'll have data and then I'll just call this like nav items. TS and what we'll do is just have it's fixed now okay that was it wow okay well if I just die of cold now and though we also know who to blame who was it that asked me to turn that off datasaurus it's you you're the one all right so let's come here and we'll have like nav con nav items equals and then let's make this an array of objects and what we're going to do is just add each of these as an item here see there uh jackets are think hey man I got a hoodie on and like full sweatpants I'm just saying it's a little cold try not to turn the whole heat on in my house uh hey you're welcome for all the videos [Laughter] I'm I'm really fine I'm just using all right uh so let's say the text will be destinations so for all these we're going to have uh like different properties right so destinations as well which again won't Point anywhere so actually let's just do this for all this um anything else I need to have I guess we could have different types of buttons too so like we've got the outline button or like the ghost style button um so we'll say like style or something like that and we'll call this ghost and then let's copy this down a few times so here now one of these I don't remember which one sign up had we'll call this like outline we can use this when we actually like style the button to to style in some capacity if we want to and then this is like a drop down as well so I don't know right now we're just going to leave it Alone um let's yeah just to see how Boolean work too let's do uh true all right so now that we've got this right here I'm going to go and Export this as the default um now items and the cool thing in Astro is when you when you grab this when you like use it in a file you'll actually be able to get all the type safety and stuff you'd expect let's do nav there we go again reload the window I don't know it is kind of annoying when it when it happens typo on destinations oh that's what that's what you get for trusting designers to type stuff correctly um says the guy who can't spell anything Navar come on man I don't know what's going on we'll import navbar that's a default import nav bar from I guess I don't have El least is set up here okay so I can pull this in over here and if I have an nav and say like hi should pull that in okay so now what I want to do is work with data for the first time here where we're going to import our nav items and there I get some model complete from our data nav items now if I come over here you're going to see that I actually get this whole thing typed right so some of these are undefined uh obviously some of these like this Dro down true Boolean over there works so now what I can do is come inside here and we've got a couple things if I open back up my my figma file wherever that's at I've also got this icon here so we've got this icon and then this whole section over this way so we'll kind of have two sections to the nav um so probably what I'll do is have like a container section in here because I've got that kind of scope to the center and then we'll have two sections we'll have the icon over here which I would think might be like a link so I'll probably Arya uh label this and say something like go home and then inside here is where we'll have the image so let's just do like image here which I'll do in a second uh then everything else will be in a UL probably and um so what I can do now is just Loop over each of those nav items nav items and automatically I get access to all these right so map like the video 30 viewers only two likes I think I've asked people to like videos like three times on my channel total so thanks for advocating for me um so these are all going to be links and they're all going to point to and look at this intelligence I get right a DOT and then I can just drop stuff in right so super easy to work with and this probably also needs to be inside of a link or not a link a list item like that all right there we go so you can see that comes in and then for the href I can just point to a.href and what else do I have uh like a style so here like there's a couple things we can do but we'll eventually set this up as a component probably but you can see how now we're just getting all the stuff coming in directly and this is happening because We're looping over this data we're pulling in so that's the kind of the first way I want to talk about working with data for me this makes sense for things like nav items or like just like raw raw data like this that you don't need like tons of type safety on you're going to use in one place you're not you know for me content collections is more for advanced stuff so hey Milton thanks all right um so let's see there's a couple things I want to do but let's go ahead and pull in this image first so let's see what kind of situation we got going on here can I pull in this whole thing okay we can pull this on SVG for sure let's put it inside um SRC assets and we're going to call this logo mark . SVG all right so it should have created this here uh you know what I actually want this inside of an icons folder since it's an SVG and we'll drop in here now by putting it inside the icons folder I can pull this in with uh the icon that I get from Astro icon I'll just name this logo Mark like that and then width I'll set it to like I don't know 125 or something that that won't be right but we'll need to pull this in as well and for some reason import here isn't working so we'll say import um icon from Astro icon and again I'm not really going to try to explain every single thing I'm doing here because I'm trying to move a little bit faster even though so far I've been not great at this Astro icon Astro icon I think what what's that thing called asra icon icon from Astro icon whoa you can now add it directly and I didn't know that so that must be a new thing cool I didn't know that learn something new every day okay so let's go do that then pmpm PMX Astro or add Astro icon although I already installed it so I'm not sure how this is going to work but I didn't know it was an official integration cool it has some changes I like I like it though that it's moving more official because I think it's such a a great little tool to work with but now we're waiting again on things to install Astro icon is not an official Astro package well it's made by by name more so sure okay rev and let's pull this in here can I not do wi this probably needs to be number maybe is that the problem yeah where we at over here there we go so I see it's pulling in there let's do like 200 so the benefit of this is it's not adjusting its height automatically what else do we got going on over here that's all we got okay that's fine um the benefit of working with Astro icon is what it's going to do is basically Minify your svgs and drop them directly into the source of your you know your actual HTML so you're not doing a separate fetch for these things um and again like I said it's minified you can do a lot of other cool things as well height is 1 M it's interesting that it's like setting a height for this what happens if I just don't do anything okay um asro icon is broken for you Astro CI doesn't work well seeing as I just figured out that it was different I'm not sure I can super help you so sorry all right so inside here we've got the logo Mark maybe I'll set a height here of like 35 or something see if we can get this bigger it's not actually man that's weird oh it's probably just the way it's grouped that's fine let's just let's just do something hacky then let's do like a scale 115 110 and there like a we'll just make it bigger like that Ah that's stupid let's not worry about it it's fine how it is okay so let's set this thing out and I think what I'll do is grab all this and do uh flex and then we'll do just five between and then let's also do the same thing here class Flex Gap two something like that and items Center think that's right so the reason this thing is giving me problems I think is the way I exported it from figa but I'm not going to worry about it right now uh other things I want to do let's do like padding uh y of two because we've already got this inside of a container maybe four or something like that what else do we want to do let's work I guess on this kind of whole button situation now so right now I'm just passing each of these into a link um I guess I also want to do a little bit here and then we'll work on that so we'll say on Focus we want outline to be transparent Focus visible we want a ring of four and sure uh eventually I'm going to want this yeah did I do that right oh there is no ring six there we go okay more plus all right uh that that works uh eventually what we're going to want to do is create our own little component here so let's go and do that now so I'm going to call this link. asro and then we'll basically extract all this and we can do a couple things here to make this a little bit easier to work with but let's pull in the HTML attributes man why am I not getting any autocomplete view Vox property yeah you're you're probably right hey Christina welcome [Music] um okay um let's back up here HTML attributes HTML something man nothing nothing no help at all Astro typescript [Music] script all right um honestly I'd want to set this whole thing up with like CVA or something but I'm already moving so much slower than I thought I would so um type props actually do we're going to extend the HTML attributes of a link tag and here we're going to have what else did I want the text which be a string um style what else do I have Style and what was the last one drop down true okay uh style is either ghost or what was the other one I had outline I think um and then I already forgot the drop down is a Boolean okay so now what we're going to do is grab all these from our props so we'll have text I guess I also had an hre right but that should pull in automatically yeah um so what'll takes the text the style the drop down and the href and we'll pull these all from as. props uh let's see each time create new ASTRO File you reset the vs code that's the only way to fix it so far man two issues vs code a complete yeah I've never had problems until like the last three or four weeks how can you get this cool Astro hat I think it's in the store um all right so we've got all this stuff coming in now what I can do is pull on the text right here here I would pull in the href that I'm passing in and then because we know what type this is I can actually pull in anything else I might add to this so I'll just do rest like this and then pull this in here rest all right now let's actually use this over this way so I'm going to take this and substitute it for uh my link which now it's working which is great not sure why but uh let's close this off off like this all right and we'll say text equals this HRI equals that what else do I need to pass in here it's asking for a style right so here we'll say a do style and pass that in as well and [Music] then string is now to ghost out line oh I think it's just typed it wrong coming from here ghost outline ghost outline right all these are the same oh that's weird that it's not picking up on that well that's fine I guess we'll just change this to string and not worry about it okay so I think we got everything coming in here uh let's see drop down is missing so this would be a. drop down all right so now by having this kind of separate component here I guess we can also make this we should have made it undefined then we wouldn't have had to pass it in but all right so now we've got this all coming in and this is working so if I add something here like some gibberish you can see all them are using this component Now by this rest property what I can do is come in here and if I want to I can spread in anything else I might use in a link so for instance I could say an ID equals like higher H or whatever that is and I can come over here and you can see how they all have that same ID so I can spread it anything and because I've typed it it knows what it can have so like if I try to do like checked or something it's not going to let me do checked because that doesn't exist on the type of the the anchor link um see anybody else anything I don't think so okay uh all right so we're good there the other thing I wanted to do is the styling stuff so I don't know I probably shouldn't be doing this but at this point I'm already moving slow so whatever um let me just steal this here so let's install pmpm let's install this class variance Authority I think this is especially super helpful um I've already added this to my to my settings but I think it's especially super helpful when when you're using Tailwind because it gives you really defined options and I just really like working with it a drop down oh I didn't think about that that is kind of funny um so what it allows you to do here is set up different variants so you can pass all this stuff in and then when you're actually invoking the button you get super defined styles of like exactly how each thing is going to look so let me go ahead I guess and pull this up and we'll just steal this from Astro uh like the Astro example here if it will if it will get started but that way we can have super defined styles that we can then tweak and work with um this is how things like um Shaden UI Works uh they use this as well so anyhow let's close this thing down over here and while we're at it let's look at the SVG and log Market this view box it does have this but I think it's this weird group thing that's going on what happens if I just get rid of that and then let's come back over here and try to set this width to like 400 or something no let's leave it there though and see what else we could do so if I get rid of this Al together no it's probably the way that this grouping is set up but honestly at this point I'm not super concerned we're not like trying to make this Pixel Perfect I'm just trying to use this to talk about passing data working with data and Astro we're not going to get the whole site done and that wasn't really my intention today it doesn't even have a a mobile version anyhow so all right uh back over this way has this thing finished has Okay cool so let me editor steal this so you can see how it's actually using that same HTML type attributes we're going to pull this in here though and I'm just going to grab all this and we come back over here and we'll add it in here and have to obviously move stuff around but while we're working with data we might as well figure out how to like work with classes the way I would typically do it if I were setting up a full project so here what we're going to do is move all this stuff up top right here let's see do it below the props so what this is doing is it's basically saying hey we're going to add this class to everything so button will be added to everything in this case this isn't super helpful um because button doesn't do anything in ta one U but then here's what I want on my primary type here's what I want my secondary type I can have different sizes as well different you know I've got small and medium and then I can combine stuff so say like if it's primary and the size is medium also add this class so just really nice way of working with stuff and and kind of setting it out in uh in reactor or or Aster or any other kind of files I just think it's perfect for working with any kind of strings basically uh so let's see what we're going to do is take this and Export props here and then add inside of here this stuff I think I think I did that right definitely not um oh it's looking for this I think so this is going to be link and then we're going to do uh link here and we'll call this link as well I think I did all that right now this has obviously got problems but that's what you expect all that is fine okay so now I'm just going to grab this and we're going to add this here as well all right I think that's good and then we're going to call this link uh the intent and size so I can set defaults for these which they haven't done in this example um but if I come in here and is it right here defaults maybe it's outside here defaults default variant uh you can set defaults here and I think this has to be is an object so what we're going to do is set the intent we'll set this to be primary and then we'll set the size to be medium and now I've got defaults for all these that are being passed in here intent is not defined let me come back over here and just check this out since we're already moving slow let's just enjoy enjoy ourselves at this point okay so I'm I need to pull these in as well then which I will pull in right here okay so I think we're good here now there we go exactly what we want it to look like but now we can style these things as we'd like and in this case um I want this to be see we can leave this at primary but then we're going to create a ghost option and we're going to have options inside here and then we're going to have a uh what's the other thing outline right we'll have options in here as well and these sizes work just fine as well so what we could do is set this up as like a default start with so here are our default classes and the way this works is you could do like focus of outline none you could also do Focus visible or you have a ring four uh ring offset 2 so now all these have this default styling right but then they have different things depending on if they're primary or secondary or whatever uh let's see what else we got all right so this is how I'd set up like a more robust component and everything is typed properly you've got all these options and on the front end if I come back over this way uh probably what I'm going to do is just set the intent here intent to the style and let's see let's come back over here and kind of remove this where's my typing up here so that way we don't need to have a style okay I think that's right string is not assign with primary or ghost deal with it all right it's can I do it like this primary or ghost just tell it that's what it is yeah okay all right so now what I'm doing is basically passing in all this stuff I got all the type safety on the front end let's actually style this thing out the way we want them so since these are mostly all ghost buttons um what I want is that if I probably how do I want to set this up yeah so let's uh let's have like a hover State and I probably need to pull in some colors at some point from this file since we haven't done that at all yet you were warned that I I never move quickly even if I say well let's do pick this here Ste this color let me come over to my Tailwind config file and let's add some colors colors yeah and let's just do like a I don't know let's do like what do we call this travello let's just call T accent how about that t accent CVA is very useful you don't have the patience to set up yeah I mean honestly what I do is I set these components up once on a project that I actually like and then I just copy and paste it over like I'm not setting this up every time from scratch T accent but once you use it it's really hard to not use it but like for things like buttons or links or like a lot of the kind of core UI components if you just abstract all those out into their own little components it's it makes a lot of sense but not for everyone that's fine too all right um what am I doing wrong here am I forgetting how to set up tail one colors where we at oh it's an object okay I think that's good um so what I can do is use this T accent which I guess is what we're going to call everything now um let's just do it like that um as our where's my link as our background here so now if I come over here and I hover I should get that color cool um let's also what else do we want to do for this ghost option I guess if I focus on it too I probably want the same thing so Focus background uh T accent as well so that should work there as well I don't know I'm fine with that obviously you can do more stuff than just what we're doing here but let's do an outline uh two on the one that needs it which is the login I think border two I mean there we go uh border let's go Ahad and pull in some more colors I guess while we're at it so we've got this color uh let's see we've got this color just so we've got some more options is this the same nope not the same this is something okay uh already got that one not really they've got two that are almost identical okay that one's the same so we'll call that good there um well I guess let's set these up in our tail one first um it's not that you don't move quickly it's just that you got tangents yeah I know it's like uh rabbit uh CVA from shadz and want to create variance for UI elements I just create an object and Define the variance there um yeah it's it's fine like I think that works for a lot of things I think for me just after you use something like CVA that's more of a robust Library man what's up with this uh Auto balance of the color um once you use something like CVA it's hard to it's hard to go back to just like objects but so for simple projects Honestly though like yeah why why over complicate it so for instance if you were like do a landing page quickly on a live stream maybe don't do it then just like a small heads up all right so what we're going to do is add this we're going to call this T like uh text or something like that I don't know what each of these things are going to be so let's just all right so we'll call this T maybe this should be like this should be the accent in this be like muted or something like that um I'm not sure why I'm calling this all T whatever let's do this and what else do we have sure all right all right we're just going to call this yellow and we're going to call this red and we're going to call this accent for no particular reason and then we'll call this muted and we're going to call that a day feel good about that there we go okay so let's come back over here get rid of that uh where's my link all right so here what we're going to do is an outline of T text for some reason there we go and then here let's take these and these will both be T we did decide to call those axent I think right yeah okay although now I kind of want to make them something else uh but I think we're going to leave alone uh other thing is we've got the potential of that little drop down menu right here so honestly what I'd probably do if I were since we're already building this component out a little bit more robustly is I probably would not pass in the text because what I want to do is have a lot of flexibility so let's let's get rid of that and let's get rid of this as an option and then instead of having like everything hardcoded in here I'm just going to have a slot and we can drop in whatever we want um including the icon and we can do that in the front end so I think that's what we do so now what we can do is come over here to the nav bar and make this get rid of this and instead of making the self closing nope for whatever reason whenever I name a component link it doesn't allow me to do the autoc close of the tag I'm not sure why so if it works it works yeah I know um a. text right here and then we can add this in see there we go and again we're just doing desktop here but that should work uh let's also do the size here and let's just change this to small that way we don't have quite as yeah I think that'll work all right now what I can do is do a little optional chain optional thing here where if I have an A do drop down which means I probably also didn't need to pass this in do I have this coming in here get out of here so I don't really need anything that that extends now so uh let's see let's say if there's an a do dropdown then I can add a little SVG Arrow or something so let's see how do I want to do this let's go ahead and just do icon and already got this in here okay or arrow down something like that let's just do Arrow see what it pulls up carrot Arrow H let's search all them so this is uh a plugin in raycast for iconify and that's what Astro icon uses so you can just pull any of these things in sure let's use this um let's copy the name and drop this in as name equals that ah wow did I did this thing really change that dramatically as icon local icon sets iconify get started um where can you pull in oh you have to install them separately now let's see after identifying icons set you would like to use you have to install it oh okay well that's not cool I don't want to do that well that's fine we'll figure out another way so let's come over here and let's come into the icons I'll just say like carrot down.svg and then inside here uh carrot let's grab the same one we're going to paste the S here and we'll name this carrot down uh down what did I call that down and now what carrot down to SVG carrot what what am I doing wrong carrot carrot right let's just restart this B Lucid Tabler lucid's awesome Yep is also an AST dos rast extension there is oh yeah yeah I thought you meant as for Icon rast extension I always I just always forget to pull it up um well actually the reason I don't do it on stream is because it opens it up an arc and I'm not using Arc right now so okay there we go so I think that's working now yeah there's little asra icon all right not sure why I had to restart that morning see if I missed anything else uh hey Marty happy birthday I'm glad you like the Astra videos hey welcome icons car I think really this is working now so um all right so the other thing we'll do here is since these could always include multiple things what I'm going to do is come over here and on the default options we have here let's just go ahead and flex this and they will do like gap of two or something items center it's way too big there we go so whether or not I have two things in or not it doesn't really matter it's they're in little Flex children container things here all right that's all that way those are all this way so that's how i' set up a more robust component and work with all this data coming in so I didn't quite mean to get in all that but to Dante's point we do rabbit Trails so what is Astro Astro is a web framework um that is that joy to work with but I've got a 20-minute cash crash course and that'll answer it better than what I can do here briefly download the SVG yeah yeah we got to download it we're good all right so let's actually move to another section where we can look at other data so I'm going to move down here um we've looked at pulling in data we've looked at passing that data to props setting up a more robust component uh I don't really care about any of this stuff um let's see maybe let's come we've got kind of two sections here we've got this right here which may or may not have an Easter egg in it um and then we've got this section right here as well so maybe let's start here and what I'll do is we've we've looked up importing stuff man what's up with autofocus here okay Auto balance um we've looked at importing stuff from like a Json file maybe now let's or I guess it was a typescript file but same thing um there's a couple other options we have here maybe we should set up a little server and pull these things in just to see how that works uh so maybe let's do that yeah you can use uh react actually in Astra if you want but I won't go over kind of the basics of asra since I was trying to move fast and keep getting distracted but hopefully that tutorial that quick 20-minute overview will will be help but I don't know I think it's to me it should be the default for for basic sites for pretty much everything um e-commerce to certainly to blogs or landing pages or things like that it's just it's basically writing HTML CSS in JavaScript is what it feels like uh you like dis like making nav bars and Footers yeah we just need a like a an AI to do it for us you know all right so let's do that section down there we'll call this like I just want to do these three things right here so maybe let's download these first assets um since this was giving us trouble before let's go ahead and just add these as pmgs and here we'll do assets or SRC assets we'll call this uh destination destination icon do PNG and let me copy this over so I don't have to redo that each time grab the same thing here PNG I thought I copied it uh ASC assets we're going to call this payment icon uh what else do we have this thing right here yep uh let's see SRC assets we'll call this uh airport or something all right so now that we got all those in there let's let's pull this like use a little Dev server perhaps so let's see how do we want to do this let me create a db. Json file and we're going to use something called Json DB something server there we go Json server they like okay here we go so you can you can create things like this and then just create a little watch command that will then spin up a Dev server uh at whatever Port you want and so we'll use this to pull in data as if we're pulling it in from some kind of database uh or like hitting an API endpoint or something like that we'll use this later for another thing if I can remember um just trying to kind of think through different ways to pull on data in Astro and that's kind of the point of this stream it's not really to build out the landing page as a whole cuz I've done that lots of times now uh so we're going to call this uh like uh trip steps or something random and then for each of these I guess what we're going to do is how do I want to do this yeah let's just copy these things over not going to let me copy the whole thing okay come on there we go no get back here pull this whole thing in okay so title that's fine we'll just add this there we'll do description and add that in there as well and I guess also this uh do you use Astro for for po portfolio definitely random figma design uh no it's just a random one I found on on the community yep uh anything else I had there I don't think so so let's do the same thing it'll actually create IDs for you like you can do like endpoints like hit end points like a post endpoint and it'll create all this stuff for you as well but in this case since we're just manually doing this I'm just going to type it out payment we do the description is make payment I'm not sure what I what happened there huh okay weird so we'll say make payment if I can type copy all that in uh let's copy down one more time and again just kind of mimicking what we might get back back from an API and then we'll fetch this in Astro and kind of work with another way to work with data and we'll paste that down okay uh video reviewing Astros sites by newbies please I don't know if people really want me to do that but if there's a a huge outcry where everyone's dying for me to review their Asos sites I'm happy to do that I have done reviews of sites before mostly on like accessibility and stuff like that but it's not a bad idea I'd have to see all the source code though so I'd have to make it public and I'd probably look mostly at the source code and not really at the finished product but if they're cool with that I'm willing to consider it all right so now that we got this up and running let's go ahead and create another little section in here and because I've already installed this globally on my machine um let's see I forget how they tell you to do it yeah like right here then I can just do this DB Json server watch DB whatever and it will spin up an actual end point so Local Host 3000 and I'll just go here I think that's what it uses and then we can interact with that in the front end there we go so it'll actually hit me give me this and then I can go to trip steps and I get all this right here so this will be our little endpoint that we hit all right so now we'll get a second way of working with data in Astro which would be like interacting with some kind of API or database or something like that and let's go ahead and create another section in here I guess let's just have this be we're just going to do this I don't know if we're going to do these icons I guess I probably should huh um because You' probably getting these images from the actual server as well so maybe Let's ignore these and just forget that I just downloaded all those uh so we'll call the steps or something like that steps. asro right and then what we're going to do is just Loop through a bunch of these things so it'll probably be a is how I would do it and I don't know that I would do that I don't know let's not worry about it let's just throw a div in here and then what I'm going to do is grab all that data there so what I can do is I have top level of weight here so I can just grab like uh the data or the steps or something like that um yeah we'll just call the steps and then we'll just await Fetch and then what we're going to do is just fetch this endpoint that we have right so let's go ahead and and console log this and I'm going to come back over here and then let's actually get this somewhere so let's pull this in as steps all right and then I'll come back to my steps file and you can see I'm getting this whole console log read out from console ninja so you can see I'm getting this back and it's actually giving me a status um what I get back I actually get the body text back as well so let's go ahead and come in here uh we'll say oh wait uh steps Json this should be probably called steps this should be called re re there we go and now if I conso L this although I guess we could just look through it as well you can see I'm actually getting back the data just like I would from some kind of API endpoint and it is an API endpoint just a little fake one um you're down for you to review your as portfolio code is in public okay cool I'll uh yeah I'll see if I maybe I'll put a post together today and see if people want me to do that I don't that I have a ton to say but I'm happy to like review what people have done and say like I would do it differently but that doesn't necessarily mean I'm doing it better but I'm happy to do that so now what we can do is just take these steps right and loop over each step and it's like jsx style if you're used to doing that so like a friend said earlier it's it's like react the nice thing you don't have to have like IDs and all this kind of stuff because it's not Dynamic you're just rendering static HTML at the end of the day you can use react of course if you want to in in Astro we installed it I'm not sure if we're actually going to get around to using it or not um but we'll just take each step here and I'm going to return um probably just a div for now yeah uh this will have this would probably be some kind of title but in this case we can just do s do and I don't have any intelligence here yet so maybe what I should do is let's go ahead and come over here and to grab all of this and grab this and we'll just call this something like uh steps um this is a nice little extension that I use in recast that will just Define these things for you like this um let's see there we go so I can quickly grab an interface from any kind of Json and or you could set this up as a type if you want to which is what I usually do but now I can actually get intellisense in here off of these because I've typed them here as the type of steps so uh let's close this one off uh and then inside here now I can say s dot and I get access to those right so title copy this down description and these should be pulling in here so there you go like I said there's a small Easter egg here for anybody who cares to find it all right and we could style this a little bit more but again because we're focusing on data and that's what the point of the stream was supposed to be maybe let's just leave it there cuz what I'm saying is that you can pull in any endpoint like this just fetch it top level um type it and then Loop through it however you want to so we'll call that one good let's see what else do I want to do let's do um this one next now we could do content collections for this um I don't know that I want to set the whole thing up like make it reactive and interactive and stuff like that but maybe we could yeah so let's do this let's have this content Collections and then here we're going to actually use another way of working with data where we'll set up our own Dynamic um endpoint and we'll probably use react for this so let's do that so this will be content collections um so I got this Rando here let's pull this in here and we're going to go SRC assets head shot headshot PNG all right so let's set up content collections this will be the third way we'll talk about see if it'll look at me there we go um destinations yeah I know I still haven't fixed that somebody told me maybe it was you comrade um actually I don't think you were here let's let's fix it I did copy it from the design destinations there we go it's fixed we're all good now I'm feeling great all right uh where we at steps all right so let's go a and set up a Third Way working with data in Astro and again that's kind of the point of this stream and that would be content collections oops so we're going to have a Content not contents folder content colle collections is a way of having type safe markdown um or type safe data a static data so when you're building with local data and you want to have type safety with it and it checks it for you it's super super great as far as just like an API to work with uh is having content collections better for simple informative site or does content.js suit better it depends what you want honestly for me content collections you set up once it's not a big deal especially once you set them up a lot and like the benefit far out ways anything and then if it scales you've already got you know it's set up for you so uh hate when designers throwing sliders that no one uses in the end yeah the amount of weird designs I've gotten that I'm like well this would look great in a magazine but you know that I'm designing for the web and I have to make like a thousand decisions about how this looks at every little size but that's okay um that's why I design my own crappy sites and then I get to be angry at myself so we're going to have a con uh config.sys uh from Astro assets no uh content I think um what we're going to do is Define collections which are basically groupings of similar markdown or MDX files if it's a content type or of yl or Json files if it's a uh a data type so we'll look at that in a second if that doesn't make sense uh so we'll I think this is just export default let me check I don't remember [Music] um collections don't ever memorize something that you can easily copy over intentionally and it'll eventually happen but let's just copy all this and that way I don't have to type all this out all right so what we're going to do is import these utilities that we need we're also going to use Zod which comes as like a a way to as your type checker basically then you're going to Define all your collections right here and then you're going to export them down this way now we we're not going to have a Blog collection in fact I'll just name it the same thing so we're going to call this testimonials testimonials again this is probably something you would not have as a default or is like a local file this would probably be something you're pulling more from an API but again I'm just trying to show different ways of working with data and Astro then what we can do inside here is first of all set up a type so this can be either type of data or type of content and this case we're going to have a little bit of content but it's mostly going to be data the idea of content is like a blog post or some kind of long form thing um where you're rending like multiple paragraphs or something like that in this case we're just going to have single paragraphs right so the most we're going to have is this right that'll be our biggest content and then we've got images here as well so let's see I've got Christina raindrop is the name of this person from EB Spain we're going to pull this in and then we've got this image here as well um so I've got four things basically right so now what we can do is set up a schema the schema defines what this collection needs to look like by setting it as a data type I'm going to use a yaml or Json file and it won't have a lot of the other properties available to it or like methods available to it if you're working with data where you have to render markdown and like render headers and headings and stuff like that so uh inside here we're going to have an object and this Zod library is just a validator so we're saying hey here's an object of everything that I need in the front matter of each of these files and the first thing we're going to have is a name oops I don't need to add Christina Ranger up at this point I can just say z. string and if you want you can add things like a max length so I can say like the the longest this can be is I don't know like 25 characters and if they do anything longer than that I can say name can't be longer than 25 characters sure uh interesting getting feedback on as your site definitely join the Discord hey that's a great idea yeah there's tons of people who post all the time in the Showcase Channel and then people interact a ton and that would be way better than me reviewing your site because people in there are work on Astro are the ones interacting with people and honestly some of the stuff in there is insane like yeah do location I mean I I might still do one just for fun but that's a great idea I should have thought of that uh and then we'll have uh like testimony or something and this will also be a z. string this case I'll probably also have a Max on here of like I don't know 160 character or something like that and we'll do the same thing where we copy this down and we'll say testimony can't be longer than 25 characters so you set up this little tiny schema here and we'll also have an image which I'll show you how to pull in in a second and then what you can do is Define a collection that has the same name as whatever this is so testimonials so we'll do testimonials testimonials dot in this case uh I want it to be what was it Christina raindrop I think who comes up with these names right um do yaml all right this will be yl file so we'll have a name here Christina um R drop and then we'll have a location and this will be that EV Spain and then finally a testimony right that'll be all that stuff all right uh so we've got this in here now this config is basically going to match that perfectly so if I were to use this in a component so let's go ahead and create this I'll just call this testimonial testimonials sure testimonial that Astro all right and then what I can do is pull this in and for now let's just Loop through this data so let's just have oh we don't even need a wrapper we're going to pull this data in and we'll just obviously be using that single testimony right now so we'll say const uh testimonies equals await and there's a method we have called get collection from Astro and you can see I get intellisense automatically it knows what I have I have this and then it knows exactly how to define all this now I might need to restart the dev server here ah I killed the wrong server um and that's because when you create a Content collection it actually types it all and adds that all to like a Astro folder and that way you get all the intelligence you'd expect here and then eventually this will not be unknown it will be whatever the type is that I Define my config when it wants to get back up and running it's thinking about it all right and then what we're going to do is take the testimonials testimonies. map each testimony and then we're going to Output some HTML right so for instance I could have like the name and this could be T dot let's wait on this as it thinks about itself come on uh let's see the link to the the Astro Discord if that's what you're asking for if you come inside here I don't know why this thing is taking so long oh let's restart this let's see it's somewhere here right here so just go to the astrod doxs and click on this and join the Discord which honestly is like the best community I've ever been a part of too so there's also that all right so now we should have int yeah so see how this knows exactly what's in here and it's giving me a couple things because this is a data type you've got an ID which is essentially the name of the file without the extension The Collection it's in which I already know because I typed that there right um and then the data available to me so now I can come in here and just simply grab t. data. whatever now since I know I'm only going to ever want the data I should be able to just grab this here right so if I wrap this like this I think I can just destructure this immediately and then I don't have to do data do whatever I can just do um name data dot yeah data. name like that so if we come back over here we actually need to pull this in somewhere right so let's do index and this is what testimonies testimonial all right so there we go Christina raindrop is pulling in there maybe let's um let's do like a grid Gap 12 or something big just to separate these things out and we'll also throw this inside of a container there we go um see let's close that down close that down all right so now we've got all this stuff types safe too as well now especially if you're working with like Blog blog articles or honestly any kind of data where you need to make sure all the stuff is validated that it actually is the right thing you expect it's super helpful to use these Astro content collections because for instance if I came in here remember we had some limitations on this if I added a bunch of stuff like this so it should be way longer than 165 characters and I go to save it you'll see I get this really really helpful error message so look at what's here I get the exact error message I passed in here it can't be longer than even though I had the wrong thing 25 characters I think it's 165 but then on top of that it actually points you to the right file and even highlights the actual row right here and then I can just click here and opens it directly my editor here it's telling me it's on um you know line three as well and now we're going to wait on my computer there we go so really really helpful to work with content collections because you know all the data you're getting is actually type safe even though you're writing in markdown or yaml or Json or whatever so to me like this is the hands down best feature of Astro um so I don't know how controversial that is but I just think it's so helpful when you're working with data so whether it's stuff like this or whether it's full blog posts like you always know that what you're getting is what you're getting so before I would have sites that I was like pulling in a bunch of tags and displaying those tags and linking to pages that showed everything with that tag well the problem is if you have a tag that's spelled just slightly differently one's capitalized and one's not like let's say you had raindrop as a tag one of them's capitalized one's not well now you're kind of stuck right because you've got two different links one pointing to a capitalized rrop tag and one pointing to a non-c capitalized and how in the world are you going to catch that and like I had so many stupid errors like that where I just mistyped something or like I misspelled an author's name somewhere well you can actually Define it has to be these seven authors spelled exactly like this and then all your data always matches and you don't ever have to wonder about it so all right now with that said uh let's come back over here and I want to add one more thing so right now we've got this Z object what I want to do is instead of just returning it I want to actually have a function in here where we get a little helper called image and then we return the z. object because now what I can do is had have a head shot head shot like this and I can actually use that helper image that we've pass down and it will actually verify that there's an image so here it's saying hey this is required you have to have this so what I can do is come over here and I guess I added this over here let's come over this way and let's move it in here the only other thing you can have inside of these folders let's do Christina rinder up here as well um is you can actually have images inside these folders and then relatively reference them so you could leave this in the assets directory but then you'd have to relatively reference it all the way up so in this case what I'm going to do is have a head shot headshot like this and then we'll have Christina raindrop PNG sorry this needs to be relative path okay so now and again isn't that nice like I I obviously made an error but I don't care like it just tells me right and then I can come over here and we can do a few things if we just use a normal image tag then our SRC here we'd pull in data. headshot and then I actually have an SRC property on here and notice it just drops it in here and it's verifying this is an actual image file now you can do a lot more type safety with content collections or with with this Zod Library so I could like refine this and I could say it has to be like greater than you know 300 pixels and less than whatever like so you can actually give it a ton of super specific details of how you want this to be I could also say that this is optional by tagging this optional tag on the end and that tells Zod or Zod tells Astro hey they don't have to have this in their content collection so anyhow but now I get access to this the other thing I can do instead is use the actual image component that I get with Astro so let's import uh image from Astro assets like this and now what this will do is I'm not going to pass it the SRC I'll just pass it the entire thing but it will actually Minify it for me as well so in this case let's go ahead and say like data. name is the alt it requires an alt and now it's going to Minify this if I come over here you'll see that it's added all this stuff and if I pull up the network Tab and we look at the image it's 2.1 kilobytes and it's a web P now even though it was a PNG to start with and if I want to I can actually pass in a custom format so I can say like avif and now it's whatever 2.3 kilobytes it looks like WEP in this case happened to be a little bit better so um there's a lot of other things a lot of other things you can do here with the asro image but just want to show you how to use that inside of content collections because knowing how to pull in that function is a little uh that method the the the image helper right here is a little funky um because you're returning now after pulling in this little helper so any hopefully that makes sense kind of what we're what we're doing here let's uh let's pull on a couple other people and actually do I need to do anything else here I mean I think I need to not be distracted by the CSS because I was going to like try to build out some of these components but really I want to focus on data so let's focus on data now that I'm like an hour and a half into the stream finally doing what I said um but you do the same thing down here right and you can verify all these people uh looks like this is maybe just like a subtitle not a location but anyhow all right uh so we've looked at a couple ways to get data in uh for the nap bar here we looked at pulling in I guess I should actually look at it over here we looked at pulling in like local data files in this case it happened to be these nav items so this is just a typescript file that we're pulling in you could also do Json and it will actually type it for you as well when you pull that in so that would work um for these na nav items um we've looped through these right down this way we created this little component made a little bit more robust component than I probably done on stream before and probably should have done today but deal with it all right and then uh we looked here at pulling in from some kind of server endpoint so we've got this db. Json uh endpoint right here and if I come over here let's see uh where was that steps I think we actually fetched it and we've got top L weight in here typed it and then Loop through our data and finally we set up a single content collections that happen to be a data type um which gives us basically just the metadata and that's it and in this case it was just a profile pulled in this person's stuff actually use the image component as well fourth way I want to show you how to work with data in Astro uh I mean obviously you can come up here and do like const like high equals Cris or something and then you can just pull this in anywhere in this bracketed syntax and do high and it will show you that so I guess that's the fourth way I want to show you the fifth way I want to show you how to work with data and Astra though is to actually have a dynamic API endpoint so what we're going to do is come inside our Pages directory and uh let's have a like a contact form just say contact dot uh let's just do json. TS all right so now what we're going to do is have some Dynamic end points here so let me jump over here so I don't have to remember that's not the right place where we at not there either get out of here here we go um end points so what we're going to do is first of all just start with the static point and what we're doing here is creating basically like a an API route right so we'll have a local host 4321 and in this case we'll just go to contact. Json and when we hit this with a get request we get back this right here now this is this will be statically built every time I built the site so if I have Dynamic data so for instance if I want to import my content collection so I could say like testimonials equals uh await get collection and I could pass it my testimonials and then what I could do here is instead of stringifying that I could stringify the testimonials and now if I hit this I get all this now this is really helpful if for instance you are working like with react and you want to still use content collections well you can use content collections create a little endpoint and then you could just interact with that um live you know with your react component now obviously this is static the way we're building the site right now because we've set it up as the default which is static rendering um but you can make this dynamic as well and the benefit Dynamic is not only do you every time you hit this end point you get fresh like pull of all your data uh but the other thing you get is you can have post and put and delete and you know other methods available to you as well um so that's what we're going to do here in a second but that's all we're doing now typically what I like to do is I like to put these in an API folder like this and that way I kind of know that they're API endpoints so let's go and do that which means I also need to have this as API contact Json and that should still work now in this case we want to actually have Dynamic stuff so beyond just get requests we want to actually have like post requests as well that's so we can actually post content to it hey awesome I'm glad you enjoyed the content collections hey that's very kind yeah content collections are awesome and I think once you see the use case for them like I don't know like why you wouldn't use them and I it gets super frustrating working with data anywhere else even honestly like working with unless it's like super well typed API responses a lot of times stuff isn't exactly as you expect so full stack apps yeah it can for sure um and that's this is how you would do it you'd create all these little API endpoints and interact with those um and then you can have um react component as well react components as well which I'll show you here in a second but what we want to do is not just have get requests we want to actually have post requests and stuff like that so let me come down way here we go and you can actually type these as well there's a little helper you get called API route from Astro so um maybe let's just copy all this and drop it in here okay and then we'll pull this in here from Astro now we've got all these different things right so if I come over here and we hit the same endpoint I say this was a get if I make like a post request to this we'll see this is a post this is delete this is an all um whatever method I happen to pass in here I guess this is what we're doing um in this case though in order to have these other ones I need to use some kind of adapter some kind of SSR adapter um because I need this to be server side rendered if I if I'm going to actually be posting to it and stuff like that because by default Astro just builds static sites and so if you want to have some kind of dynamic inpo um you have to actually have an adapter so let's go a and do that again as to the rescue with his CLI we'll do PMX and some's pmpm Astro add um let's just do node I think that's what it is P pnpx Astro add node and this will add the node adapter obviously if you're using forel or netlify or whatever like you'd use whatever adapter you want and there's a lot available not everywhere so it kind of depends what your use case is and if your service supports it waiting on things to install for like the fifth time it's thinking about it resolving packages now it's going to update add this yes please install that so the CI does everything for you now it's saying hey can I add this to uh your config sure that's great and that will work just fine so let's get this up actually let me open up the Astro what is happening okay Astro config so right now it has this mode is Standalone um in this case what I want or and this output is server this means the entire site will be server side to render now the cool thing with Astro is you can use this thing called hybrid as well um well let's let me first explain this with server everything is static or server s side rendered unless you want a particular route and it's route based not component based or anything like that um to be statically rendered so I do like const what is it uh const export or export const pre-render that's it equals ah I guess there's auto complete for this now um so we could say pre-render too so I want this to be statically built ahead of time so let me show you what this will do pmpm run build so if you build this thing it will output a disc folder and what I've done is say hey I want everything oh it's going to type check everything hopefully I didn't mess up any types um actually coding in public yeah exactly that's the point of this channel trying to learn trying to like walk through what I'm learning at the time so I'm definitely not an expert like I Hest I you know I started about three years ago and for me just talking through what I'm learning maybe I'm just way too much of a verbal processor I guess my friends could tell you that but it helps me to talk through this so um all right so it's going to build all this stuff put it in a disc folder now notice oh this is cool this must be new you got client and server look at how nice this is all right um but here they're actually building all this stuff this client it's already pre-built this entire page right here right if I had another route which I don't actually have so I should probably do that let's have like an about route here and I don't have this pre-render tour since I have the entire site building server side render unless I tell it to to like pre-render a page now if I rebuild this and we look at this in a second uh what the guy dev's life does but focus on only Astro um whenever it's done thinking about things it's mad at something here oh it's not using that it's okay it'll be fine all right let's see if this thing is done yet okay it is so now if we come over here we should have this one pre-built page right at Astro at index whatever but if I come over here to the server you're you're going to notice that it has an entry over here and I don't know if I'm going to even be able to find this but basically here we go so it has an actual serers side route this function that will basically build the page dynamically as somebody shows up to the page so in this case if they come to the about route um it will actually build that dynamically same thing with this contact API endpoint it will build this dynamically as somebody hits this so because I'm using the server output hopefully that makes sense right here everything will be serers side rendered unless like on my index page I tell it pre-render this page and in that case it will pre-render it and put it in this index.html file and it's just pre-rendered it's you know static every single time somebody comes to this site so that's kind of the difference with this now the other thing you can do which is how I typically do it because most of my sites I want to be mostly static and then only pre or like server sh render individual routes is you can use something called hybrid mode now hybrid mode does the exact opposite all right so let's come back over here to the index right here and we're going to say set this to pre-render false now in other words everything will be static side or statically generated unless I set pre-render to false in which case now at this point I want this to be rendered on the server so let's rerun this and I'll show you the difference between the two and then we'll actually get to building out this with probably a react component all right so still waiting all right so now what it's going to do is this exact same thing it type checked everything I've got got some hints evidently 7 78 of them all right here we go so now look at this I got an about route statically generated right because I'm using the hybrid route same thing with this contact API endpoint now notice it all it has is a get endpoint it just got rid of all the rest of them but if I hit this I'll will get this message back right um now when it comes to the server now looking here under Pages I've got my index file right here so it'll actually generate the index page dynamically somebody comes to that homepage so that's the difference between the different rendering modes there's Al also other ones that Astra was working on um as well so like a static um incremental static regeneration I think I got that right pmpm randev let's get this thing back up and running but all that to say this is by Route is where you define this and I'm going to come back over here and all I want to do is on the config right here or this contact this is the route I want to be pre-rendered for FSE cuz I want this to be server site rendered the rest of my site will be statically rendered only this API route basically will be um rendered dynamically on the server if that makes sense ISR yeah which I'm super pumped about I just need to look into it um okay so uh that being said we've got all this stuff in here what I want to do is actually create in my db. Json file db. Json we're going to have like contacts or something like that and right now this is just be EMP but this is an endpoint I can actually hit now so if I come over here and we come to contacts now I've got this empty array but you know I could have multiple contacts in here but I can actually hit this with a post request or something like that and add data to this so let's come back over here close this stuff down steps snap R get out of here um all right let's just have do we want to like style this no I don't cuz remember we're trying to do a thing and not get distracted right Dante subscribe let's have your email share and subscribe all right the other cool thing is this will give us a chance to look at um react components as well so let's come over here I like a contact for. TSX scaffold this out R FC okay now if we're going to pull this in let's go ahead and come down to this index route right here contact what do I call this thing contact something contact form nothing okay I think and then this can just be contact form and I don't need TSX or anything like that come back over here contact form okay so it's being pulled in properly that's good all right now because this is a react component and I had to install the react package earlier um I did that at the beginning of the project so if I come over here you can see that it's installed react along with its types and everything else so if I come to the Astro config file you can see that I've got let's see react right here and this is one of the Integrations that I'm using so that being said uh we're data people today that's right um where is my contact form okay so let's go ahead and render out some stuff here and I can use any like libraries I want to in react uh in this in this component and it'll just render static HTML at the end of the day dat and I'll show you how to make it more Dynamic which we'll have to do uh here in a second so let's just go ahead and make this a form and I don't remember what offers is about subscribe to get the latest I guess let's maybe make this a div and then inside here um we'll have a paragraph that says that and then we'll have a forum and right now this will not do anything um and then we'll have I I guess this would have been an input I think um type if text that's fine placeholder we'll have that and then we'll also have uh a button that says subscribe which this already should be a type of submit if it's in a form but let's go and add it just to be clear okay got a stuff got our stuff let's maybe wrap this in a label as well and since we're wrapping it we don't have to do anything there a span here that says like your email or something and I guess we can just class last name Sr only to not show it but that should work okay so now we've got a basic form set up if I hit subscribe it tries to submit it let's have an on Sumit Handler then and first of all you're going to see this not work properly in a second but um handle submit const uh handle submit I'll take in the actual thing and E do prevent default just to show you that this will not work okay so now it should not let me move back here it should not actually submit this form right because I have this handle submit and it should be preventing the default but if I click here it actually submits it why well again because we're using this we're writing this in typescript um hey awesome it's a little slow at to start so just be prepared I start these things at 5:00 a.m. my time so it takes me to like 6 to wake up is this our only a tail one thing yeah it is um okay uh what was I talking about index okay so over here this is just rendering static HTML at the end of the day we're using react to build out the component but it just renders the static HTML at the end of the day if I want it to be dynamic I have to actually come in here and do client load or client visible or one of these different options call client idle so just to show you kind of what's Happening behind the scenes let's open this up if we look at the network and we look at everything all right we fetch this we get 29 requests but if I look through here I'm not going to have anything with react at least it's not loading react proper however if I come in here and do client let's start with client load which loads the react necessary to actually be interactive with the react component on page load and I reload now let's see I've got 36 requests including all the react right here right so it actually downloads the runtime for me now what I really like to use is this client visible which I think should be the default for you um if you're working with stuff so if I come in here right here you can see it's only loaded 31 requests but as soon as that component gets into view right here it loads all the react I need so it's actually using an intersection Observer behind the scenes to load that smartly so again AST like gives you just in time JavaScript rather than like everything you could ever want with JavaScript load it onto the client and we'll see what we use and what we don't use which is you know how a lot of things work so thankfully stuff's moving a little bit more server side and um just generally and I think it's better for client the clients but the the DX of Astro makes it worth it for a developer um because I can write and react and then I can just load the react when I need it and that's what we'll do now in this case if I come over here and I try to submit this get out of here right here you'll notice it's not oh let me show you here it's not actually submitting right because now I'm actually using the JavaScript that's loaded with react right all right so let's come back over here and now what we're gonna do uh let's go ahead and I can't remember how to type this uh let's see what am I doing is this right I got distracted sorry no what am I what am I trying to do here um it should be form this right here right maybe it's got a chance no I don't know how to type this thing I always forget throw an any on there all right somebody tell me I clearly don't write and react enough but now what we're going to do is grab the data so we'll do form data and we can use the um new form data and we're going to pass in the E do current Target this choose between strict and relaxed types script while creating as projects yeah I feel the same I'm not a typescript Dev really I just try to use it now because I know it'll force me to finally use it but honestly right now I just feel like it slows me down but one of these days I'm going to be like Matt poock or something you know where just it just flows out of me um so now what I'm going to do is get the data this will be from object. entries right from form data and we'll just console log this whenever we submit the data so like email email.com submit it oh why is this not working let me pull it up here usually it shows me okay here we go so I get a length of nothing oh it's because I have to have names on here so names here we'll have email and this should be a type of email as well and this should be in here um gotta be ready for anything all right submit there we go now I should get this data still nothing what what am I doing wrong here let's see what this is I should be getting the actual form this has a name email which should be what I'm getting back here what am I doing wrong this is just JavaScript this is not as at this point at email.com form data values let's just see if I can object entries object. from entries ah okay like I said very easy to to write JavaScript okay there we go now I'm actually getting my email back so what we can do is now that I'm getting that I can verify like I can actually I could use Zod for instance to validate um this as well um let me copy this over yeah that was working I don't know what I did before thanks uh always go strict it might take some time to get used to P up in the long term go with El yeah DX and auto complete yeah I think I usually do strict as well and then I just I honestly almost never use any's I just when I'm live streaming occasionally I do otherwise just wait beat my head I gets wall for 10 minutes and try to figure out what's going on um all right so now what we're going to do is hit that API endpoint right so I can just maybe we should install let's install another dependency while we're at it so we'll do pmpm add react hot toast there's also toasttify I think is another one PPM R Dev and let's look at the hot toast react hot toast I got about 10 minutes left that's what we're going to do and then we're going to call this good because I got other things to do today so let me drop this in here um get rid of this and then all I have to do is do toast. whatever so this should pull in toaster isn't there like a I have to import this somewhere right all right don't I I don't know let's come back over here maybe this is okay yeah here we go okay so let's pull this in up top and then what we can do is we got this oops this Dynamic endpoint right here right so this is our Dynamic endpoint this is our actual contacts and we're going to hook all that stuff stuff up and then we'll call it a day where am I at here we go okay so what I want to do is hit my my contact API endpoint right so let's open that back up and then basically we can show toast that's what I was going to show you but so if I hit this with the post route I've got this request and I should be able to get um see I should be able to get this email from request. body something all right let's see what we get um so what I'm going to do is const uh res equals I probably should do a try catch and here we're going to do cones equals 08 uh Fetch and we're going to hit the endpoint contact. Json right um now in this case we also have have to pass along a couple other things right we've got headers and see application what am I looking for status no body what am I trying to pass on here uh method so I don't need this at all let's just get rid of this I don't know if I have to pass along Json I can't remember or application type Json so this will be post um and what am I looking for here uh the body here will be my data that's what I'll pass along a wait uh a sync okay so let's see what happens we should be hitting this and hitting this email I think I did that right shety and CH I know they are I don't want to install all shety in and they I think they just redid them too um so we'll do email at email.com And subscribe not found oh it's cuz I did the wrong endpoint remember we had API in front of that Now API all right let's try again okay something happened a thing happened and it should be server side email undefined okay cool let's at least see if we can get back the body here we'll just call email for now okay I am getting this I'm just forgetting how how to work with a request um what do I have on here I just don't remember how this comes across I always there's some things like you remember and there's other things you don't remember for those of just joining we are talking about Astro I do have a learn Astro course out um right now this is in kind of the early stages it's about a third to a fourth done so you you're getting the cheapest price but you're also kind of trusting me to finish the thing uh which uh with the amount of distractions that I clearly have oh here we go that's we need see just copy everything and then you don't ever have to learn anything and then now I can just say uh body here and let's make sure this is working um but if you're interested in kind of following the process and learning along with me as I kind of develop this thing and giving me feedback this is the cheapest I will offer the course it's at least half off of kind of the full course price whatever that ends up being which I've got some ideas but I want to wait till I actually get it finalized obviously before I do too much all right so back over here uh we've got email let's subscribe okay what did I mess up again uh this needs to be a sync function now over here but it's at least hitting it properly okay so it doesn't like this what am I messing up uh why am I not a developer I mean I can't read what you're saying here like uh for some reason YouTube's like obscuring it with this little UI thing so I'm not sure what you're saying sorry uh let's see what did I steal over here um if this is this this is a post in point async request let's steal all this and drop this in here instead of figuring out what's going on here all right let's just do this all right and see if this works before I do too much else email email.com and let's subscribe aborted bad request what am I doing wrong here okay so I have to get content type application Json the way I've set this up that's fine I'll just copy this over probably should do that anyhow um headers content type that right like that maybe it's like this yeah okay email at email.com we're going to get this thing to work it's going to be awesome no all right so somehow this data is coming back differently than I'm expecting so let's first of all console like this because I think that might be our problem email at email.com okay so I'm getting this here this is an object I'm passing this along what am I doing wrong do you see this it should not be this I needed to maybe Json oh I think I need just Json stringify this thing the joys of development um data right this hey you're welcome let's come in here um I think we did all that right here we go we did a basic API route okay we can pack up for the day so now what we're going to do is in our contact over here now that we're getting this properly um now I'm going to actually post right so here I should probably do a try fetch but ain't nobody got time for that we're going to wait uh fetch uh contact form why why we do everything right let's just steal this and drop it in over here and in this case we're not going to hit this we're going to hit whatever this API route is right here here right and we're going to post this data and what it will do is actually create um it'll give us a response here as well so we'll do data equals res. Jon and then uh let's console.log this data just to kind of see what we're getting here okay over here it's going to be awesome so uh we're going to do email at email.com And subscribe oh no I messed up my data I call this the wrong thing oh I did cuz this needs to be my body okay goodness something happened okay let's check we added something so you see how you can have Dynamic API end points this is all this section was supposed to be to be um so now I'm actually getting something back and if I look at the server logs here get back name's not F oh here we go I get back all this stuff so assuming I get something back positive here wow got got a lot going on here um okay so here I'm getting back this pending promise um which means I need to await this and then let's see what we actually get so let's do it again all over again email something.com submit name is not the fine what oh it's because I'm trying to get this thing back email at something.com submit okay so now it actually posts to here right and it adds the ID for me and everything automatically let's see what we got back here so it actually sends back whatever it posted so it includes the ID at this point so now what I can do is this is our API endpoint right so we've gotten this back and I know that data exists so if data whoa not sure what happened there if data exists then I'm going to return this right and in this case I'll just stringify the data I got back otherwise um I'll throw a new error we need like a yeah we'll just say like problem okay problem so if for some reason there's an error that will happen now on the front end here and react I'm going to get back something right so let's uh let's just console. log the res and now let's tie this whole thing together so if I come back in here submit this I actually get back this response right and it includes like okay true all this kind of stuff right so I should probably do like if res res. okay if that's false then throw a new error just to catch anything error all right otherwise I can go ahead and grab the data and do stuff with it now in this case because I'm using react hot toast what we're going to do is pass this along to a promise toast. promise and uh this will be the promise we send it right and then let's see we've got like success or something how do I do this react hot toast aha official documentation uh toast I want a promise aha that's what I'm doing right my promise I don't think I have to wait this right I think I just hit it like that is that all right This and like that maybe sixcess all right let's just back out of this whole thing okay so we got this right this promise should be this fetch right here and then right here we're going to do this all right all right I think I did all that correctly now come back over this way we've got a static site right everything's static the whole thing's static but I've got this little react component this is island of interactivity um and we'll do email at email.com subscribe res isn't Define oh come on it's because I extracted this just get out of here just I just want something to go right the first time today oh at email email.com submit got the data okay that's all we're looking for now in this case because I know I'm going to get back data here um maybe I'd want to return it and say like I don't know like thanks for posting We got your email whatever but now I know that I'm getting something correct over here if for some reason I messed this up so let's say I came over here and instead of having contacts I did something else weird then if I come back over here this promise should fail right um and it doesn't perfect so this is all having exactly as we want um cuz this should fail so let's see what data we're getting back here right now we're just doing stuff email at email.com so if it doesn't fail then I must be um not accounting for this data okay so data is empty so maybe what I need to know is if the data. ID so let's see if data ah um yeah let's just do if data to ID now this is definitely going to work I'm so confident look at that there's a prob Bob see that's all we're going for we just want a little error to happen all right um I probably should handle that differently so I'm not just throwing this error and then uh like crashing the whole thing so anyhow you get the point you can interact with with Dynamic a API in points and we did this all with that serers side rendering so all right anyhow I hope that was helpful uh valid email Checker you forgot yeah you would want to set this up with some kind of uh email Checker or something all right well hopefully that was helpful we worked with data and Astro a bunch of different ways um did we get distracted yes Dante yes we did this is what live streams are all about so if you don't like it I'm sorry but hopefully this was helpful we worked with Astro in a bunch of different ways uh I will remind you that there I've got a Easter eggs in this project if you are just joining um and let me come over here and we'll just talk through briefly what we did so first of all we looked at this base layout we added this nav bar where we imported local data that was our first way of working with data in Astro and we outputed that down here right uh just like this and we have type safety and all this kind of stuff we even created a really robust link component for no particular reason not part of the stream today just block that like 45 minutes out of your head um next thing we did is we uh created these steps where we grabb this data from a like a fake API endpoint and then output it down here and you've got top level weight here in Astro next thing we did is this testimonials where we had content collections we set up all these content Collections and got type safety over this way with data that we can them output on the page with confidence and the final thing we did was whatever this monstrosity was where we created a re react component right we have an endpoint that we're hitting and we created a contact good Dante distractions are why you're here I like that we created this Dynamic API endpoint where we can do a get request or a post request or whatever and actually hit a route and then from there like interact with the server and all this is server side this whole thing this contact json. TS is all server side um and then we interact with that with it from our react component that we loaded the react on the page when we needed to hit that AP and point and posted stuff right and that's why we have all these email addresses that are definitely real so anyhow hopefully that was enjoyable for you working through all those different ways of working with data and Astro and we use this project kind of sort of loosely I don't know if I should have posted an actual image of it since we weren't really ever going to do much with it but um yeah hopefully that was enjoyable for you but I have other things I need to get to so uh I will run for the day if you're interested in learning more about Astro we do a lot of this kind of stuff in my learn Aster course that I've already mentioned a couple times and since I'm really bad at plugging this I'm really trying right now so there you go hopefully you enjoy that and uh you can check this out if you're interested there is a coupon code in the in the that was my Easter egg well one of my Easter eggs the public Easter egg so anyhow I will catch you next time thanks for watching uh may your coding be happy may your day be great

Channel: Coding in Public

Views: 4,235

Keywords: css, html, js, astro, astro ssg

Id: BZbNKyEf2Ro

Length: 121min 0sec (7260 seconds)

Published: Sat Dec 30 2023