Skip to content

Commit ee8bf77

Browse files
Nehal-adityaNehal-aditya
committed
Separate search.js to fix Liquid templating syntax errors
1 parent 255c550 commit ee8bf77

3 files changed

Lines changed: 132 additions & 125 deletions

File tree

‎_layouts/default.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@
6868
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
6969
<script src="{{ site.baseurl }}/assets/js/mediumish.js"></script>
7070
<script src="{{ site.baseurl }}/assets/js/custom.js"></script>
71+
<script src="{{ site.baseurl }}/assets/js/search.js"></script>
7172
<script id="dsq-count-scr" src="//{{ site.disqus }}.disqus.com/count.js" async></script>
7273
</body>
7374
</html>

‎assets/js/custom.js‎

Lines changed: 0 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -22,131 +22,6 @@
2222
});
2323
}
2424

25-
// Search functionality
26-
const searchBtn = document.getElementById('search-btn');
27-
const searchModal = document.getElementById('search-modal');
28-
const searchClose = document.getElementById('search-close');
29-
const searchInput = document.getElementById('search-input');
30-
const searchResults = document.getElementById('search-results');
31-
32-
// Debug: Check if elements exist
33-
console.log('Search button:', searchBtn);
34-
console.log('Search modal:', searchModal);
35-
console.log('Search close:', searchClose);
36-
console.log('Search input:', searchInput);
37-
console.log('Search results:', searchResults);
38-
39-
// Open search modal
40-
if (searchBtn) {
41-
console.log('Adding click listener to search button');
42-
searchBtn.addEventListener('click', (e) => {
43-
console.log('Search button clicked!', e);
44-
e.preventDefault();
45-
e.stopPropagation();
46-
if (searchModal) {
47-
searchModal.style.display = 'flex';
48-
if (searchInput) searchInput.focus();
49-
}
50-
});
51-
} else {
52-
console.log('Search button not found!');
53-
}
54-
55-
// Close search modal
56-
if (searchClose) {
57-
searchClose.addEventListener('click', () => {
58-
if (searchModal) {
59-
searchModal.style.display = 'none';
60-
if (searchInput) searchInput.value = '';
61-
if (searchResults) searchResults.innerHTML = '';
62-
}
63-
});
64-
}
65-
66-
// Close on escape key
67-
document.addEventListener('keydown', (e) => {
68-
if (e.key === 'Escape' && searchModal && searchModal.style.display === 'flex') {
69-
searchModal.style.display = 'none';
70-
if (searchInput) searchInput.value = '';
71-
if (searchResults) searchResults.innerHTML = '';
72-
}
73-
});
74-
75-
// Close on background click
76-
if (searchModal) {
77-
searchModal.addEventListener('click', (e) => {
78-
if (e.target === searchModal) {
79-
searchModal.style.display = 'none';
80-
if (searchInput) searchInput.value = '';
81-
if (searchResults) searchResults.innerHTML = '';
82-
}
83-
});
84-
}
85-
86-
// Search functionality
87-
if (searchInput) {
88-
searchInput.addEventListener('input', () => {
89-
const query = searchInput.value.toLowerCase().trim();
90-
91-
if (query.length < 2) {
92-
if (searchResults) searchResults.innerHTML = '';
93-
return;
94-
}
95-
96-
// Simple search through page content
97-
const allPosts = document.querySelectorAll('.blog-card, .archive-item');
98-
const results = [];
99-
100-
allPosts.forEach(post => {
101-
const title = post.querySelector('.card-title a, .archive-title a');
102-
const content = post.querySelector('.card-excerpt, .archive-excerpt');
103-
104-
if (title && content) {
105-
const titleText = title.textContent.toLowerCase();
106-
const contentText = content.textContent.toLowerCase();
107-
108-
if (titleText.includes(query) || contentText.includes(query)) {
109-
results.push({
110-
title: title.textContent,
111-
url: title.href,
112-
excerpt: content.textContent.substring(0, 150) + '...'
113-
});
114-
}
115-
}
116-
});
117-
118-
displaySearchResults(results, query);
119-
});
120-
}
121-
122-
function displaySearchResults(results, query) {
123-
if (!searchResults) return;
124-
125-
if (results.length === 0) {
126-
searchResults.innerHTML = '<div class="search-no-results">No posts found</div>';
127-
return;
128-
}
129-
130-
const resultsHtml = results.map(post => {
131-
const title = highlightText(post.title, query);
132-
const highlightedDesc = highlightText(post.excerpt, query);
133-
134-
return `
135-
<div class="search-result-item">
136-
<h4><a href="${post.url}">${title}</a></h4>
137-
<p class="search-result-excerpt">${highlightedDesc}</p>
138-
</div>
139-
`;
140-
}).join('');
141-
142-
searchResults.innerHTML = resultsHtml;
143-
}
144-
145-
function highlightText(text, query) {
146-
const regex = new RegExp(`(${query})`, 'gi');
147-
return text.replace(regex, '<mark>$1</mark>');
148-
}
149-
15025
// Smooth scroll for anchor links
15126
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
15227
anchor.addEventListener('click', function(e) {

‎assets/js/search.js‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
// Deepcomet AI Search Functionality
2+
3+
(function() {
4+
'use strict';
5+
6+
// Search functionality
7+
const searchBtn = document.getElementById('search-btn');
8+
const searchModal = document.getElementById('search-modal');
9+
const searchClose = document.getElementById('search-close');
10+
const searchInput = document.getElementById('search-input');
11+
const searchResults = document.getElementById('search-results');
12+
13+
// Debug: Check if elements exist
14+
console.log('Search button:', searchBtn);
15+
console.log('Search modal:', searchModal);
16+
console.log('Search close:', searchClose);
17+
console.log('Search input:', searchInput);
18+
console.log('Search results:', searchResults);
19+
20+
// Open search modal
21+
if (searchBtn) {
22+
console.log('Adding click listener to search button');
23+
searchBtn.addEventListener('click', (e) => {
24+
console.log('Search button clicked!', e);
25+
e.preventDefault();
26+
e.stopPropagation();
27+
if (searchModal) {
28+
searchModal.style.display = 'flex';
29+
if (searchInput) searchInput.focus();
30+
}
31+
});
32+
} else {
33+
console.log('Search button not found!');
34+
}
35+
36+
// Close search modal
37+
if (searchClose) {
38+
searchClose.addEventListener('click', () => {
39+
if (searchModal) {
40+
searchModal.style.display = 'none';
41+
if (searchInput) searchInput.value = '';
42+
if (searchResults) searchResults.innerHTML = '';
43+
}
44+
});
45+
}
46+
47+
// Close on escape key
48+
document.addEventListener('keydown', (e) => {
49+
if (e.key === 'Escape' && searchModal && searchModal.style.display === 'flex') {
50+
searchModal.style.display = 'none';
51+
if (searchInput) searchInput.value = '';
52+
if (searchResults) searchResults.innerHTML = '';
53+
}
54+
});
55+
56+
// Close on background click
57+
if (searchModal) {
58+
searchModal.addEventListener('click', (e) => {
59+
if (e.target === searchModal) {
60+
searchModal.style.display = 'none';
61+
if (searchInput) searchInput.value = '';
62+
if (searchResults) searchResults.innerHTML = '';
63+
}
64+
});
65+
}
66+
67+
// Search functionality
68+
if (searchInput) {
69+
searchInput.addEventListener('input', () => {
70+
const query = searchInput.value.toLowerCase().trim();
71+
72+
if (query.length < 2) {
73+
if (searchResults) searchResults.innerHTML = '';
74+
return;
75+
}
76+
77+
// Simple search through page content
78+
const allPosts = document.querySelectorAll('.blog-card, .archive-item');
79+
const results = [];
80+
81+
allPosts.forEach(post => {
82+
const title = post.querySelector('.card-title a, .archive-title a');
83+
const content = post.querySelector('.card-excerpt, .archive-excerpt');
84+
85+
if (title && content) {
86+
const titleText = title.textContent.toLowerCase();
87+
const contentText = content.textContent.toLowerCase();
88+
89+
if (titleText.includes(query) || contentText.includes(query)) {
90+
results.push({
91+
title: title.textContent,
92+
url: title.href,
93+
excerpt: content.textContent.substring(0, 150) + '...'
94+
});
95+
}
96+
}
97+
});
98+
99+
displaySearchResults(results, query);
100+
});
101+
}
102+
103+
function displaySearchResults(results, query) {
104+
if (!searchResults) return;
105+
106+
if (results.length === 0) {
107+
searchResults.innerHTML = '<div class="search-no-results">No posts found</div>';
108+
return;
109+
}
110+
111+
const resultsHtml = results.map(post => {
112+
const title = highlightText(post.title, query);
113+
const highlightedDesc = highlightText(post.excerpt, query);
114+
115+
return `
116+
<div class="search-result-item">
117+
<h4><a href="${post.url}">${title}</a></h4>
118+
<p class="search-result-excerpt">${highlightedDesc}</p>
119+
</div>
120+
`;
121+
}).join('');
122+
123+
searchResults.innerHTML = resultsHtml;
124+
}
125+
126+
function highlightText(text, query) {
127+
const regex = new RegExp(`(${query})`, 'gi');
128+
return text.replace(regex, '<mark>$1</mark>');
129+
}
130+
131+
})();

0 commit comments

Comments
 (0)