---
import { getCollection } from "astro:content";
import { SITE } from "@config";
import Layout from "@layouts/Layout.astro";
import Main from "@layouts/Main.astro";
import Header from "@components/Header.astro";
import Footer from "@components/Footer.astro";
import Search from "@components/Search";

// Retrieve all articles
const posts = await getCollection("blog", ({ data }) => !data.draft);

// List of items to search in
const searchList = posts.map(({ data }) => ({
  title: data.title,
  description: data.description,
  data,
}));
---

<Layout title={`Search | ${SITE.title}`}>
  <Header activeNav="search" />
  <Main pageTitle="Search" pageDesc="Search any article ...">
    <Search client:load searchList={searchList} />
  </Main>
  <Footer />
</Layout>