Val Town Code SearchReturn to Val Town

8### 1. Script Vals
9
10- Basic JavaScript/TypeScript functions
11- Can be imported by other vals
12- Example structure:
13
14```typescript
15export function myFunction() {
16  // Your code here
17}
25
26```typescript
27export default async function (req: Request) {
28  return new Response("Hello World");
29}
37
38```typescript
39export default async function () {
40  // Scheduled task code
41}
49
50```typescript
51export default async function (email: Email) {
52  // Process email
53}
57
58- Ask clarifying questions when requirements are ambiguous
59- Provide complete, functional solutions rather than skeleton implementations
60- Test your logic against edge cases before presenting the final solution
61- Ensure all code follows Val Town's specific platform requirements
70- **Never bake in secrets into the code** - always use environment variables
71- Include comments explaining complex logic (avoid commenting obvious operations)
72- Follow modern ES6+ conventions and functional programming practices if possible
73
74## Val Town Standard Libraries
75
76Val Town provides several hosted services and utility functions.
77
78### Blob Storage
124```
125
126## Val Town Utility Functions
127
128Val Town provides several utility functions to help with common project tasks.
129
130### Importing Utilities
176      {
177        name: "should add numbers correctly",
178        function: () => {
179          expect(1 + 1).toBe(2);
180        },
210│   ├── database/
211│   │   ├── migrations.ts    # Schema definitions
212│   │   ├── queries.ts       # DB query functions
213│   │   └── README.md
214│   ├── index.ts             # Main entry point
226└── shared/
227    ├── README.md
228    └── utils.ts             # Shared types and functions
229```
230
232- Hono is the recommended API framework (similar to Express, Flask, or Sinatra)
233- Main entry point should be `backend/index.ts`
234- **Static asset serving:** Use the utility functions to read and serve project files:
235  ```ts
236  // Use the serveFile utility to handle content types automatically
273- Run migrations on startup or comment out for performance
274- Change table names when modifying schemas rather than altering
275- Export clear query functions with proper TypeScript typing
276- Follow the queries and migrations pattern from the example
277

1import { sendDailyBriefing } from "./sendDailyBrief.ts";
2
3export async function cronDailyBrief() {
4  try {
5    const chatId = Deno.env.get("TELEGRAM_CHAT_ID");

62};
63
64export function App() {
65  const [memories, setMemories] = useState<Memory[]>([]);
66  const [loading, setLoading] = useState(true);
139      const data = await response.json();
140
141      // Change the sorting function to show memories in chronological order
142      const sortedMemories = [...data].sort((a, b) => {
143        const dateA = a.createdDate || 0;

1import { blob } from "https://esm.town/v/std/blob?v=12";
2
3export default async function(interval: Interval) {
4  // get the "filename"
5  // this is the string at the beginning of each blob key... (cont'd)

7});
8
9export async function setPageStatus(object: any) {
10  const { data, section, step } = object;
11  const pageId = data?.id;
47}
48
49export async function setBlockContent(blockId: string, askingFor: string) {
50  const now = new Date();
51
93}
94
95export async function listChildrenChildPages(blockId: string) {
96  try {
97    const response = await notion.blocks.children.list({
109}
110
111export async function addFavicon(data?: any) {
112  const pageId = data?.id;
113  // use notion if nothing if the URL property is empty
114  const url = await getWebhookPropertyValue(data, "Website") || "notion.com";
115  // send the URL value to the function that will get the site's favicon location
116  const faviconURL = await helpers.scrapeFaviconUrl(url);
117  console.log({ "Verified favicon URL": faviconURL });
122}
123
124export async function updatePageIcon(pageId: string, faviconURL?: string) {
125  try {
126    const response = await notion.pages.update({
142}
143
144export async function listChildren(pageId: string) {
145  // get page properties
146  try {
158}
159
160// Helper function to get property value from webhook payload
161export async function getWebhookPropertyValue(payload: any, propertyName: any) {
162  let result = null;
163  // check to see if the whole payload was sent, or just the data object
197}
198
199export async function getNotionPage(pageId: string) {
200  // get page properties
201  try {

1// Function to scrape favicon URL from a website
2export async function scrapeFaviconUrl(url: string) {
3  try {
4    // Ensure URL has protocol
58}
59
60export async function extractCamelCaseWords(str: string) {
61  if (!str) return [];
62

12
13// Add a view source link to the page
14function addViewSourceLink() {
15  try {
16    const projectInfo = parseProject(import.meta.url);

12});
13
14async function saveLastPage(page) {
15  const ts = new Date().toISOString().slice(0, 19) + "Z";
16  await page.screenshot({
20}
21
22async function findAndAttemptCaptcha(page) {
23  await page.waitForSelector(".captcha img", { visible: true });
24  const captcha = await page.$(".captcha img");
38}
39
40function extractAnswer(msg) {
41  const match = msg.match(/<answer>(.*)<\/answer>/);
42  const answer = match ? match[1] : "";
44}
45
46async function main() {
47  let session;
48  let browser;

3    "prompt": "todo list app persisted in local storage, pretty",
4    "title": "Todo App",
5    "code": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Task Master</title>\n    <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\">\n</head>\n<body class=\"bg-gray-100\">\n    <div class=\"max-w-md mx-auto mt-12 p-6 rounded-lg shadow-md bg-white\">\n        <div class=\"flex justify-between items-center mb-6\">\n            <h2 class=\"text-2xl font-bold\">Task Master</h2>\n            <span class=\"text-gray-600\">Manage your tasks efficiently</span>\n        </div>\n        <ul class=\"todo-list\" id=\"todo-list\"></ul>\n        <div class=\"add-todo mt-6 flex justify-between items-center\">\n            <input type=\"text\" id=\"todo-input\" placeholder=\"Add new task\" class=\"w-full py-2 pl-10 text-sm text-gray-800 border border-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-600 bg-gray-50\">\n            <button type=\"button\" id=\"add-todo-btn\" class=\"ml-4 px-4 py-2 bg-green-500 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-green-700 hover:shadow-lg focus:bg-green-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-green-800 active:shadow-lg transition duration-150 ease-in-out\">Add Task</button>\n        </div>\n        <div class=\"mt-6 text-center text-gray-600\">\n            Built on <a href=\"https://cerebrascoder.com\" target=\"_blank\" class=\"text-gray-900 underline\">Cerebras Coder</a>\n        </div>\n    </div>\n\n    <script>\n        // Get the todo list and add todo button elements\n        const todoList = document.getElementById('todo-list');\n        const addTodoBtn = document.getElementById('add-todo-btn');\n        const todoInput = document.getElementById('todo-input');\n\n        // Load todos from local storage\n        let todos = JSON.parse(localStorage.getItem('todos')) || [];\n\n        // Function to render the todo list\n        function renderTodoList() {\n            todoList.innerHTML = '';\n            todos.forEach((todo, index) => {\n                const todoItem = document.createElement('li');\n                todoItem.innerHTML = `\n                    <div class=\"flex justify-between items-center py-4 border-b border-gray-300\">\n                        <div class=\"flex items-center\">\n                            <input type=\"checkbox\" id=\"todo-${index}\" class=\"mr-4\" ${todo.completed ? 'checked' : ''}>\n                            <span class=\"todo-text ${todo.completed ? 'text-gray-400 line-through' : 'text-gray-600'}\">${todo.text}</span>\n                        </div>\n                        <button type=\"button\" class=\"px-4 py-2 bg-red-500 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-red-700 hover:shadow-lg focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg transition duration-150 ease-in-out delete-todo\" data-index=\"${index}\">Delete</button>\n                    </div>\n                `;\n                todoList.appendChild(todoItem);\n            });\n        }\n\n        // Render the initial todo list\n        renderTodoList();\n\n        // Add event listener to the add todo button\n        addTodoBtn.addEventListener('click', () => {\n            const todoText = todoInput.value.trim();\n            if (todoText) {\n                todos.push({ text: todoText, completed: false });\n                localStorage.setItem('todos', JSON.stringify(todos));\n                todoInput.value = '';\n                renderTodoList();\n            }\n        });\n\n        // Add event listener to the todo list\n        todoList.addEventListener('change', (e) => {\n            if (e.target.type === 'checkbox') {\n                const index = parseInt(e.target.id.split('-')[1]);\n                todos[index].completed = e.target.checked;\n                localStorage.setItem('todos', JSON.stringify(todos));\n                renderTodoList();\n            }\n        });\n\n        // Add event listener to the delete todo buttons\n        todoList.addEventListener('click', (e) => {\n            if (e.target.classList.contains('delete-todo')) {\n                const index = parseInt(e.target.dataset.index);\n                todos.splice(index, 1);\n                localStorage.setItem('todos', JSON.stringify(todos));\n                renderTodoList();\n            }\n        });\n    </script>\n</body>\n</html>",
6    "performance": {
7      "tokensPerSecond": 2298.56,
23    "prompt": "two column interactive markdown editor with live preview and default text to explain markdown features",
24    "title": "Markdown Editor",
25    "code": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Markdown Editor</title>\n    <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\">\n</head>\n<body class=\"bg-white\">\n    <div class=\"max-w-full mx-auto p-4 pt-6 md:p-6 lg:p-8\">\n        <h1 class=\"text-3xl text-center mb-4\">Markdown Editor</h1>\n        <div class=\"flex flex-row\">\n            <div class=\"editor p-4 rounded-lg border border-gray-200 w-full md:w-1/2\">\n                <textarea id=\"editor\" class=\"w-full h-screen p-2 border border-gray-200 rounded-lg\" placeholder=\"Type your Markdown here...\"></textarea>\n            </div>\n            <div class=\"preview p-4 rounded-lg border border-gray-200 w-full md:w-1/2 ml-2 md:ml-4 lg:ml-8\">\n                <div id=\"preview\"></div>\n            </div>\n        </div>\n        <p class=\"text-center mt-4\">Built on <a href=\"https://cerebrascoder.com\">Cerebras Coder</a></p>\n    </div>\n\n    <script>\n        const editor = document.getElementById('editor');\n        const preview = document.getElementById('preview');\n\n        // Initialize textarea with default markdown\n        const defaultMarkdown = `\n# Introduction to Markdown\nMarkdown is a lightweight markup language that is easy to read and write. It is often used for formatting text in plain text editors, chat applications, and even web pages.\n\n## Headers\nHeaders are denoted by the # symbol followed by a space. The number of # symbols determines the level of the header:\n# Heading 1\n## Heading 2\n### Heading 3\n\n## Emphasis\nYou can use emphasis to make your text **bold** or *italic*:\n*Italics*\n**Bold**\n\n## Lists\nYou can use lists to organize your text:\n* Item 1\n* Item 2\n* Item 3\nOr\n1. Item 1\n2. Item 2\n3. Item 3\n\n## Links\nYou can use links to reference external resources:\n[Google](https://www.google.com)\n\n## Images\nYou can use images to add visual content:\n![Markdown Logo](https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/208px-Markdown-mark.svg.png)\n`;\n        editor.value = defaultMarkdown;\n\n        // Update preview on input\n        editor.addEventListener('input', () => {\n            const markdown = editor.value;\n            const html = markdownToHtml(markdown);\n            preview.innerHTML = html;\n        });\n\n        // Initialize preview with default markdown\n        const defaultHtml = markdownToHtml(defaultMarkdown);\n        preview.innerHTML = defaultHtml;\n\n        // Function to convert Markdown to HTML\n        function markdownToHtml(markdown) {\n            // Bold\n            markdown = markdown.replace(/\\*\\*(.*?)\\*\\*/g, '<b>$1</b>');\n\n            // Italic\n            markdown = markdown.replace(/\\*(.*?)\\*/g, '<i>$1</i>');\n\n            // Links\n            markdown = markdown.replace(/\\[(.*?)\\]\\((.*?)\\)/g, '<a href=\"$2\">$1</a>');\n\n            // Images\n            markdown = markdown.replace(/!\\[(.*?)\\]\\((.*?)\\)/g, '<img src=\"$2\" alt=\"$1\">');\n\n            // Headings\n            markdown = markdown.replace(/(^#{1,6} )(.*)/gm, (match, level, text) => {\n                return `<h${level.length}>${text}</h${level.length}>`;\n            });\n\n            // Lists\n            markdown = markdown.replace(/^(\\*|\\d+\\.) (.*)/gm, (match, marker, text) => {\n                if (marker.startsWith('*')) {\n                    return `<li>${text}</li>`;\n                } else {\n                    return `<li>${text}</li>`;\n                }\n            });\n\n            // Line breaks\n            markdown = markdown.replace(/\\n/g, '<br>');\n\n            // Fix for nested lists\n            markdown = markdown.replace(/<li><li>/g, '<li>');\n            markdown = markdown.replace(/<\\/li><\\/li>/g, '</li>');\n\n            // Wrap lists in ul\n            markdown = markdown.replace(/(<li>.*<\\/li>)/g, '<ul>$1</ul>');\n\n            return markdown;\n        }\n    </script>\n</body>\n</html>",
26    "performance": {
27      "tokensPerSecond": 4092.96,

2import { ITERATIONS_TABLE, KEY, PROJECTS_TABLE, SCHEMA_VERSION } from "./migrations";
3
4export async function createProject(prompt: string) {
5  const projectResult = await sqlite.execute(
6    `INSERT INTO ${PROJECTS_TABLE} (initial_prompt) VALUES (?)`,
11}
12
13export async function getNextVersionNumber(projectId: number) {
14  const data = await sqlite.execute(
15    `SELECT version_number FROM ${ITERATIONS_TABLE}
21}
22
23export async function insertVersion(projectId: number, versionNumber: number, prompt: string, code: string) {
24  await sqlite.execute(
25    `INSERT INTO ${ITERATIONS_TABLE} 
29}
30
31export async function getCodeInner(table: string, project: string, version?: string) {
32  let data;
33  if (version === undefined) {
50}
51
52export async function getCode(project: string, version?: string) {
53  // try to get code in the new table partition first
54  const code = await getCodeInner(ITERATIONS_TABLE, project, version);