import { Filter } from "https://esm.sh/content-checker@1.1.3";
import valTownBadge from "https://esm.town/v/jxnblk/valTownBadgeMiddleware";
import { Hono } from "npm:hono@3";
const app = new Hono();
const apiKey = Deno.env.get("OPEN_MODERATOR_API_KEY");
if (!apiKey) {
console.error("API key not set. Please set the OPEN_MODERATOR_API_KEY environment variable.");
} else {
console.log("API key is set.");
}
const filter = new Filter({ openModeratorAPIKey: apiKey });
app.get("/", (c) => {
const userIP = c.req.headers.get("x-forwarded-for") || c.req.headers.get("remote_addr") || "anonymous";
const messages = JSON.parse(localStorage.getItem(userIP) || "[]");
return c.html(
<>
<head>
<title>Safe(r) Message Board</title>
<script>
{`
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('form');
form.addEventListener('submit', async function(event) {
event.preventDefault();
const formData = new FormData(form);
const response = await fetch('/', {
method: 'POST',
body: formData,
});
const text = await response.text();
document.body.innerHTML = text;
const newScript = document.createElement('script');
newScript.innerHTML = \`
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('form');
form.addEventListener('submit', async function(event) {
event.preventDefault();
const formData = new FormData(form);
const response = await fetch('/', {
method: 'POST',
body: formData,
});
const text = await response.text();
document.body.innerHTML = text;
});
});
\`;
document.body.appendChild(newScript);
});
// Load messages from localStorage and render them
const messages = JSON.parse(localStorage.getItem('${userIP}') || '[]');
const messageList = document.getElementById('message-list');
messageList.innerHTML = '';
messages.forEach((msg, index) => {
const li = document.createElement('li');
li.innerHTML = \`<p>\${msg.prompt}</p><p>\${JSON.stringify(msg.response)}</p>\`;
messageList.appendChild(li);
});
});
`}
</script>
</head>
<body>
<main>
<h1>Safe Message Board</h1>
<p>
This message board uses <a href="https://www.npmjs.com/package/content-checker">content-checker</a>{" "}
to sanitize your messages. Do your worst!
</p>
<form method="POST">
<label>
Your Message:
<input type="text" name="content" required />
</label>
<button type="submit">Submit</button>
</form>
<section>
<h2>Your Messages</h2>
<ul id="message-list">
{messages.map((msg, index) => (
<li key={index}>
<p>{msg.prompt}</p>
<p>{JSON.stringify(msg.response)}</p>
</li>
))}
</ul>
</section>
</main>
</body>
</>,
);
});