Build A Static File Blog with Laravel
This episode is for members only

Sign up to access "Build A Static File Blog with Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
04. Listing blog posts

Episodes

0%
Your progress
  • Total: 1h 11m
  • Played: 0m
  • Remaining: 1h 11m
Join or sign in to track your progress

Transcript

00:00
Let's take the collection that we are dumping out here and get this passed down to the view so we can go ahead and start to iterate over this. So let's call this posts and just pop that in there. Now this at the moment has no real order. If we were to go ahead and create another blog post,
00:15
the order of this is I think when this file was created, which is not necessarily bad, but we want to order these later by their date. So we're going to do that once we've gone ahead and dumped these out. Okay, so let's go over and just start to style this page up a little bit. So I'm going to go ahead and create out an overall wrapper here.
00:35
And for this, we're going to go ahead and space out each of the items in here with tailwind by 16. That just means that for every blog post that we have in here, there's going to be a nice amount of spacing between each one. So we're going to create out an article HTML element here. We're going to have an H1 for the title. Inside of that, we're going to have an anchor where we
00:55
can click through to the blog post. And then just down here, we're going to have a teaser so we can create a paragraph out for that teaser. Okay, so that is what it's going to look like. Obviously, at the moment does not look good. We've not applied any styling to this at all at the moment. What we're not going to do is go ahead and individually style each thing.
01:18
We're actually going to go ahead and lean on a Tailwind package called Typography. Once we've got this installed, what it's going to allow us to do is just add a prose class pretty much to any of these articles that we create, whether they're in a list or the actual blog post itself. And this is going to style up the header for us. It's going to style up the paragraphs.
01:38
It will include markdown support, which is really, really useful. So this is just the easiest way to get going with it. Obviously, if you're not using Tailwind, you're going to have to style this up yourself, but that's absolutely fine. Okay, let's go down and install this, pull in the plugin, and then we'll see how this works. Okay, that's done. Let's head over to pull in the plugin
02:00
in our Tailwind config and we should be good. Okay, great. So the way this works is for any thing that you want to style up prose, you're just going to give out a prose class. Let's have a look at the difference that has made. So already you can see that the title has been styled up here. There's a little bit of spacing between these two things as well, which is exactly
02:21
what we would want. And we can go ahead and just modify anything else. There's nothing wrong with just going ahead and adding in additional styles to this if you need. Now with the header here, this is sort of underlined. I don't really like this. So if we don't want prose, we can go ahead and use the not prose class, which will just bring it back to its kind of normal state,
02:42
but still apply the header being large. So that's all good. We're also going to style up this anchor because we want a hover effect. So let's say text blue 500. We'll go ahead and add a transition in here on the colors again, and we'll set a duration to 100. So that looks like this, similar to the title here. Okay. I'm actually going to switch this teaser here out to a div because eventually
03:06
this is going to be marked down and that will generate paragraphs in it inside itself. Okay. So I think that's all good for now. Let's go and create out another blog post in our posts directory here. We'll set the date for this slightly before. So we'll just say the first of the previous month, and we'll just say another blog post or MD. We'll go ahead and copy the
03:27
structure here over to this and it's head over. And our goal now is to just to iterate through these and then try and extract the data from them that we need. So this is just really standard blade stuff because we're still working with the collection. We can still use methods like post count. There's nothing wrong with doing that. It's going to work in exactly the same way.
03:49
And we can add an else and an end if here, and maybe just a paragraph to say nothing here yet, just in case we don't have any blog posts. Okay. So for each of our articles, we can now go ahead and iterate over our posts. So let's say for each posts as post, and we'll go ahead and end that for each just there, pull this up. And of course, now we've created another file. We have two blog
04:13
posts. So we're going to go ahead and just dump each of these posts out in here and just see what kind of information we have attached to each of these. At the moment, although we have included the title within these three hyphens, it's not showing up here within the attributes. We've got the date, which is useful. We've got the slug, which is really useful because we need to be able
04:37
to link through to each of these. And the content is, looks like it's empty at the moment, but this will actually contain an object with the content in HTML. We don't have much else here. So what we need to do is figure out how to get that. First thing though, we're going to deal with is the ordering of these blog posts. So let's just dump out within this anchor, the post slug, just so we
05:01
know which one we're dealing with and we'll get rid of the dump just in there. So another blog post technically was created before building a blog in Laravel, or at least the date is earlier. So we want the latest blog post at the top. How do we order these? Well, if we head over to our index controller, we're dealing with a collection here. Now a Laravel collection has methods on it, which allow you to
05:25
sort things based on an attribute that's contained within each of the items. So in here, what we can do is say sort by descending, and we can choose that date attribute that this item contains. So we're just sorting in a descending order by this date, which we know is a carbon instance. So now you can see that the latest based on the date has jumped to the top, and that's always going to be the case.
05:49
We're going to be introducing pagination later, so don't worry too much about having loads on a single page and having to sort all these. Okay, so we've got these lists out on the page, styled up nicely, and we're now going to try and figure out how to get additional attributes so we can actually show the title and the teaser.

Episode summary

In this episode, we're starting to make our blog list page look and work a bit better! We begin by passing the collection of blog posts to the view and setting up a loop that will display each post on the page. Initially, the posts appear in the order they were created, but we'll want to order them by their publish date soon.

Next, we jump into some styling using Tailwind CSS. We wrap everything in a container and add some spacing between posts using Tailwind's utility classes. Then we use the awesome Tailwind Typography plugin, which makes our articles and headers look great right out of the box. We also tweak the link styling so the blog titles have a nice hover effect.

To test things out, we add another blog post file to the directory and check that our loop picks it up. We discuss how to display a friendly message if there are no blog posts yet, and learn how to iterate through posts using Blade's foreach syntax.

We notice that not all the attributes we want (like the title) are exposed yet, so we look at what data we actually have access to. But before digging into that, we tackle ordering: using Laravel's collection methods, we order the posts so the newest one always appears on top.

By the end of the episode, we have our blog list rendering and looking much better, and we're all set up to start showing more post details in the next step!

Episode discussion

No comments, yet. Be the first!