tecitheme 1.1.0 → 1.1.2

package/dist/components/CTA.svelte

@@ -7,7 +7,7 @@
 <section {id} class="{data.bgColor?'p-8':''} {getColorStyles('background', data.bgColor)}
   {data.fullwidth?'w-full mx-auto':'max-w-3xl mx-auto'}
   {data.justifyText?(data.justifyText=='left'?'text-left':(data.justifyText=='right'?'text-right':'')):'text-center'}
-  not-prose
+  not-prose print:hidden
   "
 >
   {#if data.title}

package/dist/components/CTASplitImage.svelte

@@ -5,7 +5,7 @@
   let id = makeIdString(data.name);
 </script>
 
-<section {id} class="relative {getColorStyles('background', data.color)}">
+<section {id} class="relative {getColorStyles('background', data.color)} print:hidden">
   <div class="h-56 sm:h-72 md:absolute md:left-0 md:h-full md:w-1/2">
     <img class="h-full w-full object-cover" src="https://files.thunderheadeng.com/www/images/{data.image}?w=608&fit=clip&auto=compress&auto=format" alt="Image for {data.preheading}">
   </div>

package/dist/components/Footer.svelte

@@ -4,7 +4,7 @@ import Button from './Button.svelte'
   let d = new Date();
 </script>
 
-<footer id="bottom" class="bg-gray-800" aria-labelledby="footerHeading">
+<footer id="bottom" class="bg-gray-800 print:hidden" aria-labelledby="footerHeading">
   <h2 id="footerHeading" class="sr-only">Footer</h2>
   <div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
     <div class="xl:grid xl:grid-cols-3 xl:gap-8">

package/dist/components/Header.svelte

@@ -36,7 +36,7 @@
 
 <svelte:window on:keyup={handleEscape} />
 
-<header id="menu" class="relative">
+<header id="menu" class="relative print:hidden">
   <div
     aria-hidden="true"
     class="pointer-events-none absolute inset-0 z-50 shadow"

package/dist/components/PageNav.svelte

@@ -38,7 +38,7 @@
 
 <svelte:window on:keyup={handleEscape} />
 
-<header {id} class="sticky top-0 w-full z-40 bg-white">
+<header {id} class="sticky top-0 w-full z-40 bg-white print:hidden">
   <div
     aria-hidden="true"
     class="pointer-events-none absolute inset-0 z-30 shadow"

package/dist/components/Search/SearchModal.svelte

@@ -16,7 +16,12 @@
 
   const { searchClient, setMeiliSearchParams } = instantMeiliSearch (
     "https://ms-6689ffd3d866-29089.nyc.meilisearch.io",
-    "d9f20886cbbbe171f3933dc93a1ec38e365d53f072854e5d9f92a9b130fa1f7d"
+    "d9f20886cbbbe171f3933dc93a1ec38e365d53f072854e5d9f92a9b130fa1f7d",
+    {
+      meiliSearchParams: {
+        showMatchesPosition: true
+      }
+    }
   )
 
   onMount(() => {

package/dist/components/Search/TeciSearchHits.svelte

@@ -90,7 +90,106 @@
     }
   }
 
+  function tokenizeHTML(html) {
+    const tokens = [];
+    let buffer = "";
+    let insideTag = false;
+
+    for (let i = 0; i < html.length; i++) {
+      const c = html[i];
+
+      if (c === "<") {
+        // flush text buffer
+        if (buffer) tokens.push({ type: "text", value: buffer });
+        buffer = "<";
+        insideTag = true;
+      } else if (c === ">" && insideTag) {
+        buffer += ">";
+        tokens.push({ type: "tag", value: buffer });
+        buffer = "";
+        insideTag = false;
+      } else {
+        buffer += c;
+      }
+    }
+
+    if (buffer) {
+      tokens.push({ type: insideTag ? "tag" : "text", value: buffer });
+    }
+
+    return tokens;
+  }
+
+  function buildOffsetMap(tokens) {
+    let global = 0;
+
+    return tokens.map(t => {
+      const start = global;
+      const end = start + t.value.length;
+
+      global = end;
+
+      return {
+        ...t,
+        globalStart: start,
+        globalEnd: end
+      };
+    });
+  }
+
+  function applyHighlights(tokens, matches) {
+    // Process matches from last → first to prevent index shifting
+    matches.sort((a, b) => b.start - a.start);
+
+    matches.forEach(({ start, length }) => {
+      const end = start + length;
+
+      tokens.forEach(token => {
+        if (token.type === "tag") return;
 
+        // skip if match does not touch this token
+        if (end <= token.globalStart || start >= token.globalEnd) return;
+
+        // ----- compute localStart -----
+        let localStart;
+        if (start < token.globalStart) {
+          localStart = 0;
+        } else {
+          localStart = start - token.globalStart;
+        }
+
+        // ----- compute localEnd -----
+        let localEnd;
+        const tokenLength = token.value.length;
+
+        if (end > token.globalEnd) {
+          localEnd = tokenLength;
+        } else {
+          localEnd = end - token.globalStart;
+        }
+
+        // apply the highlight
+        const text = token.value;
+
+        token.value =
+          text.slice(0, localStart) +
+          "<mark>" +
+          text.slice(localStart, localEnd) +
+          "</mark>" +
+          text.slice(localEnd);
+      });
+    });
+
+    return tokens.map(t => t.value).join("");
+  }
+
+  function highlightHTMLWithMatches(html, matches) {
+    if (!matches || matches.length === 0) return html
+
+    const tokens = tokenizeHTML(html);
+    const mapped = buildOffsetMap(tokens);
+    return applyHighlights(mapped, matches);
+  }
 </script>
 
 <svelte:window on:keydown={(e) => handleKeyPress(e)} />
@@ -209,7 +308,7 @@
           <!-- Content Preview -->
           <div class="flex flex-col">
             <h4 class="text-lg font-bold text-black uppercase">Preview</h4>
-            <p class="line-clamp-4 mb-4"><Highlight {hit} attribute="content" /></p>
+            <p class="highlightedSearchContent line-clamp-4 mb-4">{@html highlightHTMLWithMatches(hit.content, hit._matchesPosition.content)}</p>
           </div>
 
           <!-- On This Page headings -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tecitheme",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "license": "MIT",
   "scripts": {
     "dev": "vite dev",