Merge pull request #760 from CloudCannon/feat/ui-meta-attribute

Added `data-pagefind-ui-meta` attribute to the default UI as CSS target
CloudCannon · Dec 17, 2024 · 36358de · 36358de
2 parents c45609d + ae0d9a1
commit 36358de
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}