From 4cf461cf0563427bcabec704c6c55ae6cc366b14 Mon Sep 17 00:00:00 2001
From: Caen De Silva <caen@desilva.se>
Date: Sat, 16 Nov 2024 19:51:56 +0100
Subject: [PATCH 1/8] Extract file for the main HydeSearch script

---
 .../framework/resources/js/hyde-search.js     | 73 ++++++++++++++++++
 .../components/docs/hyde-search.blade.php     | 76 ++-----------------
 2 files changed, 78 insertions(+), 71 deletions(-)
 create mode 100644 packages/framework/resources/js/hyde-search.js

diff --git a/packages/framework/resources/js/hyde-search.js b/packages/framework/resources/js/hyde-search.js
new file mode 100644
index 00000000000..5b0e34ab386
--- /dev/null
+++ b/packages/framework/resources/js/hyde-search.js
@@ -0,0 +1,73 @@
+export default function initHydeSearch(searchIndexUrl) {
+    return {
+        searchIndex: [],
+        searchTerm: '',
+        results: [],
+        isLoading: true,
+        statusMessage: '',
+        
+		async init() {
+			const response = await fetch('{{ Hyde::relativeLink(\Hyde\Framework\Features\Documentation\DocumentationSearchIndex::outputPath()) }}');
+			if (!response.ok) {
+				console.error('Could not load search index');
+				return;
+			}
+			this.searchIndex = await response.json();
+			this.isLoading = false;
+		},
+
+		search() {
+			const startTime = performance.now();
+			this.results = [];
+
+			if (!this.searchTerm) {
+				this.statusMessage = '';
+				window.dispatchEvent(new CustomEvent('search-results-updated', { detail: { hasResults: false } }));
+				return;
+			}
+
+			const searchResults = this.searchIndex.filter(entry =>
+				entry.title.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
+				entry.content.toLowerCase().includes(this.searchTerm.toLowerCase())
+			);
+
+			if (searchResults.length === 0) {
+				this.statusMessage = 'No results found.';
+				window.dispatchEvent(new CustomEvent('search-results-updated', { detail: { hasResults: false } }));
+				return;
+			}
+
+			const totalMatches = searchResults.reduce((acc, result) => {
+				return acc + (result.content.match(new RegExp(this.searchTerm, 'gi')) || []).length;
+			}, 0);
+
+			searchResults.sort((a, b) => {
+				return (b.content.match(new RegExp(this.searchTerm, 'gi')) || []).length
+					- (a.content.match(new RegExp(this.searchTerm, 'gi')) || []).length;
+			});
+
+			this.results = searchResults.map(result => {
+				const matches = (result.content.match(new RegExp(this.searchTerm, 'gi')) || []).length;
+				const context = this.getSearchContext(result.content);
+				return { ...result, matches, context };
+			});
+
+			const timeMs = Math.round((performance.now() - startTime) * 100) / 100;
+			this.statusMessage = `Found ${totalMatches} result${totalMatches !== 1 ? 's' : ''} in ${searchResults.length} pages. ~${timeMs}ms`;
+
+			window.dispatchEvent(new CustomEvent('search-results-updated', { detail: { hasResults: true } }));
+		},
+
+		getSearchContext(content) {
+			const searchTermPos = content.toLowerCase().indexOf(this.searchTerm.toLowerCase());
+			const sentenceStart = content.lastIndexOf('.', searchTermPos) + 1;
+			const sentenceEnd = content.indexOf('.', searchTermPos) + 1;
+			const sentence = content.substring(sentenceStart, sentenceEnd).trim();
+
+			return sentence.replace(
+				new RegExp(this.searchTerm, 'gi'),
+				match => `<mark class="bg-yellow-400 dark:bg-yellow-300">${match}</mark>`
+			);
+		}
+    };
+}
diff --git a/packages/framework/resources/views/components/docs/hyde-search.blade.php b/packages/framework/resources/views/components/docs/hyde-search.blade.php
index 08964cf60e7..087a4e3e837 100644
--- a/packages/framework/resources/views/components/docs/hyde-search.blade.php
+++ b/packages/framework/resources/views/components/docs/hyde-search.blade.php
@@ -27,78 +27,12 @@
     </div>
 
     <script>
+		{!! file_get_contents(Hyde::vendorPath('resources/js/hyde-search.js')) !!}
+        
         document.addEventListener('alpine:init', () => {
-            Alpine.data('hydeSearch', () => ({
-                searchIndex: [],
-                searchTerm: '',
-                results: [],
-                isLoading: true,
-                statusMessage: '',
-
-                async init() {
-                    const response = await fetch('{{ Hyde::relativeLink(\Hyde\Framework\Features\Documentation\DocumentationSearchIndex::outputPath()) }}');
-                    if (!response.ok) {
-                        console.error('Could not load search index');
-                        return;
-                    }
-                    this.searchIndex = await response.json();
-                    this.isLoading = false;
-                },
-
-                search() {
-                    const startTime = performance.now();
-                    this.results = [];
-
-                    if (!this.searchTerm) {
-                        this.statusMessage = '';
-                        window.dispatchEvent(new CustomEvent('search-results-updated', { detail: { hasResults: false } }));
-                        return;
-                    }
-
-                    const searchResults = this.searchIndex.filter(entry =>
-                        entry.title.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
-                        entry.content.toLowerCase().includes(this.searchTerm.toLowerCase())
-                    );
-
-                    if (searchResults.length === 0) {
-                        this.statusMessage = 'No results found.';
-                        window.dispatchEvent(new CustomEvent('search-results-updated', { detail: { hasResults: false } }));
-                        return;
-                    }
-
-                    const totalMatches = searchResults.reduce((acc, result) => {
-                        return acc + (result.content.match(new RegExp(this.searchTerm, 'gi')) || []).length;
-                    }, 0);
-
-                    searchResults.sort((a, b) => {
-                        return (b.content.match(new RegExp(this.searchTerm, 'gi')) || []).length
-                            - (a.content.match(new RegExp(this.searchTerm, 'gi')) || []).length;
-                    });
-
-                    this.results = searchResults.map(result => {
-                        const matches = (result.content.match(new RegExp(this.searchTerm, 'gi')) || []).length;
-                        const context = this.getSearchContext(result.content);
-                        return { ...result, matches, context };
-                    });
-
-                    const timeMs = Math.round((performance.now() - startTime) * 100) / 100;
-                    this.statusMessage = `Found ${totalMatches} result${totalMatches !== 1 ? 's' : ''} in ${searchResults.length} pages. ~${timeMs}ms`;
-
-                    window.dispatchEvent(new CustomEvent('search-results-updated', { detail: { hasResults: true } }));
-                },
-
-                getSearchContext(content) {
-                    const searchTermPos = content.toLowerCase().indexOf(this.searchTerm.toLowerCase());
-                    const sentenceStart = content.lastIndexOf('.', searchTermPos) + 1;
-                    const sentenceEnd = content.indexOf('.', searchTermPos) + 1;
-                    const sentence = content.substring(sentenceStart, sentenceEnd).trim();
-
-                    return sentence.replace(
-                        new RegExp(this.searchTerm, 'gi'),
-                        match => `<mark class="bg-yellow-400 dark:bg-yellow-300">${match}</mark>`
-                    );
-                }
-            }));
+            Alpine.data('hydeSearch', () => 
+                initHydeSearch('{{ Hyde::relativeLink(\Hyde\Framework\Features\Documentation\DocumentationSearchIndex::outputPath()) }}')
+            );
         });
     </script>
 </div>

From 6cf331cba81fce756b024bc178e24d63b360dd1f Mon Sep 17 00:00:00 2001
From: Caen De Silva <caen@desilva.se>
Date: Sat, 16 Nov 2024 19:54:43 +0100
Subject: [PATCH 2/8] Support overloading the script file

---
 .../resources/views/components/docs/hyde-search.blade.php    | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/framework/resources/views/components/docs/hyde-search.blade.php b/packages/framework/resources/views/components/docs/hyde-search.blade.php
index 087a4e3e837..b98bd4fe370 100644
--- a/packages/framework/resources/views/components/docs/hyde-search.blade.php
+++ b/packages/framework/resources/views/components/docs/hyde-search.blade.php
@@ -27,7 +27,10 @@
     </div>
 
     <script>
-		{!! file_get_contents(Hyde::vendorPath('resources/js/hyde-search.js')) !!}
+		{!! file_get_contents(file_exists(Hyde::path('resources/js/hyde-search.js')) 
+			? Hyde::path('resources/js/hyde-search.js')
+			: Hyde::vendorPath('resources/js/hyde-search.js')
+		) !!}
         
         document.addEventListener('alpine:init', () => {
             Alpine.data('hydeSearch', () => 

From 4007f9d7aaee0046aed7fa1a06945c35ef5a90aa Mon Sep 17 00:00:00 2001
From: Caen De Silva <caen@desilva.se>
Date: Sat, 16 Nov 2024 19:55:13 +0100
Subject: [PATCH 3/8] Remove export default

---
 packages/framework/resources/js/hyde-search.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/framework/resources/js/hyde-search.js b/packages/framework/resources/js/hyde-search.js
index 5b0e34ab386..712762d1255 100644
--- a/packages/framework/resources/js/hyde-search.js
+++ b/packages/framework/resources/js/hyde-search.js
@@ -1,4 +1,4 @@
-export default function initHydeSearch(searchIndexUrl) {
+function initHydeSearch(searchIndexUrl) {
     return {
         searchIndex: [],
         searchTerm: '',

From e27580b4c24651863eb05d97242bb5305e38da6c Mon Sep 17 00:00:00 2001
From: Caen De Silva <caen@desilva.se>
Date: Sat, 16 Nov 2024 19:55:44 +0100
Subject: [PATCH 4/8] Fix formatting

---
 .../framework/resources/js/hyde-search.js     | 106 +++++++++---------
 1 file changed, 53 insertions(+), 53 deletions(-)

diff --git a/packages/framework/resources/js/hyde-search.js b/packages/framework/resources/js/hyde-search.js
index 712762d1255..ea79cd0b111 100644
--- a/packages/framework/resources/js/hyde-search.js
+++ b/packages/framework/resources/js/hyde-search.js
@@ -5,69 +5,69 @@ function initHydeSearch(searchIndexUrl) {
         results: [],
         isLoading: true,
         statusMessage: '',
-        
-		async init() {
-			const response = await fetch('{{ Hyde::relativeLink(\Hyde\Framework\Features\Documentation\DocumentationSearchIndex::outputPath()) }}');
-			if (!response.ok) {
-				console.error('Could not load search index');
-				return;
-			}
-			this.searchIndex = await response.json();
-			this.isLoading = false;
-		},
 
-		search() {
-			const startTime = performance.now();
-			this.results = [];
+        async init() {
+            const response = await fetch(searchIndexUrl);
+            if (!response.ok) {
+                console.error('Could not load search index');
+                return;
+            }
+            this.searchIndex = await response.json();
+            this.isLoading = false;
+        },
 
-			if (!this.searchTerm) {
-				this.statusMessage = '';
-				window.dispatchEvent(new CustomEvent('search-results-updated', { detail: { hasResults: false } }));
-				return;
-			}
+        search() {
+            const startTime = performance.now();
+            this.results = [];
 
-			const searchResults = this.searchIndex.filter(entry =>
-				entry.title.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
-				entry.content.toLowerCase().includes(this.searchTerm.toLowerCase())
-			);
+            if (!this.searchTerm) {
+                this.statusMessage = '';
+                window.dispatchEvent(new CustomEvent('search-results-updated', { detail: { hasResults: false } }));
+                return;
+            }
 
-			if (searchResults.length === 0) {
-				this.statusMessage = 'No results found.';
-				window.dispatchEvent(new CustomEvent('search-results-updated', { detail: { hasResults: false } }));
-				return;
-			}
+            const searchResults = this.searchIndex.filter(entry =>
+                entry.title.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
+                entry.content.toLowerCase().includes(this.searchTerm.toLowerCase())
+            );
 
-			const totalMatches = searchResults.reduce((acc, result) => {
-				return acc + (result.content.match(new RegExp(this.searchTerm, 'gi')) || []).length;
-			}, 0);
+            if (searchResults.length === 0) {
+                this.statusMessage = 'No results found.';
+                window.dispatchEvent(new CustomEvent('search-results-updated', { detail: { hasResults: false } }));
+                return;
+            }
 
-			searchResults.sort((a, b) => {
-				return (b.content.match(new RegExp(this.searchTerm, 'gi')) || []).length
-					- (a.content.match(new RegExp(this.searchTerm, 'gi')) || []).length;
-			});
+            const totalMatches = searchResults.reduce((acc, result) => {
+                return acc + (result.content.match(new RegExp(this.searchTerm, 'gi')) || []).length;
+            }, 0);
 
-			this.results = searchResults.map(result => {
-				const matches = (result.content.match(new RegExp(this.searchTerm, 'gi')) || []).length;
-				const context = this.getSearchContext(result.content);
-				return { ...result, matches, context };
-			});
+            searchResults.sort((a, b) => {
+                return (b.content.match(new RegExp(this.searchTerm, 'gi')) || []).length
+                    - (a.content.match(new RegExp(this.searchTerm, 'gi')) || []).length;
+            });
 
-			const timeMs = Math.round((performance.now() - startTime) * 100) / 100;
-			this.statusMessage = `Found ${totalMatches} result${totalMatches !== 1 ? 's' : ''} in ${searchResults.length} pages. ~${timeMs}ms`;
+            this.results = searchResults.map(result => {
+                const matches = (result.content.match(new RegExp(this.searchTerm, 'gi')) || []).length;
+                const context = this.getSearchContext(result.content);
+                return { ...result, matches, context };
+            });
 
-			window.dispatchEvent(new CustomEvent('search-results-updated', { detail: { hasResults: true } }));
-		},
+            const timeMs = Math.round((performance.now() - startTime) * 100) / 100;
+            this.statusMessage = `Found ${totalMatches} result${totalMatches !== 1 ? 's' : ''} in ${searchResults.length} pages. ~${timeMs}ms`;
 
-		getSearchContext(content) {
-			const searchTermPos = content.toLowerCase().indexOf(this.searchTerm.toLowerCase());
-			const sentenceStart = content.lastIndexOf('.', searchTermPos) + 1;
-			const sentenceEnd = content.indexOf('.', searchTermPos) + 1;
-			const sentence = content.substring(sentenceStart, sentenceEnd).trim();
+            window.dispatchEvent(new CustomEvent('search-results-updated', { detail: { hasResults: true } }));
+        },
 
-			return sentence.replace(
-				new RegExp(this.searchTerm, 'gi'),
-				match => `<mark class="bg-yellow-400 dark:bg-yellow-300">${match}</mark>`
-			);
-		}
+        getSearchContext(content) {
+            const searchTermPos = content.toLowerCase().indexOf(this.searchTerm.toLowerCase());
+            const sentenceStart = content.lastIndexOf('.', searchTermPos) + 1;
+            const sentenceEnd = content.indexOf('.', searchTermPos) + 1;
+            const sentence = content.substring(sentenceStart, sentenceEnd).trim();
+
+            return sentence.replace(
+                new RegExp(this.searchTerm, 'gi'),
+                match => `<mark class="bg-yellow-400 dark:bg-yellow-300">${match}</mark>`
+            );
+        }
     };
 }

From 53c9ffbd454aa42e04151709eddddb685bf4cd8d Mon Sep 17 00:00:00 2001
From: Caen De Silva <caen@desilva.se>
Date: Sat, 16 Nov 2024 19:58:15 +0100
Subject: [PATCH 5/8] Update RELEASE_NOTES.md

---
 RELEASE_NOTES.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
index a1212768c8b..15d317aca77 100644
--- a/RELEASE_NOTES.md
+++ b/RELEASE_NOTES.md
@@ -98,6 +98,7 @@ This serves two purposes:
 - Moved the Vite build step to run before the site build to prevent duplicate media asset transfers in https://github.com/hydephp/develop/pull/2013
 - Ported the HydeSearch plugin used for the documentation search to be an Alpine.js implementation in https://github.com/hydephp/develop/pull/2029
   - Renamed Blade component `hyde::components.docs.search-widget` to `hyde::components.docs.search-modal` in https://github.com/hydephp/develop/pull/2029
+  - Added support for customizing the search implementation by creating a `resources/js/hyde-search.js` file in https://github.com/hydephp/develop/pull/2030
 
 ### Deprecated
 

From 716c3c0e3237363755bfa798d97523f58c32dc31 Mon Sep 17 00:00:00 2001
From: Caen De Silva <caen@desilva.se>
Date: Sat, 16 Nov 2024 20:04:35 +0100
Subject: [PATCH 6/8] Move markup to template so Tailwind can find it

---
 packages/framework/resources/js/hyde-search.js             | 7 ++++++-
 .../resources/views/components/docs/hyde-search.blade.php  | 4 ++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/framework/resources/js/hyde-search.js b/packages/framework/resources/js/hyde-search.js
index ea79cd0b111..ff8a6591f94 100644
--- a/packages/framework/resources/js/hyde-search.js
+++ b/packages/framework/resources/js/hyde-search.js
@@ -63,10 +63,15 @@ function initHydeSearch(searchIndexUrl) {
             const sentenceStart = content.lastIndexOf('.', searchTermPos) + 1;
             const sentenceEnd = content.indexOf('.', searchTermPos) + 1;
             const sentence = content.substring(sentenceStart, sentenceEnd).trim();
+            const template = document.getElementById('search-highlight-template');
 
             return sentence.replace(
                 new RegExp(this.searchTerm, 'gi'),
-                match => `<mark class="bg-yellow-400 dark:bg-yellow-300">${match}</mark>`
+                match => {
+                    const mark = template.content.querySelector('mark').cloneNode();
+                    mark.textContent = match;
+                    return mark.outerHTML;
+                }
             );
         }
     };
diff --git a/packages/framework/resources/views/components/docs/hyde-search.blade.php b/packages/framework/resources/views/components/docs/hyde-search.blade.php
index b98bd4fe370..0deafcc968a 100644
--- a/packages/framework/resources/views/components/docs/hyde-search.blade.php
+++ b/packages/framework/resources/views/components/docs/hyde-search.blade.php
@@ -1,6 +1,10 @@
 @props(['modal' => true])
 
 <div id="hyde-search" x-data="hydeSearch">
+    <template id="search-highlight-template">
+        <mark class="bg-yellow-400 dark:bg-yellow-300"></mark>
+    </template>
+
     <div class="relative">
         <input type="search" name="search" id="search-input" x-model="searchTerm" @input="search()" placeholder="Search..." autocomplete="off" autofocus
                 {{ $attributes->merge(['class' => 'w-full rounded text-base leading-normal bg-gray-100 dark:bg-gray-700 py-2 px-3']) }}

From cf4d641b9a8eb976101449ade3afb467bbdedfa3 Mon Sep 17 00:00:00 2001
From: Caen De Silva <caen@desilva.se>
Date: Sat, 16 Nov 2024 20:06:40 +0100
Subject: [PATCH 7/8] Rename file to HydeSearch

---
 RELEASE_NOTES.md                                            | 2 +-
 .../resources/js/{hyde-search.js => HydeSearch.js}          | 0
 .../resources/views/components/docs/hyde-search.blade.php   | 6 +++---
 3 files changed, 4 insertions(+), 4 deletions(-)
 rename packages/framework/resources/js/{hyde-search.js => HydeSearch.js} (100%)

diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
index 15d317aca77..d9fa574696b 100644
--- a/RELEASE_NOTES.md
+++ b/RELEASE_NOTES.md
@@ -98,7 +98,7 @@ This serves two purposes:
 - Moved the Vite build step to run before the site build to prevent duplicate media asset transfers in https://github.com/hydephp/develop/pull/2013
 - Ported the HydeSearch plugin used for the documentation search to be an Alpine.js implementation in https://github.com/hydephp/develop/pull/2029
   - Renamed Blade component `hyde::components.docs.search-widget` to `hyde::components.docs.search-modal` in https://github.com/hydephp/develop/pull/2029
-  - Added support for customizing the search implementation by creating a `resources/js/hyde-search.js` file in https://github.com/hydephp/develop/pull/2030
+  - Added support for customizing the search implementation by creating a `resources/js/HydeSearch.js` file in https://github.com/hydephp/develop/pull/2030
 
 ### Deprecated
 
diff --git a/packages/framework/resources/js/hyde-search.js b/packages/framework/resources/js/HydeSearch.js
similarity index 100%
rename from packages/framework/resources/js/hyde-search.js
rename to packages/framework/resources/js/HydeSearch.js
diff --git a/packages/framework/resources/views/components/docs/hyde-search.blade.php b/packages/framework/resources/views/components/docs/hyde-search.blade.php
index 0deafcc968a..85289f86dfd 100644
--- a/packages/framework/resources/views/components/docs/hyde-search.blade.php
+++ b/packages/framework/resources/views/components/docs/hyde-search.blade.php
@@ -31,9 +31,9 @@
     </div>
 
     <script>
-		{!! file_get_contents(file_exists(Hyde::path('resources/js/hyde-search.js')) 
-			? Hyde::path('resources/js/hyde-search.js')
-			: Hyde::vendorPath('resources/js/hyde-search.js')
+		{!! file_get_contents(file_exists(Hyde::path('resources/js/HydeSearch.js')) 
+			? Hyde::path('resources/js/HydeSearch.js')
+			: Hyde::vendorPath('resources/js/HydeSearch.js')
 		) !!}
         
         document.addEventListener('alpine:init', () => {

From 8b6ab34df46eaf1ecc3527245aa2e22d13be610a Mon Sep 17 00:00:00 2001
From: Caen De Silva <caen@desilva.se>
Date: Sat, 16 Nov 2024 20:09:59 +0100
Subject: [PATCH 8/8] Update RELEASE_NOTES.md

---
 RELEASE_NOTES.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
index d9fa574696b..510a841eded 100644
--- a/RELEASE_NOTES.md
+++ b/RELEASE_NOTES.md
@@ -98,7 +98,7 @@ This serves two purposes:
 - Moved the Vite build step to run before the site build to prevent duplicate media asset transfers in https://github.com/hydephp/develop/pull/2013
 - Ported the HydeSearch plugin used for the documentation search to be an Alpine.js implementation in https://github.com/hydephp/develop/pull/2029
   - Renamed Blade component `hyde::components.docs.search-widget` to `hyde::components.docs.search-modal` in https://github.com/hydephp/develop/pull/2029
-  - Added support for customizing the search implementation by creating a `resources/js/HydeSearch.js` file in https://github.com/hydephp/develop/pull/2030
+  - Added support for customizing the search implementation by creating a `resources/js/HydeSearch.js` file in https://github.com/hydephp/develop/pull/2031
 
 ### Deprecated