Sign up to access "Build a Forum with Inertia and Laravel" right now.

So let's go ahead and get rid of that. And there are some things in here that we're just not going to need, like space x6. And I think that should just look about the same. So that just gives us the opportunity to remove some markup, which is great.

OK, so we need over on the post resource to grab the user who posted this. Now, we don't have a resource for the user at the moment. It's always a good idea when you're building something like that shows public information about a user to create a separate resource for your user that

contains only public information. We could create a generic user resource. But then if we start adding things like email addresses to that for our internal use or authenticated use, everyone could then potentially see that.

Remember, all data that you're passing through from your back end to view is public. So let's go ahead and create out a new resource in here. And we'll call this public user resource, which will contain only information that we're happy to be shown publicly.

So over on this public user resource, let's just choose what we want to reveal about this user. So we could output the ID. That doesn't really matter too much. But really importantly, we want the username output here as well, like so.

And we also want the user's avatar URL, which we don't have at the moment. We'll just implement that in a second. But we'll add that in there so we can reference it within our component. OK, so now we've got this public user resource.

We can add the user to our post resource. So user resource or public user resource make. And once again, when loaded, so when this relationship has been loaded, we want to go ahead and use that.

So if we head over and give that a refresh, it works. Because remember, over on the discussion show controller, we've already ecoloded in the user for each of these posts. OK, so let's work on the design of this now.

For this, we want the user avatar on the left hand side. And then next to that, we want the user username. So we'll just put username and then when it was posted. So basically the created that day.

So at the moment, it's all just sort of in one line because we have the flex on this. But the avatar is going to sit here and then that detail, those details will sit next to it. So let's just go ahead and make a start on this. So for the avatar, we want a width of seven.

I'm going to set a flex shrink to zero. That means that this content can't push this smaller and make the avatar really small. So for the avatar, of course, we're going to use an image. And the source is going to be from the post and the user and then the avatar URL.

We'll get rid of the alt for now, but you can add that back in. But let's add a couple of classes to this. We'll set a width of seven, a height of seven, and we'll set this to fully rounded. So let's go over and there we go.

We have an image in there. Of course, it doesn't display just yet, but we'll fill that in in just a second. So down here, we're going to have the post stuff. So this container will also have the body of the post down here as well.

But for the username and created at, let's create our separate container here to house these. So we're going to have the username in here. So post user and username. And then just underneath it, we're going to have when it was posted.

So posted X minutes ago or whatever it's going to say. So there we go. Looking a little bit better. Now, we need to space these things out.

So let's go ahead and say space X three. And there we go. So it's a little bit more space between them two things. So we'll go ahead and work on the user avatar.

We're basically just going to add an image from Gravatar. So I'm going to come down here, create our method called avatar URL. And we're just going to return a Gravatar URL in here. What we need to do for this is grab the Gravatar URL.

And then on the end of this, MD5 hash the user's email like so. And we should be good. I think we can also add on the JPEG extension. So with this, this is just an avatar service, if you've never come across it before, where you can register.

And based on your email, upload an avatar. But we can always change that around later. OK, so with this avatar URL, let's head over to the public user resource. And we can now reference that.

So this avatar URL. And of course, we can now come over to our post. And this should work. So if we just give that a refresh, there we go.

There is my avatar. Now, at the moment, we've got the flex set to item center, which means this avatar is always going to be in the middle of any of the content here, which is not what we want. So let's set this to item start instead. And you can see that bumps up to the top.

OK, so now we're going to work on when this was posted. Now, for this, what we can do is over on the post resource, we could say created at and this created at. Now, because that is a carbon instance, we could say something like diff for humans like so. And let's output that on the post.

So we can say posted post. And created out. Like so, and that does work, so 42 minutes from now, just because the time difference between the app and my database, but what if we also want the actual date and time that this was posted? Well, then what happens is we start doing things like created at date time, created at human, and it makes it really difficult to change.

Specifically, if you have these dates and times formatted all over your application. So for this, we're actually going to scrap this entirely and we're actually going to create an API resource which gives us a consistently formatted created at or updated at date. So let's see how this works. We're going to go ahead and create out a resource again, and we're going to call this date time resource.

Now, this might seem a little bit odd, but bear with me and I'll show you how this will help. So date time resource will take in a carbon instance rather than a Laravel model, and it will allow us to do things like this human, for example. So we don't need to prefix that with created out because the date time resource will always already be under that key. And we can say this diff for humans, and let's just fix that casing, and then we could do another one called date time and say to date time string.

And now what we can do with this resource is say created out because that's specifically what it relates to. But we can now use that date time resource to grab the created at date, and let's see what we get by doing this. So over in the post, I'm just going to dump down here post created at and let's see this now. OK, so to date time string does not exist.

Of course, let's say to date time string. And there we go. So now any dates and times that we have that are carbon instances we have in this exact format. If we need to add more later, we just have one place to head over to this date time resource and we can just add more or modify them as we need.

So now what we can do is say post created at and human. And there we go. It works exactly how we did before, but now it's a lot more flexible. OK, so for this, let's just add in some styles.

We'll start with the text being small and we'll go ahead and just dial down the text a little bit to grey 500 and we should be good. There we go. Now for the post body, that's going to sit directly under this here. So we can maybe add a margin on the top here of three and then down here will be the post body like so.