In order to make our website feel, well, more like a website, I've created a few CSS styles for us to use. You can grab these styles yourself by checking out the source code for this lesson, or I've actually linked it also directly in the description below. Once you're done downloading them, you can create an assets directory, like this, and put the file in there. ts, you can use the CSS option and give it the path to our file.
Now over in the browser, you can see that our page has a dark background instead of the light, so we know the CSS is working. Alright, while we're here looking at the payload from StoryBlock, I want you to notice a couple things. First of all, notice that we have our content, and then underneath content we have a Body okay, and the body is an array This is an array of all the blocks that we're going to set up on the right hand side But right now there's just a single block on this page. That is the hero, right?
So right here this very first block that you can see in our Body is that hero block now it has a property called component in it This is going to line up with a component that we should create our project Notice the content itself is actually a component as well. So here's the content Come right down here Yeah, the the content is a page component and that comes from that content type that we saw earlier So we should make components both for the hero and for the page Alright, so let's start out by doing it for the page The way Storyblocks Nux module is set up is it actually looks for a Storyblock directory to find these components in. So let's create that directory and then we'll create the page component. The first thing I'll do inside this page component is define the script setup section and in there define a prop called block.
This block prop will be an object. Now this prop is actually going to be common to all the components within this StoryBlock directory. It's basically a way to pass down information about that particular block from StoryBlock. Now let's flesh out the template for our page component.
First I'll create a wrapper div here, which isn't strictly necessary, but I'm kind of a creature of habit and in view 2 you always had to have a single wrapper element. Now the whole point of this page component is to loop over all of the different blocks with inside our content body. Once again, that's just hero for now, but as we continue to grow our app, we'll add other things as well. To do that, we'll want to use the StoryBlock component that ships with the StoryBlock Nux module.
This component takes in a block prop and we'll find the appropriate component inside of the StoryBlock directory. based on the name of the component in the JSON. vue file in just a moment. So I'll add the block prop here, but the thing that we should give it is actually inside of the body at this point.
So let's loop over each of those blocks within the body, and then we can access those individual blocks. body. Because block at this point, remember, corresponds to the content in the JSON. I'll also provide a key here, because when you're looping over things in Vue, you should always provide a key.
underscoreUID. Cool. Lastly, we can provide the block to the block prop. Great.
That takes care of our page component. So now let's create that hero component. vue. Just like with the previous component, we'll give it a script setup section with a block prop.
I'll just copy and paste that. And I won't make you watch me type out the markup for this component, so I'll just paste that in. And here you can see that we access the data on the hero just as you'd probably expect. We can get the heading, the subheading, the image, and so on.
Awesome. The very last piece of this puzzle is to actually use the story block component on the home page and pass it that content block. content. Lastly, I'll just make this conditionally show only when story is available since we do have to await for the result from the API.
All right. Let's see what that gives us. Sure enough, now we have a nicely styled hero section for our site. If I go over to the right hand side to make some edits, you can see that our live updates are still working great.
Now there's one more cool thing that we can do to enhance our components even further. view, I want to add the editable attribute to the wrapper dip and we'll set the value to block. be editable as a directive that ships with that Storyblock Nux module. view as well, and then over in the browser, I can show you exactly what it's doing.
Now, when I click on the hero here, you'll see this little green tab show up down near the bottom. And it's got the name of my component, plus this little arrow to kind of indicate that it's nested under something else. If I click on the arrow, you can see exactly what it's nested under. That is the page.
And when I navigate to page here, over on the right hand side, sure enough, we're shown what we need to edit the page. Pretty cool. Now, if I were to click on the hero again, we're zoomed back over to the interface for editing the hero. Essentially, this means that you can navigate through your different components via the site preview itself.
You don't necessarily have to come over here to look for things. You can just click directly on what you want to edit on the site. Pretty cool. Now, before we conclude this video, there is one more thing that I want to show you.
So far, you might have noticed that the URL for this page is localhost-3010-slash-home. Okay, now on most websites, you really want this, you want your home page. to exist at the root path. So in other words just a plain slash no slash home.
Well in order to change that we can come up here to entry configuration and you'll notice the slug right now is set to home. And sure enough that matches up with the path in the URL. But we can't just remove this altogether. Instead what we can do is we can come down here and set this real path setting.
So the real path we want for this is to be just root path. So I'll hit save and close and awesome. Now we have the home page at the root path and this is really going to help in the next lesson when we start adding more pages. In order to make our website feel, well, more like a website, I've created a few CSS styles for us to use.
You can grab these styles yourself by checking out the source code for this lesson, or I've actually linked it also directly in the description below. Once you're done downloading them, you can create an assets directory, like this, and put the file in there. ts, you can use the CSS option and give it the path to our file. Now over in the browser, you can see that our page has a dark background instead of the light, so we know the CSS is working.
Alright, while we're here looking at the payload from StoryBlock, I want you to notice a couple things. First of all, notice that we have our content, and then underneath content we have a Body okay, and the body is an array This is an array of all the blocks that we're going to set up on the right hand side But right now there's just a single block on this page. That is the hero, right? So right here this very first block that you can see in our Body is that hero block now it has a property called component in it This is going to line up with a component that we should create our project Notice the content itself is actually a component as well.
So here's the content Come right down here Yeah, the the content is a page component and that comes from that content type that we saw earlier So we should make components both for the hero and for the page Alright, so let's start out by doing it for the page The way Storyblocks Nux module is set up is it actually looks for a Storyblock directory to find these components in. So let's create that directory and then we'll create the page component. The first thing I'll do inside this page component is define the script setup section and in there define a prop called block. This block prop will be an object.
Now this prop is actually going to be common to all the components within this StoryBlock directory. It's basically a way to pass down information about that particular block from StoryBlock. Now let's flesh out the template for our page component. First I'll create a wrapper div here, which isn't strictly necessary, but I'm kind of a creature of habit and in view 2 you always had to have a single wrapper element.
Now the whole point of this page component is to loop over all of the different blocks with inside our content body. Once again, that's just hero for now, but as we continue to grow our app, we'll add other things as well. To do that, we'll want to use the StoryBlock component that ships with the StoryBlock Nux module. This component takes in a block prop and we'll find the appropriate component inside of the StoryBlock directory.
based on the name of the component in the JSON. vue file in just a moment. So I'll add the block prop here, but the thing that we should give it is actually inside of the body at this point. So let's loop over each of those blocks within the body, and then we can access those individual blocks.
body. Because block at this point, remember, corresponds to the content in the JSON. I'll also provide a key here, because when you're looping over things in Vue, you should always provide a key. underscoreUID.
Cool. Lastly, we can provide the block to the block prop. Great. That takes care of our page component.
So now let's create that hero component. vue. Just like with the previous component, we'll give it a script setup section with a block prop. I'll just copy and paste that.
And I won't make you watch me type out the markup for this component, so I'll just paste that in. And here you can see that we access the data on the hero just as you'd probably expect. We can get the heading, the subheading, the image, and so on. Awesome.
The very last piece of this puzzle is to actually use the story block component on the home page and pass it that content block. content. Lastly, I'll just make this conditionally show only when story is available since we do have to await for the result from the API. All right.
Let's see what that gives us. Sure enough, now we have a nicely styled hero section for our site. If I go over to the right hand side to make some edits, you can see that our live updates are still working great. Now there's one more cool thing that we can do to enhance our components even further.
view, I want to add the editable attribute to the wrapper dip and we'll set the value to block. be editable as a directive that ships with that Storyblock Nux module. view as well, and then over in the browser, I can show you exactly what it's doing. Now, when I click on the hero here, you'll see this little green tab show up down near the bottom.
And it's got the name of my component, plus this little arrow to kind of indicate that it's nested under something else. If I click on the arrow, you can see exactly what it's nested under. That is the page. And when I navigate to page here, over on the right hand side, sure enough, we're shown what we need to edit the page.
Pretty cool. Now, if I were to click on the hero again, we're zoomed back over to the interface for editing the hero. Essentially, this means that you can navigate through your different components via the site preview itself. You don't necessarily have to come over here to look for things.
You can just click directly on what you want to edit on the site. Pretty cool. Now, before we conclude this video, there is one more thing that I want to show you. So far, you might have noticed that the URL for this page is localhost-3010-slash-home.
Okay, now on most websites, you really want this, you want your home page. to exist at the root path. So in other words just a plain slash no slash home. Well in order to change that we can come up here to entry configuration and you'll notice the slug right now is set to home.
And sure enough that matches up with the path in the URL. But we can't just remove this altogether. Instead what we can do is we can come down here and set this real path setting. So the real path we want for this is to be just root path.
So I'll hit save and close and awesome. Now we have the home page at the root path and this is really going to help in the next lesson when we start adding more pages.