Public
HTTP
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
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";
// first stable version is 9 and the link is https://www.val.town/v/willthereader/FanficSearcherWebsite?v=9
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>';