Adds a dynamic Search page (/{locale}/search/[?query={query}]) with a search form and list of search results with matches (highlights).
Adds Search results HTML partial endpoint /{locale}/search/results.partial/?query={query}.
Adds Search API endpoint with required parameters /api/search?locale={locale}&query={query} and optional fuzzy={'true'|'1'|'false'|'0'} (defaults to true).
Uses DatoCMS Site Search under the hood, which does the indexing and provides an API to get search results.
Excludes non-main content (site header and site footer) from being indexed to prevent them showing up in every search result.
Adds a catch all API endpoint (pages/api/[...notFound].ts) so any API route not found returns a 404 JSON response rather than a 404 HTML page.
Adds OpenSearch support, so browsers support 'tab to search'.
Adds script to download DatoCMS site data to src/lib/site.json so it can be used in search and seo related files (and for other features in the future).
Associated issue
Resolves #23
How to test
Open preview link
Navigate to search (in header) (/en/search/)
Enter a search query (like 'heading') (or 'astro' if searching on /nl/search/)
Review the search results
Play around with the search parameter in the URL, try a very short one (1 or 2 characters)
Play around with the JSON endpoint: /api/search?locale=en&query=heading.
Play around with the HTML partial endpoint: /en/search/results.partial/?locale=en&query=heading.
Read docs/search.md to find out more.
Checklist
[x] I have performed a self-review of my own code
[x] I have made sure that my PR is easy to review (not too big, includes comments) 🤷 bit big, included docs.
I have added/updated tests to prove that my feature works (if not possible please explain why)
[x] I have made changes to the README and if the change affects the project setup (npm commands changed, new service added, environmental variable added)
I have added a decision log entry if the change affects the architecture or changes a significant technology
Changes
/{locale}/search/[?query={query}]
) with a search form and list of search results with matches (highlights)./{locale}/search/results.partial/?query={query}
./api/search?locale={locale}&query={query}
and optionalfuzzy={'true'|'1'|'false'|'0'}
(defaults to true).#:~:text={query}
) so browsers can highlight and scroll to the query.pages/api/[...notFound].ts
) so any API route not found returns a 404 JSON response rather than a 404 HTML page.src/lib/site.json
so it can be used in search and seo related files (and for other features in the future).Associated issue
Resolves #23
How to test
/en/search/
)/nl/search/
)/api/search?locale=en&query=heading
./en/search/results.partial/?locale=en&query=heading
.docs/search.md
to find out more.Checklist
I have added/updated tests to prove that my feature works (if not possible please explain why)I have added a decision log entry if the change affects the architecture or changes a significant technology