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!