3import { createRoot } from "https://esm.sh/react-dom/client";
4
5function App() {
6 return (
7 <div style={{
19}
20
21function client() {
22 createRoot(document.getElementById("root")).render(<App />);
23}
24if (typeof document !== "undefined") { client(); }
25
26export default async function server(request: Request): Promise<Response> {
27 return new Response(`
28 <html>
90// Hoisted JavaScript
91if (typeof document !== "undefined") {
92 function createBubbles() {
93 for (let i = 0; i < 20; i++) {
94 const bubble = document.createElement('div');
140);
141
142export default async function server(request: Request): Promise<Response> {
143 const html = renderToString(<App />);
144
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5function App() {
6 return (
7 <div className="container">
24}
25
26function client() {
27 createRoot(document.getElementById("root")).render(<App />);
28}
29if (typeof document !== "undefined") { client(); }
30
31export default async function server(request: Request): Promise<Response> {
32 return new Response(`
33 <html>
2// We'll use a basic HTML structure with inline CSS for styling and JavaScript for animations and interactions.
3
4export default async function server(request: Request): Promise<Response> {
5 const html = `
6 <html>
105 let spiceLevel = 1;
106
107 function addFruit() {
108 const fruit = document.createElement('div');
109 fruit.textContent = Math.random() < 0.2 ? spicyItems[Math.floor(Math.random() * spicyItems.length)] : fruits[Math.floor(Math.random() * fruits.length)];
125 }
126
127 function createJuiceSplat(x, y) {
128 const splat = document.createElement('div');
129 splat.className = 'juice-splat';
136 }
137
138 function increaseSpice() {
139 spiceLevel++;
140 updateSpiceMeter();
145 }
146
147 function updateSpiceMeter() {
148 const meter = document.getElementById('spice-meter');
149 meter.textContent = 'Spice Level: ' + '🌶️'.repeat(spiceLevel);
157 });
158
159 function shakeTitle() {
160 const title = document.querySelector('h1');
161 title.style.animation = 'bounce 0.5s ease infinite alternate, rotate 5s linear infinite, title-shake 0.5s ease-in-out';
2 * This is a simple Hello World val that serves a static HTML page.
3 * It uses React for client-side rendering and includes a basic server
4 * function to handle HTTP requests.
5 */
6
9import { createRoot } from "https://esm.sh/react-dom/client";
10
11function App() {
12 const [juiceLevel, setJuiceLevel] = React.useState(0);
13
35
36// Client-side rendering
37function client() {
38 createRoot(document.getElementById("root")).render(<App />);
39}
44
45// Server-side handling
46export default async function server(request: Request): Promise<Response> {
47 return new Response(`
48 <!DOCTYPE html>
8import { createRoot } from "https://esm.sh/react-dom/client";
9
10function App() {
11 return (
12 <div className="container">
20}
21
22function client() {
23 createRoot(document.getElementById("root")).render(<App />);
24}
25if (typeof document !== "undefined") { client(); }
26
27export default async function server(request: Request): Promise<Response> {
28 return new Response(`
29 <!DOCTYPE html>
4import { DateTime } from "https://esm.sh/luxon@3.4.4";
5
6export async function testDailyBrief() {
7 try {
8 const testChatId = Deno.env.get("TEST_TELEGRAM_CHAT_ID");
2// Run this script manually to create the database table
3
4export default async function setupTelegramChatDb() {
5 try {
6 // Import SQLite module
13} from "../memoryUtils.ts";
14
15async function generateBriefingContent(anthropic, memories, today, isSunday) {
16 try {
17 const weekdaysHelp = generateWeekDays(today);
96}
97
98export async function sendDailyBriefing(chatId?: string, today?: DateTime) {
99 // Get API keys from environment
100 const apiKey = Deno.env.get("ANTHROPIC_API_KEY");
135 const lastSunday = today.startOf("week").minus({ days: 1 });
136
137 // Fetch relevant memories using the utility function
138 const memories = await getRelevantMemories();
139
216}
217
218function generateWeekDays(today) {
219 let output = [];
220
239// console.log(weekDays);
240
241// Export a function that calls sendDailyBriefing with no parameters
242// This maintains backward compatibility with existing cron jobs
243export default async function (overrideToday?: DateTime) {
244 return await sendDailyBriefing(undefined, overrideToday);
245}
16In a normal server environment, you would likely use a middleware [like this one](https://hono.dev/docs/getting-started/nodejs#serve-static-files) to serve static files. Some frameworks or deployment platforms automatically make any content inside a `public/` folder public.
17
18However in Val Town you need to handle this yourself, and it can be suprisingly difficult to read and serve files in a Val Town Project. This template uses helper functions from [stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md), which handle reading project files in a way that will work across branches and forks, automatically transpiles typescript to javascript, and assigns content-types based on the file's extension.
19
20### `index.html`
26## CRUD API Routes
27
28This app has two CRUD API routes: for reading and inserting into the messages table. They both speak JSON, which is standard. They import their functions from `/backend/database/queries.ts`. These routes are called from the React app to refresh and update data.
29
30## Errors