12.3 A blog post page - Video Tutorials & Practice Problems

<v Michael>All right, we've got our blog index working now</v> and all we've got left in terms of the main part of the blog is to get these posts working. We'll add a couple other bits of polish as well, but for now we've got a link that is very tempting to click on, but oops, it doesn't look very pretty at all. Why isn't this link working? <v Lee>It's that G problem, I think.</v> The source member, there was like a, a letter that was in there. <v Michael>Yeah.</v> <v Lee>Title of post.</v> <v Michael>Okay, yeah,</v> it looks like we're missing something. <v Lee>It looks like they must have changed</v> their URL structure. <v Michael>They might have changed it, yeah.</v> <v Lee>Oh, good to know.</v> We should do it for the other post as well 'cause you're on the other post. <v Michael>Oh, you're right.</v> (Lee laughing) That explains why it didn't work when I refreshed. Okay, let's do this. Ah, there we go. All right, so this kitten is now working, which is, this is really the most important thing in web design, is having a kitten image on your page. All right, and this is the square image from the bio boxes, but let's use a slightly different place kitten image here. Let's just use the 400 by 200 one. Just to mix it up a little bit for our layout. There we go. All right, well, it's working now, but it doesn't look very good. And so what's the best place to start here Lee? <v Lee>Well, the problem is,</v> is that we don't have a post layout. So if you'll remember, we can put layouts and layouts, and right at the top, you see that we're defining a post as being, needed to be built on a post layout. So what we're gonna do is create a new layout called post, and that layout will then be built into default. <v Michael>Okay.</v> <v Lee>And so the reason that you would wanna do this,</v> is that, we have this dynamic content, the different blog posts, and rather than have, each of these blog posts have all the HTML around them, we want a reusable bit of code that can build into other stuff. That'll be the container for these blog posts. <v Michael>Okay.</v> Now, I'm actually kinda impressed that it worked. If we look at the error messages, it'll probably tell us, yeah, it's looking for the post. We saw this before, but it's looking for the post layout. But what it's doing is just building this thing as HTML, and just dumping it into this file. You can see the URL here. So what we need to do is look at our layouts directory. So right now we've got the default layout, just here. And what we're gonna do, is make another layout for posts. So I can do that here. And there's quite a bit here, we're just gonna copy and paste it from the text here. Okay. You can save that. And let's look through it before we actually, click over and refresh just to, make sure we understand things. So this is interesting that we we've got layout default so that means we're basically reusing the default layout. <v Lee>Right.</v> So, you can have a layout that isn't a full HTML page. <v Michael>Right. Notice we don't have the doc type,</v> or the HTML tag or the body tag, this is just gonna be inside. <v Lee>Exactly.</v> So this will get built into that content variable that's on default at HTML, but it also has its own content variable. <v Michael>Oh, I see, yeah.</v> <v Lee>That's gonna be where the post gets put.</v> <v Michael>Oh, so this is the content of the post.</v> So there's this context dependence. So, right in here, this content is the full content of the page, this is just the content of the individual post. And the reason that Jackal knows about that is because we say layout post right here, is that right? <v Lee>Right.</v> <v Michael>So this is the content for one post.</v> <v Lee>Exactly.</v> <v Michael>Got it.</v> And so that's why we can reuse all of these variables from the front matter, post hero, page.title. Oh, so page.title. So it looks like page is automatically granted us by Jackal, is that right? <v ->That's correct.</v> <v Michael>It automatically creates a page variable.</v> Okay, so before, we were doing post.things, I think-- <v Lee>Right so--</v> <v Michael>The post variable came from this loop</v> and that was up to us. We could have named this anything we showed how you could actually call it Fu or anything else you want to, that's a valid name, but here, we're actually using the word page and that's something that comes right out of Jackal. <v Lee>No, actually, interestingly on our blog index,</v> which I believe was this, if we had some other information in here. <v Michael>Yeah.</v> <v Lee>That could actually be accessed.</v> <v ->Page.title. Got it.</v> <v ->Page.title.</v> <v Lee>So page just is a reference</v> to the actual page that you're on right now and so it's looking for variables that are related to the page and not from a loop or something like that. <v Michael>Great. So let's, this is our post.</v> So let's just go down it, we've got an article tag. Is that, what is, I don't think we've seen that before. <v Lee>So, article is another semantic HTML element</v> and the idea behind its creation was to provide an HTML element that would wrap content that is kind of standalone. So if you imagine like an article or a blog post, it's meant to be consumed as like one big thing. So, this is what you would use it for. <v Michael>Okay.</v> And we've still got an aside here. <v Lee>So an aside is just another semantic one</v> for information that's on the side of something like an article. So, either ancillary information, or it could even be like we're using it right here, for related content. So, in this case, we have a blog post, and content that's related to our blog post might be other blog posts. <v Michael>Cool. All right.</v> And then we've got our content, with post content. So we've just got classes on everything. We'll silo it up in a second and then the footer. Just for the post. So let's take a look at what this does. Ah huh. Now I see, so recent post, this is the recent post. Clearly we need this somewhere like over on the right. <v Lee>Yeah, so that's using the same styles as before so,</v> we already made that for the blog index page so we're just reusing that little snippet of code. <v Michael>Okay.</v> So now we've got our content here for this post and all we need to do is add some CSS to make it look good. So where is, this is blog styles. We have blog styles, here it is. Right at the bottom of the file. Okay, so what are the styles we're gonna add to this? <v Lee>We're gonna start off adding,</v> width 100% here. <v Michael>Okay.</v> <v Lee>So this goes back to the fact that</v> this is contained within a display flex. So this is just a nice way to force it, to take up the full width of the container. We could set it to flex one, or something like that, but you know, then there might be other problems. Simple, width 100%, now it's the full width. <v Michael>Okay.</v> <v Lee>And then we're gonna target the content</v> and the footer that are in the post. So, we're gonna style the post content and post footer, and we're gonna do something similar to what we did on the blog index, where we're gonna set margin auto, and we're gonna set a max width and a width for it. So the max width for this post content and the post footer is gonna be 40M, reason being for this, that it's a kind of nice size for text content, to have that width. And then we're gonna also set this view width so that if it's smaller, it'll shrink, but it won't be the full size of the window, so that we don't get the content bumping into the edges of the screen. <v Michael>Okay.</v> <v Lee>If that makes sense.</v> Now look at that. <v Michael>Oh yeah.</v> Yeah, and this is important with text, right? You don't want it to be too wide. <v Lee>Yeah, you don't want too many words</v> or too many characters per line. It starts to get really difficult to read if you do that. <v Michael>Okay, it looks like the next rule</v> that we're dealing with is this pull left which is-- <v Lee>Yeah, so we have these images that are on the page.</v> So we have a pull left and a pull right. It's kinda nice to just add these in there. These will be like, think of them like our blog post image styling. If you throw an image on there, you don't really always want it right in the center of the content. Sometimes it's nice to have it to the left and have the text wrap around it or to the right just to have some variety in the way that you're showing images. <v Michael>Yeah.</v> <v Lee>So we're floating it left</v> and we're adding a margin around it so that it's separated from the text and then we're gonna float it right and do the opposite margin. <v Michael>Right, so this is, this is left, right?</v> So top, right, bottom left. So just a little bit of a margin. <v Lee>So that little bit of a negative margin</v> is actually pulling it outside of the text a little bit. <v Michael>Right.</v> <v Lee>Just to give it kind of,</v> I don't know, a little flare to it. It's a look that you see on like magazine layouts. <v Michael>Yeah.</v> Yeah there it goes. It's out there just a little bit and then we can make one, do we have to use pull right? <v Lee>No, but we can add it just for fun.</v> <v Michael>We're just gonna,</v> yeah, we're gonna do it like for symmetry and then we'll just do it right now. So float right. And this is top, right. This should be, is this negative 2%? <v Lee>Yeah, negative 2%.</v> <v Michael>Same thing.</v> 'Cause it's pulling it right, and this is gonna be 2M. Yeah, so basically we're just swapping the, the left and right margins here. And oh yeah, we'll just give it, which post is this? This is the probably 04, yeah. Okay, so we can do that and do pull right. <v Lee>Look at that.</v> <v Michael>Here it goes. Yeah.</v> <v Lee>Just nice way to break up the layout of the text.</v> <v Michael>Yeah, that's cool.</v> <v Lee>And then we're gonna give,</v> our post aside a little styling, and we're gonna also float that. We're gonna float it over to the right hand side of the page and we're also gonna give it a-- <v Michael>So post aside.</v> <v Lee>Yeah, we're gonna give it a background color</v> so that it stands out just a little bit. And here we're gonna use RGBA. Theoretically we could just use a super, super, light gray or anything else. <v Michael>I can tell</v> that you really like these RGBAs though. <v Lee>Sometimes it's just,</v> it's a nice way to pick a gray that you know is gonna be really light gray, rather than go back and forth with finding one. And also, since it's not actually a solid color, if at some point you did wanna put like a background behind this, it would fit in a little nicer, although then it might be difficult to read. There's always trade offs with everything. <v Michael>Yep. I was thinking that it's like,</v> these are trade offs. <v Lee>Yeah, so we're doing the same thing.</v> It's got no top margin, no right margin, but a bottom and left. So that'll push the text away from it. And we're also adding a little bit of padding to it, so that the text inside is not touching the walls of the post aside. <v Michael>See how that works.</v> <v Lee>That'll pop over there,</v> and now we've got a little call out thing. <v Michael>Where is that--</v> <v Lee>It's super, super light.</v> <v Michael>I just wanna see it.</v> <v Lee>Yeah if you make it, there you go.</v> <v Michael>Oh.</v> Oh, look at that. It's yeah. Oh, I do see it though. It's funny now that I know what it is supposed to look like it's quite subtle that-- <v Lee>Yeah, different screens will have--</v> <v Michael>It's definitely there.</v> <v Lee>Will show that more or less.</v> <v Michael>Yeah.</v> <v Lee>So, you know, that's one of those things</v> that you can tweak more, when you see it on different screens but. I think when I originally made it I had a screen that showed that a little bit darker. <v Michael>Yeah.</v> <v Lee>So let's also then deal with the post header.</v> We're gonna target it inside the post. <v Michael>Okay, why is that?</v> <v Lee>Just to make sure that if we want to use post header</v> somewhere else, you know, we're not affecting those styles. <v Michael>Okay.</v> <v Lee>Because we actually do use the same post header</v> in the little blurb for each post that's on the post index. <v Michael>Okay.</v> <v Lee>So this way we're being very careful.</v> <v Michael>So margin bottom,</v> and then we will align it center. (Michael mumbles) <v Lee>So that'll center it,</v> and also move it away from the content. <v Michael>That's nice.</v> <v Lee>That's starting to look a lot nicer.</v> <v Michael>And then the post content,</v> that's this here. <v Lee>Yeah, we're gonna bump up the font size</v> just a little bit. <v Michael>In here.</v> Just marching our way down. <v Lee>On other pages where you have a lot of content,</v> and repeated content, but you're not really diving in and like reading something in depth, it's okay to have slightly smaller font. But when you get to something where it's like the end goal of being on this page is to read the content, it's kind of nice to bump up the size for people so it's a little easier to read. <v Michael>Yeah, all right.</v> So, it's gonna be a, we've got 1.1 REM. <v Lee>Yeah.</v> So we're gonna tie it to the overall HTML size. <v Michael>Ah, yeah, that's nice.</v> Okay. <v Lee>And then we're gonna deal with the post footer.</v> <v Michael>Okay, which is.</v> <v Lee>This little thing at the bottom.</v> <v Michael>This here.</v> <v Lee>So.</v> <v Michael>So anything I post, it's got a footer class,</v> or sorry, a footer tag, but remember we're gonna target the class rather than the HTML element just for safety's sake in case any browsers don't support it. Okay, post footer and then we've got a, we'll just put down the styles. <v Lee>Yeah, we're gonna do the same sort of thing we did</v> separating the posts on the blog index page where we're gonna have a little border at the top, but we're gonna use a solid one here. We're gonna make the fonts italic and then we're gonna do a margin and padding. Although we're gonna do unequal margin and padding, 'cause we're doing this just a little different. 2M. <v Michael>Two, 2M.</v> I see. You've got the visual separation there and then I notice you've also got a font style. <v Lee>Yeah.</v> <v Michael>Just a little bit of difference</v> between the body text and the footer. <v Lee>Okay.</v> <v Michael>And this is the kind of thing</v> that you could probably leave off the footer sometimes. 'Cause I guess it's, yeah. So it's the kind of thing that you could easily leave it off if you wanted to. <v Lee>Right.</v> But there are also times where you wanna have some ancillary information as to like where to find an author's other works or something like that. <v Michael>You see this on like podcast</v> where they have show notes or something like that. <v Lee>Exactly. Exactly.</v> <v Michael>Okay.</v> Okay, and there's one more thing you wanted to do. <v Lee>Yeah, we'll set the font size</v> for the post footer to 0.08M, so that it's just a little bit smaller than the body copy 'cause we don't want it to, you know, overwhelm and distract. I see, there we go. And it also brings the sides in too. Just kind of resizes the whole section. And the reason for that is that we sized it, using a max width of 40M. So when we changed the size of the font, it actually changes the size of the footer too. <v Michael>Got it.</v> All right, this has come together. There's something that's missing though it seems. If we look at the post here, there's a half hero up here at the top width, the page.posthero, which would be a shark image, but it's not appearing on the page. What's going on there? <v Lee>What we need to add a new style.</v> We have our full hero that we added on the homepage, and for our blog post we're gonna have a half hero. <v Michael>Okay.</v> Okay, so hero styles. And we can go to the bottom, right? Just scroll to the bottom of the hero styles and then add a half hero. And I guess we already have that, don't we? We've got, yes, classicals half hero. Got it. And what are the ideas behind these rules? <v Lee>We're gonna background position center center.</v> <v Michael>Remind me what the two things are here.</v> <v Lee>The first one is the X value</v> where the background image is positioned left and right, and the second one is top and bottom. So for the home hero, we did center top. So it centered horizontally, but it was pinned to the top. <v Michael>So where was that?</v> <v Lee>Hero home is the class right here.</v> <v Michael>I got it. I see it.</v> So this is the kind of thing where I would probably just go online and say background position CSS and you know, find a reference page that would tell me that sort of thing if I didn't have Lee around, but eventually, you probably just know that off the top of your head, right? <v Lee>Yeah.</v> <v Michael>Okay.</v> <v Lee>And then, we're also gonna background size it</v> to cover the whole area. <v Michael>Okay, and give it a height.</v> <v Lee>And the reason it's not showing</v> is because it doesn't have a height, it doesn't have a dimension to it. <v Michael>So right now, still on show, but when I do this.</v> <v Lee>As soon as we add a height, it'll be there.</v> <v Michael>So we'll do 40% of the view port height,</v> it's just a decent size. Oh, that looks so much nicer. <v Lee>There we go.</v> <v Michael>Well, it's amazing</v> how big a difference that makes in terms of the presentation of the page. Like this looks so plain. It's like, ah, you know, it's kind of okay. But suddenly with a half hero. <v Lee>I notice it's like it's not fully half,</v> because I reduced it by 10 view height, because our header is 10 high. So I wanted it to be half the page, but half the page minus the 10. <v Michael>Got it. I wondered about that.</v> Okay. So yeah, this is looking a lot better. Yeah, looking good. <v Lee>So try clicking back to the blog index,</v> and click on the first post too. See that it all works, these pages, all, there we go. Yeah, it dynamically builds by loading up that page layout and put our content in there. <v Michael>That's amazing.</v> <v Lee>So, it might be nice though,</v> to not have to force people to go click around to find your newest blog post. So there's actually a little Jackal thing that we can do to put a link to the newest post in the header. <v Michael>Yeah.</v> So here's the nav links, we're just gonna fill out this third one here. And we'll make a link to the newest post, right? <v Lee>Yeah.</v> <v Michael>And now the href,</v> before we've been hard coding them using the directory names, but this is actually pretty slick. There's a way to get the URL. Where was our post? Is it here? <v Lee>It would be the index that would be on the left.</v> <v Michael>Oh, the index will have it.</v> Right, so for each post we have a post.URL. So what we would really like to do is somehow have some liquid in here that has like the most recent post.URL. And there is a way to do this. Remember, from, again, from the index, we've got site.posts, this is all of the posts. This is just a list of all of the posts. And there's a way to pull out just the first one. Remember they're coming out most recent firsts. So if we can pull out the first one of that, it will be the most recent post. So the way to do that is with site.posts.first. So these dots are just separating these different attributes and that might work. Let's take a look. I think it'll work. <v Lee>Pretty sure it'll work.</v> <v Michael>Okay, newest post,</v> and if we click here, it should be the second post. Yep, there it is. Look at that, that actually worked, that's amazing. Okay. By the way, notice that the name of the two posts is the same, 'cause we just copied. So this is title of post.HTML. The other one is the same, but it's in a different sub directory. So, Jackal is automatically building us this is a tree structure as we saw before, based on the date. So that's really nice, that way, it's okay if it has the same name. Although, it's probably not the best practice in general, but it means that if there's a collision it's handled. Okay. So now we've got a link. <v Lee>Well, one more thing that we could do,</v> it might be nice to have info about the most recent post on your homepage. You might want people who go to your site to see like, "Oh, there's a new post and I wanna read that." <v Michael>So we've got these excerpts here,</v> on the index page, on the blog index page. So what we can do is, basically take this same idea for post in site.posts and just limit it to the first one, using the same syntax that we used for the side here, on the index. So if we do limit one, actually let's not do this copy at first. So, where do you wanna put this? Just on the site index or? <v Lee>Yeah, on the homepage.</v> <v Michael>That's here,</v> and we wanna put it inside the home section, is that right? <v Lee>We'll put it in a new wrapper</v> called home section, and it'll be right above the home section that has the stuff about the founders. <v Michael>All right.</v> And let's do that. Let's do an H4, it has the most recent posts. Label. And then, it's then just the same thing, is that right? <v Lee>Yep.</v> So drop in what you pasted there, and we'll limit one. <v Michael>Right. So we can do this,</v> and then say limit, one. <v Lee>You might wanna indent it though.</v> <v Michael>Yeah, I will, just a sec.</v> So this is, this here, we're reusing this idea limit five and here's limit one. Okay, let's see if that worked. Oh, look at that. Most recent post. Looks like that worked, but there's something about this that makes me really unhappy, 'cause like, we just copied and pasted like a whole block of exactly the same text. Like all of this stuff in here, is exactly the same. In fact, let's move it over. So this is the kind of thing that as a programmer, it just drives me crazy I think. What we wanna do is somehow capture that, we are repeating ourselves like crazy. And so, there's a solution we've seen it before, which is to use an include. So what we're gonna do here is use an include to make a post excerpt and then we're just gonna paste this in and then include it and we'll see that we can actually-- <v Lee>And we'll replace it in both places.</v> <v Michael>Yeah, in both places,</v> and so then we can actually see that we'll be able to use an include to replace all of this text and inside of a for loop. So let's take a look at that. So includes, and then we'll call it, say post excerpt, and actually let's just review the other includes or at least one of them. So, remember we've got, well, I guess nav links is a good one, it was already open. So we see here this is the nav links. This is actually something that you may not have noticed 'cause it was so natural, but this is an HTML file, that navlink.HTML but you can see that we actually can use Jackal inside of it. So, we didn't even highlight that, because it just seemed so natural. But in fact this is pretty cool, that we can use Jackal, and in particular, the liquid language inside of this include, so we're gonna do that here too. And I'm just going to grab all of this, and I'm gonna cut it, and paste it in. And so now, we can do our includes in text like this, and the include will automatically know about the post variable. <v Lee>Misspell.</v> <v Michael>Oh X. Well, you know what?</v> Let's see what happens. This is on our blog index. So it kind of silently failed, didn't it? Why did that work? Did I misspell this? <v Lee>Oh, you misspelled that.</v> <v Michael>Oh, that's amazing.</v> I misspelled the file in both places. I was like, wait a minute, that should have broken. <v Lee>Oh, at least your spelling is consistently broken.</v> <v Michael>Yeah, that's hilarious.</v> Okay, well, so let me close this down, and rename it here. So funny. Why is that? Wait a minute. Excerpt. Here we go. Oops, oops, yeah right. I know how to do this seriously. I literally wrote a book on how to do this. I wrote "Learn Enough Command Line To Be Dangerous" so I know, I know how to use the move command. Okay, there we go. Okay. So just to remind you of what that is, that's really funny. So now let's look at the misspelled version and it should break. Yeah. So it served up the previous version, but this is why it's a good idea to look at the Jackal log every once in a while, just to verify that everything's working because sometimes it just fails silently. I mean this failed silently in the browser. So let's do this, excerpt. Now, we can just copy this little piece, and replace all of this, because it's for post in site, I post just the first post, now, it should be the same to that as on the homepage. And there it is. Look at that, it's pretty impressive. All right, this is looking pretty good. All we've got left is to add a few styles on this thing here, this most recent post on the homepage. So let's go back to our CSS file. All right, where's this gonna go Lee? <v Lee>This will go in the homepage section.</v> <v Michael>Right, this is a homepage.</v> <v Lee>I think that's down actually.</v> <v Michael>Oh, is it?</v> <v Lee>Yeah.</v> <v Michael>Ah, yeah.</v> <v Lee>There you go.</v> And so first let's add a style for the H4. So home section H4, can go right after home section H2, Michael, there's already a home section H2. <v Michael>I got it.</v> I'm there. <v Lee>And so we'll add a margin bottom</v> as is to be expected at this point, of half an M, and we'll also align it center. <v Michael>Okay, so it's a text line center.</v> <v Lee>And then right below this,</v> we'll add a new home section post header. <v Michael>Right here?</v> <v Lee>Yeah.</v> <v Michael>Oh, I see now</v> why we scoped the post header by the post before. <v Lee>Right. So we could use this another place--</v> <v Michael>That was here, I just wanna show this post.</v> <v Lee>Yep. And also the blog posts had it scoped as well.</v> <v Michael>So here,</v> the content in the footer we didn't bother because we weren't gonna reuse those, but post header we are reusing. <v Lee>Right. Yeah.</v> It's one of those things where you need to think about, the stuff that's gonna be reused across the site, and make sure that if you wanna target it, specifically that you have a nice container for it and that your styles target the repeated content through a container. <v Michael>Right, so here we go.</v> <v Lee>And we're gonna align this center as well.</v> And then for the blog post, we're gonna restrict the width of this just a little bit, on the homepage. <v Michael>Okay.</v> <v Lee>So we'll do 75% of its container and margin auto.</v> <v Michael>Okay, let's take a look at that.</v> I wondered when we did this, I thought it doesn't look like it's complete, but you know, no, I know. Oh, so much better. <v ->There we go.</v> <v Michael>All right, that's it now, right?</v> We've got a working blog. We're creating the posts by hand using markdown, but then it's being assembled automatically by Jackal, you may be wondering what about something like blog comments? And there's actually an exercise in the tutorial about this, but there are third party services that we'll do that sort of thing, like discuss. <v Lee>Because Jackal can't support</v> that sort of dynamic content. Since there's no database, those comments would have to be stored somewhere and you need a database to do that. <v Michael>But this is a really functional site already,</v> and we're gonna take it to the next level in the next couple chapters, when we talk about mobile and then add some final touches. And as usual, as a final step, we'll make a git commit and then push up to get up pages. We go. We've got a lot of added files and directories here, so let's add those. We add a blog here and then let's push it up. And there it is.