Build a Forum with Inertia and Laravel

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

15. Adding a post preview to discussions

Episodes

0%

Your progress

Total: 6h 54m
Played: 0m
Remaining: 6h 54m

Join or sign in to track your progress

01. Introduction and demo

02. Getting set up

03. Modifying registration for usernames

04. Figuring out the forum layout

05. Creating and listing topics

06. Basic discussion listing

07. Pinning discussions

08. Tackling pagination in Inertia

09. Customising pagination text in Laravel

10. Showing a discussion

11. Setting up discussion posts

12. Listing through discussion posts

13. Adding more data to posts

14. Adding pagination to posts

15. Adding a post preview to discussions

16. Adding the last reply to discussions

17. Outputting discussion participants

18. Limiting participants in the UI

19. Ordering discussions by last post

20. Handling deleted users

21. Counting replies

22. Building our first filter

23. Highlighting current filters, and merging with pagination

24. Adding auth specific filters

25. Adding the topic filter

26. Scaffolding the new discussion form

27. Toggling the create discussion form

28. Keeping form state

29. Storing a new discussion

30. Discussion validation and authorization

31. Generating markdown for posts

32. Toggling the markdown preview

33. Fetching and displaying markdown

34. Adding a markdown shortcut toolbar

35. Dealing with SVG icons

36. Creating the reply form

37. Basic Inertia permission checking

38. Creating replies to discussions

39. Jumping to posts

40. Automatically scrolling to posts

41. Toggling post editing

42. Editing posts

43. Deleting posts

44. Deleting discussions

45. Setting up for best answers

46. Toggling the best discussion answer

47. Solved and unsolved filters

48. Indexing discussions for search

49. Searching discussions

50. Debouncing search

51. Adding mentionable functionality to forms

52. Indexing users for mentioning

53. Hooking up users for mentions

54. Detecting and storing mentioned users

55. Adding the mentioned filter

56. Adding mentions to the markdown toolbar

57. Adding mentions to the reply form

58. Fixing up some unauthenticated state

59. Fixing up post scrolling

60. Reviewing SSR (Server-side rendering)

61. Preventing parent posts from being deleted

62. Improving solution marking

Transcript

00:00

So back over to the forum index, we're going to add a bit of text down here, which is going to be the preview of the first post, just so we can get a little bit more context about what this discussion is as we're browsing the list.

00:12

So to start with, we're going to head over to our discussion resource and we're going to add a body preview to this. So let's do this just here, body preview. And for this, it's just going to be the body.

00:26

So the plain text body, no mark down here at all. But we're going to use Laravel string helper. Let's just pull this in. Here under illuminate support, and it's going to limit this string,

00:39

so we can just limit this by any amount, it doesn't really matter for now. What we're going to do with this, we just make that an integer, is use Tailwind's line clamp so it doesn't interfere with the size of what we're doing inside of the component.

00:54

We'll see that in a second. OK, so we've got our body preview. Let's go over to our discussion component and let's add this in. So let's see where we are.

01:04

This is the discussion title. Down here will be the body preview. So discussion body preview. And let's head over.

01:16

And yeah, what we've actually done here is added this to the discussion resource, which, of course, is not right. What we want to do is add this to the post resource itself because this is where we actually have the body.

01:27

So you probably spotted that. But let's go and just switch that over. Now, if we look at our discussion resource, we don't actually have the first post in here, but we do have the relationship

01:39

set up for this. Remember, we have this post relationship down here, which is the first post. So with this, what we can do is add in another relationship to this post, post resource and when loaded post.

01:56

So let's just check over on our forum index controller that we've loaded this. We haven't. So let's go ahead and load in the first post and we should be good. We should now be able to via the discussion and the first post access the body preview, which will now be post body preview.

02:14

And yeah, it doesn't work. So let's have a look. And yeah, it doesn't look like it is in there. So let's have a look here.

02:21

Discussion resource post when loaded post. And let's go ahead and dump this out and just see what we've got. So discussion and we will just get rid of this for now. And let's have a look in there.

02:37

So we've got the post in there and we should have the body preview. Now, for this one, we don't. That is the problem, because for the second discussion, we don't have any posts. Now, I'm not sure there's too much point

02:52

in protecting this because we should always have posts in there. But let's just create out a post for this other discussion just to make this work. So here is a post. We'll have that for my user and the discussion here will be this one.

03:12

The parent ID won't exist because that's the first post and let's switch up the created and updated update. If you ever find yourself not having posts within the discussion, you can just come in here and add some if

03:24

statements to make this work, so let's bring back the body preview. And now that should work for both of these. And we now have a preview of each of these in here, which is great. To finish up, let's just style this up.

03:34

So it looks a little bit better. So we're going to go ahead and mute the text on here because it's not hugely important, set the text to small, set a margin on the top. And we'll look at the line clamp in just a second.

03:46

So there we go. I think that looks OK. Now, what I'm going to do is just add a little bit more data to this. So let's just copy and paste this a few times just to fill this up, because, of course, a post body, at least the first one, could have quite a lot of data.

04:02

You can see this wraps down a couple of lines. Now we have over in our post resource the string limit on this body preview. So it's never going to go above 200 characters. However, that doesn't mean that we're

04:15

going to keep consistency on the long line. Different letters have different widths, so on. So what we can actually do within Tailwind is we can set a line clamp. So line clamp one will basically just keep this to a single line,

04:28

but have an ellipsis at the end with a cut off content. And of course, you can bump this up as well if you want to, to two lines. It really is up to you. But the fact we can do this within CSS,

04:40

not have any kind of complex logic to handle this in the back end makes a lot of sense. So there we go. We have a really nice cut off first line with a little bit of context about each of these discussions.

Episode summary

In this episode, we're improving the forums by showing a preview of the first post for each discussion in the forum index. This little preview helps users quickly get a sense of what the discussion is about without having to click in.

To start off, we look at how to add a bodyPreview to our post resource. It's simply the post body, but we make sure to limit its length so it doesn't take up too much space. For this, we use Laravel's string helper to keep things tidy, and then use Tailwind CSS's line clamp utility to visually cap the number of lines it takes up.

Next, we realized that the preview should actually be tied to the post resource (not the discussion resource), since it’s the post that contains the body text. So, we adjust our code and make sure the discussion resource has access to the first post's preview thanks to an existing relationship.

There was a small hiccup when some discussions didn't have any posts, so we walked through adding a test post to keep everything working smoothly. Then, we styled the preview text: lowering its prominence, tweaking the size, and adding some margin. Finally, we fill out the posts with a bit of extra content to show off how the preview works with longer posts.

To keep things neat, we set a character limit for the preview in the backend and use Tailwind’s line-clamp class to ensure every preview looks consistent, capping the number of display lines (with ellipses if the text overflows). This way, users get a handy snippet from the first post of each discussion right in the index, all managed simply with a bit of backend logic and some handy CSS.

Episode discussion

No comments, yet. Be the first!