${todo_row[1]}

`).join(\"\");\n\n return html(`\n\n \n\n \n\n \n\n Char's Todo List \n\n \n\n \n\n \n\n

Char's Todo List

\n\n\n \n\n

No todos yet! Add one above.

\n\n \n\n \n\n `);\n}",[],[198],{"_105":206,"_96":100,"_158":207,"_160":-5,"_161":143,"_162":208,"_164":119,"_107":209,"_101":210,"_167":201,"_169":211,"_171":22,"_172":-5,"_173":212,"_99":213},"2daa598e-1714-11f0-acfd-569c3dd06744","b33c3666-170b-11f0-89bd-569c3dd06744",451,["D",1744403588102],39,"import { getHighlighter } from \"npm:shikiji\";\n\n// TODO: UPDATE THIS URL TO THE USER'S ACTUAL VAL\nconst TARGET_VAL_URL = \"https://charmaine--d308ccc8170311f0af34569c3dd06744.web.val.run\";\n\nconst tutorialSteps = [\n // Step 0: Orientation\n {\n title: \"Welcome! Let's Build a Todo List\",\n instructions: `\n

We'll build a live todo list web app together.

1. Pin Preview: Click the 📌 icon (top-right of this panel) to keep this view open.

2. Live Edits: As you edit todo.ts on the left, the 'Live Preview' below will update.

Click 'Next Step' to begin!

\n `,\n code: ``,\n lang: \"text\",\n },\n // Step 1: Edit H1\n {\n title: \"Step 1: Personalize Header\",\n instructions: `\n

Task: In todo.ts, find the <h1> tag and change its text to include your name.

Then click 'Next Step'.

\n `,\n code: `\n const userName = \"Your Name\";`,\n lang: \"js\",\n },\n // Step 2: Add HTML Form\n {\n title: \"Step 2: Add Input Form\",\n instructions: `\n

Task: Add an HTML form below the heading in todo.ts so we can add new todos.

Copy the form code below and place it right after your <h1> tag.

\n `,\n code: `\n`,\n lang: \"html\",\n },\n // Step 3: Handle Form & Display (In-Memory)\n {\n title: \"Step 3: Display Submitted Todo\",\n instructions: `\n

Task: Make the form work (temporarily). Replace the entire code in todo.ts with the snippet below.

Add a todo! (It will disappear on refresh for now).

\n `,\n code: `// Replace entire content of todo.ts:\nimport { html } from \"https://esm.town/v/stevekrouse/html?v=5\";\n\nlet todos: string[] = []; // Temporary store for this request\n\nexport default async function todoAppTarget(req: Request): Promise {\n // *** Replace \"Your Name\" with your actual name! ***\n const userName = \"Your Name\"; \n\n if (req.method === \"POST\") {\n try {\n const formData = await req.formData();\n const newTodo = formData.get(\"newTodo\") as string;\n // Add to list only for this response generation\n if (newTodo && newTodo.trim() !== \"\") {\n todos.push(newTodo.trim()); \n }\n } catch (e) { \n console.error(\"Error processing form:\", e);\n return new Response(\"Failed to process form\", { status: 400 });\n }\n } else {\n // Clear temporary list on page load (GET request)\n todos = []; \n }\n\n const todoListHtml = todos.map(todo => \\`

\\${todo}

\\`).join('');\n\n return html(\\`\n \n \n \\${userName}'s Todo List\n \n

\\${userName}'s Todo List

\n \n

No todos yet!

\n \n \n \\`);\n}`,\n lang: \"typescript\",\n },\n // Step 4: Make Todos Persistent (SQLite)\n {\n title: \"Step 4: Set Up SQLite Storage\",\n instructions: `\n

1. Create sqliteStorage.ts with this code:

This creates a SQLite database to store your todos permanently!

\n `,\n code: `import { sqlite } from \"https://esm.town/v/std/sqlite\";\n\n// Create todos table if it doesn't exist\nconst TABLE_SCHEMA = \\`CREATE TABLE IF NOT EXISTS todos (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n item TEXT NOT NULL,\n created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP\n);\\`;\n\nawait sqlite.execute(TABLE_SCHEMA);\nconsole.log(\"Database table 'todos' checked/created.\");\n\n// Type definition for todo items from database\ninterface Todo {\n id: number;\n item: string;\n created_at: string;\n}\n\n// Function to add a todo item\nexport async function addTodo(item: string): Promise {\n // Basic validation\n if (!item || item.trim() === \"\") {\n throw new Error(\"Cannot add empty todo item.\");\n }\n\n // Execute insert statement\n await sqlite.execute({\n sql: \"INSERT INTO todos (item) VALUES (:item);\",\n args: { item: item.trim() }, // Use named arguments\n });\n\n console.log(\"Added item to DB:\", item.trim());\n}\n\n// Get todos sorted by newest first\nexport async function getTodos(): Promise {\n const result = await sqlite.execute(\"SELECT id, item, created_at FROM todos ORDER BY created_at DESC;\");\n // Assert the row type - add runtime validation if needed for robustness\n return result.rows as Todo[];\n}\n\n// Optional: Function to delete todos by ID (not used in the tutorial steps yet)\nexport async function deleteTodo(id: number): Promise {\n if (typeof id !== \"number\") {\n throw new Error(\"Invalid ID for deletion.\");\n }\n\n await sqlite.execute({\n sql: \"DELETE FROM todos WHERE id = :id;\",\n args: { id },\n });\n\n console.log(\"Deleted todo with ID:\", id);\n}`,\n lang: \"typescript\",\n },\n // New Step 4b: Update Web App\n {\n title: \"Step 4b: Update Web App\",\n instructions: `\n

Task: Now let's update todo.ts to use the database!

Replace the entire content of todo.ts with this code:

\n `,\n code: `import { html } from \"https://esm.town/v/stevekrouse/html?v=5\";\n\n// You can use relative paths for importing within the same val\nimport { addTodo, getTodos } from \"./sqliteStorage.ts\";\n\nexport default async function todo(req: Request): Promise {\n // Handle form submissions\n if (req.method === \"POST\") {\n try {\n const formData = await req.formData();\n const newTodo = formData.get(\"newTodo\") as string;\n\n if (newTodo && newTodo.trim() !== \"\") {\n await addTodo(newTodo.trim());\n }\n } catch (e) {\n console.error(\"Error adding todo:\", e);\n }\n return Response.redirect(req.url, 303); // Redirect back to main page after adding\n }\n\n // Get and display todos\n let todos = [];\n try {\n todos = await getTodos();\n } catch (e) {\n console.error(\"Error getting todos:\", e);\n }\n\n // Generate HTML list of todos (todo[1] contains the todo text)\n const todoListHtml = todos.map(todo_row => \\`

\\${todo_row[1]}

\\`).join(\"\");\n\n return html(\\`\n \n \n \n Char's Todo List \n \n \n \n

Char's Todo List

\n\n \n

No todos yet! Add one above.

\n \n \n \\`);\n}`,\n lang: \"typescript\",\n },\n // Step 5: Daily Email Reminder\n {\n title: \"Step 5: Daily Email Reminder (Optional)\",\n instructions: `\n

Let's set up email reminders for your todos! ⚠️ Important scheduling info below.

1. Create emailReminder.ts:

2. Check Import: Make sure ./sqliteStorage.ts matches your storage val name.

3. Scheduling (IMPORTANT):

Make the file a cron to run every day for example
⚠️ Warning: If you don't change the schedule, you'll get emails every hour!

Emails will be sent to your Val Town account email address.

\n `,\n code: `// Create emailReminder.ts:\nimport { email } from \"https://esm.town/v/std/email\";\nimport { getTodos } from \"./sqliteStorage.ts\";\n\nexport const emailMeMyTodos = async () => {\n let todos = [];\n try {\n todos = await getTodos();\n } catch (e) {\n console.error(\"Failed to get todos for email reminder:\", e);\n return;\n }\n\n if (todos.length > 0) {\n const todoItemsText = todos.map((todo, index) => \\`\\${index + 1}. \\${todo[1]}\\`).join(\"\\\\n\");\n const emailSubject = \\`Your Val Town Todo Reminder (\\${todos.length} items)\\`;\n const emailText = \\`Hi there!\\\\n\\\\nHere are your pending todos:\\\\n\\\\n\\${todoItemsText}\\\\n\\\\nHave a great day!\\\\n\\\\n(Sent from your Val Town val)\\`;\n\n try {\n await email({ subject: emailSubject, text: emailText });\n console.log(\\`Sent reminder with \\${todos.length} items.\\`);\n } catch (e) {\n console.error(\"Failed to send reminder email:\", e);\n }\n } else {\n console.log(\"No pending todos, skipping email reminder.\");\n }\n};`,\n lang: \"typescript\",\n },\n // Step 6: Finish\n {\n title: \"Tutorial Complete!\",\n instructions: `\n

Congratulations! You built a full Todo app.

Web App: todo.ts
Database: sqliteStorage.ts
Email: emailReminder.ts

Use your app: Live Link

\n `,\n code: ``,\n lang: \"text\",\n },\n];\n\n// --- HTTP Handler ---\nexport default async function interactiveTutorialHandler(req: Request): Promise {\n const url = new URL(req.url);\n const currentStep = parseInt(url.searchParams.get(\"step\") || \"0\", 10);\n\n const safeStep = Math.max(0, Math.min(currentStep, tutorialSteps.length - 1));\n const stepData = tutorialSteps[safeStep];\n\n try {\n let highlightedCodeHtml = \"\";\n\n // Only run highlighter if there's code for the current step\n if (stepData.code && stepData.code.trim() !== \"\") {\n // Cache highlighter instance? Could be optimization if needed.\n const highlighter = await getHighlighter({\n themes: [\"github-light\"],\n langs: [stepData.lang || \"text\", \"html\", \"css\", \"javascript\", \"typescript\"],\n });\n\n highlightedCodeHtml = highlighter.codeToHtml(stepData.code, {\n lang: stepData.lang || \"text\",\n theme: \"github-light\",\n });\n }\n\n const nextStep = safeStep + 1;\n const isLastStep = safeStep >= tutorialSteps.length - 1;\n\n // Construct the HTML page\n const tutorialPageHtml = `\n\n\n\n \n \n VT Tutorial: Step ${safeStep} \n \n\n\n

${stepData.title}

${stepData.instructions}

\n ${/* Conditionally render the highlighted code block */ \"\"}\n ${highlightedCodeHtml ? highlightedCodeHtml : \"\"} \n

\n\n

Live Preview:

\n \n

\n \n \n

\n \n\n\n `;\n\n return new Response(tutorialPageHtml, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n } catch (error) {\n console.error(\"Error in tutorial handler:\", error);\n // Provide a more user-friendly error response in the tutorial UI\n return new Response(\n `

Error

Sorry, an error occurred in the tutorial handler:

${error.message}

`,\n {\n status: 500,\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n },\n );\n }\n}",[],[100],"files",[155,176,185,196,205],"counts",{"_218":32,"_219":191,"_220":32,"_221":222},"pulls","branches","forks","envVars",{"_223":32,"_224":32},"count","emptyCount","contents",[],{"_105":206,"_96":100,"_158":207,"_160":-5,"_161":143,"_162":208,"_164":119,"_107":228,"_101":210,"_167":201,"_169":211,"_171":22,"_172":-5,"_99":229},["D",1744403588102],[100],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_94":95,"_96":97,"_98":44,"_101":102,"_99":100,"_103":238,"_153":243,"_214":259,"_168":260,"_225":262,"_263":-5,"_264":-5,"_265":-5,"_266":-5,"_267":268,"_221":-5},{"_105":106,"_96":97,"_107":239,"_109":-5,"_110":22,"_111":112,"_113":-5,"_114":-5,"_14":115,"_116":117,"_118":119,"_120":-5,"_121":122,"_123":32,"_16":124,"_125":126,"_127":126,"_128":129,"_130":129,"_131":129,"_132":126,"_133":126,"_23":240,"_137":241,"_140":242,"_152":22},["D",1744385402095],{"_94":95,"_135":136},{"_94":95,"_139":136,"_14":115},{"_101":142,"_96":44,"_105":143,"_144":106,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":-5,"_150":97,"_151":95},[244,247,250,253,256],{"_105":156,"_96":157,"_158":159,"_160":-5,"_161":143,"_162":163,"_164":119,"_107":165,"_101":166,"_167":168,"_169":170,"_171":22,"_172":-5,"_173":245,"_99":246},[],[157],{"_105":177,"_96":178,"_158":179,"_160":-5,"_161":143,"_162":180,"_164":119,"_107":181,"_101":32,"_167":168,"_169":182,"_171":22,"_172":-5,"_173":248,"_99":249},[],[178],{"_105":186,"_96":187,"_158":188,"_160":-5,"_161":143,"_162":189,"_164":22,"_107":190,"_101":191,"_167":192,"_169":193,"_171":22,"_172":-5,"_173":251,"_99":252},[],[187],{"_105":197,"_96":198,"_158":117,"_160":-5,"_161":143,"_162":102,"_164":22,"_107":199,"_101":200,"_167":201,"_169":202,"_171":22,"_172":-5,"_173":254,"_99":255},[],[198],{"_105":206,"_96":100,"_158":207,"_160":-5,"_161":143,"_162":208,"_164":119,"_107":209,"_101":210,"_167":201,"_169":211,"_171":22,"_172":-5,"_173":257,"_99":258},[],[100],[244,247,250,253,256],{"_105":206,"_96":100,"_158":207,"_160":-5,"_161":143,"_162":208,"_164":119,"_107":228,"_101":210,"_167":201,"_169":211,"_171":22,"_172":-5,"_99":261},[100],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

charmaine

onboarding_draft