How to Create an Astro Search component 🔍🤔

• Astro-search-component

  1 3 10.0 Astro

Note: The source code for this project is available on this GitHub repository.

• tailwindcss-typography

  49 3,732 7.3 JavaScript

  Beautiful typographic defaults for HTML you don't control.

  

To do this, install the Astro Tailwind integration, and the typography plugin to modify the styles in markdown rendered pages, like the posts.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• Tailwind CSS

  1,280 78,370 9.4 TypeScript

  A utility-first CSS framework for rapid UI development.

  

For now, don't worry about the styles. We'll be applying Tailwind CSS later in the tutorial.

• iconify

  30 3,824 8.5 TypeScript

  Universal icon framework. One syntax for FontAwesome, Material Design Icons, DashIcons, Feather Icons, EmojiOne, Noto Emoji and many other open source icon sets (over 150 icon sets and 200k icons). SVG framework, React, Vue and Svelte components!

  

I'll also use a search icon from Iconify, one of the largest collections of open-source icons.

• Fuse

  60 17,504 6.1 JavaScript

  Lightweight fuzzy-search, in JavaScript

import Fuse from 'fuse.js'; import { useState } from 'react'; // Configs fuse.js // https://fusejs.io/api/options.html const options = { keys: ['frontmatter.title', 'frontmatter.description', 'frontmatter.slug'], includeMatches: true, minMatchCharLength: 2, threshold: 0.5, }; function Search({ searchList }) { // User's input const [query, setQuery] = useState(''); const fuse = new Fuse(searchList, options); // Set a limit to the posts: 5 const posts = fuse .search(query) .map((result) => result.item) .slice(0, 5); function handleOnSearch({ target = {} }) { const { value } = target; setQuery(value); } return ( <> Searchlabel> {query.length > 1 && (

Found {posts.length} {posts.length === 1 ? 'result' : 'results'} for '{query}' p> )}

{posts && posts.map((post) => (
• {post.frontmatter.title}a> {post.frontmatter.description} li> ))} ul> ); } export default Search;

• astro

  503 42,342 10.0 TypeScript

  The web framework for content-driven websites. ⭐️ Star to support our work!

  

Fortunately, the Astro web framework has an API, where you can fetch the markdown or MDX files you need. After fetching all the data, we'll able to search for a specific query provided by our users.

Suggest a related project