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

feat(search): design consistency with other feed/content aggregation lists

Browse source
This commit is contained in:
Cory Dransfeldt 2025-06-10 10:31:50 -07:00
parent f2bca309f5
commit 9935d9ba85
No known key found for this signature in database
9 changed files with 156 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/assets/styles/base/vars.css
View file

@ -179,7 +179,4 @@
/* dialogs */
--dialog-overlay-background: light-dark(#ffffffbf, #000000bf);
/* input accent color */
accent-color: var(--accent-color);
}

4
src/assets/styles/components/forms.css
View file

@ -3,6 +3,10 @@
opacity: .5;
}
input {
accent-color: var(--section-color, var(--accent-color));
}
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]),
textarea {
width: var(--sizing-full);

8
src/includes/blocks/tags.liquid
View file

@ -1,7 +1,7 @@
{% if tags %}
<div class="tags">
{%- for tag in tags -%}
<a href="/tags/{{ tag | downcase | url_encode }}">#{{ tag | downcase }}</a>
{%- endfor -%}
</div>
{%- for tag in tags -%}
<a href="/tags/{{ tag | downcase | url_encode }}">#{{ tag | downcase }}</a>
{%- endfor -%}
</div>
{% endif %}

156
src/pages/static/search.html
View file

@ -27,27 +27,27 @@ description: Search through posts and other content on my site.
<summary>Filter by type</summary>
<fieldset class="search__form--type">
<label>
<input type="checkbox" name="type" value="post" checked />
<input class="article" type="checkbox" name="section" value="post" checked />
post
</label>
<label>
<input type="checkbox" name="type" value="artist" checked />
<input class="music" type="checkbox" name="section" value="artist" checked />
artist
</label>
<label>
<input type="checkbox" name="type" value="genre" checked />
<input class="music" type="checkbox" name="section" value="genre" checked />
genre
</label>
<label>
<input type="checkbox" name="type" value="book" checked />
<input class="books" type="checkbox" name="section" value="book" checked />
book
</label>
<label>
<input type="checkbox" name="type" value="movie" checked />
<input class="movies" type="checkbox" name="section" value="movie" checked />
movie
</label>
<label>
<input type="checkbox" name="type" value="show" checked />
<input class="tv" type="checkbox" name="section" value="show" checked />
show
</label>
</fieldset>
@ -59,25 +59,34 @@ description: Search through posts and other content on my site.
value="coryd.dev"
/>
</form>
<ul class="search__results client-side"></ul>
<div class="search__results client-side"></div>
<button class="search__load-more client-side" style="display: none">
Load More
</button>
<script src="/assets/scripts/components/minisearch.js"></script>
<script src="/assets/scripts/components/minisearch.js"></script>
<script>
window.addEventListener("load", () => {
(() => {
if (typeof MiniSearch === "undefined") return;
const SELECTORS = {
form: ".search__form",
fallback: ".search__form--fallback",
input: ".search__form--input",
results: ".search__results",
loadMore: ".search__load-more",
checkboxes: '.search__form--type input[type="checkbox"]',
};
const miniSearch = new MiniSearch({
fields: ["title", "description", "tags", "type"],
fields: ["title", "description", "tags", "section"],
idField: "id",
storeFields: [
"id",
"title",
"url",
"description",
"type",
"section",
"tags",
"total_plays",
],
@ -89,13 +98,12 @@ description: Search through posts and other content on my site.
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"]');
const $form = document.querySelector(SELECTORS.form);
const $fallback = document.querySelector(SELECTORS.fallback);
const $input = document.querySelector(SELECTORS.input);
const $results = document.querySelector(SELECTORS.results);
const $loadMoreButton = document.querySelector(SELECTORS.loadMore);
const $sectionCheckboxes = document.querySelectorAll(SELECTORS.checkboxes);
$form.removeAttribute("action");
$form.removeAttribute("method");
@ -103,78 +111,65 @@ description: Search through posts and other content on my site.
if ($fallback) $fallback.remove();
const PAGE_SIZE = 10;
let currentPage = 1;
let currentResults = [];
let total = 0;
let debounceTimeout;
let isLoading = false;
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 generateResultHTML = ({ title, url, description, type, tags, genre_name, genre_url, total_plays }) => `
<article class="search__results--result">
<h3 class="${type}">
<a href="${url}">${title}</a>
${type === "music" && total_plays > 0 ? ` <mark>${total_plays} plays</mark>` : ""}
</h3>
${type !== "music" && tags && tags.length
? `<div class="tags ${type}">
${tags.map(
(tag) =>
`<a href="/tags/${encodeURIComponent(tag.toLowerCase())}">#${tag.toLowerCase()}</a>`
).join(' ')}
</div>`
: ''}
${type === "music" && genre_name && genre_url
? `<div class="tags ${type}">
<a href="${genre_url}">${genre_name}</a>
</div>`
: ''}
<p>${description}</p>
</article>
`;
const setLoadMoreButton = (isLoading) => {
$loadMoreButton.disabled = isLoading;
$loadMoreButton.textContent = isLoading ? "Loading..." : "Load More";
};
const showLoadingMessage = () => {
$results.innerHTML = '<article class="search__results--loading">Searching...</article>';
$results.style.display = "block";
};
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.innerHTML = results.length
? results.map(generateResultHTML).join("")
: '<article class="search__results--no-results">No results found.</article>';
$results.style.display = "block";
};
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("");
const newResultsHTML = results.map(generateResultHTML).join("");
$results.insertAdjacentHTML("beforeend", newResultsHTML);
};
const getSelectedTypes = () => Array.from($typeCheckboxes).filter((cb) => cb.checked).map((cb) => cb.value);
const loadSearchIndex = async (query, types, page) => {
const getSelectedSections = () => Array.from($sectionCheckboxes).filter((cb) => cb.checked).map((cb) => cb.value);
const loadSearchIndex = async (query, sections, page) => {
isLoading = true;
$loadMoreButton.disabled = true;
$loadMoreButton.textContent = "Loading...";
setLoadMoreButton(true);
try {
const typeQuery = types.join(",");
const sectionQuery = sections.join(",");
const response = await fetch(
`https://www.coryd.dev/api/search.php?q=${encodeURIComponent(
query,
)}&type=${typeQuery}&page=${page}&pageSize=${PAGE_SIZE}`,
)}&section=${sectionQuery}&page=${page}&pageSize=${PAGE_SIZE}`,
);
const data = await response.json();
@ -195,8 +190,8 @@ description: Search through posts and other content on my site.
return [];
} finally {
isLoading = false;
$loadMoreButton.disabled = false;
$loadMoreButton.textContent = "Load More";
setLoadMoreButton(false);
}
};
@ -206,8 +201,8 @@ description: Search through posts and other content on my site.
} else {
appendSearchResults(results);
}
$loadMoreButton.style.display =
currentPage * PAGE_SIZE < total ? "block" : "none";
$loadMoreButton.style.display = currentPage * PAGE_SIZE < total ? "block" : "none";
};
const handleSearch = async () => {
@ -215,17 +210,15 @@ description: Search through posts and other content on my site.
if (!query) {
renderSearchResults([]);
$loadMoreButton.style.display = "none";
return;
}
$results.innerHTML = '<li class="search__results--loading">Searching...</li>';
$results.style.display = "block";
showLoadingMessage();
$loadMoreButton.style.display = "none";
const results = await loadSearchIndex(query, getSelectedTypes(), 1);
const results = await loadSearchIndex(query, getSelectedSections(), 1);
currentResults = results;
currentPage = 1;
@ -235,17 +228,18 @@ description: Search through posts and other content on my site.
$input.addEventListener("input", () => {
clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(handleSearch, 300);
});
$typeCheckboxes.forEach((cb) => cb.addEventListener("change", handleSearch));
$sectionCheckboxes.forEach((cb) => cb.addEventListener("change", handleSearch));
$loadMoreButton.addEventListener("click", async () => {
if (isLoading) return;
currentPage++;
const nextResults = await loadSearchIndex($input.value.trim(), getSelectedTypes(), currentPage);
const nextResults = await loadSearchIndex($input.value.trim(), getSelectedSections(), currentPage);
currentResults = [...currentResults, ...nextResults];