 Hey, hey, hey, hey, hey, I think we're back. Yes, cool cool cool. I'm not sure what this one does doing here All right, okay, cool cool. It's been a while It's been a minute. So I'm kind of like a little bit like What goes where at what time does the thing happen and is it working? So it looks like it is working So I'm gonna do this. What's up, Arthur? Hey, good to see ya. Good to see ya Looks like you changed your Screen name or whatever. So you use that at as part of the egg. Love it. Love it. Love it Let me move a couple things around here. Don't need this anymore Alrighty so Okay, so I want to talk about today. Well, let's see. It's not quite 8 30. So I'm gonna talk about the switcher first. So we had Christmas since the last time that we hung out and My my daughter got me this sweatshirt or made this sweatshirt for me And I don't know if you can see but it has this big sack of potatoes with like a wavy iron when it says potatoes and Yeah, so she got it for me. It's hilarious So she says that hugging me is like hugging a sack of potatoes I guess I'm kind of like lumpy and And whatnot like a sack of potatoes. So anyway, I love it. I think it's hilarious I think anytime you have something that you can wear That embodies your family roasting you. It's just awesome. So anyway, so that is that's that that's kind of like you know Christmas break was crazy had a lot of Just nuts stuff happening with my family and I'm kind of ready to get back into it extended family Ready to get back into it ready to kind of you know, learn some new things and you know Play around with some new stuff, which brings us to what we're talking about today So it is now officially 8 30. So I'll kind of start talking about why I'm doing what I'm doing. So Astro is kind of this big static site generator plus islands Whatever This islands is something that people love explaining to me even after I've said I understand islands Maybe I don't maybe I don't fully understand it and that's where people feel compelled to keep explaining it to me but Astro is this really cool static site generator and I've used a handful of static site generators in the past Started with Jekyll, which is a Ruby based one really cool I think feel like it was probably like one of the you know, grandparents of the idea of static site generation Super big fan of Jekyll, but I found it hard to use Jekyll long term because I stopped using Ruby And so when I wasn't using Ruby anymore just kind of felt like a huge pain to kind of like jump back into that world Jump into a different package manager a different language all of that stuff to build my static site So I started looking at other things I think I had like a brief stint with Gatsby, which just did not work for me mental model wise as a static site generator and Landed eventually on 11d, which I think is really cool. I really like 11d. There's a lot of really neat things about it I think collections are really cool the way they use tags to organize collections is very cool I'm doing a lot of that stuff on my site That's super into 11d The problem that I'm having with 11d is well The problem began When I so I used a blog starter and the blog starter uses a templating language calls called nun jugs and nun jugs is kind of on I mean, it's like the only place I've seen it used is in 11d And so it's pretty cool, but I was like, okay, I'm gonna try and use liquid Which is kind of a more common templating language. I wanted to use it because The email program that I use or email service that I use convert kit uses liquid for anything that is dynamic And I figured well, I really don't have any space in my head for Like temp look raw templating languages anymore But if I'm gonna have hold space for one of them, I should you know, just use the same one everywhere In that I found I had a really hard time converting my blog I did it very like step by step I kind of like, you know moved this template and change this template and change this template and I was like Kind of had that moment where it was like, okay, ta-da, like, you know I changed the last thing and it should work and ta-da It did not like some of the plugins just weren't working the way that I was supposed to and I just didn't really know where to go Had our time trying to figure that out didn't want to start from scratch, but I was incredibly frustrated this was like Several hours of work. I kind of just felt like I'd wasted it So Got me thinking I've used Astro a couple times for like small sites. I used it for react holiday but I kind of wasn't thrilled with the The lack of that same collections concept. I think that concept is really cool in 11d and I kind of Have gone on many tirades about how Not only does it not have like collections. I mean you can use the globs to get the data that you want. Yes, which is really cool I like that But like Something that bothers me is that you have like this the pagination you have this paginate if you paginate stuff in 11d I'm not 11d. I'm gonna do that a lot probably today you paginate stuff in Astro you Have access to like a next and previous page was just super cool, but you just get the URL which is like Kind of annoying like So like you can only ever have a URL then you can like statically say what you want to say but like you don't get any of the Front matter data like the title or like description or any of that kind of stuff for the the image stuff That would actually be useful in presenting like what the next thing is So I find that frustrating about Astro, but I kind of had this moment of like, okay Like am I just holding on to this thing that doesn't really matter because like on a blog It really doesn't make a lot of sense to just do like a next thing It's really like the that that kind of progressive React holiday type of thing where I really want it So anyway, I don't know I'm gonna see if I can get over that and Use Astro for blog because I think it'll probably be better fit for me long term So that's what we're doing today. Anyway Yeah, so let's see. Let's see what I missed see see what's going on Okay, oh Shoot, I should probably it's been a while. So I'm doing this thing thing again. Oh, look at me that so Twitter's up there Shoot shoot shoot shoot shoot shoot. Can we add this? Yeah, cool Hey, Arthur. Good to see you again. Good morning from San Diego Yeah Talking about usernames make it man making a consistent username across platforms is this tough business I This is like honestly why don't use Twitter right now because like at Shantastic is not used but it's locked And so there's actually like I have this theory that I think I set it up when I'm back when it was just in TV with an email address that I no longer have access to and That like I'm blocking myself from it. So, um, yeah, what's up Travis? Good to see you Let's see I Am a rock I am That's funny. Um, okay, cool. So let's do this. Um, okay, so we got this dude. Dude. I can find my mouse. I Got too many screens going up here. Um, I Keeps popping up, but I don't I don't want it Okay, um, let's go to Astro build so this is what we're gonna spend be spending the most the bulk of our time on Today a bunch of files over there night Didn't didn't account for you seeing how gross my desktop was So I have a bunch of files over here and the thing that I want to focus on today is looking going through the blog starters, so we have Let's see, where can we search this so I've searched for this before so if we go to astro blog starters something like that Blog themes So Astro does have a lot of blog themes and if I understand this correctly these themes are basically just repos that have kind of like been forked off at a point in time from a Basic starter and then kind of built upon so if you are looking for a quick and easy kind of give me a blog An astro type of thing There are many of them here. So that is cool. You can kind of see which one Looks like how you want it to look see if it has some of the you know features that you're looking for It should say Here like maybe you want to use tailwind or whatnot. So all that stuff is here There's one in particular that might catch your eye and I think that's what we might start with today Which is there's an official one. Where is it? Doop-de-doop-de-doop Can't find it can't find it today. Where is it? Where you at? Anyway, there's an official one. Oh here it is blog That we will be using today as kind of like just kind of exploring what some of the options are Which is pretty cool built by with astro now This is not what I'm looking for there is a guide that actually goes through how to build a blog and that's part That's what I want to do today if I can find it Um Docs Astro build your first blog with Astro. Okay, so this is the this is the doc that we're gonna be going through today Just to learn all of the things that we need to know about Building a blog with Astro. Um, it's actually pretty nice One complaint. I haven't gone through it, but I did kind of skim the the beginning of it before deciding that I wanted to stream on it It kind of goes like really far Back into like this is an editor. This is like what deploying stuff means Not super into that as part of a kind of tutorial on building a website I'm very much for having that content available as a if you've never built a website This is an editor like go over here. I do find that it kind of like is a little bit of a roadblock if you're just Building something from you know, and you already know what an editor is Then editor So let's some kind of find out how to navigate this So we're gonna build your first blog with Astro along the way set up your deployment environment create pages blog posts for your website Alright, so what do we do? I guess we check this and say that we're interested in moving forward So what do I need to get started? How do I use checklist at the bottom of the page? I think if I remember correctly If I can grab the edge of this come on Yeah, okay, so to show us this progress and I think these checklists Yes relate to this little progress bar on the right. This is a really cool implement Implementation I'm super stoked on this. It's a little odd that if you're at the wrong viewport You can't like you don't see it at all and so it's just like Clicking this checkbox thing and I have no idea what the hell is happening. So Anyway, open up to the right screen size and you'll be able to see your progress through any given section Okay, so what else do we need to do unit one things I already know how to do can I skip it? Yes? um So Yeah, again, I think this would make a lot more sense as like a prerequisite instead of like a unit one on this, but Let's jump over to unit one Prepare your environment write your first line of astros through prosatory online deploy Don't care about any of that kind of stuff right now Okay, so check into unit two Okay, so this is where we're gonna be spending most of our time just building an astro site Now I'm pretty sure now this is the problem with this is the hazard of kind of like starting from to is Create your first actual page, I don't know if it's gonna am I gonna generate a site at some point No, that's in that's in one. That's the one thing that I need to know for one This is gonna be stupid I Promise you that's one guarantee. I can make about these streams. Is that gonna be stupid? So yeah, thanks for being here if you like stupid things All right, so here we go. I finally found it It's number two of one the you know section that shouldn't be in this thing so Let's make a new thing so npm create Astro latest is what we'll be using that's gonna create a new astro site. It's gonna ask us some questions Let's see if they talk about the questions being asked Nope doesn't seem to so let's see what asks so where would you like to create your project? Yeah, well, let's just call this blogging thingy Now so do we want to start with an empty project? A few best practices or a personal website starter kit now I think this tutorials tutorial is gonna take us through Everything that we need to know so I'm gonna say empty project for now I do you think that this kind of basic project with all of the folders set up Makes a lot of sense if you're just kind of starting a new project, but let's go with empty Get just the bear bear minimum Okay, would you like to install dependencies? Yes takes a minute Okay, I Keep losing my mouse between these three displays that I'm using Let's see. Would you like to initialize a git repository? Sure, I don't really think I'm gonna use it for anything, but let's try so how would you like to set up TypeScript? Strict sure, I don't know a lot about TypeScript. So this should be interesting, but I'm here for the defaults, you know Okay, I'm gonna CD into our bloggy thingy. We're going to npm run Dev as it says and so I you know what? Okay, this is big I do appreciate that it says, you know use control C to stop Um That you know that definitely Kind of is something a lot of people don't know kind of like hangs people up so yeah Good job. Good job This is good insight right here where you need it And I also appreciate that this is like a small like it's really condensed a lot of times You get like just a ton of a ton of information that you just don't give a shit about So good job. You've made this friendly. I appreciate this. So this is really nice Good stuff. So I have framework like react or tailwind using astro at okay, so that's gonna be good to know I think NPM run dev Alright, so we have local host. Let's put this in a split. I guess Cool, we have astro. Okay, and this is what we expect Given this it looks like they might have some kind of font. Oh, they said empty projects. So great We are in the right spot Unfortunately, I can no longer jump around. So let's do that. Let's get to two And check into unit two Cool, cool, cool. If you want to follow along with me, you're more than welcome to this is kind of, you know We're just exploring right now Okay, let's open this in code VS code All new that you know, okay, so this is interesting So there's the empty git repository But it didn't commit anything which is fascinating typically With these there's you know when it initializes a git repository, there's an initial commit It's like, you know astro generated or something like that Interesting that they've chosen not to commit those I'll do that now get Commit what's it gonna be npm run no npm create Astro at latest. Okay, cool. All right, so this should be white now. So we're good on that Where we are now so you can find the code At this point in the tutorial and get up and stack blitz. Okay I can't because I didn't go through that part of the tutorial In this unit you'll create your first astro page with the dot astro syntax add blog posts with markdown file Style an individual page with style apply goblz global styles across pages Along the way you'll learn two sections of astro file. Okay, cool let's Progress So we're gonna create a new astro file So in the files pane of your code editor Navigate to the folder source pages source Pages And create a new file named astro dot or about astro Copy or retype the contents of the index astro into your okay, so Pages new file about Astro Okay, let's look at this index astro file. Okay, so it has some a front-matter block here and then a basic html template So that's what they want us to copy it We will do as they say Let's change this a little bit Chan dot dev slash bio bios is that what it is? Yeah grab that This is handy by the way to have pages for this kind of stuff. I don't know if this is a good Actually my most recent one, but it is one that I at some point used Okay, so let's navigate to that page Okay, cool. So we got it Okay now Just a real quick aside. So over this the December break I did a 25-day email series at react holiday on the new next JS stuff and Actually, let's go let's go back to this. So on on next. Yes. So next yes 13 has this new app directory. It's pretty cool and it Basically completely borrows Kit that's well Dot dev. Okay, so it completely borrows the Folder like kind of innovative static page folder structure and file naming conventions from Svelte And I feel like Svelte is probably doing the coolest stuff in terms of file naming conventions And they're doing it by getting away from the idea that a a file Should correlate to a page which is what we're seeing here So right here. We have a file and that file becomes a first-class A first-class route so we made a file called about and then that becomes the route about here Now having for a month use this new style where you actually have to make a page dot whatever extension file it feels Very right. It feels like the way that it should be because I want to be able to Locate components and other files inside of directories without them becoming pages It also makes nested layouts pretty cool So anyway Doing this it kind of like it just it kind of just Hit me how much I Yeah, don't like this style Uh, so anyway, that's how they're here nor there just to kind of thought um But I mean this is like kind of like standard. I mean it like It feels weird only kind of like by this whiplash of having been in that world for a month coming back to like a components layouts Pages like separate directories that you have to kind of like traverse every time you want to go in and out of those Uh I don't know if I had to bet. I think that spelt is definitely going to kind of Change the way that all of these frameworks do this, but I don't like I could be wrong So where are we at? Um, okay. So in this file. So we made a astros so um at the about to okay Yep, we did that Right now your about Should look exactly the same as the first page. Okay. Um, it does not because we did all this already um Add navigation links I have um I have kind of like not a strong relationship with this type of tutorial. I know that like And I don't know what the answer is uh, like sorry ran real quick. Um I really don't like tutorials that are like spoon feeding you every single thing that you need to think Is this different from like telling you every command that you need to run and doing everything But like just spoon feeding you like every single thing that like should be going through your head when you're doing this I find so irritating. Um Now I understand that like people are at different phases, you know And so I think that I mean it's clear through this that you know, if you have a whole section on just like how to code um You're really going for a certain like demographic like that kind of like early developer thing Which I think is fine. You know, you get to choose who you're marketing to. Um I wish that there was a better way To do both right Like they'll like just give me the steps And then I don't know like you click a button and then it just poof like Fleshes out with a bunch of words. Um I don't know. I'm not sure how to do that if I knew It'd be great. Um, but I don't Uh, oh shoot. Oh my gosh I totally I I I hit a scroll state on comments and I apologize. I I missed them I thought it was just the same thing for forever. Uh, so Um, yes, let's let's go through these. Oh my gosh. So sorry everybody. Wow. Look at this I'm such a terrible person um Maybe wait. Hello. Hey, good to see you. Um, and maybe I should do this one. Does that make more sense? Yes Uh, maybe oh hey astro core team member. Hey glad you're here. Um Emotional support. I mean tech support. Yeah, awesome. Thank you. Uh, yes. Um, I want to like if I like It I want to apologize in advance because I get like super like like irritated about little things And uh, this is you know, it again, like I I respect that these things are for different people And so like I will be expressing my Uh point of view is going through these but you know, it's just one of like literally thousands as I I know you're quite aware of I'm sure. Um, so That's that arc browser is like throwing me off. I'm like, where's the nav bar? Yeah, so For those who are confused by this browser. This is arc. Um, I've been loving it I love this like kind of like two up type of thing. It's um, it's great. Oh shoot Streaming fail. This is arc. Not my face is arc. This is arc. Uh, two up pretty cool. Um, let's see And then man ecam has really thrown me off right now. It keeps throwing the preview thing up in my in my space Remove from broadcast Okay I think we're good. Um, let's see Travis, um, what do you think of the arc browser? I tried for half a day and liked some parts, but okay Okay, so this is my this is my take on arc on the arc browser real quick arc Is really awesome. One of my favorite things about arc is that I can set up different profiles and Spaces together, which is awesome. So, um, like, uh, what is this? I don't want to like kind of screw around with this like too much But Like so this is this is a profile and a space like combined So I have like, you know, this is my notion and gmail and uh, youtube and twitter All that kind of stuff and this is like for me. Um, but then I can switch over I can switch pains And so if I if I do that, uh, shoot, I don't want to mess up too much If I do that, then I have all of these things. These are for my work So this is like my works notion and email and youtube and whatever and It's really great to kind of have those things separated for me I really like to be able to be like, okay I'm in my personal mode and then just swipe over and now I'm in my work mode and um It's really cool because I've tried using the authentication systems for like various like trying to use Notions multi login thing and google's multi login thing like trying to do all that stuff is just really frustrating for me So and I just felt like I was logging in all the time. So This I can kind of like keep all that stuff together, which is super cool. Um I'm not sure why Maybe if I apologize for having you up there again, um Let's see. Can we take that out? Yeah, there we go. Okay. Cool. So that's arc Also cat astro core team member erica. Thank you so much for being here. Um, again, uh I I want to apologize in advance. None of this. This is just my experience going through this and so, uh, yeah I uh, please don't take anything that I say as like the way that things need to be except for the way that I think of them For me. Um, so yeah, that's it. Uh, so maxi. Hello. Uh, good to see you Um, oh, I don't think I put erica on here. Good to see your car. Thank you for being here. Um Um Yeah, all right. I I am so sorry that I missed all this. I feel so I still feel so bad. Um Okay, cool. So a lot of cool stuff Okay, cool. Yeah try to cook it. So Man, I need to have some kind of like escape hatch like have someone be able to like text me and be like Hey, yo scroll dude scroll Okay, so, okay cool. So we're on this. Um Yeah man, now I'm now I'm now I feel nervous because it's like, you know people and you know, we got maple leaf and erica who like, you know, actually no astro and like this I I have that like that that like panic now. Okay, cool. So getting over it real quick Um, so let's go into editing a page. Um, we did that already. So now we're gonna add navigation links So let's get into our navigation. So I'm just going to copy and paste this copy paste, uh, I guess let's put it in the body right there um save Okay, so we have home and about those work about as I expected um Okay, cool. So I suspect that we're going to get into like layouts probably next. Um, so I'm not gonna I'm not I have a habit of kind of like jumping in and like doing the thing that ends up being the next instructional So, uh, let's not do that. Um Uh, see so astro uses standard a html elements, uh to navigate. Okay, cool. Cool. Cool E cam out of the way so don't shoot miss this stuff again Come pressure you got 12 minutes to figure it out. Okay. Uh, let's see. Um, okay, so what do we have? Okay, so html elements I love that. Uh, that we have um anchor elements. I think that's um killer. So Uh, try it yourself at a blog page. So at a third page blog astro to your site following the same steps as above Don't forget to add a third navigation like, okay, so this I should turn off notifications um Create a new File, okay. So let's um, let's do that. So do this blog Change that to blog save Um, and then that will take us to blog. It doesn't exist yet. So actually, let's just stay on that page And see what happens. So Okay Let's copy this again new file blog dot astro I can't tell you how many times I have Pretty much, I mean, I do this all the time but particularly on stream like I can't say how many times I have uh Like gone ahead and done the thing. I'm like, oh, yeah So I'll probably want to do this that and the other thing and it's like the next like two steps Or exactly that or I'll have a question and I'll go around google and it's like the next like little info block like it's just just my lot my lot in life is to Think through stuff unnecessarily um Actually did This is neither here nor there But like, okay, so I did this um starting in october I did this whole like like I spent a lot of money and I did like a whole like battery of like psychological testing and evaluation and whatnot and um and and like There was like a part of me that like wanted them to be like Okay, like you're totally messed up in these ways and then like have it explain all my my entire life and um, that did not happen Uh, they were like, yeah, like you're pretty normal. Uh, you know, sorry You're just like just crazy, uh anxious. So Yeah, anyway, I so through this we've determined that like I just have Zero ability to determine like what is and isn't important like At all like brain can't like figure it out like two things Are like both things are always important. So I do have like kind of some like OCD tendencies, um that kind of like make everything feel like, you know, critically important number one everything's an emergency So anyway, um, but you know largely for the for the rest of it. I'm kind of like, you know Pretty pretty average Um across the board All right, so let's uh, let's do this. Um Oh, the sound is repeating interesting. I wonder why that is. Let me see um Interesting, let me check that real quick Uh, I apologize that it's doing that Is that um, so real quick. Is that an experience that everyone is having? Is it um, is it repeating like an echo? Oh computer. Okay. Cool. Cool. Awesome. I just missed it. See like case and point if I had just read Two more down I would have been like, oh no, it's my computer. Sorry No, but yep. No did it. Uh, yeah, no read the rest. That's right. Uh, yep Yep, see in in action. That's what that's that's happening in real life right now. No jokes. Okay, so Here we go back back to it. Ah, uh, so publish your changes to the web now I'm not gonna do this right now. Uh, just because I I don't want to go through those steps. Um, okay So we're gonna say I'm good with these. Let's go. Let's move on actually. Let's look at these so file based writing astro um and astro page html It'd be interesting to kind of like go off on that tangent, but I really want to like keep keep on this path right now So, okay, so write your first markdown blog post. Okay, so now that you have Uh, now that you have built pages using astro file, let's make some blog posts using md.md files. So Uh, get ready to make new folder make new full. Okay. Okay. Okay. Okay Create your first md. So create a new directory at source pages post Okay, add a new empty file post one inside your post folder. Look for this page in the okay. Okay. Okay. Okay, so um What do we have so we pages And then what was it post post one dot md? Um, change the browser your use our url to post post one Okay, good. Good. Good. Okay. So the the markdown seems to have worked right away. Uh, test one two Three You seen that commercial with the lollipops and all of it. It's a very child of the 80s things. So maybe not Hands up if you you know what i'm talking about with the the owl the What is that it's the um Tootsie roll tootsie roll pop. I think what's in the center of a tootsie roll? pop Okay, um Okay, so our markdown works. So this is cool. So markdown just works. I mean, I didn't do anything special I didn't like configure it. So I guess markdown just works in astra, which is sick because markdown's awesome Um, okay change your browser. Okay, uh instead of this page, uh, you have not created yet. Um, that's This is the like do I go through every step? I probably should I probably should Uh test or post two. Let's do that post two Um, okay. Oh Here's here's some sample posts. Look at this right here Right below the thing that was right in front of me that I didn't read. Um, okay Save and then I don't know if there's a post to post one It doesn't look like it that's fine. Okay, so save that it automatically reloaded I didn't do anything. It just did its own thing. So super cool Uh trigger browser preview post one, uh use the browser dev tools to inspect the page notice that although you have not typed Okay, cool. Yes markdown. Um So link to your posts Um, okay, so um Link to your first post with an anchor tag in astro blog. Okay, so I'm assuming the rest of the oh, you know what I didn't make a blog Did I make a blog page? Yes, I did so inside of Inside of this paragraph We're going to paste that unordered list Uh, let's change this to blog And then go to blog Okay, so we have about we go to blog we see a list we hit post one and We're post one. Nice. Okay. So this is I mean so far This is really nice because all of the like we're just using html what we're just Using html for the parts of it that we want to use html We're using markdown for the parts that we don't want to be html But both of them are working. We haven't had to set anything up. No configuration, which is uh freaking awesome. I love that um I'm trying to I'm gonna scan this real quick because we didn't look at it before so Um, this is the extension. So it's recommending astro build. Um launch I'm not totally sure what this is. Um, if if someone is familiar with what this, uh, launch json thing is Uh, I would love to know. Um Uh, let's see favicon Pages, I've actually put all of this in here except for the index astro And the m dot d dot ts um Reference types astro client Uh Interesting Is that inside? Let's do this. It's going inside of node modules. We're going to Uh acorn Astro It should be a client. I'm assuming. Okay, here we go client d dot ts. Okay, cool. Cool. So we have Um, where was that file? I don't remember but anyway, it's referencing this types file um Which uh sets up images it looks or has types for images and then also references a client base Uh, which we can see here client base dot d dot ts Which has significantly more so this is going to be for uh, it looks like markdown files up the top There's some css and css modules here um different media non-image media font files Um, cool a bunch of types And then there was import meta Um one last one here it looks like these are global Yeah, okay, cool. Cool Nice good to know. Um, that's what that is referencing. Uh, so that's our nv dot d dot ts Get ignore awesome. Um astro config. So yeah, so nothing Too exciting. So we have defined config. Uh, we pull in the astro config. Um, I guess I could uh, what is it f12? Does that take me there astro config? Um, so V config import vt dot user config astro user config Okay, cool cool Okay, so it's there if I need it, but um, that's kind of like a default one, I guess so, um Yeah, it looks like so package json. It doesn't look like yeah, we have no uh kind of uh package setup in here Uh Our commands, yeah Cool, and then we're using astro strict. So if we wanted to change that later on I know I just struck right from the beginning if we wanted to we can change that. Um, Let's see ccc Uh Hello, kevin. Yeah, no, it's going pretty well. I have I have one post so far. So doing doing pretty good feeling pretty accomplished Um, yeah, so uh, all of this is very good. Okay, so we explore that project a little bit I'm gonna close up some of these files. Uh, don't need those anymore And um, let's go. So we have uh our first post. We have a link One link to our uh first post. Um, and then we're gonna add some content It looks like to our second post. So let's pull that up post to Replace what I have um Ton of front matter on these so I suspect that that will come into play momentarily Um, it looks like we need to add an additional post To make this thing. So we're gonna do that file new post 3.md um Third blog post, okay Now, so uh add links to the other posts. Okay, we're gonna copy this Big fan of copy paste when going through tutorials um About and I do appreciate that these are like They have the diffs. That is such a big thing in tutorials that like It's really hard to kind of like know what that balance is of like what you can assume and whatnot Love the diffs Okay, cool lost my lost my brain for a second. Okay, so we'll post one two and three Um, let's go back to our blog Whoop not post blog just Uh blog Okay one two And three Interesting. Okay, so this one has a heading. Okay, so let's look at the difference between these so post one and Post two. Okay. So this one has a heading. This one also has a title Um, this one just has a title. So it looks like we're probably gonna set up a blog template Um, or like a component Next hopefully Okay, so check your browser preview, um, of links. Yes. Okay, cool. So we got that Content and markdown file converted to html. Oh html. Oh, it is a little little quiz Let's let's test myself Checklist, um, I can create a new folder with uh source pages for my blog. Yes, I can create a new markdown file Yes, I understand that markdown is another language. Um, that like astro produces html in the browser Okay, interesting. Good. Good. Good. Beautiful links. Okay Okay, so next section. I'm gonna find my cursor on this other page and see. Okay, cool. Nope. No new comments. We're good Alrighty, if you have like if you have questions, you know, feel free to ask them. Um But yes, yes, yes, yes, yes Okay, so define the define and use a variable. Okay define use a variable. So Uh, so it's talking about this about astro page. So let's open about let's close this Okay about so what do we have This is what we have so far. So uh add the following line of javascript in front matter script The code fences. Okay, so Um, this is this is interesting. So Okay, so this is interesting refers to this as a code fence All right, I kind of remember this being a little bit confusing to me The first time I went through astro To build react holiday is that the terminology is interesting because it's a little bit different. Um, because Here in an astro file, that's going to be a code fence because we're actually like this is actually JavaScript code um But then, you know, in your markdown files, this is front matter um, so it's a little A little bit of a mind trip for me to kind of refer those to different things I would have naturally would call this like a front matter block, but clearly as soon as you put Code in there. It's not a front matter block. So Interesting. I mean, I have to make a mental note about that terminology for sure. Um, okay So replace both the static astro title and about me heading in your html with a dynamic variable. Okay, so We're gonna use this title instead or actually let's just do this. So page title title title And then that's gonna be uh, just single I curl ease Uh, which will also be a little bit of a trip for me. Um Kind of coming from the templates, uh, that I've been using in my leavened blog. So Got that page title. Uh, we're gonna do the same thing here. So here Uh, oh page title Okay refresh the live about page. So we're gonna go back to about Um, and then we have about me. That's very obliged. So Uh, we're gonna do that and it will update man. It's super fast That's Really fast. Dang it. That's really fast. Um Yeah wildly fast. Okay. So refresh the live preview of the about page. Okay, we did that Your page. Okay. Uh Yes. Yes. Yes. Yes. Yes. Yes. I use the same pattern to create a page title value to use in index.astro homepage and blog. Okay, so Okay, so use the same pattern. So we're going to do this. So let's go to um home Um, which is at index in this code fence Uh, we'll change this to Home We'll put an exclamation on there just to make sure that it worked Am I in the right page index astro? Maybe I have to refresh this one. No. Oh the um Page title. Okay. Uh home. Okay. Cool. Perfect. Uh, I didn't need to put an exclamation point there because it's a totally home is a different word than about Uh, if you did not know This is something that I learned just now Uh, okay, cool. So we did that for there and then we need to go to blog now and then make the Same change to blog Okay, code fence Locked it away code fence. Uh, we're going to change this to blog Um Change this blog awesome Oh this blog and blog however are the same word And so if I want to see it, I'm gonna have to change it up just a little bit Uh, let's see. Hello. Hello Oh, hey, I love it. Yes. I'm gonna borrow this. I'm gonna borrow this from ben ben. Yes about Okay Yes If you're here, hang. Oh, I can't copy and paste from here. Okay. I'm gonna I'm gonna Do it here. Uh, if you're here hanging out with us You want to hang out with the coolest? kindest Compassionatist Uh, creativist people. I know Um, then, you know, let's go to let's go to about here and we're gonna change this up Uh, so we're gonna change this, you know, and let's let's you know, let's do this. So we're gonna say Um So about And then let's add a new thing we'll put Shoot, I can't do this. So what would you say here ben? um Ben thank you for uh for for for getting this out here. So, uh, lunch dev Oh, come on Come on Oh, I wonder if this I wonder if this will work putting the mark down in here We'll see we'll see if it works. Uh, we're creative curious I'm going to go on passionet Web develop developers Man, it's spelling here as atrocious. Uh, let's see const Uh Let's see about text. Let's do that Okay Say that we're gonna do a p tag and do about text now something I'm really curious about is if this is gonna Uh, it's not it's definitely not It's just gonna be underscores, right? Yeah, okay, of course it is. So That's the case. Can I do, um An m here and will that work? Sorry now we're we quickly got into the weeds, okay Now I assume that there's gonna be some kind of helper or like pipe or function or something like that Where I could do like, you know markdown or something like that Um, eventually we'll get to that point. Um, as of right now Uh, it is not so I'm gonna leave it. I'm gonna leave it that way as kind of a A little bit of a thorn. Um, so if we get that, you know, again Um Yeah, and then let's uh, you know, let's let's also add some html href cools Oh my gosh the typing today htps um discord.gg slash launch diff Anyway, that that that's really what we're after if you want to hang out with some some sweet people Um, that's that's where to do it. Um cool cool All right. Oh, I I still got you on there ben. Thank you. Thank you. Um, yeah, good stuff. Thank you so much Okay, cool. So we got this we're good to go good good good good. Um Where were we now? Okay red javascript expressions in astro. Okay, so we did that I think we got through most of it We got through the the bulk of it the part that matters so red javascript expressions in astro and the following javascript to your Format ter between the code fences you can customize the code for yourself But this tutorial we use the following example Okay, so on the about me page, um, we're gonna copy this it's setting up some new variables um Okay, so we have const identity has first name country Okay Got that skills. Okay, so Uh, I imagine we'll probably iterate over these So then add the following code to your html template below your existing content, okay So this Will be placed here I'm gonna put a Horizontal rule here just so we can be super clear about the difference there um Okay, so let's look at this real quick. So we have a Uh, let's see. So a new p tag um A list item With the name This is interesting I'm not sure why these are list items. Actually, this is kind of Oh a few things about okay Okay, fair fair. I concede Uh, okay, so Yeah list items we got that. Okay, so cool. So my skills are okay and then another list. Perfect Um, okay, so we are Okay, so we're accessing things through this identity object, which is cool. Um Let's see right here identity dot hobbies of zero Two of my hobbies are photography and bird watching. Oh, okay interesting. So just Uh grabbing those specifically those particular values um So like if I change this one to Two would be baseball, right? Yes, okay Okay, cool Okay, got that. Um, and then here we're just doing a map very familiar with this as a react developer But this is astro. So I need to That is something that I kind of have a hard time with sometimes is like this is this is astro um It just feels a lot like react in these in these moments Okay skills map skill list item. Oh no key though So, I mean this is clearly not react if you don't have if you don't have a key there, which is awesome um Okay, cool, cool. I buy it. I like it. Um No keys for the win Uh Writing an astro template is very much like writing html, but you can include javascript expressions in it Okay, cool. Yes. Just remembering Astro astro. So an astro file format is written in My dot astro files. Oh front mat. So this is confusing. So now it now there's front matter I'm can I'm legit confused right now. So Interesting. Okay. So this is definitely javascript Correct. Okay. Okay. Some of these tests are kind of fun actually Uh, in addition to html astro syntax allows you to include uh, javascript, uh logical, uh operators expressions and functions, um marked down So we actually put a little bit of markdown in there kind of through a variable. Um, it didn't work So that's that man. If I fail one of these I'm gonna be so like I'm gonna have to literally read every word after that. Um When do you need When do you need to write your javascript inside curly braces when you're not sure whether it's correct? In the html template section of an astro component Between code fences in an astro. Okay. When do you need to write your javascript inside curly braces? We're not sure whether it's correct in the html template. Yes. Okay. Sorry Got confused a little bit for a second and I was really nervous about embarrassing myself Uh, okay. You can also use your script variables to choose whether or not to render individual elements of your html body Content add the following lines to your front matter scripts to define variables. Okay, so We are going to define these another great thing about copy paste is like Good lord. Do you like having to watch me type this would just be infuriating for both of us Um, okay, so we added those variables. Okay, so add the following lines below your existing paragraphs Okay, okay, so now it looks like we're kind of going into astro land Uh Yes astro land here we come Okay, so Happy and I am happy to be learning astro. I am happy to be learning astro Uh finished and uh, I finished this tutorial. Uh, did I? No, not even close Uh Goal my goal is to finish in three days. Well my goal is to finish in the next hour Seems unlikely Uh, let's see. So goal equals three days. Okay, so What is this bottom one? My goal is not three days. Okay. My goal is not three days. So Uh, let's let's change that to one. My goal is Oh, does that not work? Oh, is it a less than? Now goal equals equals three It appears to be Intentional because the type one and three have no overlap. Oh, right, right, right. Oh, this is kind of interesting. Um Type script don't know how to do it All right, we're leaving it three and um Yeah That's one of you wants to teach me type script in enough time for me to change this and still learn the rest of this in an hour Oh my gosh, okay submit this Okay Okay, so I need a ruling on this actually so I'm gonna bring this back up. Okay, so Over the winter break, uh, we were playing uh, code words with a couple friend of ours. Okay and And so the word that they chose was astro space Okay, the way that they said it was astro space Okay, so I like I'm curious now. I know I want to ruling on this is that cheating in code names Let let me know let me know I I will say we let it slide But I still think it's uh, I still think it's cheating Okay, uh back to the back to the code. Um where we are not cheating We're going through every single part of this thing. Okay, so analyze the pattern Okay, given the following dot astro script Okay, what are we doing here? Oh, is this like a little quiz? Uh For each astro template expression, can you predict the html if any that will be okay? So this is like I'm being a computer, right? Um, so operating system is going to be linux Um, cool. Actually, I'd love to see how this is marked up Oh, that didn't work Why didn't that work? Weird, um Okay, I'm gonna have to do it this way uh inspect Okay, what is this? Okay, so we have Astro code What's this one Astro slots Nothing will display because student evaluates. Oh, okay. That's the answer. Okay interesting I want to know. Okay. So there's this spoiler thing. So there's a spoiler styling But it is coming in through an astro slot. It looks like so. I don't know. I'll look that up later. Um Okay, cool google not Super, I get it. Um, so I'm gonna move on but that is available there, which is cool. Um We have a ooh from ben uh, okay So ben says I think it depends on whether astro space or astro space appear in some dictionary Yes. Yeah, so I think that was the uh, that was the Yeah, we didn't look it up But he was very confident that astro space was a single word I think it's just cheating just full on cheating. I mean we dominated them. So I you know Maybe if it had gone the other way I would have been pissed um Okay, so space and code named clues seems uh fine to me like I would absolutely permit ice Cream as a clue. Okay. Okay. All right Interesting interesting Today today I learned uh It is it is extremely clever, right? And so like I think we were feeling like well, it's clever We appreciate the creativity. So go on um Okay, cool silent man. This is quite the story. Um, okay. So silent individual page. Okay, so We're gonna get into this real quick. So let's add some styling. Uh, this is gonna be on the about page which we're at Where does it have me putting this? Okay, so style is gonna go in the head. So this is what it would look like You know, if we were gonna do this just in raw html that changes this to purple Which might not show with very well with the compression, but trust me it is some variant of purple Or the html variant of purple Okay, uh Check all three pages in the browser. Okay, so this is going to be isolated to this because it's only in this template um Okay, so this is going to be like what home black Uh about page purple and blog page black. This is cool. I actually like this. I like this mechanic here. This is um, This is clever Okay, the page with the biggest title is biggest title, uh About yeah Yeah, about page by one letter. Okay, uh, if you're unable to determine the color visually you can use the dev tool Okay, cool. Cool. Nice um, and the class name skill to generate At the class name skill to generate a list item element on your about page So you can style them Your code should now look like this. Okay, so we have skills Oh class skill got it. Okay, um Where were we? Okay, cool. So this will say class um Also coming from react class nice copying pasteable html feeling it feeling it um, okay Uh skill um, so we add this to our style sheet save that and uh, let's see. What does that do about skills are now green? Your colors are red Uh, visit our about page in your browser again. Okay, cool. Cool. Use your first season We're gonna kind of like speed this up a little bit Uh, because I want to get as far as I can in the next like 50 minutes So the astro style tag can also reference any variables from your format or script using define colon Vars this is new for me Uh directive you can define variables within your code fence Then use them as css variables in the style tag Define skill color variable by adding it to the front matter script Like this Okay Again, okay, so now we're in front matter again Is it called front matter? This is I'm I I have perplexedness Um about what to call these things now Okay, const skill color navy Okay, now In here so update your existing style tag below to first To first define then use the skill color variable inside the curly braces. Okay, so We're defining Skill color. I'm actually going to type this out define colon vars skill color. No, I'm not going to type it lol Okay, so that's gonna go here. Okay define vars skill color. Okay, so I'm assuming This is an object And we're using whatever that I can't remember what it's called But like where we're putting the key and then it's gonna also put the value. So this is like equivalent to like Navy now I might actually try to actually let me override that Just out of curiosity. So I'm gonna say skill color pink um And not do that And now use var skill color. Okay Var skill color Okay, cool. So I did change those to pink Because we're not using the variable. So then it's going to use this. I can never remember the name of that but um Because we're using this Property and it's an object is going to use the key and the value. Um, so change it to navy. Perfect. Okay, cool That matches my expectations. Um, this is interesting. So define vars um Fascinating Okay, cool. So we learned about define vars Uh, cool. Cool. Try it out yourself define css variables update the style tag Um, okay, I'm probably not gonna do that right now Uh We definitely get it. It is interesting. That's quite a few steps I mean, I guess we could probably have this exist in this like javascript scope somewhere and just like define bars from a much Like from an object that's imported. So, um, that might be a way in which I end up using it. Um Okay, uh, I don't need missing. Okay. Cool. Cool. Show me the code. Uh, okay. Cool. Cool. Uh, yes. Okay next And with each section see if there's any questions um Okay Honestly ben every time I see purple I think of you you've fully co-opted purple in my brain It's all right. I mean like I am I am fully in the uh, the the ben meyers purple camp. Um They are they are a a triple equals Okay, um Add a global style sheet If you've seen the astro style tag is scoped by default meaning that it only affects the elements Uh in its own file actually Been meaning to oh my gosh. Why does it keep doing that? Um Astro one cool thing about astro is this like dev mode thing where it gives you this whole control panel Where you can screenshot and like inspect stuff big fan of that in astro um So I wanted to see how this actually is scoping them I think everybody uses different approaches to scoping these. Um, and so this is using Good gracious So, uh, we're using h1 Where um, and then it's having some kind of like generated, uh selector for this page It looks like so, uh, I was curious. So can I use dot com? I'm gonna look for oh not like that where Okay, so This is something to be aware of if you are um, you know Trying to make a site that you want to Be used for a number of um, like for for all of the browsers This where selector does not work in internet explorer any version of internet explorer Um, so we have like about a 90 percent Yeah 90 percent on That selector compatibility. So I guess just be aware of that. Um and Yeah, I mean I don't see it just problematic. I mean It just you know something to know Um cool cool cool. I mean I think the only downside is that theoretically you could get into a position where you have no idea what the heck's gonna render because you know these styles will Not be scoped. I don't actually know how that fails. Um, maybe just none of them get applied Actually, that makes sense like probably none of them would get applied inside of like an older browser So it is cool though to see that being done, uh, literally just with csf um Yeah Okay, csf css Uh, so add global style sheets. Okay, cool. So now We're gonna create a styles files um source Um, new file. What was it styles slash global dot global l dot css I think it was yeah styles global css and grab this Here css and paste it Um, do we get an automatic refresh on that css page? Um, well, we're not linking it. So definitely not Interesting. Okay. Cool. So we're gonna import this not through, uh, html linking, but Via the astro file um, interesting, so You can import that now it does change does automatically because we're importing it on the javascript side. I assume um Now this is only going to apply to Yeah, it's still only going to apply to this page because this is the only template that we're applying it to um About page and you should see the new styles applied Okay, interesting. Uh, okay, again skipping this not because it's not important But because you know, we don't have a lot of time um Okay, so where are we now? Okay, uh, where are we going? Okay in this next unit? Uh, navigate a um navigate Navigation component that uh presents a menu. Okay photo component. Okay, so we're going to be going through um Kind of components. Okay, again, we're going to be going fast through this stuff So, uh, create a new source components folder. Okay, so this seems like pretty standard fair Um that we're gonna have and I kind of ranted on this a little bit earlier um Not a huge fan of like different directories. Oh, oh my gosh not. Oh Oh, not a huge fan of what i'm doing right now. Um New folder good gracious, uh new folder components Um, okay, so we have a components folder and then this is going to hold certain components. Um I don't love that I have to put them in a separate part of the file system a little bit of a bother to me But it is it is what it is. I'm fine with it For now, so we're going to do a navigation astro. They have an uppercase I am Very much opposed to uppercasing file system names I've been bit by that a number of times So, uh, i'm going to do a lowercase navigation astro um We're going to put our front matter code fences in i'm just going to call it both things because I don't know what to call it So front matter code fences it is. Um Okay import and use navigation dot astro. Okay, so we're going to Actually, i'm gonna do that because we already have those so let's go to index.js. Let's Uh go home first so we can actually see it all kind of pop into place Uh, we will import That'll be at the top import that component And this file doesn't exist so it's got to be a lowercase and That should work. Why is it navigation is declared never okay never used So I assume we're going to put this here now Navigation I apologize if you hear the Roomba doing its thing over there. Um, okay, cool So the navigation popped in super fast again this like this reloading thing is like gnar's bars fast Um, okay, cool. We did that great. Uh, okay Do I want to do the test? Okay. Yeah, let's do it You can do this when you have elements repeated on multiple pages restart the dev server refactor to use reusable components make a new Factor astro components are reusable fragments of html Both of the above yes Uh astro components will automatically create a new page on your site when you Include html refactor put the astro file. Uh, yes, okay, cool. Um checklist good to go. Okay, so do we um I'm just checking things off that I didn't read Create a footer. Okay, so let's get into a footer So we're going to make a new uh, so this would be footer dot astro new file footer dot astro now I feel like I don't know. I feel like we've kind of lost the thread here like in terms of Like learner journey Uh, where now we're just doing like not particularly bloggy stuff uh I kind of want to go more into the I don't know The stuff that pertains to a blog I guess um So I might just kind of like fast forward through a lot of this stuff. Um, so Footer like this actually wait if I auto complete that. Yeah, there we go That'll put that up there for me. Um, so Now we have footer so learn more about projects on github. Okay, cool. So did ourself code check-in So I like this. Um, yeah code check-in like kind of these Like if you broke it on accident, um, here's what the code should look like Uh pretty cool Okay, now, why is it still yelling about those? So I did use those already included file name Only in casing Why is that error still there though? I changed the weird Huh included file name Huh, I'll have to look into that Unless you know Okay, oh Ben's Ben's saying something to me Yes, kebab kebab case file names all the way. Yep 100% Uh, I also like kebab Because I like food Uh, that's said I think astro might expect Pascal case. Ah, that's so odd I don't like it Oh Um Man I don't know about that Uh, it is mad about that Not a fan Not a fan. Let's uh, let's see if this goes away Um, I am not a fan of that This style of kind of style enforcement Um Again That's about me. That's a thing about me Um interesting It's still mad already included file name Differs from file name Only in casing What did I but I changed it though This is this is perplexing. I don't I don't I don't know I'll come back to that Uh, this is yeah, that's a super odd. I'm not sure why it's why it's bugging me about that. Um, okay So create a social media component. Okay. I Do we want to do that? I mean like I guess it is. Nah, let's not do that Uh, so I just see one thing that's kind of a bummer about certain like about tutorials is like you never know like what you can get away with Like not doing Um, and what's going to be like gonna get built on Later down the road. So this is always kind of like like a bummer like can I skip this and move on to the next section? um Okay, so this is I mean it's kind of uh I'm gonna leave it Off so we know that we skipped ahead and didn't actually like do that. Okay, so let's look at these sections. So create social media Social media Build it yourself header try yourself try yourself Add responsive styles Okay, um Send your first script to the browser Okay, all this stuff is cool but not Really what I'm after I want to get more bloggy type stuff. Okay Check in unit four. Okay, so what are we going to do create usable layout components pass content to our layouts with slot Um pass down the markdown four matters. Okay, so this stuff I do feel is important to us. Let's see check in create a blog post archive generate tag Okay, I would like to get to this stuff and we have about like 35. I have about 35 minutes left um Build your first astro island Back on dry land Okay, that's funny. Uh take your blog from day to night. No island required. Okay. Uh, let's see Yeah, let's build a layout component Let's do this. Okay, so All right, ben Thanks for being here. Good to see you always. Thanks for being here. Uh, I'll see you later in lunch dev Um, so enjoy the rest of the stream. Yes. Thank you. Thank you. Thank you. Okay, so, uh, we're gonna go So build your first layout. Okay, so we're gonna do this um So create a new file the location source layouts base layout dot astro. So We'll go to source new file layouts base layout dot astro Okay, we're gonna grab all of this. I'm just gonna read through it real quick Even though I know that it will probably get described to me momentarily. Um, so we're gonna import Okay, and so this is the thing I didn't create um A header file. So I did kind of screw myself there. So we're gonna take that out for now. Um We're just going way off the rails, but this is exploratory. I just want to learn the concepts. Okay, so, uh footer from a Okay, so we got that We have our styles. Yes. Yes. Yes. Yes. Yes icon Uh favicon got that title page title. Yes, perfect. Okay Now we're importing the scripts menu j s which seems like it was probably added Elsewhere See we can get away without it for now Okay, so Now in our index astro file, we're going to import it And use it So we can get rid of all this Import improt um Layouts base layout astro Save that and get rid of those Base layout Slot like that Okay, and so then we have a subtitle there Kind of because the title is going to get shown from the base layout import base layout from Now what error are we getting cannot read property of null reading default? Okay. Was it not exported as a default? Base layout. Maybe I didn't export it. Do I need to export it? Um html. Okay, so this should Should export default, right? Usually out in page import base layout from Replace the code source pages index astro with the following Okay, so add the slot element. Okay, so this No, okay slot. That's not in this one. That's in the other one. Okay. That's probably what it is. Yep. There we go My bad Okay, okay. So now we should see that h2 come in where that slot is. Yes, perfect. And so like if I move this around Uh, that will wherever I put it. That's where the stuff that's getting Insert in there will work. It's interesting. So React this is children and you kind of use it as like a very as a prop um, so it's interesting to have like a first class component for this type of um thing Okay, cool. So we have this so pass page specific values as props Okay, so pass the page title to your layout component from the index dot astro From index dot astro using an attribute Okay Okay, so we're going to delete this then right Okay page title is not defined and here we'll say page title is um Actually, we have a variable for that so we can say page title, right? Yes Now it looks like we're probably able to change this to be props. I guess They called it props. I wonder if that's The way it works in astro page title Astro props. Ah astro props. Okay, so Uh, so let's undo that Let page title equal astro dot props Okay Okay, cool. That's interesting Actually, I really like that. Um Yeah, I do like that. It's pretty clever actually um Especially because we have this whole template in here. We're able to use it everywhere Um, so I'm able to put it as like able to use it like so place it in front matter in the case of you know, like a markdown file But then have it affect this whole um Layout without having to do any kind of cleverness Around you know, like loading the head later Um and whatnot. So that's pretty cool Um, okay, so try yourself. Okay, so we did this I am going to skip these for now Um, okay, so can I create an astro layout component with a slot? Yes, so I can do both of these spend page specific values I appreciate that example that example is actually very nice and concise um See, where are we now? I have takes on islands. Let's chat after. Yes, uh same Um I'm sure we can find someone to describe islands to us Um Okay, cool. Uh, this is the part of the street where I just started laughing hysterically at myself and um, yeah Let's do that So when uh, you include a layout formatter property in an md file all your front matter YAML values are available to that layout file. Okay cool So they'll be available on front matter astro props Very cool I was following front matter property in post one Okay, so in post one, so let's go there so we can actually see this Take place so post post one um Okay, open post one and we're going to add a layout File uh could not import. Okay. So what did I do? Add layout. Okay. This is a new one mark Markdown post layout. Okay. So let's do this Uh new file mark down post layout dot astro Uh, I assume we'll get something to copy and paste here. No Oh right here. Duh Okay, um Okay, uh Okay, cool. So my first post so now I can get rid of this and just Did that slot so you can see the oh wait, no This I want to stay the same um But what I want is to remove That from post one where it's duplicated Okay, cool. Now if we go to post two, uh, that's not going to show so we're going to have a marked uh use our markdown post Uh layout that we had here post two um There we go and then do the same thing to post three Um now this is actually an area where I'd be curious to see So this is something that I think is really great about 11 t is that it has these data files so Instead of having to put this on every single one of these I can just create a json file inside of this post directory and kind of put some of the shared stuff So that is a question that I have Um is like are there data files that I can take advantage of? um So let's carry on maybe maybe we'll get there. Okay, so we got that Okay, test your knowledge um Published great knowledge. Can you figure out what should go here in the blanks? Okay? I saw that I was like super confused as to like this bizarre underscore syntax was Um, but it's just a test. Okay. So combine layouts to get the best of both worlds. So nest your two layouts um Okay Okay, got it. So I'm going to import. So this is the markdown Post layout Markdown post layout which we will be importing Interesting, why did that? Is that yaml? No, oh, I was just I I didn't paste I Did a p of mp. Okay. So we're gonna do that. We're going to wrap this base layout like that Oh Okay, so now we have Wrapped that in our base layout super nifty. Um, let's see Main page layout. Yep. Okay. Notice that your page title is now displayed twice. Okay. I think I fixed that um Or maybe I didn't post One Maybe I did yeah base layout It should be showing twice, but it doesn't look like it my first Because we have it here front matter. Oh because This one doesn't use the Right, so if I did it like they were saying I should do it which would be Page title equals front matter title Then we will see it twice and then I can delete it from here. Perfect. Okay Got it got it. Good um Okay, cool. Got that. Good. Good. Good. Good. Good Um, let's see what's next. So this is unit five astro apis. Okay, so I think this is where we get into the globs And static paths Yes globs and static paths Okay Okay, uh, so let's dive into this. Let's see what we have next So access data from all your posts at once using astro glob Display dynamically generated a list of posts on your blog page refactoring to use blog post um component each For each list item. Okay, so dynamic display a list of Dynamically display a list of posts at the following code blog dot astro to return Okay, so we're gonna open blog dot astro Okay, time to close up some stuff too much stuff happening. So blog dot astro. What do we have here? So, uh, we're going to do all posts And all posts is going to look like this. So const all posts equals weight astro dot blog And then it's going to grab all the markdown files inside of pages post, uh Yes blog Okay, cool. So we're going to get so that's all posts pages post start dot md. Okay Grabbing all those things. Um Okay, so now we're going to add this all posts. This is going to be a little map over here. So unordered lists Um all posts stop map post list item um Post url. So that's kind of a special field and then front matter title So these front matter things are all things that we own and then the url is like a special thing that you get from Uh astro, I guess Okay, so we have all those now Very cool Everything looks copacetic Um, so we did that. So we have the okay. So honestly, this is I love this api the uh astro glob api like like that I can just like get all that stuff from the file system like this is Really easy like the easiest I've seen um being able to do this stuff. So really I mean props on that Because that's really handy um Okay, so add new blog page by creating a new post for file Um, okay, so I think this is just to illustrate how all this stuff is dynamic now So new file post four dot md piece that in And now we have a post for very lovely um challenge create A blog post component not going to do that right now, but um, I can see how it would work. So blog posts You're all post title. Okay Cool. Cool. Uh, now let's get into static paths. I think yes. Okay. So uh, you can create entire sets of pages dynamically using dot astro files that export a Get static paths function. So create pages dynamically create a new file at source page tags tag Astro you will have to create a new folder notice that the file Tag astro uses square brackets paste the following code. Okay, cool. So this is going to be square back brackets tag astro um new file tag Dot astro. So the cool thing about this um, this is I think a fairly known file system convention at this point where Uh, if you put in square brackets, then that gets used as a I think to use next language. It's like a dynamic segment which comes in as a prop basically so Astro or params so astro params We can take tag off of that and the url is going to act as that value. So um So get static paths and then I guess we're These are the ones that we're supporting. Let's kind of see how that that works. So save that we're gonna hit a tag Let's go astro first. Okay. No, did I not do this right? Uh tags. Oh, right a new file No new directory new folder tags And then this tag goes in there move. Yes Now we should be able to go tags tag astro No, still not right Pages tags tag dot astro pages Tags tag dot astro Okay, so we pull out Two directories To get the layout Yep Okay, so why why no like Oh, duh. Oh my word. What am I doing? What am I doing? Okay, cool. So we have astro post tags with astro. Okay, so we know that we support That the static paths Um, what happens if we do something else? Okay, so we don't Don't support that. Okay, cool. Well so, uh What does it say about that? So the get static paths function returns an array of page routes and all of the pages at those routes We'll use the same template defined in the file Okay, so we just have to define all of the routes Okay, make sense If you have cuss if you have customized your blog post Then replace the individual tag values e g astro success community, etc. The tags used in your markdown Um, okay, make sure so it's not It's not dynamic. I have to use get static paths To set it up Which is fine Um Okay, cool Make sure every blog post contains at least one tag written as an array. Okay, so that's interesting. So if it's empty Okay, um, so Let's see did I have now this is just setting up the page so it doesn't actually grab the content right? Yes, okay um Okay, check that you also have pages created for each of your tags tag success tag community Learning public etc or at each of your custom tags. Okay Use props in dynamic segment segment dynamic routes The following props to your get static paths function in order to make data from all your blog posts available to each Page route be sure to give each route an array The new props then make those props available to your component templates outside of your function Um, okay. So what do we have so base template get segment? Okay interesting So what does this do for me? Oh, right. It's gonna this is how we actually get all the posts. Okay So let's do this So get static paths. So this is an async function. We're gonna add that Which is again going to get all of our posts And then we're gonna run. What is this props? Now it seems important. Yeah, okay. I'm gonna shut up for a second. Okay Um, okay formatting is a little funky Now I need to do all this So in our So filtered posts so post filter each post um by the tags including that tag um Interesting. Okay. So this is going to be I think outside of get static paths, right? Yes Something happened here Yes, okay, so this will be outside of get static paths because static paths is going to like build up all the pages But I think I need to define it beforehand um Okay That goes there And then I think filter post goes down here. There's a little bit of like mental gymnastics here Which is kind of weird So important layout where we have this async function that's going to do get static paths But then all this stuff happens down here But then it's referenced above it because this function is being it's like in a different life cycle. I think Fascinating But then these are going to be used for the template down below Interesting Okay, cool. So that worked So you can even refactor this to use blog post component instead. Yes, okay We didn't create that component, but um, we know how to do it. So, uh Check that all the blog posts contain tags. Okay, so what was it? There was success No, there is I don't know if this is going to work in public We'll put the no What is that percent 20? Okay. Let me just look at these Um successes got successes K community Unity Okay, got it. Okay. So that works. It's filtering those properly. Very nice. Um See, you know having a very unique tags with element astro success community blog Now this is actually like so so when I've been thinking about um When I've been thinking about kind of switching away from 11 d in my favorite feature being that or not one of my Now my favorite feature but a feature that I use being that like next and previous I have started to think that this would be A better substitute for that where I'm actually filtering things based on similar tags and suggesting additional articles that um are related In concept. Um, that doesn't work for the progressive stuff I mean honestly like this thing that we're doing right here But I think that there may be other ways that I can get around that. So um, anyway This is helpful to see because I want to I wanted to know today how to do that tagging thing Um, okay, so let's see Where are we right now? So create an array of who create an array of all of your existing tags at the following code to provide you a list um So we have all posts Okay, so let's just follow this see where it goes um Okay, I have the following codes to provide you with a list of every tag used in your blog posts You guys wanted to do a map Filter tag flat, okay so Why would this be happening and get static paths though? Oh, because we want to add it as a prop Yeah Okay, so replace the return value with get static paths function. Okay, cool. So this is neat I gotcha. So now that we have the unique tags We can do this dynamically which was going to be my question Which my which I shut myself up about because I figured that it would get answered at some point without me Having to do much exploration and I'm glad that I did because I would have you know wasted a lot of time So this is going to take the uh filtered post Which is here Still confuses me um Does this work? This is so bizarre to me this this thing Um, so we have an async function. Yeah, and so then I guess yeah, it's going to be able to use filtered posts um Okay, cool. So let's do that. So then theoretically, I think what we're learning through this is that all of these pages still work um Because the things that we don't have posts for uh will not work um So cool. Let's see astro. Okay, cool. Cool Good to know. Good to know. Um, you need tags We can take out so I guess that path function should always return a list of objects containing params What to call each uh page rod and optionally any props data that you will pass along to the page earlier Uh, you define each tag name that you knew was used in your blog post and based on the entire list of posts as As props to each page now you generate this list of objects automatically using your unique tags array to define each parameter And now the list of all blog posts is filtered before It is sent to each page as props be sure to remove the previous line of code Filtering the posts and update your html template to use posts instead of filtered posts Okay, so I think it's saying that we can get rid of this um So filtered posts Okay, so we're defining filtered posts. That's why okay, so we're defining filter posts there and then this is just going to be posts Man clever Clever Okay I buy it sick Nice Okay, final code sample. Okay. Um, I think we have all this in place but just to be you know I love this. I actually I I like this whole like, you know, final code sample catch up business um Except I broke something. What did I do? What did I do? Oh, I don't have a blog post Is why that's right. So this is just a A It's confused about posts though. There should be posts there Hmm delete There we go Okay, cool. Let's see eight minutes. Can we do one more section eight minutes? Maybe Okay, what do we have? Okay. Yeah, no no questions comments Uh, if you're here Sound off if not It was nice having you here while you were here. You won't hear this because you're not here anymore Okay, build a tag index page use the folder index astro routing pattern Try yourself make a tag index page Okay, I'm not super concerned about this Like the snippet here with the set that's pretty cool um Okay that get it Get it get it Um, let's see if we get into so Okay, cool. Yes. This is where I wanted to this is where I wanted to get um Okay, so add an rss feed Um, so this is something that I was very curious about now It might depend on some of the other things but we'll backtrack into those if they are necessary So, uh, we're going to kill this and we're going to run npm install At astro j s r s s. So this is going to add one of those astro plugins for us Restart the dev server which we had by killing it Um, and then run npm run dev again Okay, so create an xml feed. So create a new file source pages slash rss xml so pages source new file rss.xml. Okay, we got that um And then we will paste in this So import rss from astro. So that's the library that we just created The library that we just imported um export const yet Uh, so we're going to say rss. So astro learner blog description my journey learning astro site each dps okay, um We'll just leave all that stuff for now even though it will be customizable so import So import metaglops. So this is a different import syntax, which is interesting And we're going to import all of the x all of the md files um, and then the language is English us Now let's see if that works for us rss.xml Okay, no pages rss.xml. Okay, so there should be pages rss.xml Now does this need to be an astro file xml.js. There we go. That's the problem Dot j s. Okay, cool. So now now we should have it. Yes. Okay, cool. There we go So this xml file. Okay, so we have all four Of our blog posts. Um, they don't have any content um Interesting. Okay, let's continue. Let's continue. See what we learn. So yes, we visit that we see Be sure to quit the preview and restart devs. Okay um, okay So is it just going to be like a link list or is there a way to add the content? So let's find that package. So what is it? It's the astro mpm j s astro at astro rss. Is that right? Okay, so what do we have? Astro rss we're going to import that title description site import. Okay. Yep. We've got all that site drafts true so we can customize some of that custom data style sheet Links title pub date description content content Okay, okay, so content so full content of the item should be valid html. Okay, so Kind of skips over how we can include the content Um Interesting which is kind of a big question mark for me. Um So let's see in our markdown post. We have a slot and so then the markdown just works there Hmm. Okay Uh, let's see. So astro blog, let's see if we can find the Let's see if we can find the astro blog. Oh, man. I got two two minutes um Astro blog starter. Let's see if we can find that on github No astro themes Uh themes blog, uh, where was it? It was down So this is the one Get started Yes, okay. Cool. So let's go into source pages rss xml j s does this have content? It does not have content Hmm Okay, well I mean, I guess that's as good a place as and to end as any Uh, because that is a big a big question mark I'll have to do some more research and then like come back to that. So we'll see. Um, okay So, yes, uh, thank you so much for hanging out with me and uh, kind of learning a little bit more about astro I learned a ton of stuff in this uh in this time. Um I'm I was really actually excited to see how the tags worked and I was there was a little bit of confusion for me in How to make that work with static paths, but I do appreciate that There's a very clear example now that I could follow on my own stuff. Um, I am concerned about this RSS thing and I'm not having a clear example on how to get content out there because I do want the content to come along with the RSS feed and not just like a bunch of links So Maybe I'm misreading something, but I'm not seeing that in the thing So, um, yes, maybe we've thank you so much for being here Uh, I I appreciate you being here if you have any information for me on like how to like kind of follow up on the content thing I appreciate it. Um, but yeah, I'll probably dig into that. Uh, next time So, yeah, uh, hey, thanks for hanging out. Uh, if you want to meet some cool people, uh, check out the lunch dev discord That's discord.gg slash lunch dev You can follow me on twitter at chaintastic and um, or you know, subscribe like this video Uh, if you or this live stream if you want to see more videos about this kind of stuff from me That's it. I'll see you in the next one. Bye Now I just gotta find that stupid button that actually ends this thing. Um Might be a minute could very well be a minute All right, I found it by Okay