🔍 Buscador Ultra-Rápido con Fuse.js, Astro & Tailwind

Buscador dinámico de alto rendimiento diseñado para Astro. Utiliza Fuse.js para búsquedas aproximadas (fuzzy search) y un endpoint dinámico para generar el índice de contenidos en tiempo real. Optimizado para dispositivos móviles, eliminando la fricción innecesaria y mejorando la velocidad de respuesta.

---

✨ Características

• Búsqueda Difusa (Fuzzy Search): Localiza resultados incluso con errores ortográficos o términos parciales gracias al algoritmo de Fuse.js.
• Generación de Índice Dinámico: Endpoint API nativo de Astro que transforma los datos de tu blog en un JSON optimizado para búsqueda.
• Optimización con Debounce: Implementa un retraso inteligente de 200ms que reduce la carga del procesador al evitar ejecuciones en cada pulsación.
• Experiencia Mobile First: - Ajuste automático de scroll (scrollIntoView) para mantener el input visible sobre el teclado virtual.
  • Altura de resultados controlada con scroll interno y overscroll-contain.
  • Botón de limpieza (X) unificado y de fácil acceso táctil.
• UI Reactiva & Moderna: Diseño con degradados, efectos de foco con ring de Tailwind y estados active para feedback táctil instantáneo.

🛠️ Stack Tecnológico

• Astro: Framework principal para la estructura y el manejo de endpoints de servidor.
• Fuse.js: Motor de búsqueda ligero y potente sin dependencias externas.
• Tailwind CSS: Estilado mediante clases utilitarias para un diseño responsivo.
• Lucide Astro: Iconografía minimalista para los controles de búsqueda.

📂 Estructura del Código

• src/pages/search.json.ts: Endpoint que genera el índice de búsqueda procesando posts y etiquetas.
• src/components/Search.astro: Interfaz de usuario con lógica de TypeScript y CSS para limpieza de inputs nativos.
• src/lib/data.ts: Simulación de base de datos que alimenta el buscador.

---

📡 Arquitectura de Datos (Endpoint)

El proyecto utiliza un archivo search.json.ts que actúa como una API interna. Este procesa los posts y aplana las etiquetas (tags) para que sean fácilmente indexables por Fuse.js:

// Ejemplo de la lógica en pages/search.json.ts
export async function GET() {
  const searchIndex = posts.map((post) => ({
    slug: post.slug,
    titulo: post.titulo,
    descripcion: post.descripcion,
    categoria: post.categoria,
    link: `/blog/${post.slug}`,
  }));

  return new Response(JSON.stringify(searchIndex), {
    headers: { "Content-Type": "application/json" },
  });
}

---

🚀 Scripts Disponibles

Comandos ejecutados habitualmente con pnpm:

Comando	Acción
pnpm install	Instala las dependencias (Astro, Fuse.js, Lucide).
pnpm dev	Inicia el entorno de desarrollo en localhost:4321.
pnpm build	Genera el sitio estático optimizado en /dist.

---

⚙️ Configuración Personalizada

1. Ajustar Sensibilidad: En el objeto new Fuse(), cambia el valor de threshold. Un valor de 0.2 es muy estricto, mientras que 0.6 permite mucha más flexibilidad en las coincidencias.
2. Campos de Búsqueda: Modifica la propiedad keys: ["titulo", "descripcion"] para incluir etiquetas, autores o contenido completo.
3. Límite de Resultados: El script está configurado para mostrar un máximo de 8 resultados para mantener la limpieza visual en móviles.

📋 Requisitos

• Node.js (Versión 18 o superior).
• Gestor de paquetes (pnpm recomendado, npm o yarn).

---

Desarrollado con ❤️ por isnaroa