Let's Build react.holiday with Astro

hey hey hey what's up uh we're gonna hang out for just a minute while we get uh people while people come in get situated and whatnot but you know i'm gonna post a tweet real quick see what we got what should we tell people we're doing what are we doing today see see we're going live it's more astro build today we're learning about pagination exploring i like better exploring pagination um what else are we doing uh pagination uh there were a couple other things that i put in notes i think uh what are they to do yeah so pagination um embeds and i think that's i think that's it pagination okay see okay cool doop doop doop doop good done all right hey how's everybody doing good to see you um glad you're here and um oops i just closed my my window with twitch on it so that'll be what's up hey stephanie good to see you how are you today glad you're here glad you're here i think it's just you and me right now but that's enough that is enough okay definitely don't want one password up on this screen um so ben what's up always a pleasure to see you even more than enough now we are more than enough now um okay so the big thing that i want to do today um so last time uh or yesterday we did just a bunch of stuff with astro um we got uh just a basic site set up and we worked with you know posts and kind of learned about the syntax and whatnot so um npm run dev i cleaned things up a little bit um just kind of like fix some links and kind of some basic boilerplate stuff let's open up edge here let's use edge again stuff in the other one trans-siberian orchestra nice yeah it it's that time we okay so you've started christmas music which feels early to me but i'm curious you know what's the what's the protocol in in in in your house what's uh what's what's holiday music protocol for us it was always you know the day you know you could listen to christmas music while you were cleaning up thanksgiving dinner but that was the earliest yeah so so that was for us john what's up good to see ya good to see you glad you're here um hey there our our malachus our amalgas i think i got it maybe uh nice almost almost help me help me out a little bit okay we're gonna do astro and it's gonna be awesome if i can get this in the right oh magnet sometimes with the multiple screens not helping me out okay um so what do we do localhost 3000 um what what are okay what are everyone's favorite uh christmas album so we have a trans-siberian orchestra and then what was the i saw another one a mad russians christmas um i'm a big fan of oh i can't remember his name right now um comedian does the the family family guy yes uh seth macfarlane seth mcfarland's christmas album holiday for swing is awesome it's one of my favorite ones it's so good it's so good um let's see what else uh i needed to be a little bit more jolly here to get me through the last workday last work day oh are you off like the rest of this week i can i can totally see that like just kind of reaching for some of that holiday magic to kind of like boost you up for the last last day or so oh c not not k at the end sound got it perfect our our mallet our malicious they do that oh okay so a mad russians christmas is a trans-siberian orchestra peace um okay got it got it michael buble okay nice nice you know michael blaze christmas album is pretty good i'm not personally a big fan of michael buble in general but the christmas album you know there's a little bit more grace for for a christmas album because it's kind of fun and you know kitschy and silly got a whole playlist of specific instrumental christmas music oh thank you for sharing that yes we need to hold on i'm i'm actually going to click on that get that get that in here like i was just talking about christmas music now you know i feel like christmas music is really interesting because i every year i will find unique christmas music you know maybe some like indie christmas music or whatnot that i really like and then i can never find it again because the repetition is so low um that it's like you know so like every year is just like a new discovery of christmas music for me um a lot of manheim steamroller that is that is the the the parents-in-law play for sure actually my parents were the same way it was like as soon as christmas had it was just mannheim steamroller on the on the just steamrolling my eardrums um oh yeah from omaha oh cool i didn't know that going to them for a fourth time oh that is awesome that is awesome i can't can't wait to hear uh how that how that goes oh stephanie i saw a tweet of yours about using float um what was it for i need to know curious minds need to know what we're using float for modern use of float i'm super excited to discover what this is oh yes good times [Laughter] okay okay uh we won't talk about float then um okay cool so uh what do we got here let's dive in let's dive in um so i left some notes for myself about what i wanted to try and accomplish today ah you moved it over to block that's that's fair that's fair um so in my next steps there were a handful of things that i wanted to do so so i wanted to fix the image reference and i have a url for that so let's copy this url and learn a little bit about assets um one of the things that i really liked about gatsby at least the blog setup was that you could put images right into the the directory and then link them with like a dot slash i think that's actually fairly unique um like to gatsby to have like a default setup like that so um a lot of them have you put them in you know like a public directory or whatnot honestly these days i um i more often than not use cloutnary um not paid to say that um but yeah i do and so um i really like cloudnary a lot uh but yeah in for this example i don't want to go through the hassle of putting this on cloudnary and then like linking out to it i just it just a screenshot um i kind of you know end up putting these in my emails and everything anyway i don't know maybe i could maybe using cloudnary and then linking them in emails would make more sense who knows am i not subscribed to you ben what okay wait oh i totally missed the thread subscribe to some antics oh your personal channel i don't think i am i yeah i need to be oh the youtube channel uh send me all your links send me send me literally all of your links and i will subscribe to all of them all of them without question that that's an open invitation those are those are rare for me um okay so we have uh we have images uh okay so we have remote markdown this was where is this i have this link but it doesn't seem to be right one oh okay i'm gonna refresh i think i just scrolled away from it images and video right here okay so place them in the public directory as explained in project structure page okay cool example image is located at public asset image astronaut so markdown would be astronaut assets okay cool cool so let's look at this uh so we have if we collab oh no i actually need that so i can grab the image easily public assets introducing astro okay so that's not in so this is assets blog okay so let's let's look at project structure real quick let's see what's a special directory and what what isn't for most users the majority of your files will live inside the source directory so that astro can properly handle and optimize them in your final build by contrast the public directory is the place for any files to live outside of the astro build process okay that's a little bit confusing why i wouldn't want my images in inside of the astro build processor build process i mean i guess if it doesn't do anything then i don't need it to be but um that is interesting okay so we just put it in public looks like we can put it anywhere in public um so i guess uh it's kind of odd that this is blog but then there's posts uh used down here that's a little bit of it's kind of like causing my brain to break a little bit um which is fine uh let's just do with the kind of the example that they have so we're gonna make a new folder and we're gonna call this oop lost my cursor there for a second what's happening so image so we'll just kind of do exactly what they have here i don't think it really matters because this is in blog and then social uh what is this yeah these are just right in the root so i don't think the structure matters except for the fact that maybe we want to separate them logically okay so we're going to move those so we have these here and then i guess i don't remember exactly which files those are in so let me find where they're referenced uh so we have button event handler button event okay so that's here and now we're gonna do what we uh what they're suggesting so we're gonna use our you know bang alt and then the path which will be okay so no prefix there just assets image and the name of the file so i'm going to get rid of this assets image and then keep that file name the same so which lesson is this this is lesson this is day six so go back over here we go to what 2017 this is the only content that actually published publicly the rest of it's in like you know youtube and email sequences and whatnot yes yeah yeah we'll don't need to replace okay cool so what do we have um okay so we got that got that uh broken image okay i don't see the image okay here it is and we're seeing that alt so something is not quite right here let's see what we did maybe i you know mishandled something if it's if it's obvious let me know or you can watch me suffer i know that's probably more entertaining than you know actually getting it right yeah i can never find like where the handles are for these things okay so image source so assets image buttonhandler.png technically that should be there which it is hmm curious okay okay okay okay so um this is actually really nice we're seeing the logs like what's being requested and so it looks like we have it's trying to hit 2017 assets image that's odd images located in public assets image okay and then they give us that like non this url so i think that this should have a slash in it i think let's try it out see what happens okay so that worked so that worked interesting so this feels like it is assuming that we're on the root path i guess when we're linking images like that um obviously there's an import syntax as well i guess i could use that but i'm not super interested in going that route see other assets so you can import those but yeah i don't know css modules json types okay so all kinds of stuff um that you may want to import okay so okay so that's interesting i guess so i guess if i um i've been trying to capture capture my lessons here so um day two so we need to put a prefix with a slash okay all right cool uh let's uh let's see let's fix uh some of the other ones um we got a couple more here so we have a key warning just three so let's just let's just do them um key warning okay cool perfect react unique key warning and so then this is going to be again assets image and then that stays the same this is in lesson day 15. so we can go right to 15. perfect and uh we see that cool no additional awesome awesome great great uh let's do that last one we have unmounted component warning so unmounted component warning right there this is day 24 see the broken image there so we'll just put our path assets image and there we go okay cool i love the fast refresh or you know like hot reloading or whatever it is that powers this i mean i guess um super cool we have some styling issues obviously um but that is something that i can just figure out on my own time i think that's probably not gonna drive us down a astro specific path so let's let's avoid that we have other things that we can do um okay cool so i'm going to say that images is done let's uh let's commit that so we've moved so we removed these into this directory and then we just updated those so images are great um so update image paths in 2017 posts um seems descriptive enough and we'll just add all that and uh push this up uh whatever okay cool so next thing on our notes what was the no no no to do i can never remember what i named my files even um [Music] okay do so we fixed images and then i wanted to hook into analytics now this is something that's like the most curious to me and we'll talk about this for a second so anytime i've used gatsby or next or any of those like front-end frameworks that actually like do a lot of like client-side javascripty stuff you have to hook in specifically to like you have to you can't just like put in a script tag for like embeds um this would include uh the like embeds for like my email list um and then also embeds for um analytics there's like you have to hook into like certain page events and and and whatnot so like if someone goes like you know back or fourth or you know whatever um that that aren't just like hitting like an actual like url like you know on the server that's one thing that's really nice about using 11d something i've really enjoyed about using 11d is that i can just grab all those embeds whether they come from you know what no matter what they do and like i don't have to worry about the client side runtime and whether or not it's going to show up if someone refreshes the page or like navigates away navigates back and i don't have to worry about like if the clicks get counted or whatever it's just it all works because they're all just pages statically rendered now i know mentally that like that's kind of that's the default state of what astro's supposed to be doing as well however in practice i don't know if that's actually going to work because i know that there's some kind of optimization if you're going to a page that you already loaded or whatnot so we'll see did somebody say 11t um yes yes yes yes um levity is great 11d is great honestly i would have just done this in 11d except for the fact that i wanted to play around with astro and i thought why the hell not um and then also i did think i did think it would be nice to kind of like if i build up examples to maybe just put those like just load those right in the browser i thought like the the path would be kind of cool maybe um i do know that you can do that with slinky as well um but again curiosity got the better of me i've seen so many people talking about astro i just i wanted to try it's a christmas gift to myself okay so um what i use for analytics is um fathom analytics um i am a big fan of what they're doing the script is like really uh it's very small they're really focused on like the user experience um sides of things so the script is really small and then it um you know what am i trying to say um you don't have to like it's all compliant with like gdpr so you don't have to do like a like a cookie request type of thing which is really nice as well um so yeah when i signed up or when i created a new page uh with them let's see if i can actually i think i need to go to a different browser real quick i think i'm already logged in on this one okay so when i um so i just set up you know an app for avo the other day and then today um let's see did i set this up oh yeah okay so react holiday um i have no existing data for this because i am just setting this up for the first time um i think i was using google google analytics for the previous or the existing version of this site um so when i set this up what can i do has all the details here they'll let me copy the script um during the initial setup though they gave me an option for like they have specific setup so like for next which is really complicated you have to hook into like the layout and whatnot but they have two setups one is for just kind of like just regular like html pages and then another one that has this like data spa auto attribute um for frameworks that they don't know about but i guess it hooks better into like the push state for the url that's the the story at least so i was gonna start with this one and see how it did um and then kind of go from there so i want to treat this as much as i can like a static site and then see where the the pain points are um so i copy that i'm gonna put this into my i think i have like a layout um maybe it's blog post let's go to the index page first because i think this is a full-on page yeah okay so we have a whole page here and then i think they recommend putting it in the head um i have kind of historically put them in the bottom of the body but i don't know i'll just follow their instructions okay so what do we got here if we go to our head i guess we don't need to validate that it loaded because that's um you know what it i'm sure that they they got that part of it right so let's look at the network tab see i think theoretically it makes a request for that script and then does some stuff um so let's look at javascript yeah this is the fathom analytics stuff okay cool so that's on our home page and then this is like a full layout it's not using layout so i have to do anything that i want on here which is probably not ideal but that's fine we can add we can extract layouts later and then let me see over here if we start to get any data okay so what we see is it says you're nearly there um i don't know if it's doing its thing multiple domains okay so it doesn't seem to be doesn't seem like we've gotten it yet okay so let's try this on some other pages uh okay so here we want to we have a blog layout i think let's look at both let's look at our posts see which layout we're importing it's the blog post astro in layouts which is a special directory if i remember correctly so we're going to go in here and then just paste this inside the head and see what happens okay 2017. any questions or concerns or thoughts about what we're doing so far or does it all seem uh relatively straightforward okay so we're getting a lot of javascript activity on this one not totally sure why oh gotcha that's because at the bottom of this um i'm importing a code sandbox yeah so this is all just embedded stuff but this did get requested there okay cool perfect interesting maybe i'm just reading this wrong um see you need to add a custom domain and then add the updated embed code to your website okay so i guess i need to add the custom domain um but i don't want to connect the domains yet hmm okay okay let's let's let's kill this okay we're gonna take react holiday we're gonna delete it because i think that this shouldn't be this complicated i've had it work before just on local without having to do stuff so um write that holiday i'm gonna remove this we're going to create a new react dot holiday okay and so then we have our embed code so we're going to go with other because ours isn't represented here and then uh please select an option for this is it an spa i'm going to say no for now because we know what to change in order to you know kind of add that so okay and then we're going to say verify site code okay so it's waiting for me to load data so i'm going to hit refresh on this okay ray your tracker is installed i really like this setup by the way okay so go to dashboard okay cool cool okay so i maybe i was just clicking on the wrong page maybe i was on the settings page instead okay cool so we know that we're getting 2017 one okay great um if i hit that again while i see yeah so we see more views okay great now what about react holiday so i put this on the homepage i thought so are we getting anything for the home page it might have been 20 it might have i might have put it in the layout for posts though because i did index.astro um okay so it's here and then i need to put it in posts as well again kind of a bummer that i don't have like a layout fully set up but not super important okay so now i want to see i want to see so that i want to see 2017 with no i want to see that represented as well um and then let's click on a couple other posts so we went to two one time we're gonna go to six another time uh we'll go to 2014 or for day 14 we'll go back and then i'm going to wait for that to refresh just because or maybe not i'll just hit refresh and then we'll go to day 14 again and then back to 2017 and then let's see what kind of activity we're tracking here okay cool so we saw 2017 so one two six and two views okay so this is tracking with my expectations so far except for the fact that we're not seeing it on the index pages um now that could just be like a weird a weird problem with this particular setup you know because these aren't using some kind of like layout i don't know if that got cached in a weird way or what but um we are not seeing those pages so let me try okay let's go to to do's oh that's because the codes are old now because that's right that's right that's right that's right the codes are out of date because i um blog post layouts astro what's the new code the new code because i changed in the middle so that actually makes a lot of sense so let's go back to the root page to do okay so now so this is the uh root page if we go to the root page um now we should start to see some traffic um for that so we get it yes okay cool we got root um now we want to go to 2017 and um get the same code index 2017 okay uh and then hit refresh there refresh on this side and cool we see our 2017. awesome um cool let me hit refresh a couple times more on 2017 three times more um and then we have so right now we have two views one viewer if i hit this i should see five okay cool that's working um let's go to hello so that's loading there and then we're gonna hit the back button oh nope that went back to the main site um sorry 2017 i guess maybe there's not a back button in the posts it's all right we can do the main site a couple times okay so we went back to the main url a couple times so this should increment by two and in addition to we should see at least i think at least two more on one so this should be like five and three three hey okay cool so this is totally matching my expectations so far um which is really great to see i didn't have to do any additional kind of magic to get this set up um we'll see kind of how long this like this holds um but so far it seems to work and i didn't have to do the single page stuff so that's really neat to see okay i'm gonna call that i'm gonna call that good okay so we're gonna add all this and say integrate um cool awesome awesome awesome um [Music] cool cool cool cool cool another cool thing that i really like about fathom analytics is you can um make all of these urls public so i think like chan dev i don't get a lot of traffic here but um made a short uh like a url for analytics so you can go there you can you know see what kind of like analytics what posts are you know popular you can see everything that i see um on on my site which is really neat and i think if you click the link then you know and then you become a customer then i i don't know i get something or something who knows um which is nice getting things is nice okay cool so that i'm gonna consider validated we didn't have to do anything fancy just as a recap we just used the regular html tag like everything's everything is good um applause for us we did good yeah okay cool um let's see we have i don't know we have like 20-ish minutes left i'm curious um if you're still here do you want to go pagination or um kind of cover the uh the embed codes for newsletters i i have a feeling that the embed code is just gonna be more of the same it's not gonna be all like different um so my leaning is to go to pagination um because that uh will probably the mo be the most divergent so um if you don't have any objections that's the direction that we're gonna go but if you um do have objections object now okay uh so this is our pagination article um and then oh yeah there's also rss you know if we can get both of these in that would be sweet it would be really really really close to um just calling it done save for a little bit of styling okay so um when to use pagination pagination is only useful when you need to generate multiple numbers of pages for a large data set that's not really us but we are in this next previous space so seeing this on the page gives me confidence that we're in the right um right right right place okay so how to use pagination uh create your page components okay so to automatically paginate some data you'll first need to create your page components okay pagination is built on top of dynamic page routing with a page number in the url represented as a dynamic route param so page with the brackets dot astro or that spread page dot astro if you aren't familiar with routing an astro quickly familiarize yourself with routing documentation before continuing that doesn't sound like something that i am prone to do [Laughter] i'd rather just fail until i have to come back to it with some hard learned lessons um okay calling the pagination function okay so once you have decided on a path okay so i'm gonna have to do that first so using page props okay i just want to get a sense of this document um once you've set up your page components and defined okay so again once you've done this you can do another thing um okay nested pagination i really really really really wish there was like a whole like okay so astro also automatically includes pagination metadata okay i should have just read the first paragraph look at that okay astro also automatically includes pagination metadata for previous and next page url total number of pages and more okay so okay the page prop includes other helpful metadata like url dot next okay let's see something real quick so if i go to 2017 1 and i just spit out page why redux when you hit your head against the wall for a few hours i that is that that's the question it's way more fun to just get hurt doing this stuff i think um okay so that did nothing i think i can interpolate values out from here but i don't know if i if because it's marked down if i need to do this in the um what's it called template layer so like i have a blog post here i wonder if i need to do it here so in the body page so i don't have anything okay page is not defined okay let's read more about page you ask why read the docs and suddenly my new role is called into question okay it's important that the docs be there for after the head banging happens i think i think uh the pagination page prop okay pagination will pass a page prop to every rendered page that represents a single page of data in the paginated collection this includes the data that you've paginated page data i feel like i feel inclined to call this pagination now because i always i'm one of those people who always like likes to not make two different words from the same root uh even though i think that would be a stupid way to i would not like hearing that word pronounced that way um as well as monitor for page page url page start page and okay so we have to set up pagination first i guess we add this at the lay i'm super confused right now not gonna lie okay paginate assumes a file name for page astro okay so this is a question that i have i'm just thinking through this right now so i'm wondering if this is kind of like if the natural fit for this is like if we were working with some kind of data and i'm wondering if the way that i'm thinking about it is more of that like 11d style of thinking about it where it's like we have like connect collections from the file system because so far the only place that we have okay i'm gonna delete this um so so far the only place we're getting this information is in um what is it there's the astro dot fetch content hope that's in my notes where are we using it in code okay so we have astro.fetch content all posts and then we're sorting them so this is the only place where we actually have as far as i know access to this data right now okay i think i see some some uh yeah doc's required bruce ducks required bruce foreheads for entry yep agreed i like that i like that um okay let's read some of this code and see um see if it clarifies anything i really thought this was going to be easier said that it at least i'm not catching it um okay so what's the api that we're using fetch content okay so fetch content is up here that's refreshed content is a load local markdown files into your static site setup okay turns an array of posts that lives in source pages posts okay cool cool okay so we use that path that glob or whatever they're called and then we link to all of these articles okay what do those links look like i've actually never i haven't explored this part of it so blog post post preview so oh okay so we're gonna go to uh blog post preview and see so this has a props interface um what does that link look like post url okay post title so all of this data is being populated from fetch content and then passed down i'm curious what else comes along with this and then also can we log it here like where do we log javascripty stuff okay cool so we are able to log it there that helps and then we have a bunch of posts that we can kind of look at so [Music] okay this looks like the top of the last one okay so what's the shape of this we have title data that looks like met these are these are from our uh front matter and then there's an astro object also in there so we have astro headers source html okay so we have the markdown source we have the html content i don't know what that is so we have uppercase content and then a lowercase content i don't know if that's like a component or a constructor or a class or something like that content headers source so the file we have a url interesting so the href fascinating so the href is the post url okay so okay so post url okay so here's the url we have this these are the like file paths that we have okay interesting okay cool so from this i kind of have a better sense of you know what's happening here which is helpful so we call and i'm just going to repeat it so i can kind of like internalize a little bit so we create this variable all posts from astro.fetch content and we give this glob of like md files which is looking through our 2017 posts and then it's creating an uh was it actually it looks like an object of all of these which is fascinating um i would have assumed an array so i don't know if maybe i'm just missing the you know i'm just looking at each individual post that's right okay that's right because i'm not logging out all posts i'm logging it on the post once i get a post okay cool yes so i'm just logging out a bunch of objects those objects have a bunch of like metadata on them that we can kind of inspect by like logging them out so here when i went to some when i'm on my post i'm logging that out which i can do inside of this front matter script block now what does it give us it doesn't give us a whole lot that we weren't already using here so you know front matter front matter url so post url is something that it's giving us in as part of i don't know as part of the system okay so that's interesting to know post url that's cool i'm curious i'm going to look at each post's astro headers i won't inspect anything that like i don't have like perfect visibility into okay so what do we have so we have um okay so this time i have for each post i'm getting an array with a depth a slug and text okay so this is the url slug presumably and then the text version of that i guess okay because these are the titles probably okay what do the content headers look like i think it was content maybe not it was yeah content headers i guess it's the same thing okay so that doesn't help me but i do kind of understand what's happening slightly a little bit more um okay so we see um now in this documentation again i could have just looked at the docs um only takes one parameter a relative url glove which uh local files you'd like to import um currently only md files are supported okay interesting to know it's asynchronous and returns an array of items okay so this is going to be from the front matter as we um explored there's going to be astro so an array of h1 through h6 elements in the markdown file oh that's interesting okay that's cool fascinating um so then the source the raw html and then the url which is the rendered path okay cool cool okay so there's a get static paths data passing with props okay we kind of already explored that pagination let's see what this one has to say about pagination now pagination is common use case for websites that astro natively supports via the paginate function paginate will automatically generate the array to return from get static paths that creates one url for every page of the paginated collection the page number will be passed as a param and the page data will be passed as the page prop okay pagination again assumes the this style page brand becomes the page number of the url okay okay okay all right let's go back to pagination this is blowing my blowing my mind right now um i'm feeling the opportunity to learn something right now okay so we have all these markdown files now these are being used it was it's easier for me to consider to think of these as resulting in a file on the file system and maybe that's right but maybe maybe it's not maybe it only ends up that way because of the way that i'm linking it so let's try something else okay so let's go oh my gosh we're already at almost one okay didn't nail this this part of it but we're gonna get take it as far as we can so let's follow the instructions um so create your page component okay so we're gonna do this um so first page url would be different depending on which type of query params you want to use so posts so they're going to be in pages let's maybe like try something different though so um this will be pages maybe i should read that routing doc that it told me to read and i didn't we're gonna do it right now okay so static routes okay so we have page index astro so that's gonna you know do that this is gonna be about um we can do an about index and that will also be available at about about me okay yep okay cool um that makes sense based on what i've seen in other systems um dynamic routes um file based routing just for dynamic routes okay yep important thing to keep in mind astro is a static site builder there's no astro server to run in production okay cool yep got it pages blog slug dot astro is going to go to blog slug so blog hello world blog post okay username astra or settings.astro is going to go to fred settings or drew settings okay yep and then we can also do these combinations so we can have like two query param or two parameters so a language and a version okay yep got it seems straightforward so far so process id or pid okay so rest parameters if we need more flexibility in our url routing you can use a rest parameter as a universal catch-all you do this by adding three dots inside your brackets for example page post or pages post slug dot astro so then we get a a b abc etc okay i don't care about rest parameters um so we don't need to worry about that um rest parameters okay cool job security remains okay so understand the routing i think largely got that would generate urls for post posts two posts three etc um that's interesting so maybe it includes the collection as well which would be really neat um so let's start this in more globally so what we're going to do is we'll make a new file new file this will be whatever dot astro okay whatever astro file [Music] it's gonna do that so then i guess we have to get data for this so once you've decided on the file name path for your page components we'll need to actually wait i need to put that inside of a directory i think or else we're going to have problems [Music] new folder we'll call this folder whatever and then we'll put this inside of this so move so whatever and then we have our kind of you know whatever collections or whatnot actually now that we have a whatever directory let's just do this to page i think that might make the examples a little bit a little bit more tolerable page okay cool so we have a page once you've decided on the file name path page you'll need to uh export a get static paths function from this component get static paths is where you tell astro what page to generate what pages to generate okay no problem uh provides the paginate function okay so um export async function get static paths let's copy this whole thing right now and put that in here no formatter for astro okay export sync function get setting paths load your data with fetch astro fetch content etc okay so we're gonna copy what we're doing in 2017 index to get these caught between tabs and spaces right now i just y'all like to fight about it i just use both all the time um okay so response so that's fetching from the pokemon api um okay don't oh i need to do this for my script tag yep there we go um okay then i should be able to comment that out with ease so return paginate we'll call this all posts this is going to go out a directory into 2017 and catch all of those markdown files all posts pagination size sure okay 10 uh return yeah i don't know let's go with 10 for now um if set up correctly the page prop now has everything that you need to render a single page cnec section okay so we have a page prop okay cool so we did that call and paginate function the page data will then be passed as a page prop to dot astro page component okay using the page prop okay so we have this we have this now we can do this just paste our little template in there okay the page prop has several useful properties but the most important is the page data this is an array containing the page pages slice of data that you pass to paginate function for example if you called paginate on an array of 150 pokemon slash one page data page prop includes other useful things like next in previous page total etc okay uh let's see what we have so far so we made a new path for whatever okay cool how because we use the dot dot dot it looks like it's also providing us an index at least that's what i understand from the documentation the way that it's written up here up right here if we do just page we're going to get all the individual pages but if we do dot dot page we additionally get a posts index um which we are seeing here okay now okay so we're not getting that yet i'm curious i guess we need to make a file for that we generate posts of etc would generate the urls post okay so i want to log out page here we're going a little bit along so i i mean i would never prevent you from dropping off at any point uh but you know i appreciate you being here and i uh sorry that we uh didn't wrap this up all in all tidally in an hour um i think that document is maybe slightly confusing because i don't think that it doesn't seem to be generating and i'm not sure how it would allow us to create templates for both of those things um so like when it says uh pagination so when it says doing these urls i'm not sure how like where we would even put the template for that unless it's saying that we need both of these which i think which i suspect that we would um to do this okay so we have get static paths using the page prop okay so let's say let's just follow this okay so the page prop has several useful properties but the most important is page data okay this is the array containing the page slice okay so we have this so slash one would be an array of ten pokemon oh okay gotcha so uh so right off the bat if i wanna do this um i don't want so page size i want it to be one right um i think this is kind of really similar in like eleventy two um i think it's been a minute though um okay so if we just want one per page okay so we can see the page let's let's make sure that we didn't do anything here so if we do um page.total we should see the total number of pages that we have in our system yes okay so we have 25 there even though we're only showing one okay so whatever and so like if we go to one so how do we control the layout for that or do we just have to add a you know dynamic page other uh helpful metadata okay okay uh so let's okay let's try something okay so the question is so how are we going to get that data and to do that we need to look at post 2017 so astro md it takes so that does that and it it calls it provides post to okay blog post dot astro okay so this is the blog post it takes um is that what i wanted yeah it is actually so okay so what do we have here so each of these objects looks like we get the data current next previous okay and there is no previous for this whereas this one uh if we go up interesting all those should have previous i suspect oh there's no previous pagination that's right okay this is complicated okay i just need like a starter for this okay so this is pulling out content um but that's not what we're getting here we're getting a we're getting a page and i okay so okay so here what does that mean for us so we're gonna make a page here we're gonna take some type of man oh man okay so we need is we need to turn this into a link i definitely didn't do that right okay um okay so we're gonna turn that into a link we're gonna look at our blog post astro layout to see what the no that's uh not the right one so we're going to look at was it index dot 2017 and it's blog post post preview blog post preview what does that do so it takes props it's going to specifically take a post okay so we can stop logging that out it's going to take a post and href post url okay so do we have a post url here yes we do we have a post url current but that's not all right i'm gonna call it i gotta get back to work uh i'm a little bit confused by this i had thought based on the documentation i'm just gonna kind of like wrap up my thoughts with this real quick maybe we'll see some you know have a revelation i had suspected from this line here so your first page url will be different depending on which type of query param you use first page url this one suggests that we would get a you know whatever url as well oh shoot so it's not it's not doing an index for me okay this isn't suggesting that it's going to do an index it's just saying that instead of putting a 1 there it's gonna be posts and then post two and post three instead of posts of one and post two three uh which totally totally makes sense okay i wasn't reading that correctly obviously um okay so gotcha so let's take that so we're going to copy that whole thing we're going to delete this because that's not what i want i want it to be like this okay so we're going to get all the 2017 posts we're going to paginate size one which will do one per um and then do this um and then i guess i don't really want the okay so what do we have so the current so the previous page is page one okay cool cool okay so let's see so we have uh we're not gonna have whatever we're gonna have to make an index page for that so we can just add an index and you know do whatever we need to do um however for this we're gonna do page two and we'll see that uh we'll see page one okay page three okay we should be able to go all the way to page 25 okay great and then fall off a cliff right there okay no problem okay so now we see 25 of 25 and so if we go 20 24 um come on 24 of 25 okay great um dude okay we're getting somewhere right as i right as i was about to give up uh so the difference that one includes the index page and the other doesn't no yes so that's what i thought it was doing i thought that it was including the so if i go here nope pagination i thought that it was saying that it's going to include an index page for me but i was super confused because like how am i going to do an index page and then also the layouts for the individuals it's not saying that it's saying that if we capture the slug like this it's going to just and it's not going to have a 1 the first the first paginate the first paginated result is gonna be a posts not posts of one but that's the only difference so we still have to make an index page for these if that makes sense oh hi ducks i didn't realize you were sentient um yes so that that took me like a whole like i don't know 40 minutes to like wrap my head around but that's what it's saying because what we're doing in this is we're building up get static paths which results in a interesting which results so what does astr what does astro props look like in this case undefined no that's uh okay so astro pops just has a page on it okay got it okay okay so then because we're on 24 or because we've viewed 24 this is what the data for 24 looks like so the current is 24 the next is 25 and the previous is 23. now i am kind of curious like how we would get titles for those but let's just let's handle the pagination portion of this first um okay so so so at least now we're getting the the pagination the way that we're expecting to um and then like let's do a so we have a total let's also do a href um we'll do page dot url.previous and copy that for next okay so we have a previous and next now so if we go nope page url don't know how you do it new to astro what doing wrong okay that should be how i do it right okay page url okay so we have our page object url next and previous as someone that loves astro i know embarrassing literally little about astro then holm says yeah uh same well i mean i guess i guess i'm i i would never identify yet as someone who loves astro so um just a astro curious okay cool so that that worked i was just having some kind of issue before okay so i don't have access to the titles here which um isn't ideal um but i am paginating through okay so oh that's cool that this just is what do they do under the hood there um so when we got to next it um oh it just doesn't have that attribute okay cool so now we would want to do a condition here and i'm uh how do you do conditionals in astro or like in an astro syntax file oh hmm so i just do a regular ternary so i would just put this in like this and do what is it page.url.next um but then how does this this part of it work can i just do it in like that and then can i do null like that okay cool yeah okay sweet so this would be previous um url previous okay oh whoa what do i do here oh there we go okay so that happens the next shows up if we go all the way back to two and then we go to one and there's no previous cool well cool so we got that working uh the way that we would want unfortunately we don't have the titles in here which i know there has to be a way to do because astros doing it on their site and i assume that it they're doing it um you know dynamically and not statically um so let's see what kind of data we have um wait so we have the let's log out so we have the page and the page looks like this let's look at our page data of zero i guess it's an array of one item um yeah i'm not sure how else we get the how else we get that i wonder we might have to i wonder if there's a way to kind of like augment i mean there's definitely a way to do that right but like to you know to augment this a little bit okay so either way we've used pagination to kind of like build up our own pages which is helpful um and i think something that we'll have to do if we want to go beyond just kind of like the like printing out this page but like actually like linking between like thinking them as like kind of like relative articles and being able to link from one to the other so um anyway i went way over than i was what i was expecting today so we're gonna wrap this up thanks so much for being here um kind of as a recap um like what we learned is that as far as analytics is concerned and from what i've seen uh like any embed because we have those um code sandboxes um it looks like you can just you know they just work right just like like regular like html pages you just put your embeds in there and it works great um that worked um what was the other to do items that we had um um images we need to put inside of the public path um and then kind of like link directly to them like at this you know the slash um root uh yep we got all that stuff working and then uh we skipped that to go into next and previous so after this i need to flush this out a little bit and kind of like you know figure out how to make this um this work the way pagination work the way that i want with the next titles in there but once we do that seems like um seems pretty cool i also need to figure out like um so what are like day two to do's so we need to do so the next and previous titles would be nice um also like what do we do with this right so like this is really nice if i just want pages but if i want to use these as source that becomes kind of weird that they're in this directory right so i imagine they would probably make a content directory some kind of something like um outside of source maybe if i'm going to be doing like these kind of like dynamic pages to do that i don't know so we learned that in order to like paginate this stuff the way that we want or at least so far we're going to use this paginate function to kind of develop some get static paths um and then in this and so so so there has to be some kind of magic here where i can kind of like get into the the next and previous so what's the like so i think we just got to go further down on uh on the pagination rabbit hole next time um and then also um rss i think is probably the next thing that we want to do um so yeah then we learned how these ternaries work inside of astro it's not like i guess it is kind of i guess that's react i guess looks like react yeah okay cool so let's react and um we did we did that and then like the biggest thing was just learning like what the heck it means like what the heck this means but now i know and i'll never forget because i experienced that pain uh awesome it's the recap uh yeah all jsx cool cool cool um just javascript what isn't anymore what isn't just javascript anymore um except when it isn't yeah except when it's markdown when it's css um all right this is amazing this has been great learning opportunity for me and i appreciate your help um yeah so that's it um and then travis we're going to be trying out uh a riverside um you and i actually i just set up a short code url um does it work just thought i'd test it yeah okay cool so uh riverside uh fm um we uh oh my gosh i just bought this thing full price i didn't realize that there was a promo code right here wtf dub t f i should have gone to the home page dang it i did go to the homepage maybe they just put that up there i missed it by a day i don't know maybe they'll apply it retroactively for me um astro equals the jam stack buffet file all right this has been great hey thanks for being here um and uh yeah i'll see you see you around uh i don't know maybe i'll do more tomorrow maybe i won't who knows uh holidays coming up so it's gonna be kind of a slow week uh thanks for being here we'll see you next time peace

Channel: lunchdev

Views: 15

Keywords: games, twitch

Id: BRqwdUAK3z0

Length: 84min 57sec (5097 seconds)

Published: Thu Nov 25 2021