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:

1. Run the command npm run dev in your terminal to spin up the project.

2. Once the project is running, open your browser and navigate to localhost:3000.

3. In order to add the search widget, go to the pages directory and open the index.astra file.

4. To create the search widget component, create a new file called search-widget.astra inside the components directory.

5. Inside the search-widget.astra file, add a paragraph tag with the text "hi" as a placeholder for now.

6. Go back to the index.astra file and replace the placeholder text with <search-widget></search-widget> to import the search widget component.

7. 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.

8. 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

1. Inside the index.astra file, locate the position where you want to place the search widget component. For example, you can add it below the existing content.

2. Wrap the search widget component with an <aside></aside> tag to indicate it as a complementary element to the main content.

3. Inside the <aside></aside> tag, create a form with a class of form for styling purposes.

4. Add an action attribute to the form to define its action when submitted.

5. Inside the form, create a <div></div> element that will hold two items: a label and a span.

6. The label should have a for attribute that points to an id called "search" which we will add later. The label text can be something like "Search the blog".

7. The span should contain a descriptive text such as "Enter a search term or phrase to search the blog".

8. Outside the div, add an <input> element with the type attribute set to "search".

9. Set the required attribute to ensure that the input field is not left empty.

10. Specify the minimum and maximum length of characters allowed in the input field by setting the minlength and maxlength attributes. For example, set minlength="2" and maxlength="24".

11. Give the input field a name attribute of "search" to retrieve the form data.

12. Also add an id attribute of "search" to the input field to link it with the label.

13. Add a placeholder attribute 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:

1. Locate the global CSS file in your project. This file is usually a default file that comes with the blog template.

2. Add the following styling rules to the CSS file:

   • Set the scrollbar-gutter property to stable on the HTML element to minimize any jumping when the scrollbar appears or disappears.

     html{scrollbar-gutter:stable;}

   • Add a min-height of 100vh to the body element to make sure the main content takes up most of the viewport.

     body{min-height:100vh;}

   • 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.

     body{display:grid;grid-template-rows:auto1frauto;}

3. Next, apply some specific styling to the search widget form by targeting the form class:

   • Set the gap property to create some spacing between the form elements.

     form{display:grid;gap:1rem;}

   • Specify a max-width value to limit the width of the search term input field.

     forminput[type="search"]{max-width:32ch;}

   • Add a border to the form with a thickness of 2 pixels and a color that matches the default color scheme of the blog.

     form{border:2pxsolid#222;}

   • Apply a border radius of 0.5rem to create rounded corners for the form.

     form{border-radius:0.5rem;}

   • Add some padding to the form elements for better spacing.

     form{padding:1rem;}

4. Finally, style the form label and input elements to make them more prominent:

   • Set the font-weight to bold and increase the font-size of the label.

     formlabel{font-weight:bold;font-size:2rem;}

   • Inherit font properties for all input elements to ensure consistent styling across the site.

     input{font:inherit;}

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.