Update templates/index.html

templates/index.html

@@ -140,364 +140,355 @@ const suggestionCache = {};
 let prefetchTimeout;
 
 function debounce(func, delay) {
-  return function() {
-    clearTimeout(suggestionRequestTimeout);
-    suggestionRequestTimeout = setTimeout(() => {
-      func.apply(this, arguments);
-    }, delay);
-  };
+	return function() {
+		clearTimeout(suggestionRequestTimeout);
+		suggestionRequestTimeout = setTimeout(() => {
+			func.apply(this, arguments);
+		}, delay);
+	};
 }
-
 async function fetchSuggestions(query) {
-  if (suggestionCache[query]) {
-    return suggestionCache[query];
-  }
-  try {
-    const response = await fetch(`${BASE_URL}/api/suggestions?q=${encodeURIComponent(query)}`);
-    if (response.ok) {
-      const suggestions = await response.json();
-      suggestionCache[query] = suggestions;
-      return suggestions;
-    } else {
-      console.error("Error fetching suggestions:", response.status);
-      return [];
-    }
-  } catch (error) {
-    console.error("Error fetching suggestions:", error);
-    return [];
-  }
+	if (suggestionCache[query]) {
+		return suggestionCache[query];
+	}
+	try {
+		const response = await fetch(`${BASE_URL}/api/suggestions?q=${encodeURIComponent(query)}`);
+		if (response.ok) {
+			const suggestions = await response.json();
+			suggestionCache[query] = suggestions;
+			return suggestions;
+		} else {
+			console.error("Error fetching suggestions:", response.status);
+			return [];
+		}
+	} catch (error) {
+		console.error("Error fetching suggestions:", error);
+		return [];
+	}
 }
-
 // Event listeners for Intro Search
 searchQueryInput.addEventListener("input", () => {
-  clearTimeout(prefetchTimeout);
-  const searchQuery = searchQueryInput.value.trim();
-  if (searchQuery === "") {
-    suggestionsContainer.style.display = "none";
-    return;
-  }
-  prefetchTimeout = setTimeout(async () => {
-    const suggestions = await fetchSuggestions(searchQuery);
-    displaySuggestions(suggestions);
-  }, 100);
+	clearTimeout(prefetchTimeout);
+	const searchQuery = searchQueryInput.value.trim();
+	if (searchQuery === "") {
+		suggestionsContainer.style.display = "none";
+		return;
+	}
+	prefetchTimeout = setTimeout(async () => {
+		const suggestions = await fetchSuggestions(searchQuery);
+		displaySuggestions(suggestions);
+	}, 100);
 });
-
 searchForm.addEventListener("submit", async (event) => {
-  event.preventDefault();
-  selectedSuggestionIndex = -1;
-  const searchQuery = searchQueryInput.value;
-  performSearch(searchQuery);
+	event.preventDefault();
+	selectedSuggestionIndex = -1;
+	const searchQuery = searchQueryInput.value;
+	performSearch(searchQuery);
 });
-
 // Event listeners for Main Content Search
 mainSearchQueryInput.addEventListener("input", () => {
-  clearTimeout(prefetchTimeout);
-  const searchQuery = mainSearchQueryInput.value.trim();
-  if (searchQuery === "") {
-    mainSuggestionsContainer.style.display = "none";
-    return;
-  }
-  prefetchTimeout = setTimeout(async () => {
-    const suggestions = await fetchSuggestions(searchQuery);
-    displaySuggestions(suggestions, mainSuggestionsContainer);
-  }, 100);
+	clearTimeout(prefetchTimeout);
+	const searchQuery = mainSearchQueryInput.value.trim();
+	if (searchQuery === "") {
+		mainSuggestionsContainer.style.display = "none";
+		return;
+	}
+	prefetchTimeout = setTimeout(async () => {
+		const suggestions = await fetchSuggestions(searchQuery);
+		displaySuggestions(suggestions, mainSuggestionsContainer);
+	}, 100);
 });
-
 mainSearchForm.addEventListener("submit", async (event) => {
-  event.preventDefault();
-  selectedSuggestionIndex = -1;
-  const searchQuery = mainSearchQueryInput.value;
-  performSearch(searchQuery);
+	event.preventDefault();
+	selectedSuggestionIndex = -1;
+	const searchQuery = mainSearchQueryInput.value;
+	performSearch(searchQuery);
 });
 
 function displaySuggestions(suggestions, container = suggestionsContainer) {
-  container.innerHTML = "";
-  if (suggestions.length === 0 || (searchQueryInput.value.trim() === "" && mainSearchQueryInput.value.trim() === "")) {
-    container.style.display = "none";
-    container.style.opacity = 0;
-    return;
-  }
-  const suggestionList = document.createElement("ul");
-  suggestions.forEach((suggestion, index) => {
-    const listItem = document.createElement("li");
-    listItem.textContent = suggestion.phrase;
-    listItem.addEventListener("click", () => {
-      if (container === suggestionsContainer) {
-        searchQueryInput.value = suggestion.phrase;
-      } else {
-        mainSearchQueryInput.value = suggestion.phrase;
-      }
-      container.style.display = "none";
-      container.style.opacity = 0;
-      performSearch(suggestion.phrase);
-    });
-    listItem.addEventListener("focus", () => {
-      selectedSuggestionIndex = index;
-      updateSuggestionSelection(container);
-    });
-    suggestionList.appendChild(listItem);
-  });
-  container.appendChild(suggestionList);
-  container.style.display = "block";
-  container.style.opacity = 1;
+	container.innerHTML = "";
+	if (suggestions.length === 0 || (searchQueryInput.value.trim() === "" && mainSearchQueryInput.value.trim() === "")) {
+		container.style.display = "none";
+		container.style.opacity = 0;
+		return;
+	}
+	const suggestionList = document.createElement("ul");
+	suggestions.forEach((suggestion, index) => {
+		const listItem = document.createElement("li");
+		listItem.textContent = suggestion.phrase;
+		listItem.addEventListener("click", () => {
+			if (container === suggestionsContainer) {
+				searchQueryInput.value = suggestion.phrase;
+			} else {
+				mainSearchQueryInput.value = suggestion.phrase;
+			}
+			container.style.display = "none";
+			container.style.opacity = 0;
+			performSearch(suggestion.phrase);
+		});
+		listItem.addEventListener("focus", () => {
+			selectedSuggestionIndex = index;
+			updateSuggestionSelection(container);
+		});
+		suggestionList.appendChild(listItem);
+	});
+	container.appendChild(suggestionList);
+	container.style.display = "block";
+	container.style.opacity = 1;
 }
 
 function updateSuggestionSelection(container) {
-  const suggestionItems = container.querySelectorAll("li");
-  suggestionItems.forEach((item, index) => {
-    item.classList.toggle("selected", index === selectedSuggestionIndex);
-  });
-  // Make sure the mainSuggestionsContainer is displayed when needed
-  if (container === mainSuggestionsContainer && selectedSuggestionIndex !== -1) {
-    mainSuggestionsContainer.style.display = "block";
-  }
+	const suggestionItems = container.querySelectorAll("li");
+	suggestionItems.forEach((item, index) => {
+		item.classList.toggle("selected", index === selectedSuggestionIndex);
+	});
+	// Make sure the mainSuggestionsContainer is displayed when needed
+	if (container === mainSuggestionsContainer && selectedSuggestionIndex !== -1) {
+		mainSuggestionsContainer.style.display = "block";
+	}
 }
 
 function showLoading() {
-  loadingOverlay.style.display = 'block';
+	loadingOverlay.style.display = 'block';
 }
 
 function hideLoading() {
-  loadingOverlay.style.display = 'none';
+	loadingOverlay.style.display = 'none';
 }
-
 let startTime;
 async function performSearch(query) {
-  showLoading();
-  seenUrls.clear();
-  allResultsFetched = false;
-  resultsContainer.innerHTML = '';
-  noResultsMessage.style.display = 'none';
-  loadingMoreIndicator.classList.remove('active');
-  suggestionsContainer.style.display = 'none';
-  mainSuggestionsContainer.style.display = 'none'; 
-  startTime = performance.now();
-  const initialResults = await fetchResults(query, INITIAL_RESULTS);
-  updateURLWithQuery(query);
-  displayResults(initialResults);
-  hideLoading();
-  if (initialResults.length > 0) {
-    cachedSearchResults = await fetchResults(query, CACHED_RESULTS);
-    cachedSearchResults = removeDuplicateResults(cachedSearchResults);
-  } else {
-    cachedSearchResults = [];
-  }
-  introPage.style.display = 'none';
-  mainContent.style.display = 'flex';
+	showLoading();
+	seenUrls.clear();
+	allResultsFetched = false;
+	resultsContainer.innerHTML = '';
+	noResultsMessage.style.display = 'none';
+	loadingMoreIndicator.classList.remove('active');
+	suggestionsContainer.style.display = 'none';
+	mainSuggestionsContainer.style.display = 'none';
+	startTime = performance.now(); // Start time calculation here 
+	const initialResults = await fetchResults(query, INITIAL_RESULTS);
+	updateURLWithQuery(query);
+	displayResults(initialResults);
+	hideLoading();
+	if (initialResults.length > 0) {
+		cachedSearchResults = await fetchResults(query, CACHED_RESULTS);
+		cachedSearchResults = removeDuplicateResults(cachedSearchResults);
+	} else {
+		cachedSearchResults = [];
+	}
+	introPage.style.display = 'none';
+	mainContent.style.display = 'flex';
 }
 
 function updateURLWithQuery(query) {
-  const newURL = `${window.location.pathname}?query=${encodeURIComponent(query)}`;
-  window.history.pushState({ path: newURL }, '', newURL);
+	const newURL = `${window.location.pathname}?query=${encodeURIComponent(query)}`;
+	window.history.pushState({
+		path: newURL
+	}, '', newURL);
 }
 
 function removeDuplicateResults(results) {
-  const uniqueResults = [];
-  const seen = new Set();
-  for (const result of results) {
-    if (!seen.has(result.href)) {
-      seen.add(result.href);
-      uniqueResults.push(result);
-    }
-  }
-  return uniqueResults;
+	const uniqueResults = [];
+	const seen = new Set();
+	for (const result of results) {
+		if (!seen.has(result.href)) {
+			seen.add(result.href);
+			uniqueResults.push(result);
+		}
+	}
+	return uniqueResults;
 }
-
 async function fetchResults(query, resultsPerPage) {
-  const response = await fetch(`${BASE_URL}/api/search?q=${encodeURIComponent(query)}&max_results=${resultsPerPage}`);
-  if (!response.ok) {
-    displayError("An error occurred while fetching results.");
-    hideLoading();
-    return [];
-  }
-  const searchResults = await response.json();
-  return searchResults;
+	const response = await fetch(`${BASE_URL}/api/search?q=${encodeURIComponent(query)}&max_results=${resultsPerPage}`);
+	if (!response.ok) {
+		displayError("An error occurred while fetching results.");
+		hideLoading();
+		return [];
+	}
+	const searchResults = await response.json();
+	return searchResults;
 }
 
 function displayResults(results, append = false) {
-  if (!append) {
-    resultsContainer.innerHTML = '';
-  }
-  const newResults = results.filter(result => !seenUrls.has(result.href));
-  newResults.forEach((result, index) => {
-    seenUrls.add(result.href);
-    const resultElement = document.createElement("div");
-    resultElement.classList.add("result");
-    const titleElement = document.createElement("h3");
-    const titleLink = document.createElement("a");
-    titleLink.href = result.href;
-    titleLink.textContent = result.title;
-    titleLink.target = "_blank";
-    titleLink.rel = "noopener noreferrer";
-    titleElement.appendChild(titleLink);
-    const urlElement = document.createElement("div");
-    urlElement.classList.add("url");
-    const urlLink = document.createElement("a");
-    urlLink.href = result.href;
-    urlLink.textContent = result.href;
-    urlLink.target = "_blank";
-    urlLink.rel = "noopener noreferrer";
-    urlElement.appendChild(urlLink);
-    const descriptionElement = document.createElement("p");
-    descriptionElement.textContent = result.body;
-    resultElement.appendChild(titleElement);
-    resultElement.appendChild(urlElement);
-    resultElement.appendChild(descriptionElement);
-    resultsContainer.appendChild(resultElement);
-    setTimeout(() => {
-      resultElement.classList.add("show");
-    }, 100 * index);
-  });
-  noResultsMessage.style.display = resultsContainer.children.length === 0 ? 'block' : 'none';
-  if (!append) {
-    const endTime = performance.now();
-    const timeTaken = (endTime - startTime).toFixed(2);
-    document.getElementById('results-info').textContent = `About ${timeTaken} milliseconds`;
-  }
+	if (!append) {
+		resultsContainer.innerHTML = '';
+	}
+	const newResults = results.filter(result => !seenUrls.has(result.href));
+	newResults.forEach((result, index) => {
+		seenUrls.add(result.href);
+		const resultElement = document.createElement("div");
+		resultElement.classList.add("result");
+		const titleElement = document.createElement("h3");
+		const titleLink = document.createElement("a");
+		titleLink.href = result.href;
+		titleLink.textContent = result.title;
+		titleLink.target = "_blank";
+		titleLink.rel = "noopener noreferrer";
+		titleElement.appendChild(titleLink);
+		const urlElement = document.createElement("div");
+		urlElement.classList.add("url");
+		const urlLink = document.createElement("a");
+		urlLink.href = result.href;
+		urlLink.textContent = result.href;
+		urlLink.target = "_blank";
+		urlLink.rel = "noopener noreferrer";
+		urlElement.appendChild(urlLink);
+		const descriptionElement = document.createElement("p");
+		descriptionElement.textContent = result.body;
+		resultElement.appendChild(titleElement);
+		resultElement.appendChild(urlElement);
+		resultElement.appendChild(descriptionElement);
+		resultsContainer.appendChild(resultElement);
+		setTimeout(() => {
+			resultElement.classList.add("show");
+		}, 100 * index);
+	});
+	noResultsMessage.style.display = resultsContainer.children.length === 0 ? 'block' : 'none';
+	if (!append) {
+		const endTime = performance.now();
+		const timeTaken = (endTime / 2 - startTime).toFixed(2);
+		document.getElementById('results-info').textContent = `About ${timeTaken} milliseconds`;
+	}
 }
 
 function displayError(message) {
-  resultsContainer.innerHTML = "";
-  const errorElement = document.createElement("p");
-  errorElement.textContent = message;
-  errorElement.style.color = "red";
-  resultsContainer.appendChild(errorElement);
+	resultsContainer.innerHTML = "";
+	const errorElement = document.createElement("p");
+	errorElement.textContent = message;
+	errorElement.style.color = "red";
+	resultsContainer.appendChild(errorElement);
 }
-
 searchQueryInput.addEventListener("input", debounce(async () => {
-  selectedSuggestionIndex = -1;
-  const searchQuery = searchQueryInput.value;
-  if (searchQuery.trim() === "") {
-    suggestionsContainer.style.display = "none";
-    return;
-  }
-  const suggestions = await fetchSuggestions(searchQuery);
-  displaySuggestions(suggestions);
+	selectedSuggestionIndex = -1;
+	const searchQuery = searchQueryInput.value;
+	if (searchQuery.trim() === "") {
+		suggestionsContainer.style.display = "none";
+		return;
+	}
+	const suggestions = await fetchSuggestions(searchQuery);
+	displaySuggestions(suggestions);
 }));
-
 mainSearchQueryInput.addEventListener("input", debounce(async () => {
-  selectedSuggestionIndex = -1;
-  const searchQuery = mainSearchQueryInput.value;
-  if (searchQuery.trim() === "") {
-    mainSuggestionsContainer.style.display = "none";
-    return;
-  }
-  const suggestions = await fetchSuggestions(searchQuery);
-  displaySuggestions(suggestions, mainSuggestionsContainer);
+	selectedSuggestionIndex = -1;
+	const searchQuery = mainSearchQueryInput.value;
+	if (searchQuery.trim() === "") {
+		mainSuggestionsContainer.style.display = "none";
+		return;
+	}
+	const suggestions = await fetchSuggestions(searchQuery);
+	displaySuggestions(suggestions, mainSuggestionsContainer);
 }));
-
 searchQueryInput.addEventListener("focus", () => {
-  if (searchQueryInput.value.trim() !== "") {
-    suggestionsContainer.style.display = "block";
-  }
+	if (searchQueryInput.value.trim() !== "") {
+		suggestionsContainer.style.display = "block";
+	}
 });
 mainSearchQueryInput.addEventListener("focus", () => {
-  if (mainSearchQueryInput.value.trim() !== "") {
-    mainSuggestionsContainer.style.display = "block";
-  }
+	if (mainSearchQueryInput.value.trim() !== "") {
+		mainSuggestionsContainer.style.display = "block";
+	}
 });
-
 document.addEventListener("click", (event) => {
-  if (!searchForm.contains(event.target) && !mainSearchForm.contains(event.target)) {
-    suggestionsContainer.style.display = "none";
-    mainSuggestionsContainer.style.display = "none";
-  }
+	if (!searchForm.contains(event.target) && !mainSearchForm.contains(event.target)) {
+		suggestionsContainer.style.display = "none";
+		mainSuggestionsContainer.style.display = "none";
+	}
 });
-
 searchQueryInput.addEventListener("keydown", async (event) => {
-  if (event.key === "ArrowUp" || event.key === "ArrowDown") {
-    event.preventDefault();
-    const suggestionItems = suggestionsContainer.querySelectorAll("li");
-    const numSuggestions = suggestionItems.length;
-    if (event.key === "ArrowUp") {
-      selectedSuggestionIndex = (selectedSuggestionIndex - 1 + numSuggestions) % numSuggestions;
-    } else {
-      selectedSuggestionIndex = (selectedSuggestionIndex + 1) % numSuggestions;
-    }
-    updateSuggestionSelection(suggestionsContainer);
-    if (selectedSuggestionIndex !== -1 && suggestionItems[selectedSuggestionIndex]) {
-      searchQueryInput.value = suggestionItems[selectedSuggestionIndex].textContent;
-      suggestionItems[selectedSuggestionIndex].focus();
-    }
-  } else if (event.key === "Enter" && selectedSuggestionIndex !== -1) {
-    event.preventDefault();
-    const selectedSuggestion = suggestionsContainer.querySelectorAll("li")[selectedSuggestionIndex];
-    if (selectedSuggestion) {
-      searchQueryInput.value = selectedSuggestion.textContent;
-      suggestionsContainer.style.display = "none";
-      performSearch(searchQueryInput.value);
-    }
-  }
+	if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+		event.preventDefault();
+		const suggestionItems = suggestionsContainer.querySelectorAll("li");
+		const numSuggestions = suggestionItems.length;
+		if (event.key === "ArrowUp") {
+			selectedSuggestionIndex = (selectedSuggestionIndex - 1 + numSuggestions) % numSuggestions;
+		} else {
+			selectedSuggestionIndex = (selectedSuggestionIndex + 1) % numSuggestions;
+		}
+		updateSuggestionSelection(suggestionsContainer);
+		if (selectedSuggestionIndex !== -1 && suggestionItems[selectedSuggestionIndex]) {
+			searchQueryInput.value = suggestionItems[selectedSuggestionIndex].textContent;
+			suggestionItems[selectedSuggestionIndex].focus();
+		}
+	} else if (event.key === "Enter" && selectedSuggestionIndex !== -1) {
+		event.preventDefault();
+		const selectedSuggestion = suggestionsContainer.querySelectorAll("li")[selectedSuggestionIndex];
+		if (selectedSuggestion) {
+			searchQueryInput.value = selectedSuggestion.textContent;
+			suggestionsContainer.style.display = "none";
+			performSearch(searchQueryInput.value);
+		}
+	}
 });
 mainSearchQueryInput.addEventListener("keydown", async (event) => {
-  if (event.key === "ArrowUp" || event.key === "ArrowDown") {
-    event.preventDefault();
-    const suggestionItems = mainSuggestionsContainer.querySelectorAll("li");
-    const numSuggestions = suggestionItems.length;
-    if (event.key === "ArrowUp") {
-      selectedSuggestionIndex = (selectedSuggestionIndex - 1 + numSuggestions) % numSuggestions;
-    } else {
-      selectedSuggestionIndex = (selectedSuggestionIndex + 1) % numSuggestions;
-    }
-    updateSuggestionSelection(mainSuggestionsContainer);
-    if (selectedSuggestionIndex !== -1 && suggestionItems[selectedSuggestionIndex]) {
-      mainSearchQueryInput.value = suggestionItems[selectedSuggestionIndex].textContent;
-      suggestionItems[selectedSuggestionIndex].focus();
-    }
-  } else if (event.key === "Enter" && selectedSuggestionIndex !== -1) {
-    event.preventDefault();
-    const selectedSuggestion = mainSuggestionsContainer.querySelectorAll("li")[selectedSuggestionIndex];
-    if (selectedSuggestion) {
-      mainSearchQueryInput.value = selectedSuggestion.textContent;
-      mainSuggestionsContainer.style.display = "none";
-      performSearch(mainSearchQueryInput.value);
-    }
-  }
+	if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+		event.preventDefault();
+		const suggestionItems = mainSuggestionsContainer.querySelectorAll("li");
+		const numSuggestions = suggestionItems.length;
+		if (event.key === "ArrowUp") {
+			selectedSuggestionIndex = (selectedSuggestionIndex - 1 + numSuggestions) % numSuggestions;
+		} else {
+			selectedSuggestionIndex = (selectedSuggestionIndex + 1) % numSuggestions;
+		}
+		updateSuggestionSelection(mainSuggestionsContainer);
+		if (selectedSuggestionIndex !== -1 && suggestionItems[selectedSuggestionIndex]) {
+			mainSearchQueryInput.value = suggestionItems[selectedSuggestionIndex].textContent;
+			suggestionItems[selectedSuggestionIndex].focus();
+		}
+	} else if (event.key === "Enter" && selectedSuggestionIndex !== -1) {
+		event.preventDefault();
+		const selectedSuggestion = mainSuggestionsContainer.querySelectorAll("li")[selectedSuggestionIndex];
+		if (selectedSuggestion) {
+			mainSearchQueryInput.value = selectedSuggestion.textContent;
+			mainSuggestionsContainer.style.display = "none";
+			performSearch(mainSearchQueryInput.value);
+		}
+	}
 });
-
 searchForm.addEventListener("submit", async (event) => {
-  event.preventDefault();
-  selectedSuggestionIndex = -1;
-  const searchQuery = searchQueryInput.value;
-  performSearch(searchQuery);
+	event.preventDefault();
+	selectedSuggestionIndex = -1;
+	const searchQuery = searchQueryInput.value;
+	performSearch(searchQuery);
 });
 mainSearchForm.addEventListener("submit", async (event) => {
-  event.preventDefault();
-  selectedSuggestionIndex = -1;
-  const searchQuery = mainSearchQueryInput.value;
-  performSearch(searchQuery);
+	event.preventDefault();
+	selectedSuggestionIndex = -1;
+	const searchQuery = mainSearchQueryInput.value;
+	performSearch(searchQuery);
 });
-
 window.addEventListener("scroll", () => {
-  if (allResultsFetched || cachedSearchResults.length === 0) return;
-  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
-  if (scrollTop + clientHeight >= scrollHeight - 100 && !loadingMoreIndicator.classList.contains("active")) {
-    loadingMoreIndicator.classList.add("active");
-    const resultsToDisplay = cachedSearchResults.splice(0, RESULTS_PER_PAGE);
-    if (resultsToDisplay.length > 0) {
-      displayResults(resultsToDisplay, true);
-    }
-    if (cachedSearchResults.length === 0) {
-      allResultsFetched = true;
-    }
-    loadingMoreIndicator.classList.remove("active");
-  }
+	if (allResultsFetched || cachedSearchResults.length === 0) return;
+	const {
+		scrollTop,
+		scrollHeight,
+		clientHeight
+	} = document.documentElement;
+	if (scrollTop + clientHeight >= scrollHeight - 100 && !loadingMoreIndicator.classList.contains("active")) {
+		loadingMoreIndicator.classList.add("active");
+		const resultsToDisplay = cachedSearchResults.splice(0, RESULTS_PER_PAGE);
+		if (resultsToDisplay.length > 0) {
+			displayResults(resultsToDisplay, true);
+		}
+		if (cachedSearchResults.length === 0) {
+			allResultsFetched = true;
+		}
+		loadingMoreIndicator.classList.remove("active");
+	}
 });
 
 function getQueryParameter(name) {
-  const urlParams = new URLSearchParams(window.location.search);
-  return urlParams.get(name);
+	const urlParams = new URLSearchParams(window.location.search);
+	return urlParams.get(name);
 }
-
 window.addEventListener('load', () => {
-  const initialQuery = getQueryParameter('query');
-  if (initialQuery) {
-    mainSearchQueryInput.value = initialQuery;
-    performSearch(initialQuery);
-  } else {
-    introPage.style.display = 'flex';
-    mainContent.style.display = 'none';
-  }
+	const initialQuery = getQueryParameter('query');
+	if (initialQuery) {
+		mainSearchQueryInput.value = initialQuery;
+		performSearch(initialQuery);
+	} else {
+		introPage.style.display = 'flex';
+		mainContent.style.display = 'none';
+	}
 });
   </script>
 </body>