Laravel Mentions
This episode is for members only

Sign up to access "Laravel Mentions" right now.

Get started
Already a member? Sign in to continue
Playing
12. Clickable usernames with Markdown

Episodes

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

Transcript

00:00
We're now going to add the ability to click on usernames to go through to a user's profile and once again you can use this functionality to go through to anywhere that you are triggering. For example if it was something similar to github issues you would have this to click through to
00:15
go to a github issue. The steps are exactly the same. Okay now the key thing here is we want to do this but we only want to do it when a user actually exists. How do we do that? Well let's go ahead and first of all pull in Laravel Markdown to use inside of our comments because it's highly likely that we're going to have Markdown enabled anyway and then we can go ahead and add on a
00:43
extension or a plug-in to get this to work. So let's go over to the sparse Laravel Markdown package. You can pretty much use any but we're going to go ahead and use this one because it's generally the most popular and it's incredibly easy to use. We also want to go ahead and publish the config file which is incredibly important here so let's go over and make sure we publish this
01:03
and let's jump straight over to swap over our comments to Markdown. So we want to do this over in comment item and that is just where we have our comment body just here. Now because we are using Livewire and of course by extension using Blade we can use the Markdown helper that we get through this package to then pass in the comment body and that is it. We now have Markdown enabled comments.
01:29
Let's go over and just check this out we shouldn't see any difference here but this is now rendering Markdown. I can prove that by just going ahead and saying this should be bold and there we go great so we have Markdown enabled. So in order to use the extension where we can link through for mentions we can go over to the Markdown config so this will be published under config and Markdown
01:58
and let's go down to the extension section. So we've got common mark options here which we'll come back to in a second but we want to go down to the extensions just inside of here. Now this package uses common mark from league so basically we have access to any of the extensions that you'll see over on the league common mark documentation so mention extension is one of them. Let's go ahead
02:23
and pull in the fully qualified class name for this and that is now our mention extension enabled. If we go over and give this a refresh we don't see any ability to click through here just yet because we've not configured this and we've also not busted our cache but this will work. So let's actually go over and clear our cache because all of this stuff gets cached so let's say cache and
02:45
clear and let's see if this has actually done anything. No so nothing is configured yet and I can't click on any of these but we can now do this by passing some options through to common mark options in here. So let's go ahead and add in the mentioned option so this will configure the mentioned plugin that we've just pulled in or the extension that we've just pulled in and we can
03:11
give this a name so this is a profile so for example if you were linking through or allowing to link through to twitter you could call this twitter it doesn't really matter what this key is here it's just each of these get configured. So the first thing is the prefix this is the trigger if you like and we know that that is the app symbol and that just helps this extension
03:31
figure out what it needs to make clickable. Then we have the pattern so the pattern here I'm just using the default and I'm going to copy and paste this across this is the default that we get with or in the documentation of this package so again this just needs to match out what we have so I'm going to say 1 to 20 so in one character length to 20 for our usernames we've got underscores and
03:57
we've got hyphens enabled as well as lower and uppercase characters and numbers as well so this is just the regular expression used to match this. Next is going to be the generator so this will be how we go through or what url we generate at least to go through to that user's profile now we don't have this at the moment so let's just add this as slash and dollar one and just see what happens.
04:25
So now that we've done this let's go ahead and clear our cache and let's go over and give this a refresh and see what happens here so it looks like this is not ah yeah there we go great so this is actually working now that we've cleared that cache now it might not actually be dollar one it's probably going to be something like s for the string replacement in php so let's just try this one more
04:51
time clear our cache out and yeah there we go so you can see at the bottom left of the screen this is going through to slash tabby and that's going through to slash mabel so we can eventually hook this up so we'll click through to a user's profile. Okay we don't have a user's profile section at the moment let's build that and then we will work on only linking this through if that certain resource
05:13
in this case a user actually exists so let's close everything off and let's just start from sort of scratch here and create out a livewire component for the profile page so let's call this profile show and you can categorize these into sort of page sections if you want to I'm just being a little bit lazy here let's go over to our web routes let's just assume that the user has to be
05:40
signed in to see this we'll just keep this simple let's say user slash and then user by username let's change this to profile show and let's call this profile and dot show okay great so we've got a name for it we've got a url for it we can hook this up now over in the component itself let's use the layout to point to our base layout from our app let's pull in our user here which is going
06:14
to be the thing that comes in from root model binding and then over in profile show let's copy over our dashboard template and do what we did before for our comments so profile show now becomes this minus the overall app layout because we defined that within our component using that attribute I'm going to get rid of everything in here and then here I'm just going to dump out
06:36
at and then the user's username like so and that's not quite going to work so let's just concatenate that one okay so we should now be able to go over to users slash alex and there we go tabby etc but if the user doesn't exist of course we get a 404 so we need to handle that in our markdown stuff as well so this will work once we hook this up let's do that now and then
07:06
we'll just change this entire thing over so over in our config for our markdown let's change this to users slash then the username let's go ahead and clear our cache out here and let's go back over and click on one of these and there we go so that is now working but the problem is if I say hey at abc we don't get a match here but we can still post it we don't want to prevent that
07:34
this will go through to a 404 so this is what we want to check whether it exists or not now because this is cached we don't need to worry about speed so we don't need to worry about an excess of queries here because this data is going to be cached so the generator we switch now from a string to a class which does a lookup in the database for this user checks if it exists and
07:57
only if it does exist will we return the location that we want to forward the user over to so over in we've already got a mentions directory here so we might as well put it in here we're going to create a class out called user mention generator and that should just about do now this generator is specific to the package that we've pulled in so what we want to do is we want to
08:22
implement the mention generator interface that will need or require a generate mention method so within phpstorm I can just automatically pull the stub in here but you'll want to go ahead and build that out manually if you're not so what we now get in here is the ability to look up the user using the mentioned username so that will contain the identifier for what we're trying
08:53
to do here and then we can return null if user not found otherwise set URL and return mention then that will start to trigger everything in and show the correct correct location so let's go ahead and go through all these steps to do this so looking up a user in Laravel is pretty straightforward so let's say user use the user model where username or we could say where username
09:23
dynamically now how do we get what has been found in this match well the mention that we have here has the identifier as the thing that we're looking up so this will be the username then we're going to say first we're not going to say first or fail because we don't want this to throw an exception but now we can manually do a check so we're going to say well if we don't have a user in there if
09:47
that returns nothing then we're going to return null otherwise we're going to return the mention down here which now should get rid of that error because we've got this abstract inline being returned here now we can set the URL in here so to do this we say mention set URL and now we can start to build the route up properly so we can say profile.show and we can say pass the user in
10:13
that will generate the URL to slash users slash and then the username so now that we've done this we can swap over the generator for that class itself so we can just use app to resolve this out of the container user mention generator class and that should be all we need to do so let's clear the cache out here and let's head back over to our application and give this a
10:39
refresh so tabby of course exists in the database mable exists in the database so we can click through to them and see their profiles abc however doesn't so you can see that this is no longer a link so as long as whoever we are mentioning exists in the database this will be looked up but it will be cached so if we were to look at our queries right now we wouldn't see
11:02
three or four queries being run because everything will be cached for us so there we go that is username mentioning of course you can customize this behavior you'll just want to head over to the lea common mark documentation to see which other plugins that you can pull in and make use of within your markdown but we now have mentionable click-throughs to the user's profile

Episode summary

In this episode, we're making usernames in comments clickable, so you can jump straight to a user's profile just by clicking their @name! (Think like how GitHub issues work.) We start by enabling Markdown parsing in our comments using the popular Laravel Markdown package. Once that's set up, we install and configure an extension (from the league/commonmark package) that recognizes mentions, i.e., any @username, and turns them into links.

But here's the trick: we only want to link usernames that actually exist in our database. To pull this off, we set up a custom mention generator class. This class checks if the mentioned username is real, and only then generates the profile link. We walk through how to update our Markdown config to use this logic, clear the config cache (so the changes take effect), and build a quick Livewire profile component + route for the user profiles.

At the end, you’ll see that when you mention a valid user like @tabby, it becomes a clickable link to their profile, but if you mention a random or non-existent user, it'll just show as plain text. No more 404s for mistyped names! Plus, the mentions are cached so you don't have to worry about unnecessary database queries. That's clickable, mentionable usernames sorted with Markdown in Laravel!

Episode discussion

No comments, yet. Be the first!