From ae0d9a10cc41d112098063f5ee6fd1971b121d55 Mon Sep 17 00:00:00 2001
From: Liam Bigelow <40188355+bglw@users.noreply.github.com>
Date: Tue, 17 Dec 2024 21:20:07 +1300
Subject: [PATCH] Added `data-pagefind-ui-meta` attribute to the default UI as
 CSS target

---
 pagefind_ui/default/_dev_files/index.html            |  1 +
 .../default/_dev_files/pagefind/_pagefind_stub.ts    |  9 +++++++++
 pagefind_ui/default/svelte/result.svelte             | 12 +++++++-----
 pagefind_ui/default/svelte/result_with_subs.svelte   |  5 ++++-
 4 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/pagefind_ui/default/_dev_files/index.html b/pagefind_ui/default/_dev_files/index.html
index 7a946577..5f187229 100644
--- a/pagefind_ui/default/_dev_files/index.html
+++ b/pagefind_ui/default/_dev_files/index.html
@@ -15,6 +15,7 @@ <h1>Hello World from the local dev suite</h1>
         <p>Searches for words ending in <kbd>y</kbd> will return no results</p>
         <p>Searches containing <kbd>r</kbd> will have a sub-result for the page itself</p>
         <p>Searches containing <kbd>d</kbd> will have sub-results for anchors</p>
+        <p>Searches containing <kbd>m</kbd> will have metadata</p>
     </details>
     <div id="search"></div>
     <script src="/pagefind/ui.js"></script>
diff --git a/pagefind_ui/default/_dev_files/pagefind/_pagefind_stub.ts b/pagefind_ui/default/_dev_files/pagefind/_pagefind_stub.ts
index a2e820b1..8eab0ed7 100644
--- a/pagefind_ui/default/_dev_files/pagefind/_pagefind_stub.ts
+++ b/pagefind_ui/default/_dev_files/pagefind/_pagefind_stub.ts
@@ -92,6 +92,14 @@ const stub_results = (term): PagefindSearchResult[] => {
     words[Math.floor(Math.random() * 15) + 14] = `<mark>${term}</mark>`;
     let excerpt = words.join(" ");
 
+    let extra_meta = {};
+    if (/m/.test(term)) {
+      const num_meta = Math.floor(Math.random() * 5) + 1;
+      for (let i = 0; i < num_meta; i += 1) {
+        extra_meta[get_a_word()] = get_a_word();
+      }
+    }
+    
     results.push({
       id: Math.random().toString(),
       score: Math.random(),
@@ -113,6 +121,7 @@ const stub_results = (term): PagefindSearchResult[] => {
             image: `https://placekitten.com/${Math.floor(
               Math.random() * 1000
             )}/${Math.floor(Math.random() * 1000)}`,
+            ...extra_meta,
           },
           anchors: [
             {
diff --git a/pagefind_ui/default/svelte/result.svelte b/pagefind_ui/default/svelte/result.svelte
index e1fca739..2d2f83fc 100644
--- a/pagefind_ui/default/svelte/result.svelte
+++ b/pagefind_ui/default/svelte/result.svelte
@@ -12,7 +12,7 @@
         data = await r.data();
         data = process_result?.(data) ?? data;
         meta = Object.entries(data.meta).filter(
-            ([key]) => !skipMeta.includes(key)
+            ([key]) => !skipMeta.includes(key),
         );
     };
     $: load(result);
@@ -39,17 +39,19 @@
             <p class="pagefind-ui__result-title">
                 <a
                     class="pagefind-ui__result-link"
-                    href={data.meta?.url || data.url}
-                    >{data.meta?.title}</a
+                    href={data.meta?.url || data.url}>{data.meta?.title}</a
                 >
             </p>
             <p class="pagefind-ui__result-excerpt">{@html data.excerpt}</p>
             {#if meta.length}
                 <ul class="pagefind-ui__result-tags">
                     {#each meta as [metaTitle, metaValue]}
-                        <li class="pagefind-ui__result-tag">
+                        <li
+                            class="pagefind-ui__result-tag"
+                            data-pagefind-ui-meta={metaTitle}
+                        >
                             {metaTitle.replace(/^(\w)/, (c) =>
-                                c.toLocaleUpperCase()
+                                c.toLocaleUpperCase(),
                             )}: {metaValue}
                         </li>
                     {/each}
diff --git a/pagefind_ui/default/svelte/result_with_subs.svelte b/pagefind_ui/default/svelte/result_with_subs.svelte
index 1f16885e..5e0cd4d6 100644
--- a/pagefind_ui/default/svelte/result_with_subs.svelte
+++ b/pagefind_ui/default/svelte/result_with_subs.svelte
@@ -81,7 +81,10 @@
       {#if meta.length}
         <ul class="pagefind-ui__result-tags">
           {#each meta as [metaTitle, metaValue]}
-            <li class="pagefind-ui__result-tag">
+              <li
+                class="pagefind-ui__result-tag"
+                data-pagefind-ui-meta={metaTitle}
+              >
               {metaTitle.replace(/^(\w)/, (c) => c.toLocaleUpperCase())}: {metaValue}
             </li>
           {/each}