hey guys welcome back on today's episode we're going to be working on our blog page so before we do that I would like to fix some issues we currently have so first one is I forgot to set the limit for our posts on the home page so we got all the posts showing so let's go ahead and fix that it's an easy fix uh there used to be a take 9 over here I believe I forgot and I accidentally removed it so it's going to be on our home controller for latest posts we need to say take nine so we only are basically taking nine of them from the database and now if you reload we only have nine okay very good now one more issue I would like to address guys is if you go on the profile page and if you remember we enabled the profile picture functionality on jet stream so if I go ahead and I select some image it shows fine over here if I click on Save if you're not actually able to see the image right so let me show you guys how we can fix that so first step is you need to make sure you have actually link your storage so we can go ahead open up your terminal and type in PHP arts and Storage link and so if you don't have that let's go ahead and run it I think it automatically runs if you're doing composer install and so if that doesn't fix the issue for you the next potential issue could be from your dot EnV file so go let's go and open it up I have my DOT EnV file open so you need to make sure that your app URL matches the actual URL of your application for now for example saying your yellownews. test obviously I'm using a PHP Artisan server so if you're using some other web server uh it might be using yellownews. test in that case you won't have any issues so in my situation I will have to go ahead and copy the actual URL we have and then replace it over here okay so if you're still also having the issue go ahead and update this app URL save it up and now if you reload we should be able to see the logo now another issue we have which isn't the case on regular jet stream install is if I go ahead and I remove this photo and I save we don't see this image at the top change if you're doing a fresh jet stream install this actually automatically changes without any page reloads so the reason this is happening is previously the jet stream was using this navigation menu which we currently are not loading and this navigation menu is actually Alive by your component so whenever you upload the image basically in the background the jet stream kind of profile information component sends an event that tells this icon to reload right so if you want that to happen we will need to use this navigation menu so that's what basically what I'm going to go ahead and do today because I like that functionality so we would have to kind of move some of the code we have inside this navigation menu inside our header so let's open up our header that we already have so it's going to be layouts partials let's open up our header now inside our header we are using the application logo I'm going to go ahead and also open up the navigation menu next to it very good so let's open them side by side so you guys can see a little bit easier so on the right side I have the header and then on the left side I have navigation menu now first thing we see is actually the navigation menu is using something called application mark this is kind of like the logo but it's like the smaller version of it so I would like to go ahead and update this application Mark as well if you just actually copy copy it from the navigation menu and replace it with our in our header instead of application logo let's see what we get we get the jet stream logos I don't want this to happen or be inside our application so let's go ahead and actually update this application Mark first so let's find it it should be inside components application marks somewhere around here it's over here it's actually on their logo and I'm actually going to go ahead and copy the logo inside the mark okay I'm going to make them exactly the same all of that would kind of make it useless to have two of them so what I'm going to do is I'm going to have the logo to be like the full version so I have the code as well and then the Mark B just yellow okay and I'm going to close it and just like jet stream I'm actually going to go ahead and use application Mark instead of application logo and Arbor header so let's open up the header on the right side I'll make this Mark and let's just see if it works it does okay very good so one more thing is here we are using our route name so for these navigation menus guys as you guys see we have our Li and a tags this is inside our header on jet stream it is actually a liver component for navigation menus and I'm going to actually go ahead and use these so let's go ahead and do it I'm going to copy the code we had we have inside the navigation menu these are the what comes with jet stream and I'm going to basically use that instead of the code we have so first of all I'll update this div this UL to a div so we don't need all these allies I'll do the exact same thing down here and I'll actually go ahead and remove all these links because we don't have any of these Pages We'll add them as we go along even the blog page why not now let's Minify this so you guys can see a little bit better so I'm going to replace this home link that we already have although I'm commented out because I would like to have the styles for it with this xnav link and then instead of this dashboard I'm going to replace it with home I'm going to replace this home and if you guys know not familiar this underline underline is for basically kind of translations so it gives you the ability to translate these now we're not going to be using translations on this project but it's good to have them here so you have that option in the future so let's go ahead and do reload and it's actually working now it does have a different styling than actual application the original styling so if you guys like this you can go ahead and just keep this and as a matter of fact I do actually like it the underline looks pretty good so what I'm going to do is I'm just going to go ahead and change the color from purple to Yellow which is our application styling if you like we can go ahead and actually use the styling we already have so let me show you guys how that works in a second so this is our previous a tag that we have let me close this navigation menu for now so let's go ahead I'm going to copy the entire styling we have in everything basically after item Center and now we need to go ahead and find this nav link component so I'm going to search for it using vs code quickly find it and if you guys see this is the component so it has a the first one is going to be styling for when it's active and then the second one is for when it's not active so I'm going to go ahead and replace both of them let's keep the inline Flex item Center I don't want the padding stuff let's go ahead and place that I'm going to do the exact same thing for the Bob as well so now if we save it we should it should exactly look like it did before now this is the active state so on the active State the link is supposed to be yellow so which is going to be the first part in the if statement right so here is checking if it's active it shows the first one if it's not active it will show the second line so if it's not active instead of yellow I'm going to go ahead and say gray sorry text Gray 500 and if you hover over it and for some reason vs code keeps updating it as I save and if we hover over it instead of yeah let's keep it actually the way it is right I think it should be okay so let's save this it will obviously format it again for me it's okay and now it will look exactly like it did before and the way it works is using this active prop you have the ability to kind of toggle the active on and off okay if I add another link let's say for our Blog Page we don't have this blog page at the moment so I'll make this dashboard so we don't get an error message uh this one also should be dashboard as you can see this one is not active if I hover over it the color is a little bit different if I click on it obviously we're on the dashboard page and it actually turns on also this logo change as well automatically as we change the the components so that now that we have this guys I'm going to remove this for now later on we'll come back to it I think we can also remove this a tag so what I would like to do now is if we'll take a look at our nav link sorry ever a navigation menu let's see if there is anything else we would like to bring over to our header so we already changed the application Mark we already changed the nav link so here is using the drop down which we already have now this uh the jet stream navigation menu also has a menu layout I don't really care about using it so I'm not going to be actually bringing those in okay so it has a responsive nav link all this stuff our template we don't really need it so I'm going to go ahead and actually delete this responsive nav link okay it's only shown on mobile on our template we don't have that so we don't need it so I think we're actually officially done so I'm going to go ahead delete everything inside this navigation menu that came with jet stream and I'm going to go ahead and actually copy our header the entire header and move it inside this navigation menu okay now instead of the header tag I'm going to convert this to nav so it makes more sense and then sort of header left I'm going to say nav left and then this one I'm going to make it now bright and while we're at it technically we can actually make this look a little bit better instead of having these two we can also have uh we can have like an else over here right and I actually prefer the other way around so instead of guest I would prefer if you had alt and then end art and we would have to switch these okay so this basically we have like one less directive call over here and I think we're officially done so from now on if you have any navigation links we're going to use this xnav link so now that we have that you'll need to actually include this inside our header so I'm going to delete the previous header code I'm also going to get rid of all these classes because we actually copied these to our navigation menu and here we can go ahead and now include this navigation menu now as I said guys this is a library component not just the blade file so we would have to use a live wire navigation menu okay and this Library component is obviously as part of jet stream so we won't have access to the PHP code but we do know that this does exist so if we go ahead and reload hopefully everything should exactly look exactly the same it does so that's good news now let's try again I'm going to try to upload another image and this should automatically up update so let's try again I'm going to click on logo and I'm going to save it and as you guys can see it automatically changed very good now we do have one more thing we need to change about the navigation menu guys we have the login and register links so let's go and change those as well I'm going to open up navigation menu as you guys can see from now on we're using xnav link so I'm going to copy this and now we can go ahead and update it inside our header right and have a left right so if I hit the right I don't think we're using any links but inside here the right guest we are actually we do have links for our login and register so I'm going to get rid of both of these and I'm going to add for our login so I'm going to replace all the whom we login and then I'm going to do the exact same thing for register as well this one is going to be a register and this one also register and if we reload to the exact look exactly like it did before okay very good and then is there anything else you need to worry about I think that's all I think that's very good so let's go ahead check out login register the active State also works now which is very good so let's go ahead and log in again now we have this dashboard page when we log in so technically on our application we don't need a dashboard page so I'm going to go ahead and delete this actually completely so first let's go ahead and delete the route file for it which is inside here although instead of deleting it we're now going to comment it out this also means we need to remove the blade file for it now I think let's take a look at the blade file there is it's using a jet stream component called Welcome which is basically what we had before we don't need this welcome file anymore so I'm going to first delete the entire dashboard blade file and then also go ahead and delete that welcome component so inside component whereas welcome is down here I'm going to go ahead and delete it because we know we no longer need it if you open it up guys you can see it's saying welcome to your jet stream application okay so obviously we don't need this inside our own application so I'm going to go delete it and also as I mentioned previously we are not using responsive nav link anymore it was used only inside jet stream so I'm going to go ahead and delete this as well all right and obviously now if you try to access the dashboard page we get not found so this does create one new issue if you log out and log in again when you log in you're automatically redirected to the dashboard page so how can we fix that this is actually easy to fix if this is actually controlled by your route service provider so if we go back to our app folder inside the providers there is a file called route service provider and this has a section called home so this is actually what gstrom uses to control where to redirect after logging in so we just have to con basically change this from dashboard to whatever page you like in our case I'm going to change it to our home page so when we log in I want the user to go to our home page so let's save this up now let's go ahead and test it again hopefully it should work let me log out I'm going to click on login again and then yeah it's not working so if you're now being redirected to our homepage so that was quite a bit of changes to make guys I know uh but we will we have to do all of these layout changes when we're working with jet stream unless you're basically using the exact same styling that it provides so now that we have done that we can actually go ahead and create our blog page so let's go ahead and do that okay guys so I'm going to start off by first actually creating our blog route and setting up our controller and Views and later we'll go ahead and actually bring the HTML template over so let's go ahead and start by doing that so for our Blog Page it's going to be similar to our home page so it's going to be basically slash blog we can maybe use whatever else you like maybe post is up to you I'm going to go with blog I think it makes more sense now we already have a post controller so we're going to use that post controller and I'm gonna basically have it route to our to an index method right we don't have this method yet but we will go ahead and create it now for the name you can name it blog you can name it also post index I'm going to go ahead with post uh index I think that's what I'm going to go with so it's up to you guys you can also use blog if you want but I think I'm going to go with both indexes consistent as we go uh throughout the course all right so now that we have these let's go ahead and actually create this index method inside our controller so I'm going to open it up let's do public function index and we are going to return a view inside a posts index okay so we need to go ahead and create this view file now I'm going to go inside I have resources views now gstream does provide quite a bit of files here in the earliest version these kind of components and emails were not actually inside here it was they were inside a vendor folder I prefer that a little bit more so if you actually are going to build a kind of larger project later on and expand this more you may want to have for example a Blog for folder and put all the blog related stuff inside here but in this course we're only going to have a Blog so I'm not going to do it so we're only going to have a few more folders maybe one for categories and that's pretty much it right we're not going to have too many folders I'm just going to go ahead and create a post folder and then inside it I'm going to go ahead and create our index.
blade. php and this is going to basically extend the same layout as I have our home page so I'm just going to go ahead and copy this x app layout and put it inside our index and let's also close it up and now we should be able to go ahead and visit our blog page so I'm going to go ahead and manually open it up just make sure it's working it is and you can also go ahead and add it to our navigation menu so it's going to be inside uh this navigation menu if we find it we already have one for home so I'm going to copy it and create one for block now the route is going to be post index and this one is also going to be post index all right now as you guys can see I'm using these route names over here so this is useful because it gives you the ability to change these routes later on without having to actually change your blade View files so I don't like manually like typing in blog something like that okay subtract of course I'm just going to be always using route names and that's all we have to do guys let's go ahead and do a Reload as you can see it automatically works we don't need to do anything now since we are using live volume we can go ahead and use the new volume navigate future to prevent page reloads so now that we are using this nav link component it's actually easy to do that right we can go ahead and update this or add Warrior navigate to it so let's open up nav link nav link and I'm just going to go ahead inside this a tag go ahead and give it Voyer navigate that's all we have to do and it should update everywhere that we are using links right so if I click on blog now it's reloading the page so it's changing the page without any page reloads very nice now we also have some links inside this profile so if I click on profile it's actually reloading the page so one way we can fix this is we actually need to find the code for this and see what it is using for the navigation links so let me find it I believe inside I have a header right and let me close this left bar so there's a button over here if we scroll down we have a bunch of links right so it's using a component called the drop down link we can go ahead and add it to this but this drop down link is also used for our logout button so I'm worried it will actually kind of cause issues for our logout so the easiest way is we can actually just go ahead and do wire navigate over here and also voyeur navigate if I found us we are using more than this like two three links I might go ahead and update this drop down link later on but for now I think this is enough for us and I believe I have that type over here that should fix it and yeah I think we're good to go guys so let's do a Reload let's try again I'll go to the blog page and I click on profile no page reload and it seems to be working now now you obviously don't have API tokens enabled so technically if you never plan on using it you can delete this code I'm going to keep it for now in case we want to add an API at some point and if I go to the blog and homepage we are not getting any page reloads very nice so now that we have this guys let's go ahead and actually bring our blog page template over to our application so on the GitHub again as always guys the link will always be in the description there is a file called blog. html so it is the template for our blog page so I'm going to start off by first copying the entire thing by clicking on copy raw file bring it over to vs code and I'm going to close all these files at top so it's a bit easier for you guys to see it did not copy it let's try again I'm gonna move it over here and if you're on vs code it should automatically detect it as HTML if it did not it can do command shift p if you're on Mac on Ctrl shift p and open up this toolbar and then search for a language okay it gives you the ability to change the language hit enter and then type in HTML okay on manually set it so the first part we don't need that we don't need the header I'm going to remove all of those this is going to be exactly the same thing we did for the homepage guys I'm not going to try to explain it too much we only need the content inside this main okay so I'm going to go ahead get rid of everything copy the content inside domain and paste it inside our X app layout let me format it and then we can click this new file we opened let's go back and let's see if it's working or not it seems to be working yep the search bar is looking nice the recommended topics looks good now our post itself obviously is not working the image is not loading totally okay for now I'm going to go ahead and just load some dummy data over guys we're going to actually use a liveware component for this but for now I'm just going to put some information here so we can actually see how it looks okay and later on we will go ahead and create our library component so the first part is going to be our filters this article is actually where we are showing a single post right so we can actually go ahead and extract this inside its own a blade component or inside its own blade file okay so it's a bit easier and we can also do a loop so let's go ahead and do that I'm going to open up the terminal and let's create a blade component so we can actually put this article inside of it so let's do PHP art send make component and I'm gonna name it also if you guys remember if for our blade components we had a post folder so we have a postcard and for this one I'm just going to name it uh post actually Pro so it's going to be posts post or what else can we name it actually is this like a post item why not let's name it post item so let's do that I'm going to hit enter and we also need to do dash dash view as always I keep forgetting that so we only create a view file and not a PHP file let's hit enter and I seem to have I always make this mistake component oh and let's fix that and now we should have any component so we have a postcard and post item right so let's go ahead open up this post item and I'm going to copy this entire article actually inside of it right so let's go ahead copy this I'm going to move it all over here save this and now we can go ahead and basically do X post dot post item and it should be able to basically look exactly identical very good so for testing preferences guys let's go ahead open up our post controller and I'm going to basically pass it in some random posts this is just for now later on we'll update that so I'm going to say posts and it's going to be equal to our post table and I'm going to just basically take like five posts okay just for now uh we're not going to be using this actually just it's just I just want to make sure that we are showing the data properly so let's open up our index file let's close the controller now we can go ahead and actually add a for each Loop over here and say for posts as post go ahead and for each of them display our post item and inside the post item we can actually go ahead and add a prop of post and then we should have access to it over here very good so let's see if it's work it's working or not actually I'm not passing in the post so let's go ahead and do that I'm gonna say post equals post and now it's working just fine so let's go ahead and actually display the post content here instead of this kind of Domi data we have over here now so let's open up our post item blade component so the first one is going to be the Tom mail now for the thumbnail because I'm using a fake area do we use kind of a faker to generate image URLs so it's already an image URL stored on our database we can go ahead and just do Post image now this will later on cause issue once we create our admin panel and we're uploading images so we will I will come back and update this but for now this should be more than enough next up you have the Avatar so this is the author of the post so we can go ahead and here say post Dot user or we can also do author I think author would be a little bit better and then dot name now we don't have the author yet on our post so we will have to go ahead and Define that and then this one is when the post was posted so I'm going to say post Dot published at dot diff for humans now this tip for humans it should be an S is a larval carbon function that basically gives us in a format of like two days ago something like that and so in order for this to work we actually need to convert this published ad to a daytime okay so let's go ahead and do that on our post if you try again now we get a bunch of Errors so first one is telling us name is null that's because this author does not exist so let's go ahead and Define that first so I'm going to open up our post model we can scroll down and or we can at the top go ahead and Define a relationship of author so I'm going to say public function author and this is going to be one two and we can go ahead and say this dot belongs to okay so every post basically belongs to a single author right so this is one too many relationships so an author can have many posts and a post has only one author and This one belongs to a user okay an object of type class user and I believe that's all we have to do actually we don't need to do anything else so let's see if it works if it doesn't we might have to Define yeah we don't need to actually Define at the foreign key okay so the foreign key is going to be user ID so let's try it out it is working now it's telling us this for humans on null so in order to fix this we need to actually cast publish that as a date so I'm just going to go ahead and copy that from actually our users if you guys one so inside our user model it automatically comes with a cast code so I'm just going to go ahead and copy that move it over to our post and instead of it's email verified I'm going to say published at and now our published ad is going to be a daytime and automatically become a carbon object so we can actually go ahead and call this diff for humans on it so let's go ahead and check this out and now it seems to be working guys so we are getting Miss Gloria something Tyler skills so it seems to be working very good our image is also working now what about this icon that we have for each user how can we fix that so we can go ahead and take a look at how Jet Stream is showing the icon at the top let's go ahead and open up our uh navigation menu so inside our navigation menu we're actually including the top bar inside this header right so let's open up header right hit the right Alt and let's see where we are showing the image of the user's profile icon it's over here so it's using alt user profile photo URL so that's basically what we have to use to display the profile photo so let's go ahead and copy this I'm going to copy it move over to our post component and here we can say instead of Avatar inside here we can go ahead and say a post dot author Dot profile photo name and here instead of this alt I'm going to actually go ahead and display the name of the author okay I think that should get the job done so let's go ahead and do a Reload I didn't even need to reload automatically reload it now we are getting the authors profile image as well so very nice guys now one more thing remaining I think is the post content so or the post body so let's go ahead and update that first post that's the title so let's go ahead and add the title post title and next up we have this one which is supposed to be the post body I believe but we can go ahead and do that now for the post body we actually technically need an excerpt which is going to be like a shorter version of it so for now I'm just going to go ahead and put the body and then I'll come back and I'm going to convert this into an expert excerpt so this one is going to be our like button for now I'll just leave it as is we will later on have to go ahead and actually create a library component for this is there anything else we need to change no we also have one more thing which is a five minute read so how many how long is supposed to be we don't actually have that on our database so we'll have to manually calculate this the one easy solution guys is we can see average reading speed for humans I'm going to search that on Google if I can type in speed and apparently it is 250 words per minute right so we can count the number of words we have on our post and then divide that by 250 and get a rough estimate of how long it takes to read this okay that's like a short easy way of doing it instead of having to actually type that in and yeah that's from Google okay maybe there are some other numbers it seems to be between 200 and 300 words per minute so I'm going to go ahead and use 250.
so it's going to be very easy we can go ahead and actually Define a method on our post model to actually get this so let's go ahead and do that I'm going to open it up let's do it at the bottom I'm going to go ahead and create a new function for this so I'm going to name the function reading time and or I will say get earlier reading time should be okay although you might be confused with a property so let's just name it get reading time now we need to count the number of words we have so I'm going to say words equals to and PHP actually already has emitted for getting a number of words in a string so we can go ahead and say Str I believe is something like that word count yep it's over here and we can go ahead and pass it in our body and then based on Google the average reading speed was 250 words per minute so let's divide it by 250. and I believe that should be enough we can maybe also round it off if it gives us some you know 2. 5 minutes or something like that so let's go ahead and do that we don't need it to be exactly accurate and I think that should be enough so let's go ahead and return just return this now this is actually my first time doing this so we'll see if it works or not if we find any issues with it later on we can go ahead and upgrade this now one more thing we also have guys is this isn't actually the blog post view page right so we need to actually go ahead and show kind of a description or a minified version so we need to also Define an excerpt so I'm going to go ahead and actually similar to our reading time Define emitted to actually do that so I'm going to say public function get excerpt I think that's how you spell it I could be wrong I'm not sure guys to be honest I think so and inside here what you need to do is we need to go ahead and basically let's say only get the first 100 characters or something of ever post okay so it's going to be relatively easy to implement so let's go and do that so let's do this we can go ahead and say return and Laurel actually has a string helper and for some reason it does not seem to be recommending it to me vs code is it Str nope it's not recommending it so let's go ahead and do just get the import from somewhere over here not stripe SDR so I'll open up the helpers website sometimes it happens for me some for some reason vs code does not import some things properly I think it's yeah it's inside illuminate support Str so let's go ahead and include that Str so now we have it I can go ahead and say Str and it has something called the limit it gives you basically it limits the number of words you see so if you have like a thousand word string it will give you the first 200.
