import instantsearch from "https://esm.sh/instantsearch.js@4.49.1";
import { configure, hits, pagination, searchBox } from "https://esm.sh/instantsearch.js@4.49.1/es/widgets";
function validateConfig(): { appId: string; apiKey: string } {
const appId = Deno.env.get("ALGOLIA_APP_ID_fanficSearcher");
const apiKey = Deno.env.get("ALGOLIA_SEARCH_API_KEY_fanficSearcher");
if (!appId || !apiKey) {
throw new Error("Algolia credentials are not properly set");
}
return { appId, apiKey };
}
function generateHtml(appId: string, apiKey: string): string {
console.log("Generating HTML with App ID:", appId, "and API Key:", apiKey ? "exists" : "missing");
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FanFicSearcher</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f5f5f5;
}
.ais-Hits-list {
display: flex;
flex-direction: column;
width: 100% !important; /* Take full available width */
background-color: transparent!important; /* No background */
}
.ais-Hits-item {
width: 100% !important; /* Ensure full width */
max-width: none !important; /* Remove any width constraints */
background-color: white !important; /* No background */
box-shadow: none !important; /* No shadow */
}
.hit-content {
margin-top: 10px; /* Keep a small gap above content if needed */
white-space: pre-wrap;
margin: 0 !important; /* Remove margin */
background-color: white !important; /* No background */
box-shadow: none !important; /* No shadow */
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.3.1/themes/algolia-min.css" integrity="sha256-HB49n/BZjuqiCtQQf49OdZn63XuKFaxcIHWf0HNKte8=" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.5.1/dist/algoliasearch-lite.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.49.1/dist/instantsearch.production.min.js"></script>
</head>
<body>
<h1>FanFicSearcher</h1>
<div id="searchbox"></div>
<div id="hits"></div>
<div id="pagination"></div>
<script>
console.log("Initializing Algolia search with App ID:", "${appId}");
const searchClient = algoliasearch("${appId}", "${apiKey}");
const search = instantsearch({
indexName: "NewGameNewLife",
searchClient,
debug: true,
});
search.addWidgets([
instantsearch.widgets.searchBox({
container: '#searchbox',
}),
]);
search.addWidgets([
instantsearch.widgets.searchBox({
container: '#searchbox',
}),
]);
search.addWidgets([
instantsearch.widgets.hits({
container: '#hits',
templates: {
item: function(hit) {
console.log('Hit:', hit); // Add this line
return '<div class="hit">' +
'<h2>' + instantsearch.highlight({ hit: hit, attribute: 'chapterTitle' }) + '</h2>' +
'<div class="hit-content">' +
instantsearch.snippet({ hit: hit, attribute: 'storyContent' }) +
'</div>' +
'</div>';