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

45
api/search.php
View file

@ -1,6 +1,7 @@
<?php
require __DIR__ . "/../vendor/autoload.php";
require __DIR__ . '/../server/utils/init.php';
use App\Classes\BaseHandler;
@ -18,13 +19,13 @@ class SearchHandler extends BaseHandler
{
try {
$query = $this->validateAndSanitizeQuery($_GET["q"] ?? null);
$types = $this->validateAndSanitizeTypes($_GET["type"] ?? "");
$sections = $this->validateAndSanitizeSections($_GET["section"] ?? "");
$page = isset($_GET["page"]) ? intval($_GET["page"]) : 1;
$pageSize = isset($_GET["pageSize"]) ? intval($_GET["pageSize"]) : 10;
$offset = ($page - 1) * $pageSize;
$cacheKey = $this->generateCacheKey($query, $types, $page, $pageSize);
$cacheKey = $this->generateCacheKey($query, $sections, $page, $pageSize);
$results = [];
$results = $this->getCachedResults($cacheKey) ?? $this->fetchSearchResults($query, $types, $pageSize, $offset);
$results = $this->getCachedResults($cacheKey) ?? $this->fetchSearchResults($query, $sections, $pageSize, $offset);
if (empty($results) || empty($results["data"])) {
$this->sendResponse(["results" => [], "total" => 0, "page" => $page, "pageSize" => $pageSize], 200);
@ -61,43 +62,47 @@ class SearchHandler extends BaseHandler
return $query;
}
private function validateAndSanitizeTypes(string $rawTypes): ?array
private function validateAndSanitizeSections(string $rawSections): ?array
{
$allowedTypes = ["post", "artist", "genre", "book", "movie", "show"];
$allowedSections = ["post", "artist", "genre", "book", "movie", "show"];
if (empty($rawTypes)) return null;
if (empty($rawSections)) return null;
$types = array_map(
fn($type) => strtolower(
trim(htmlspecialchars($type, ENT_QUOTES, "UTF-8"))
$sections = array_map(
fn($section) => strtolower(
trim(htmlspecialchars($section, ENT_QUOTES, "UTF-8"))
),
explode(",", $rawTypes)
explode(",", $rawSections)
);
$invalidTypes = array_diff($types, $allowedTypes);
$invalidSections = array_diff($sections, $allowedSections);
if (!empty($invalidTypes)) throw new Exception("Invalid 'type' parameter. Unsupported types: " . implode(", ", $invalidTypes));
if (!empty($invalidSections)) throw new Exception("Invalid 'section' parameter. Unsupported sections: " . implode(", ", $invalidSections));
return $types;
return $sections;
}
private function fetchSearchResults(
string $query,
?array $types,
?array $sections,
int $pageSize,
int $offset
): array {
$typesParam = $types && count($types) > 0 ? "%7B" . implode(",", $types) . "%7D" : "";
$sectionsParam = $sections && count($sections) > 0 ? "%7B" . implode(",", $sections) . "%7D" : "";
$endpoint = "rpc/search_optimized_index";
$queryString =
"search_query=" .
urlencode($query) .
"&page_size={$pageSize}&page_offset={$offset}" .
($typesParam ? "&types={$typesParam}" : "");
($sectionsParam ? "&sections={$sectionsParam}" : "");
$data = $this->makeRequest("GET", "{$endpoint}?{$queryString}");
$total = count($data) > 0 ? $data[0]["total_count"] : 0;
$results = array_map(function ($item) {
unset($item["total_count"]);
if (!empty($item["description"])) $item["description"] = truncateText(strip_tags(parseMarkdown($item["description"])), 225);
return $item;
}, $data);
return ["data" => $results, "total" => $total];
@ -105,16 +110,16 @@ class SearchHandler extends BaseHandler
private function generateCacheKey(
string $query,
?array $types,
?array $sections,
int $page,
int $pageSize
): string {
$typesKey = $types ? implode(",", $types) : "all";
$sectionsKey = $sections ? implode(",", $sections) : "all";
return sprintf(
"search:%s:types:%s:page:%d:pageSize:%d",
"search:%s:sections:%s:page:%d:pageSize:%d",
md5($query),
$typesKey,
$sectionsKey,
$page,
$pageSize
);

10
package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "coryd.dev",
"version": "9.1.8",
"version": "9.2.4",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "coryd.dev",
"version": "9.1.8",
"version": "9.2.4",
"license": "MIT",
"dependencies": {
"minisearch": "^7.1.2",
@ -1577,9 +1577,9 @@
}
},
"node_modules/fdir": {
"version": "6.4.5",
"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.5.tgz",
"integrity": "sha512-4BG7puHpVsIYxZUbiUE3RqGloLaSSwzYie5jvasC4LWuBWzZawynvYouhjbQKw2JuIGYdm0DzIxl8iVidKlUEw==",
"version": "6.4.6",
"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
"integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
"dev": true,
"license": "MIT",
"peerDependencies": {

2
package.json
View file

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

16
queries/functions/search.sql
View file

@ -1,12 +1,15 @@
CREATE OR REPLACE FUNCTION search_optimized_index(search_query text, page_size integer, page_offset integer, types text[])
DROP FUNCTION IF EXISTS search_optimized_index(text, integer, integer, text[]);
CREATE FUNCTION search_optimized_index(search_query text, page_size integer, page_offset integer, sections text[])
RETURNS TABLE(
result_id integer,
url text,
title text,
description text,
tags text,
tags text[],
genre_name text,
genre_url text,
section text,
type text,
total_plays text,
rank real,
@ -20,20 +23,21 @@ BEGIN
s.url,
s.title,
s.description,
array_to_string(s.tags, ', ') AS tags,
s.tags,
s.genre_name,
s.genre_url,
s.section,
s.type,
s.total_plays,
ts_rank_cd(to_tsvector('english', s.title || ' ' || s.description || array_to_string(s.tags, ' ')), plainto_tsquery('english', search_query)) AS rank,
COUNT(*) OVER() AS total_count
FROM
optimized_search_index s
WHERE(types IS NULL
OR s.type = ANY(types))
WHERE(sections IS NULL
OR s.section = ANY(sections))
AND plainto_tsquery('english', search_query) @@ to_tsvector('english', s.title || ' ' || s.description || array_to_string(s.tags, ' '))
ORDER BY
s.type = 'post' DESC,
s.section = 'post' DESC,
s.content_date DESC NULLS LAST,
rank DESC
LIMIT page_size OFFSET page_offset;

57
queries/views/feeds/search.sql
View file

@ -1,37 +1,38 @@
CREATE OR REPLACE VIEW optimized_search_index AS
WITH search_data AS (
SELECT
'post' AS type,
CONCAT('📝 ', p.title) AS title,
p.title,
p.url::TEXT AS url,
p.description AS description,
p.tags,
NULL AS genre_name,
NULL AS genre_url,
NULL::TEXT AS total_plays,
p.date AS content_date
p.date AS content_date,
'article' AS type,
'post' AS section
FROM
optimized_posts p
UNION ALL
SELECT
'link' AS type,
CONCAT('🔗 ', l.title, ' via ', l.name) AS title,
CONCAT(l.title, ' via ', l.name) AS title,
l.link::TEXT AS url,
l.description AS description,
l.tags,
NULL AS genre_name,
NULL AS genre_url,
NULL::TEXT AS total_plays,
l.date AS content_date
l.date AS content_date,
'link' AS type,
'link' AS section
FROM
optimized_links l
UNION ALL
SELECT
'book' AS type,
CASE WHEN b.rating IS NOT NULL THEN
CONCAT('📖 ', b.title, ' (', b.rating, ')')
CONCAT(b.title, ' (', b.rating, ')')
ELSE
CONCAT('📖 ', b.title)
b.title
END AS title,
b.url::TEXT AS url,
b.description AS description,
@ -39,58 +40,62 @@ WITH search_data AS (
NULL AS genre_name,
NULL AS genre_url,
NULL::TEXT AS total_plays,
b.date_finished AS content_date
b.date_finished AS content_date,
'books' AS type,
'book' AS section
FROM
optimized_books b
WHERE
LOWER(b.status) = 'finished'
UNION ALL
SELECT
'artist' AS type,
CONCAT(COALESCE(ar.emoji, ar.genre_emoji, '🎧'), ' ', ar.name) AS title,
ar.name AS title,
ar.url::TEXT AS url,
ar.description AS description,
ARRAY[ar.genre_name] AS tags,
ar.genre_name,
CONCAT(COALESCE(ar.emoji, ar.genre_emoji, '🎧'), ' ', ar.genre_name) AS genre_name,
ar.genre_slug AS genre_url,
TO_CHAR(ar.total_plays::NUMERIC, 'FM999,999,999,999') AS total_plays,
NULL AS content_date
NULL AS content_date,
'music' AS type,
'artist' AS section
FROM
optimized_artists ar
UNION ALL
SELECT
'genre' AS type,
CONCAT(COALESCE(g.emoji, '🎵'), ' ', g.name) AS title,
g.name AS title,
g.url::TEXT AS url,
g.description AS description,
NULL AS tags,
g.name AS genre_name,
g.url AS genre_url,
NULL::TEXT AS total_plays,
NULL AS content_date
g.total_plays AS total_plays,
NULL AS content_date,
'music' AS type,
'genre' AS section
FROM
optimized_genres g
UNION ALL
SELECT
'show' AS type,
CONCAT('📺 ', s.title, ' (', s.year, ')') AS title,
CONCAT(s.title, ' (', s.year, ')') AS title,
s.url::TEXT AS url,
s.description AS description,
s.tags,
NULL AS genre_name,
NULL AS genre_url,
NULL::TEXT AS total_plays,
s.last_watched_at AS content_date
s.last_watched_at AS content_date,
'tv' AS type,
'show' AS section
FROM
optimized_shows s
WHERE
s.last_watched_at IS NOT NULL
UNION ALL
SELECT
'movie' AS type,
CASE
WHEN m.rating IS NOT NULL THEN CONCAT('🎬 ', m.title, ' (', m.rating, ')')
ELSE CONCAT('🎬 ', m.title, ' (', m.year, ')')
WHEN m.rating IS NOT NULL THEN CONCAT(m.title, ' (', m.rating, ')')
ELSE CONCAT(m.title, ' (', m.year, ')')
END AS title,
m.url::TEXT AS url,
m.description AS description,
@ -98,7 +103,9 @@ WITH search_data AS (
NULL AS genre_name,
NULL AS genre_url,
NULL::TEXT AS total_plays,
m.last_watched AS content_date
m.last_watched AS content_date,
'movies' AS type,
'movie' AS section
FROM
optimized_movies m
WHERE

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);

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];