From 9765f0540290861db666549743a9c8d48e8b3582 Mon Sep 17 00:00:00 2001
From: Liam Bigelow <40188355+bglw@users.noreply.github.com>
Date: Thu, 16 Nov 2023 09:32:24 +1300
Subject: [PATCH] Revert highlight impl in the Default UI in prep of moving to
 JS API

---
 pagefind_ui/default/svelte/result.svelte      | 291 +++++++++---------
 .../default/svelte/result_with_subs.svelte    |  24 +-
 2 files changed, 156 insertions(+), 159 deletions(-)

diff --git a/pagefind_ui/default/svelte/result.svelte b/pagefind_ui/default/svelte/result.svelte
index 86639611..e1fca739 100644
--- a/pagefind_ui/default/svelte/result.svelte
+++ b/pagefind_ui/default/svelte/result.svelte
@@ -1,155 +1,162 @@
 <script>
-  export let show_images = true;
-  export let process_result = null;
-  export let result = { data: async () => {} };
-  export let highlight_query_param = null;
+    export let show_images = true;
+    export let process_result = null;
+    export let result = { data: async () => {} };
 
-  const skipMeta = ["title", "image", "image_alt", "url"];
+    const skipMeta = ["title", "image", "image_alt", "url"];
 
-  let data;
-  let meta = [];
-  const load = async (r) => {
-    data = await r.data();
-    data = process_result?.(data) ?? data;
-    meta = Object.entries(data.meta).filter(([key]) => !skipMeta.includes(key));
-  };
-  $: load(result);
+    let data;
+    let meta = [];
 
-  const placeholder = (max = 30) => {
-    return ". ".repeat(Math.floor(10 + Math.random() * max));
-  };
+    const load = async (r) => {
+        data = await r.data();
+        data = process_result?.(data) ?? data;
+        meta = Object.entries(data.meta).filter(
+            ([key]) => !skipMeta.includes(key)
+        );
+    };
+    $: load(result);
+
+    const placeholder = (max = 30) => {
+        return ". ".repeat(Math.floor(10 + Math.random() * max));
+    };
 </script>
 
 <li class="pagefind-ui__result">
-  {#if data}
-    {#if show_images}
-      <div class="pagefind-ui__result-thumb">
-        {#if data.meta.image}
-          <img
-            class="pagefind-ui__result-image"
-            src={data.meta?.image}
-            alt={data.meta?.image_alt || data.meta?.title}
-          />
+    {#if data}
+        {#if show_images}
+            <div class="pagefind-ui__result-thumb">
+                {#if data.meta.image}
+                    <img
+                        class="pagefind-ui__result-image"
+                        src={data.meta?.image}
+                        alt={data.meta?.image_alt || data.meta?.title}
+                    />
+                {/if}
+            </div>
         {/if}
-      </div>
-    {/if}
-    <div class="pagefind-ui__result-inner">
-      <p class="pagefind-ui__result-title">
-        <a
-          class="pagefind-ui__result-link"
-          href={(data?.meta?.url || data.url) +
-            (highlight_query_param ? `?${highlight_query_param.toString()}` : "")}
-          >{@html 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">
-              {@html metaTitle.replace(/^(\w)/, (c) => c.toLocaleUpperCase())}: {@html metaValue}
-            </li>
-          {/each}
-        </ul>
-      {/if}
-    </div>
-  {:else}
-    {#if show_images}
-      <div class="pagefind-ui__result-thumb pagefind-ui__loading" />
+        <div class="pagefind-ui__result-inner">
+            <p class="pagefind-ui__result-title">
+                <a
+                    class="pagefind-ui__result-link"
+                    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">
+                            {metaTitle.replace(/^(\w)/, (c) =>
+                                c.toLocaleUpperCase()
+                            )}: {metaValue}
+                        </li>
+                    {/each}
+                </ul>
+            {/if}
+        </div>
+    {:else}
+        {#if show_images}
+            <div class="pagefind-ui__result-thumb pagefind-ui__loading" />
+        {/if}
+        <div class="pagefind-ui__result-inner">
+            <p class="pagefind-ui__result-title pagefind-ui__loading">
+                {placeholder(30)}
+            </p>
+            <p class="pagefind-ui__result-excerpt pagefind-ui__loading">
+                {placeholder(40)}
+            </p>
+        </div>
     {/if}
-    <div class="pagefind-ui__result-inner">
-      <p class="pagefind-ui__result-title pagefind-ui__loading">
-        {placeholder(30)}
-      </p>
-      <p class="pagefind-ui__result-excerpt pagefind-ui__loading">
-        {placeholder(40)}
-      </p>
-    </div>
-  {/if}
 </li>
 
 <style>
-  .pagefind-ui__result {
-    list-style-type: none;
-    display: flex;
-    align-items: flex-start;
-    gap: min(calc(40px * var(--pagefind-ui-scale)), 3%);
-    padding: calc(30px * var(--pagefind-ui-scale)) 0
-      calc(40px * var(--pagefind-ui-scale));
-    border-top: solid var(--pagefind-ui-border-width) var(--pagefind-ui-border);
-  }
-  .pagefind-ui__result:last-of-type {
-    border-bottom: solid var(--pagefind-ui-border-width)
-      var(--pagefind-ui-border);
-  }
-  .pagefind-ui__result-thumb {
-    width: min(30%, calc((30% - (100px * var(--pagefind-ui-scale))) * 100000));
-    max-width: calc(120px * var(--pagefind-ui-scale));
-    margin-top: calc(10px * var(--pagefind-ui-scale));
-    aspect-ratio: var(--pagefind-ui-image-box-ratio);
-    position: relative;
-  }
-  .pagefind-ui__result-image {
-    display: block;
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    font-size: 0;
-    width: auto;
-    height: auto;
-    max-width: 100%;
-    max-height: 100%;
-    border-radius: var(--pagefind-ui-image-border-radius);
-  }
-  .pagefind-ui__result-inner {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    margin-top: calc(10px * var(--pagefind-ui-scale));
-  }
-  .pagefind-ui__result-title {
-    display: inline-block;
-    font-weight: 700;
-    font-size: calc(21px * var(--pagefind-ui-scale));
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-  .pagefind-ui__result-title .pagefind-ui__result-link {
-    color: var(--pagefind-ui-text);
-    text-decoration: none;
-  }
-  .pagefind-ui__result-title .pagefind-ui__result-link:hover {
-    text-decoration: underline;
-  }
-  .pagefind-ui__result-excerpt {
-    display: inline-block;
-    font-weight: 400;
-    font-size: calc(16px * var(--pagefind-ui-scale));
-    margin-top: calc(4px * var(--pagefind-ui-scale));
-    margin-bottom: 0;
-    min-width: calc(250px * var(--pagefind-ui-scale));
-  }
-  .pagefind-ui__loading {
-    color: var(--pagefind-ui-text);
-    background-color: var(--pagefind-ui-text);
-    border-radius: var(--pagefind-ui-border-radius);
-    opacity: 0.1;
-    pointer-events: none;
-  }
-  .pagefind-ui__result-tags {
-    list-style-type: none;
-    padding: 0;
-    display: flex;
-    gap: calc(20px * var(--pagefind-ui-scale));
-    flex-wrap: wrap;
-    margin-top: calc(20px * var(--pagefind-ui-scale));
-  }
-  .pagefind-ui__result-tag {
-    padding: calc(4px * var(--pagefind-ui-scale))
-      calc(8px * var(--pagefind-ui-scale));
-    font-size: calc(14px * var(--pagefind-ui-scale));
-    border-radius: var(--pagefind-ui-border-radius);
-    background-color: var(--pagefind-ui-tag);
-  }
+    .pagefind-ui__result {
+        list-style-type: none;
+        display: flex;
+        align-items: flex-start;
+        gap: min(calc(40px * var(--pagefind-ui-scale)), 3%);
+        padding: calc(30px * var(--pagefind-ui-scale)) 0
+            calc(40px * var(--pagefind-ui-scale));
+        border-top: solid var(--pagefind-ui-border-width)
+            var(--pagefind-ui-border);
+    }
+    .pagefind-ui__result:last-of-type {
+        border-bottom: solid var(--pagefind-ui-border-width)
+            var(--pagefind-ui-border);
+    }
+    .pagefind-ui__result-thumb {
+        width: min(
+            30%,
+            calc((30% - (100px * var(--pagefind-ui-scale))) * 100000)
+        );
+        max-width: calc(120px * var(--pagefind-ui-scale));
+        margin-top: calc(10px * var(--pagefind-ui-scale));
+        aspect-ratio: var(--pagefind-ui-image-box-ratio);
+        position: relative;
+    }
+    .pagefind-ui__result-image {
+        display: block;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 0;
+        width: auto;
+        height: auto;
+        max-width: 100%;
+        max-height: 100%;
+        border-radius: var(--pagefind-ui-image-border-radius);
+    }
+    .pagefind-ui__result-inner {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        margin-top: calc(10px * var(--pagefind-ui-scale));
+    }
+    .pagefind-ui__result-title {
+        display: inline-block;
+        font-weight: 700;
+        font-size: calc(21px * var(--pagefind-ui-scale));
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    .pagefind-ui__result-title .pagefind-ui__result-link {
+        color: var(--pagefind-ui-text);
+        text-decoration: none;
+    }
+    .pagefind-ui__result-title .pagefind-ui__result-link:hover {
+        text-decoration: underline;
+    }
+    .pagefind-ui__result-excerpt {
+        display: inline-block;
+        font-weight: 400;
+        font-size: calc(16px * var(--pagefind-ui-scale));
+        margin-top: calc(4px * var(--pagefind-ui-scale));
+        margin-bottom: 0;
+        min-width: calc(250px * var(--pagefind-ui-scale));
+    }
+    .pagefind-ui__loading {
+        color: var(--pagefind-ui-text);
+        background-color: var(--pagefind-ui-text);
+        border-radius: var(--pagefind-ui-border-radius);
+        opacity: 0.1;
+        pointer-events: none;
+    }
+    .pagefind-ui__result-tags {
+        list-style-type: none;
+        padding: 0;
+        display: flex;
+        gap: calc(20px * var(--pagefind-ui-scale));
+        flex-wrap: wrap;
+        margin-top: calc(20px * var(--pagefind-ui-scale));
+    }
+    .pagefind-ui__result-tag {
+        padding: calc(4px * var(--pagefind-ui-scale))
+            calc(8px * var(--pagefind-ui-scale));
+        font-size: calc(14px * var(--pagefind-ui-scale));
+        border-radius: var(--pagefind-ui-border-radius);
+        background-color: var(--pagefind-ui-tag);
+    }
 </style>
diff --git a/pagefind_ui/default/svelte/result_with_subs.svelte b/pagefind_ui/default/svelte/result_with_subs.svelte
index 5ee77ee9..1f16885e 100644
--- a/pagefind_ui/default/svelte/result_with_subs.svelte
+++ b/pagefind_ui/default/svelte/result_with_subs.svelte
@@ -2,8 +2,6 @@
   export let show_images = true;
   export let process_result = null;
   export let result = { data: async () => {} };
-  // string or null
-  export let highlight_query_param = null;
 
   const skipMeta = ["title", "image", "image_alt", "url"];
 
@@ -28,12 +26,10 @@
   const load = async (r) => {
     data = await r.data();
     data = process_result?.(data) ?? data;
-    meta = Object.entries(data?.meta).filter(
-      ([key]) => !skipMeta.includes(key)
-    );
+    meta = Object.entries(data.meta).filter(([key]) => !skipMeta.includes(key));
     if (Array.isArray(data.sub_results)) {
       has_root_sub_result =
-        data.sub_results?.[0]?.url === (data?.meta?.url || data?.url);
+        data.sub_results?.[0]?.url === (data.meta?.url || data.url);
       if (has_root_sub_result) {
         non_root_sub_results = thin_sub_results(data.sub_results.slice(1), 3);
       } else {
@@ -63,11 +59,8 @@
     {/if}
     <div class="pagefind-ui__result-inner">
       <p class="pagefind-ui__result-title">
-        <a
-          class="pagefind-ui__result-link"
-              href={(data?.meta?.url || data.url) +
-            (highlight_query_param ? `?${highlight_query_param.toString()}` : "")}
-          >{@html data.meta?.title}</a
+        <a class="pagefind-ui__result-link" href={data.meta?.url || data.url}
+          >{data.meta?.title}</a
         >
       </p>
       {#if has_root_sub_result}
@@ -77,11 +70,8 @@
       {#each non_root_sub_results as subres}
         <div class="pagefind-ui__result-nested">
           <p class="pagefind-ui__result-title">
-            <a
-              class="pagefind-ui__result-link"
-              href={subres.url +
-                (highlight_query_param ? `?${highlight_query_param}` : "")}
-              >{@html subres.title}</a
+            <a class="pagefind-ui__result-link" href={subres.url}
+              >{subres.title}</a
             >
           </p>
           <p class="pagefind-ui__result-excerpt">{@html subres.excerpt}</p>
@@ -92,7 +82,7 @@
         <ul class="pagefind-ui__result-tags">
           {#each meta as [metaTitle, metaValue]}
             <li class="pagefind-ui__result-tag">
-              {@html metaTitle.replace(/^(\w)/, (c) => c.toLocaleUpperCase())}: {@html metaValue}
+              {metaTitle.replace(/^(\w)/, (c) => c.toLocaleUpperCase())}: {metaValue}
             </li>
           {/each}
         </ul>