Create an Astro Component for Links
It's time to get your hands dirty by creating your first Astro component.
This component will be relatively simple but very handy. You are creating a Link component that will take an href as well as an isExternal boolean telling the component whether or not it's an external link.
All components in Astro follow a similar pattern, you'll create a Props interface of all the props you want to pass the component. This will tell Astro what props your component expects and throw errors if it doesn't get those. Then you'll actually destructor those props from Astro.props
Finally we'll create some html and conditionally apply nofollow noopener norefferer external rel properties.
You'll also see how <slot />s work to accept children that are passed to the component.
Instructor: [0:00] Components are the basic building blocks of any Astro project. The good news is that we already know how to create components, even though we haven't talked about it explicitly. For example, the layout file that we worked on is actually an Astro component.
[0:15] Here's a quick refresher. We defined the props with an interface, destructured the values from the Astro.props property, and used the slot element to indicate where the children of this component are going to be injected. The rest was just plain HTML and CSS.
[0:32] Let's create one more component for good measure. One thing that we're repeatedly using is a link. For example, we have four links in the nav above. I anticipate that we're going to be using a lot more, so maybe it's a good idea to create a link component.
[0:48] Let's delete the card component and create our own link.astro file. We're going to define the component script and then define the props interface.
[1:02] For a link component, we would want the href, which is going to be a string. It's going to be a mandatory prop as well. We can grab the relationship, which is also going to be a string, but we can make this optional. We can additionally grab an isExternal optional boolean, which we can later use to add additional attributes to our link based on if it's external or not.
[1:27] We can also define an optional class, which is going to be a string. Now, let's destructure all of them from Astro.props. So that would be the href, rel, isExternal, and class. Now have this in mind, we can't really use the class as a keyboard right here because it's reserved, so we need to alias this.
[1:51] We can do that by appending a colon after class and renaming it to, for example, class lists. Of course, we need to fix a typo, so it's href. And that's it for the component script.
[2:02] Now, we can open an anchor tag, add the slot inside so that everything that we put into our link actually gets rendered within the anchor tag. Let's go back and pass the href that we already have from the props. We'll use the class:list or the class lists directive to combine the default classes that we're going to define with the ones that we accept from the props.
[2:25] For example, let's define a class that sets the text color to blue 500 when we hover the link. This is going to be the only base class and then we can also append the class lists. This is perfectly fine. Of course, we need to also define the rel attribute and we can make that a template string.
[2:48] First, we're going to pass the rel that we have from the props and then we're going to use the isExternal prop to check if it's true. We're going to append the nofollow, noopener, and noreferrer, and also the external rel values. Otherwise, we'll just pass an empty string.
[3:10] OK, so now our component should look something like this. Just as a refresher, the nofollow, noopener, noreferrer, and external rel values are good for SEO. Now, let's go back to our layout and import our new link component. Import link from components link.astro. We can scroll down and instead of the anchor tag, we're going to use our new link component.
[3:44] Additionally, for the last link, we're also going to pass the isExternal which as you can see gets recognized by Astro. Before we refresh this page let's go back to the index page and remove the card component usage because we deleted the file.
[4:00] Now we refresh the page and hover on our links, we'll see that they actually turn blue when we hover them. If we inspect the GitHub link, we're going to see the nofollow, noopener, noreferrer, and external rel values but we also see undefined as the first value. Let's fix that real quick.
[4:19] The first value was the rel value that we get from the props and because it is an optional prop, we don't pass any value to it. By default, it's undefined. To fix this, we can assign a default empty string in cases when we don't define the prop. If we save this we're going to see that the undefined is gone but it keeps the nofollow, noopener, noreferrer, and external values.
[4:43] OK, let's recap. Astro components can be defined by simply creating an Astrofile that defines its props by using an interface and by the way this is an optional thing. If your component doesn't need any values from the outside you don't have to define the props. The components are HTML templates that define where their content will be injected by using the slot element.
[5:07] By the way, that's optional as well. Not all components accept children so it's fine if you don't use the slot element as well. Then in order to use the components, we just import them in the other files and use them as regular HTML elements.
Oh good catch Adan! It seems the order of the lessons got mixed up a little. We'll fix it right now. Thank you!
Lesson 4 should be "Create Static Pages in Astro Using File Based Routing", but we'll take care of that right now.
Done! Zac Jones saved the day! 😁 Do a refresh and the order should be fixed now, Adan.
Some content is missing between Lesson 3 and 4 since Lesson 4 does not have the current version of Layout.astro as shown in this video.