-
Currently, if I log in using our testuser1@test.com user,
-
we are redirected to what is currently meant to be our landing page path, the just slash route that we have here. A while back where we were setting everything up
-
before we had our courses index page set up, we were using this as a temporary placeholder to redirect to until we got that courses index page created. So we have our courses index page created now,
-
so let's go ahead and swap all of those redirects out. So let's jump back into our text editor and hit command shift F to bring up our global project search.
-
To search for two path pointing to just slash. Should see our organization controller, forgot password controller and login controller show up. This is the one that we just walked through here from our login controller.
-
We wanna replace all instances of that, so I'm gonna click the dropdown arrow there to globally replace all of these with two routes
-
pointing to our courses index page. And then we can hit the replace all button right here to replace all five occurrences of this
-
with our two route courses index designation. Command shift E to open back up our file explorer. And now if we jump back into our project here and log out,
-
let's log in one more time. So testuser1@test.com, something for the password. I have a really hard time spelling something. There we go.
-
Now we're taken right back into our courses index page rather than that temporary placeholder that we had for our homepage. For that homepage, if we jump back into our text editor, within our web routes,
-
we currently have this being rendered out via inertia. So let's get that switched to being rendered out by EdgeJS as we don't need inertia for that. And then we can set up a specific CSS file
-
for that one individual page or any other landing pages that we may need so that we don't have our application CSS in our landing page CSS and vice versa,
-
keeping our landing page nice and slim for SEO purposes. So within our resources, let's go ahead and right click our views directory to add in a new file.
-
Within here, we'll add a folder called pages and we can call this page landing.edge. We can go ahead and add in our doc type, our HTML element, our head element, as well as our body element.
-
Within our head, we have those standard meta char set UTF-8 to set the character set for the document. And then we also have that meta name viewports
-
with content, width, device width, and then initial scale set to one for responsiveness. We can add in our title of plot my course.
-
And then we'll also use the vt-EdgeJS tag to add in the CSS file that we'll create next specific for our landing pages. So within our resources,
-
let's go ahead and right click that one more time, new file, that is CSS directory in here with a landing.css file inside. We'll still use TailwindCSS for this.
-
So we'll add in our Tailwind directives of base and then we also have components and utilities. But an additional thing that we're gonna wanna do here is if we take a look at our Tailwind config.js,
-
which is the default configuration of TailwindCSS we'll look for, is we have our content array here pointing to both our inertia directory,
-
as well as our SJS rendered resource pages. So any Tailwind classes that we use on our landing page not used in our inertia application
-
will inevitably be picked up by our inertia application CSS and vice versa, because both are added into this configurations content array so it's gonna look in both places
-
for both of the CSS files that we're gonna have. So let's instead give this Tailwind config.js file a copy and a paste inside of the root of our application.
-
Let's go ahead and rename this and get rid of the copy appendage and give it a specific name for our landing as Tailwind.landing.config.js. This setup is gonna allow us
-
to have two different Tailwind configurations, one for our application and one specific to our landing pages. And we're gonna want the content array here to note that specifically.
-
So we'll get rid of our inertia content pages within our content array of our landing page config. And then inside of our inertia configuration, we'll get rid of our resources views
-
from the content array there. Now this is the one using ShotCM view. Our landing page is not going to be making use of ShotCM view as that is dependent on view being there
-
and our landing page isn't making use of that. So we can go ahead and just collapse down our extend, get rid of all of that additional stuff there as well as the container adjustment and the plugin
-
and we can get rid of that plugin import at the top for this one too. And then also get rid of safe list for the dark mode there. Now inside of our landing CSS file,
-
we're going to want this CSS file to point to that landing specific configuration. So we'll add in a config at rule from TailwindCSS
-
pointing to, and this is relative to our CSS file, dot dot slash to go back a directory, dot dot slash to go back one more directory
-
because we're currently within our CSS folder inside of our resources. So we want to go back two directories to the root of our application and then point to our Tailwind landing config.js.
-
So we'll add Tailwind dot landing dot config.js there. And now this specific CSS file will look for this specific configuration
-
and then we can leave our inertia one alone as the Tailwind dot config.js will be the default configuration file used if a config is not specified.
-
Now what we need to do is jump into our V config so that we have an entry point specified for our landing CSS file. So we'll add a new item in here
-
pointing to our resources CSS landing dot CSS file and give that a save so it formats. And this is the exact identifier that we're going to want to copy
-
and go into our landing dot edge page and paste inside of our EdgeJS tag to use for this page. As for our body contents, for the sake of the lesson,
-
we don't really need to go over much here because it's just going to be basic HTML and CSS as a typical landing page would be. So let's just add ourselves a simple header with the icon
-
and a link to our login and register pages. So add a header class BG white and a nav with a class flex item center
-
justify between padding six and LG PX eight. Then another div with a class flex LG flex one and an anchor with an href pointing to our routes
-
with the identifier of landing which will just be this specific landing page here. So it's just going to link back to itself and we give that a class negative M 1.5 padding 1.5
-
and then a span with the class SR only and the text plot my course. Then we'll add our little icon that we've been using as the indicator right there. So I'll place a comment as a placeholder
-
underneath our div, but still on our navigations at another div, the class flex, flex one, justify N and a gap of four. And inside of here, we'll have our anchor
-
pointing to our register show page. So we'll use the route helper who'd build a link to our register show page there
-
that a class text, small font, semi bold, leading six and text gray 900 with the contents register. Give that a copy and a paste
-
as we'll want to do that as well for our login show page switching the text to login. And then we can also add a span with an ampersand
-
R A R R semi-colon to add in just a little arrow indicator there. We have the icon that we want right here
-
inside of our inertia layouts off layout right here. So we can give that SVG a copy before we leave this file though,
-
note that we have this linked using our link component. We did previously have this page being rendered by inertia. So that made sense then currently though,
-
we've switched this to being rendered by EdgeJS. So instead we want this to be an actual anchor element rather than staying inside of our inertia environment.
-
So we'll switch that to an anchor and then we'll jump back into our landing dot edge page and paste that icon in here. Let's also give it a class with a H eight
-
setting the height to eight and a width of auto. Okay, with all that set, we should be able to save jump back into our browser. Now we don't need to log up, but let's go ahead and log out
-
so that we can assure ourselves that our link right here is working a okay. And it's not, we got unauthorized access, which means I probably forgot to update the route. So let's go update the route real quick.
-
So let's jump back into our text editor here, jump into our web routes. Sure enough, there it is. So let's hold option hit up arrow twice to move that out of our auth protected route group.
-
And in addition to that, we no longer want inertia to render this page. So get rid of that as well as our organization middleware that was making use of there. And we can have EdgeJS render this out
-
by using the render method, pointing this to our pages, landing page, giving it the name landing there as well. Now we should be able to give that a save. Let's jump back, let that do its refresh.
-
Let's try clicking our link one more time. And sure enough, here we are. This is our landing page. Nice, simple, basic, but we have our register going to our register page, and we have our login
-
going to our login page.
