https://github.com/futureinsighttech/searchastro

https://github.com/futureinsighttech/searchastro

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/futureinsighttech/searchastro
• Owner: FutureInsightTech
• Created: 2024-10-21T10:09:49.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-10-21T10:22:25.000Z (2 months ago)
• Last Synced: 2024-10-21T15:03:05.724Z (2 months ago)
• Language: Astro
• Size: 311 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Search Feature for Astro Blog

This project adds a search feature to an Astro blog, allowing users to search through blog posts using fuzzy search logic.

## 🚀 How It Works

The search functionality uses the `fuzzy` library to provide an efficient search experience. Users can enter a query in the search input field, and the system filters blog posts based on that query. If there are matching results, they will be displayed dynamically; otherwise, a "No posts found" message will appear.

### Features:

- 🔍 Fuzzy search to improve search accuracy even with partial matches.

- 📄 Results update in real time as the user types.

- 📝 Easily extensible for more complex use cases (e.g., adding metadata or tags).

### Example Usage:

```jsx

import fuzzy from "fuzzy";

const posts = [

  { title: "First Post" },

  { title: "Second Post" },

  { title: "React and Astro" },

  { title: "Using Fuzzy Search" },

];

// Input search query and return matching posts

const searchQuery = "React";

const results = fuzzy.filter(searchQuery, posts, {

  extract: (post) => post.title,

});

console.log(results);

```

## 📂 Project Structure

```text

├── src/

│   ├── components/

│   │   └── SearchComponent.jsx  # Core search logic

│   └── pages/

│       └── index.astro          # Renders the search component

├── README.md

├── package.json

└── tsconfig.json

```

## 🧞 Commands

- `npm install`: Installs dependencies.

- `npm run dev`: Starts the local dev server.

- `npm run build`: Builds the project for production.

## 💻 Live Demo

To explore the code and try the search feature, check out the [GitHub repository](https://github.com/FutureInsightTech/SearchAstro).