- author: Coding in Public
Adding a Search Widget in Lesson Two
Welcome to lesson two. In this lesson, we will be adding a search widget to our project. To get started, follow the steps below:
Run the command
npm run devin your terminal to spin up the project.
Once the project is running, open your browser and navigate to
In order to add the search widget, go to the
pagesdirectory and open the
To create the search widget component, create a new file called
search-widget.astrafile, add a paragraph tag with the text "hi" as a placeholder for now.
Go back to the
index.astrafile and replace the placeholder text with
<search-widget></search-widget>to import the search widget component.
To enable automatic import of components, make sure you have the Astro extension installed in your code editor. If you don't have it, you can find it in the extensions marketplace.
Save the changes and you should see the "hi" text replaced with the search widget component.
Now that we have added the search widget component, let's proceed to template it out and style it according to our desired appearance.
Templating the Search Widget
index.astrafile, locate the position where you want to place the search widget component. For example, you can add it below the existing content.
Wrap the search widget component with an
<aside></aside>tag to indicate it as a complementary element to the main content.
<aside></aside>tag, create a form with a class of
formfor styling purposes.
actionattribute to the form to define its action when submitted.
Inside the form, create a
<div></div>element that will hold two items: a label and a span.
The label should have a
forattribute that points to an
idcalled "search" which we will add later. The label text can be something like "Search the blog".
The span should contain a descriptive text such as "Enter a search term or phrase to search the blog".
Outside the div, add an
<input>element with the
typeattribute set to "search".
requiredattribute to ensure that the input field is not left empty.
Specify the minimum and maximum length of characters allowed in the input field by setting the
maxlengthattributes. For example, set
Give the input field a
nameattribute of "search" to retrieve the form data.
Also add an
idattribute of "search" to the input field to link it with the label.
placeholderattribute to provide a brief instruction for the user. For example, "Enter a search term".
After completing these steps, the search widget should be templated out with the desired structure.
Styling the Search Widget
Now that we have templated the search widget, let's apply some basic styling to it. Follow the steps below:
Locate the global CSS file in your project. This file is usually a default file that comes with the blog template.
Add the following styling rules to the CSS file:
stableon the HTML element to minimize any jumping when the scrollbar appears or disappears.
100vhto the body element to make sure the main content takes up most of the viewport.
Use CSS Grid to create a layout for the body, header, and footer elements. This will allow the main content to occupy most of the space while keeping the header and footer in their respective positions.
Next, apply some specific styling to the search widget form by targeting the
gapproperty to create some spacing between the form elements.
max-widthvalue to limit the width of the search term input field.
Add a border to the form with a thickness of 2 pixels and a color that matches the default color scheme of the blog.
Apply a border radius of 0.5rem to create rounded corners for the form.
Add some padding to the form elements for better spacing.
Finally, style the form label and input elements to make them more prominent:
boldand increase the
font-sizeof the label.
Inherit font properties for all input elements to ensure consistent styling across the site.
Once you have added these styles, the search widget should be visually enhanced with the specified appearance.
Please note that at this point, the search widget does not have any functionality. In the next video, we will set up the redirect functionality when the form is submitted, and in subsequent videos, we will create the search route to handle the search query.
Stay tuned for the next lesson, where we will continue building upon this search widget implementation.