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

api/search.php

@@ -18,13 +18,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,38 +61,38 @@ 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(
+    $sections = array_map(
-      fn($type) => strtolower(
+      fn($section) => strtolower(
-        trim(htmlspecialchars($type, ENT_QUOTES, "UTF-8"))
+        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) {
@@ -105,16 +105,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
     );

package-lock.json

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

package.json

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

queries/functions/search.sql

@@ -1,4 +1,6 @@
-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,
@@ -7,7 +9,7 @@ CREATE OR REPLACE FUNCTION search_optimized_index(search_query text, page_size i
     tags text,
     genre_name text,
     genre_url text,
-    type text,
+    section text,
     total_plays text,
     rank real,
     total_count bigint
@@ -23,17 +25,17 @@ BEGIN
     array_to_string(s.tags, ', ') AS tags,
     s.genre_name,
     s.genre_url,
-    s.type,
+    s.section,
     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
+  WHERE(sections IS NULL
-    OR s.type = ANY(types))
+    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;

queries/views/feeds/search.sql

@@ -1,37 +1,38 @@
 CREATE OR REPLACE VIEW optimized_search_index AS
 WITH search_data AS (
   SELECT
-    'post' AS type,
+    p.title,
-    CONCAT('📝 ', p.title) AS 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,
+    ar.name AS title,
-    CONCAT(COALESCE(ar.emoji, ar.genre_emoji, '🎧'), ' ', ar.name) AS title,
     ar.url::TEXT AS url,
     ar.description AS description,
     ARRAY[ar.genre_name] AS tags,
     ar.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,
+    g.name AS title,
-    CONCAT(COALESCE(g.emoji, '🎵'), ' ', 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,
+    g.total_plays AS total_plays,
-    NULL AS content_date
+    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, ')')
+      WHEN m.rating IS NOT NULL THEN CONCAT(m.title, ' (', m.rating, ')')
-      ELSE CONCAT('🎬 ', m.title, ' (', m.year, ')')
+      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

src/assets/styles/base/vars.css

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

src/assets/styles/components/forms.css

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

src/pages/static/search.html

@@ -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>
@@ -70,14 +70,14 @@ description: Search through posts and other content on my site.
       if (typeof MiniSearch === "undefined") return;
 
       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",
         ],
@@ -130,9 +130,9 @@ description: Search through posts and other content on my site.
           .map(
             ({ title, url, description, type, total_plays }) => `
               <li class="search__results--result">
-                <h3>
+                <h3 class="${type}">
                   <a href="${url}">${title}</a>
-                  ${type === "artist" && total_plays > 0 ? ` <mark>${total_plays} plays</mark>` : ""}
+                  ${type === "music" && total_plays > 0 ? ` <mark>${total_plays} plays</mark>` : ""}
                 </h3>
                 <p>${truncateDescription(description)}</p>
               </li>
@@ -163,14 +163,14 @@ description: Search through posts and other content on my site.
           .join("");
         $results.insertAdjacentHTML("beforeend", newResultsHTML);
       };
-      const getSelectedTypes = () => Array.from($typeCheckboxes).filter((cb) => cb.checked).map((cb) => cb.value);
+      const getSelectedSections = () => Array.from($typeCheckboxes).filter((cb) => cb.checked).map((cb) => cb.value);
-      const loadSearchIndex = async (query, types, page) => {
+      const loadSearchIndex = async (query, sections, page) => {
         isLoading = true;
         $loadMoreButton.disabled = true;
         $loadMoreButton.textContent = "Loading...";
 
         try {
-          const typeQuery = types.join(",");
+          const typeQuery = sections.join(",");
           const response = await fetch(
             `https://www.coryd.dev/api/search.php?q=${encodeURIComponent(
               query,
@@ -225,7 +225,7 @@ description: Search through posts and other content on my site.
         $results.style.display = "block";
         $loadMoreButton.style.display = "none";
 
-        const results = await loadSearchIndex(query, getSelectedTypes(), 1);
+        const results = await loadSearchIndex(query, getSelectedSections(), 1);
 
         currentResults = results;
         currentPage = 1;
@@ -245,7 +245,7 @@ description: Search through posts and other content on my site.
 
         currentPage++;
 
-        const nextResults = await loadSearchIndex($input.value.trim(), getSelectedTypes(), currentPage);
+        const nextResults = await loadSearchIndex($input.value.trim(), getSelectedSections(), currentPage);
 
         currentResults = [...currentResults, ...nextResults];