diff --git a/.vscode/settings.json b/.vscode/settings.json index 260819d5..09c0b4d2 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,6 +2,8 @@ "cSpell.words": [ "faustwp", "Kevinbatdorf", + "pagefind", + "postbuild", "sindresorhus", "stylesheet", "tailwindcss" diff --git a/components/SearchBar.js b/components/SearchBar.js index 0bdddf77..e72e5434 100644 --- a/components/SearchBar.js +++ b/components/SearchBar.js @@ -1,36 +1,29 @@ -import React, { useState, useEffect } from "react"; -import { gql, useQuery } from "@apollo/client"; +import React, { useState, useEffect, useRef } from "react"; import { MagnifyingGlassIcon } from "@heroicons/react/24/solid"; +import { MDXProvider } from "@mdx-js/react"; // For rendering MDX -const DOC_SEARCH_QUERY = gql` - query DOC_SEARCH_QUERY($searchTerm: String!) { - contentNodes(where: { search: $searchTerm }) { - nodes { - ... on Doc { - title - id - uri - } - } +// Function to call your Lunr-based search API +async function performSearch(query) { + try { + const res = await fetch(`/api/search?query=${encodeURIComponent(query)}`); + + if (!res.ok) { + throw new Error(`Error: ${res.status} - ${res.statusText}`); } + + const data = await res.json(); + return data; + } catch (error) { + console.error("An error occurred while performing the search:", error); + return []; } -`; +} export default function SearchBar() { const [isOpen, setIsOpen] = useState(false); const [query, setQuery] = useState(""); const [results, setResults] = useState([]); - - const { loading, error, data } = useQuery(DOC_SEARCH_QUERY, { - variables: { searchTerm: query }, - skip: !query, - }); - - useEffect(() => { - if (data && data.contentNodes) { - setResults(data.contentNodes.nodes); - } - }, [data]); + const modalRef = useRef(null); const openModal = () => { setIsOpen(true); @@ -38,25 +31,43 @@ export default function SearchBar() { const closeModal = () => { setIsOpen(false); + setQuery(""); + setResults([]); }; const handleKeyDown = (event) => { - if (event.metaKey && event.key === "k") { - event.preventDefault(); - openModal(); - } if (event.key === "Escape") { closeModal(); } }; + const handleClickOutside = (event) => { + if (modalRef.current && !modalRef.current.contains(event.target)) { + closeModal(); + } + }; + useEffect(() => { document.addEventListener("keydown", handleKeyDown); + document.addEventListener("mousedown", handleClickOutside); + return () => { document.removeEventListener("keydown", handleKeyDown); + document.removeEventListener("mousedown", handleClickOutside); }; }, []); + async function handleSearch() { + if (query) { + const searchResults = await performSearch(query); + setResults(searchResults); + } + } + + useEffect(() => { + handleSearch(); + }, [query]); + return ( <>