cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: search cleanup

Browse source
This commit is contained in:
Cory Dransfeldt 2024-10-19 20:20:46 -07:00
parent 348a0c90f2
commit 52897f58e6
No known key found for this signature in database
3 changed files with 60 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "1.5.13", "version": "1.5.14",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "coryd.dev", "name": "coryd.dev",
"version": "1.5.13", "version": "1.5.14",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@cdransf/api-text": "^1.5.0", "@cdransf/api-text": "^1.5.0",

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "1.5.13", "version": "1.5.14",
"description": "The source for my personal site. Built using 11ty (and other tools).", "description": "The source for my personal site. Built using 11ty (and other tools).",
"type": "module", "type": "module",
"engines": { "engines": {

163
src/assets/scripts/index.js
View file

@ -106,57 +106,40 @@ window.addEventListener("load", () => {
"tags", "tags",
"total_plays", "total_plays",
], ],
searchOptions: {
fields: ["title", "tags"],
prefix: true,
fuzzy: 0.1,
boost: { title: 3, tags: 1.5 },
},
}); });
const $form = document.querySelector(".search__form");
const $input = document.querySelector(".search__form--input"); const $input = document.querySelector(".search__form--input");
const $fallback = document.querySelector(".search__form--fallback");
const $typeCheckboxes = document.querySelectorAll( const $typeCheckboxes = document.querySelectorAll(
'.search__form--type input[type="checkbox"]' '.search__form--type input[type="checkbox"]'
); );
const $results = document.querySelector(".search__results"); const $results = document.querySelector(".search__results");
const $loadMoreButton = document.querySelector(".search__load-more"); const $loadMoreButton = document.querySelector(".search__load-more");
$form.removeAttribute("action");
$form.removeAttribute("method");
if ($fallback) $fallback.remove();
const PAGE_SIZE = 10; const PAGE_SIZE = 10;
let currentPage = 1; let currentPage = 1;
let currentResults = []; let currentResults = [];
let total = 0; let total = 0;
let resultsById = {};
let debounceTimeout; let debounceTimeout;
const parseMarkdown = (markdown) => { const getSearchResults = (query) => {
if (!markdown) return ""; return miniSearch.search(query, {
return markdown fields: ["title", "tags"],
.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>") prefix: true,
.replace(/\*(.*?)\*/g, "<em>$1</em>") fuzzy: 0.1,
.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>') boost: { title: 4, tags: 2 },
.replace(/\n/g, "<br>") });
.replace(/[#*_~`]/g, "");
}; };
const truncateDescription = (markdown, maxLength = 150) => { const updateSearchResults = (results) => {
const htmlDescription = parseMarkdown(markdown); if (currentPage === 1) {
const tempDiv = document.createElement("div"); renderSearchResults(results);
tempDiv.innerHTML = htmlDescription; } else {
const plainText = tempDiv.textContent || tempDiv.innerText || ""; appendSearchResults(results);
return plainText.length > maxLength }
? `${plainText.substring(0, maxLength)}...`
: plainText;
};
const formatArtistTitle = (title, totalPlays) => const moreResultsToShow = currentPage * PAGE_SIZE < total;
totalPlays > 0 $loadMoreButton.style.display = moreResultsToShow ? "block" : "none";
? `${title} <strong class="highlight-text">${totalPlays} plays</strong>` };
: title;
const renderSearchResults = (results) => { const renderSearchResults = (results) => {
if (results.length > 0) { if (results.length > 0) {
@ -165,17 +148,14 @@ window.addEventListener("load", () => {
const truncatedDesc = truncateDescription(description); const truncatedDesc = truncateDescription(description);
const formattedTitle = const formattedTitle =
type === "artist" && total_plays !== undefined type === "artist" && total_plays !== undefined
? formatArtistTitle(title, total_plays) ? `${title} <strong class="highlight-text">${total_plays} plays</strong>`
: title; : title;
return ` return `
<li class="search__results--result"> <li class="search__results--result">
<a href="${url}"> <a href="${url}"><h3>${formattedTitle}</h3></a>
<h3>${formattedTitle}</h3> <p>${truncatedDesc}</p>
</a> </li>`;
<p>${truncatedDesc}</p>
</li>
`;
}) })
.join(""); .join("");
@ -194,63 +174,20 @@ window.addEventListener("load", () => {
const truncatedDesc = truncateDescription(description); const truncatedDesc = truncateDescription(description);
const formattedTitle = const formattedTitle =
type === "artist" && total_plays !== undefined type === "artist" && total_plays !== undefined
? formatArtistTitle(title, total_plays) ? `${title} <strong class="highlight-text">${total_plays} plays</strong>`
: title; : title;
return ` return `
<li class="search__results--result"> <li class="search__results--result">
<a href="${url}"><h3>${formattedTitle}</h3></a> <a href="${url}"><h3>${formattedTitle}</h3></a>
<p>${truncatedDesc}</p> <p>${truncatedDesc}</p>
</li> </li>`;
`;
}) })
.join(""); .join("");
$results.insertAdjacentHTML("beforeend", newResults); $results.insertAdjacentHTML("beforeend", newResults);
}; };
const loadSearchIndex = async (query = "", types = [], page = 1) => {
const typeQuery = types.join(",");
try {
const response = await fetch(
`https://coryd.dev/api/search?q=${query}&type=${typeQuery}&page=${page}&pageSize=${PAGE_SIZE}`
);
const index = await response.json();
const results = index.results || [];
total = index.total || results.length;
resultsById = results.reduce((acc, item) => {
acc[item.id] = item;
return acc;
}, {});
miniSearch.removeAll();
miniSearch.addAll(results);
return results;
} catch (error) {
console.error("Error fetching search data:", error);
return [];
}
};
const getSelectedTypes = () =>
Array.from($typeCheckboxes)
.filter((checkbox) => checkbox.checked)
.map((checkbox) => checkbox.value);
const updateSearchResults = (results) => {
if (currentPage === 1) {
renderSearchResults(results);
} else {
appendSearchResults(results);
}
const moreResultsToShow = currentPage * PAGE_SIZE < total;
$loadMoreButton.style.display = moreResultsToShow ? "block" : "none";
};
$input.addEventListener("input", () => { $input.addEventListener("input", () => {
const query = $input.value.trim(); const query = $input.value.trim();
clearTimeout(debounceTimeout); clearTimeout(debounceTimeout);
@ -261,8 +198,8 @@ window.addEventListener("load", () => {
return; return;
} }
debounceTimeout = setTimeout(async () => { debounceTimeout = setTimeout(() => {
const results = await loadSearchIndex(query, getSelectedTypes(), 1); const results = getSearchResults(query);
currentResults = results; currentResults = results;
currentPage = 1; currentPage = 1;
@ -271,12 +208,8 @@ window.addEventListener("load", () => {
}); });
$typeCheckboxes.forEach((checkbox) => { $typeCheckboxes.forEach((checkbox) => {
checkbox.addEventListener("change", async () => { checkbox.addEventListener("change", () => {
const results = await loadSearchIndex( const results = getSearchResults($input.value.trim());
$input.value.trim(),
getSelectedTypes(),
1
);
currentResults = results; currentResults = results;
currentPage = 1; currentPage = 1;
@ -284,16 +217,34 @@ window.addEventListener("load", () => {
}); });
}); });
$loadMoreButton.addEventListener("click", async () => { $loadMoreButton.addEventListener("click", () => {
currentPage++; currentPage++;
const nextResults = await loadSearchIndex( const nextResults = getSearchResults($input.value.trim()).slice(
$input.value.trim(), (currentPage - 1) * PAGE_SIZE,
getSelectedTypes(), currentPage * PAGE_SIZE
currentPage
); );
currentResults = [...currentResults, ...nextResults];
updateSearchResults(nextResults); appendSearchResults(nextResults);
const moreResultsToShow = currentPage * PAGE_SIZE < total;
$loadMoreButton.style.display = moreResultsToShow ? "block" : "none";
}); });
const truncateDescription = (markdown, maxLength = 150) => {
const htmlDescription = 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 tempDiv = document.createElement("div");
tempDiv.innerHTML = htmlDescription;
const plainText = tempDiv.textContent || tempDiv.innerText || "";
return plainText.length > maxLength
? `${plainText.substring(0, maxLength)}...`
: plainText;
};
})(); })();
}); });