feat: initial commit
This commit is contained in:
commit
e214116e40
253 changed files with 17406 additions and 0 deletions
260
src/pages/static/search.html
Normal file
260
src/pages/static/search.html
Normal file
|
|
@ -0,0 +1,260 @@
|
|||
---
|
||||
title: Search
|
||||
permalink: /search/index.html
|
||||
description: Search through posts and other content on my site.
|
||||
---
|
||||
|
||||
<h2 class="page-title">Search</h2>
|
||||
<p>
|
||||
You can find <a href="/posts">posts</a>, <a href="/links">links</a>,
|
||||
<a href="/music/#artists">artists</a>, genres,
|
||||
<a href="/watching#movies">movies</a>, <a href="/watching#tv">shows</a> and
|
||||
<a href="/books">books</a> via the field below (though it only surfaces movies
|
||||
and shows I've watched and books I've written something about).
|
||||
</p>
|
||||
<noscript>
|
||||
<p>
|
||||
<mark
|
||||
>If you're seeing this it means that you've (quite likely) disabled
|
||||
JavaScript (that's a totally valid choice!).</mark>
|
||||
You can search for anything on my site using the form below, but your query
|
||||
will be routed through
|
||||
<a href="https://duckduckgo.com">DuckDuckGo</a>.
|
||||
</p>
|
||||
<p>
|
||||
<mark>Type something in and hit enter.</mark>
|
||||
</p>
|
||||
</noscript>
|
||||
<form class="search__form" action="https://duckduckgo.com" method="get">
|
||||
<input
|
||||
class="search__form--input"
|
||||
placeholder="Search"
|
||||
type="search"
|
||||
name="q"
|
||||
autocomplete="off"
|
||||
autofocus
|
||||
onkeydown="return event.key !== 'Enter'"
|
||||
/>
|
||||
<details>
|
||||
<summary>Filter by type</summary>
|
||||
<fieldset class="search__form--type">
|
||||
<label>
|
||||
<input type="checkbox" name="type" value="post" checked />
|
||||
post
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="type" value="artist" checked />
|
||||
artist
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="type" value="genre" checked />
|
||||
genre
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="type" value="book" checked />
|
||||
book
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="type" value="movie" checked />
|
||||
movie
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="type" value="show" checked />
|
||||
show
|
||||
</label>
|
||||
</fieldset>
|
||||
</details>
|
||||
<input
|
||||
class="search__form--fallback"
|
||||
type="hidden"
|
||||
name="sites"
|
||||
value="coryd.dev"
|
||||
/>
|
||||
</form>
|
||||
<ul class="search__results client-side"></ul>
|
||||
<button class="search__load-more client-side" style="display: none">
|
||||
Load More
|
||||
</button>
|
||||
<script src="/assets/scripts/components/minisearch.js"></script>
|
||||
<script>
|
||||
window.addEventListener("load", () => {
|
||||
(() => {
|
||||
if (typeof MiniSearch === "undefined") return;
|
||||
|
||||
const miniSearch = new MiniSearch({
|
||||
fields: ["title", "description", "tags", "type"],
|
||||
idField: "id",
|
||||
storeFields: [
|
||||
"id",
|
||||
"title",
|
||||
"url",
|
||||
"description",
|
||||
"type",
|
||||
"tags",
|
||||
"total_plays",
|
||||
],
|
||||
searchOptions: {
|
||||
fields: ["title", "tags"],
|
||||
prefix: true,
|
||||
fuzzy: 0.1,
|
||||
boost: { title: 5, tags: 2, description: 1 },
|
||||
},
|
||||
});
|
||||
|
||||
const $form = document.querySelector(".search__form");
|
||||
const $fallback = document.querySelector(".search__form--fallback");
|
||||
const $input = document.querySelector(".search__form--input");
|
||||
const $results = document.querySelector(".search__results");
|
||||
const $loadMoreButton = document.querySelector(".search__load-more");
|
||||
const $typeCheckboxes = document.querySelectorAll(
|
||||
'.search__form--type input[type="checkbox"]',
|
||||
);
|
||||
|
||||
$form.removeAttribute("action");
|
||||
$form.removeAttribute("method");
|
||||
if ($fallback) $fallback.remove();
|
||||
|
||||
const PAGE_SIZE = 10;
|
||||
let currentPage = 1;
|
||||
let currentResults = [];
|
||||
let total = 0;
|
||||
let debounceTimeout;
|
||||
|
||||
const parseMarkdown = (markdown) =>
|
||||
markdown
|
||||
? markdown
|
||||
.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
|
||||
.replace(/\*(.*?)\*/g, "<em>$1</em>")
|
||||
.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>')
|
||||
.replace(/\n/g, "<br>")
|
||||
.replace(/[#*_~`]/g, "")
|
||||
: "";
|
||||
|
||||
const truncateDescription = (markdown, maxLength = 225) => {
|
||||
const plainText =
|
||||
new DOMParser().parseFromString(parseMarkdown(markdown), "text/html")
|
||||
.body.textContent || "";
|
||||
return plainText.length > maxLength
|
||||
? `${plainText.substring(0, maxLength)}...`
|
||||
: plainText;
|
||||
};
|
||||
|
||||
const renderSearchResults = (results) => {
|
||||
const resultHTML = results
|
||||
.map(
|
||||
({ title, url, description, type, total_plays }) => `
|
||||
<li class="search__results--result">
|
||||
<h3>
|
||||
<a href="${url}">${title}</a>
|
||||
${
|
||||
type === "artist" && total_plays > 0
|
||||
? ` <mark>${total_plays} plays</mark>`
|
||||
: ""
|
||||
}
|
||||
</h3>
|
||||
<p>${truncateDescription(description)}</p>
|
||||
</li>
|
||||
`,
|
||||
)
|
||||
.join("");
|
||||
|
||||
$results.innerHTML =
|
||||
resultHTML ||
|
||||
'<li class="search__results--no-results">No results found.</li>';
|
||||
$results.style.display = "block";
|
||||
};
|
||||
|
||||
const loadSearchIndex = async (query, types, page) => {
|
||||
try {
|
||||
const typeQuery = types.join(",");
|
||||
const response = await fetch(
|
||||
`https://www.coryd.dev/api/search.php?q=${query}&type=${typeQuery}&page=${page}&pageSize=${PAGE_SIZE}`,
|
||||
);
|
||||
const data = await response.json();
|
||||
total = data.total || 0;
|
||||
|
||||
const formattedResults = (data.results || []).map((item) => ({
|
||||
...item,
|
||||
id: item.result_id,
|
||||
}));
|
||||
miniSearch.removeAll();
|
||||
miniSearch.addAll(formattedResults);
|
||||
return formattedResults;
|
||||
} catch (error) {
|
||||
console.error("Error fetching search data:", error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
const getSelectedTypes = () =>
|
||||
Array.from($typeCheckboxes)
|
||||
.filter((cb) => cb.checked)
|
||||
.map((cb) => cb.value);
|
||||
|
||||
const updateSearchResults = (results) => {
|
||||
if (currentPage === 1) {
|
||||
renderSearchResults(results);
|
||||
} else {
|
||||
appendSearchResults(results);
|
||||
}
|
||||
$loadMoreButton.style.display =
|
||||
currentPage * PAGE_SIZE < total ? "block" : "none";
|
||||
};
|
||||
|
||||
const appendSearchResults = (results) => {
|
||||
const newResultsHTML = results
|
||||
.map(
|
||||
({ title, url, description, type, total_plays }) => `
|
||||
<li class="search__results--result">
|
||||
<h3>
|
||||
<a href="${url}">${title}</a>
|
||||
${
|
||||
type === "artist" && total_plays > 0
|
||||
? ` <mark>${total_plays} plays</mark>`
|
||||
: ""
|
||||
}
|
||||
</h3>
|
||||
<p>${truncateDescription(description)}</p>
|
||||
</li>
|
||||
`,
|
||||
)
|
||||
.join("");
|
||||
$results.insertAdjacentHTML("beforeend", newResultsHTML);
|
||||
};
|
||||
|
||||
const handleSearch = async () => {
|
||||
const query = $input.value.trim();
|
||||
if (!query) {
|
||||
renderSearchResults([]);
|
||||
$loadMoreButton.style.display = "none";
|
||||
return;
|
||||
}
|
||||
|
||||
const results = await loadSearchIndex(query, getSelectedTypes(), 1);
|
||||
currentResults = results;
|
||||
currentPage = 1;
|
||||
updateSearchResults(results);
|
||||
};
|
||||
|
||||
$input.addEventListener("input", () => {
|
||||
clearTimeout(debounceTimeout);
|
||||
debounceTimeout = setTimeout(handleSearch, 150);
|
||||
});
|
||||
|
||||
$typeCheckboxes.forEach((cb) =>
|
||||
cb.addEventListener("change", handleSearch),
|
||||
);
|
||||
|
||||
$loadMoreButton.addEventListener("click", async () => {
|
||||
currentPage++;
|
||||
const nextResults = await loadSearchIndex(
|
||||
$input.value.trim(),
|
||||
getSelectedTypes(),
|
||||
currentPage,
|
||||
);
|
||||
currentResults = [...currentResults, ...nextResults];
|
||||
updateSearchResults(nextResults);
|
||||
});
|
||||
})();
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue