Val Town Code SearchReturn to Val Town

138    fuelType: 'Petrol',
139    seats: 4,
140    description: 'The iconic Porsche 911 continues to set the standard for sports cars. With its distinctive design, exceptional performance, and everyday usability, it\'s the perfect blend of form and function.',
141    features: [
142      'Sport Chrono Package',
259];
260
261// Function to get car by ID
262export const getCarById = (id) => {
263  return cars.find(car => car.id === parseInt(id));
264};
265
266// Function to filter cars by category
267export const getCarsByCategory = (category) => {
268  if (!category || category === 'All') return cars;
276};
277
278// Function to search cars
279export const searchCars = (query) => {
280  if (!query) return cars;

1export default async function (req: Request) {
2  return new Response(html, {
3    headers: {
63      <h1 class="text-5xl md:text-6xl font-bold mb-6">Hi, I'm <span class="text-yellow-300">Your Name</span></h1>
64      <h2 class="text-2xl md:text-3xl mb-8">Web Developer & Designer</h2>
65      <p class="text-xl mb-10 max-w-2xl mx-auto">I create beautiful, functional websites and applications that help businesses grow.</p>
66      <div class="flex justify-center space-x-4">
67        <a href="#projects" class="bg-white text-indigo-600 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition">View My Work</a>
284  <script>
285    // Mobile menu toggle
286    document.getElementById('menu-button').addEventListener('click', function() {
287      const mobileMenu = document.getElementById('mobile-menu');
288      mobileMenu.classList.toggle('hidden');
290
291    // Contact form submission
292    document.getElementById('contact-form').addEventListener('submit', function(e) {
293      e.preventDefault();
294      const name = document.getElementById('name').value;

33- [x] fix wonky sidebar separator height problem (thanks to @stevekrouse)
34- [x] make result tables scrollable
35- [x] add export to CSV, and JSON (CSV and JSON helper functions written in [this val](https://www.val.town/v/nbbaier/sqliteExportHelpers). Thanks to @pomdtr for merging the initial version!)
36- [x] add listener for cmd+enter to submit query
37

15const LOCAL_STORAGE_SYNC_ID_KEY = "planty_sync_id_valtown";
16
17function generateNewSyncIdInternal() {
18  return `sync_${Date.now().toString(36)}${Math.random().toString(36).substring(2, 9)}`;
19}
20
21function getSyncIdFromLocalStorage() {
22  if (typeof localStorage !== "undefined") {
23    return localStorage.getItem(LOCAL_STORAGE_SYNC_ID_KEY);
26}
27
28function setSyncIdInLocalStorage(syncId) {
29  if (typeof localStorage !== "undefined") {
30    localStorage.setItem(LOCAL_STORAGE_SYNC_ID_KEY, syncId);
36const SyncIdContext = createContext<string | null>(null);
37
38function useSyncId() {
39  return useContext(SyncIdContext);
40}
41
42// Main App Component
43function App() {
44  const location = useLocation();
45  const navigate = useNavigate();
124
125// Wrapped App with Router
126function RoutedApp() {
127  return (
128    <Router>
132}
133
134function PlantView() {
135  const syncId = useSyncId();
136  if (!syncId) return <div>Loading sync information...</div>;
143}
144
145function Plant() {
146  const syncId = useSyncId();
147  const [lastWatered, setLastWatered] = useState(null);
149  const [showModal, setShowModal] = useState(false);
150
151  async function fetchLastWateredInternal() {
152    if (!syncId) return;
153    setIsLoading(true);
168  }, [syncId]);
169
170  function getTimeSinceLastWatering() {
171    if (lastWatered === null || typeof lastWatered === "undefined") return "Never";
172    const now = Date.now();
180  }
181
182  function getTextColorClass() {
183    if (lastWatered === null || typeof lastWatered === "undefined") return "text-gray-400";
184    const days = Math.floor((Date.now() - Number(lastWatered)) / (1000 * 60 * 60 * 24));
227}
228
229function WatererSelectionModal({ onClose, onWatered }) {
230  const syncId = useSyncId();
231  const [waterers, setWaterers] = useState([]);
237  const [sortedWaterers, setSortedWaterers] = useState([]);
238
239  async function fetchWaterersInternal() {
240    if (!syncId) return;
241    try {
250  }
251
252  async function fetchRecentWaterersInternal() {
253    if (!syncId) return;
254    try {
307  }, [syncId]);
308
309  async function handleWatering() {
310    const watererName = selectedWaterer || newWatererName.trim();
311    if (!syncId || !watererName) return;
337  }
338
339  function selectWaterer(name) {
340    setSelectedWaterer(name);
341    setNewWatererName(""); // Clear the input field when selecting a waterer
426}
427
428function HistoryView() {
429  const syncId = useSyncId();
430  if (!syncId) return <div>Loading sync information...</div>;
436}
437
438function WateringHistoryComponent() {
439  const syncId = useSyncId();
440  const [waterers, setWaterers] = useState([]);
445  const [clickedTimestamp, setClickedTimestamp] = useState(null);
446
447  // Helper function to format relative time
448  const formatRelativeTime = (timestamp) => {
449    const now = Date.now();
475  };
476
477  async function fetchDataInternal() {
478    if (!syncId) return;
479    setIsLoading(true);
505  }, [syncId]);
506
507  async function handleDeleteHistoryEntry(entryId) {
508    if (!syncId || !entryId) return;
509    if (!confirm("Are you sure you want to delete this history entry? This cannot be undone.")) return;
601// --- SYNC SETTINGS COMPONENTS ---
602
603function SyncSettingsView({ updateAvailable, onUpdate }) {
604  const syncId = useSyncId();
605  if (!syncId) return <div>Loading sync information...</div>;
618}
619
620function UpdatesComponent({ updateAvailable, onUpdate }) {
621  return (
622    <section className="p-4 bg-white rounded-lg shadow">
666}
667
668function ManageWaterersComponent() {
669  const syncId = useSyncId();
670  const [waterers, setWaterers] = useState([]);
673  const [isProcessing, setIsProcessing] = useState(false);
674
675  async function fetchWaterersInternal() {
676    if (!syncId) return;
677    setIsLoading(true);
695  }, [syncId]);
696
697  async function handleAddWaterer() {
698    if (!syncId || !newWatererName.trim()) return;
699    setIsProcessing(true);
717  }
718
719  async function handleRenameWaterer(watererId, currentName) {
720    if (!syncId || !watererId) return;
721    const newName = prompt("Enter new name for " + currentName + ":", currentName);
737  }
738
739  async function handleDeleteWaterer(watererId, watererName) {
740    if (!syncId || !watererId) return;
741    if (!confirm(`Are you sure you want to delete waterer "${watererName}"? This cannot be undone.`)) return;
814}
815
816function SyncSettingsComponent({ currentSyncId }) {
817  const [newCodeInput, setNewCodeInput] = useState("");
818  const [copied, setCopied] = useState(false);
955// --- END SYNC SETTINGS COMPONENTS ---
956
957function client() {
958  // Use the RoutedApp which includes BrowserRouter
959  createRoot(document.getElementById("root")).render(<RoutedApp />);
964export { server };
965
966async function server(request: Request): Promise<Response> {
967  const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
968
1074
1075    // Helper to get or create instance data
1076    async function getInstanceData(currentSyncId: string) {
1077      let result = await sqlite.execute(
1078        `SELECT waterers, watering_log, last_watered_timestamp FROM instances WHERE sync_id = ?`,
1101
1102    // Helper to update instance data
1103    async function updateInstanceData(
1104      currentSyncId: string,
1105      data: { waterers: any[]; watering_log: any[]; last_watered_timestamp: number | null },
1315      <script>
1316        if ('serviceWorker' in navigator) {
1317          window.addEventListener('load', function() {
1318            navigator.serviceWorker.register('/sw.js')
1319              .then(registration => {

4    "title": "Todo App",
5    "code":
6      "<!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>",
7    "performance": {
8      "tokensPerSecond": 2298.56,
26    "title": "Markdown Editor",
27    "code":
28      "<!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>",
29    "performance": {
30      "tokensPerSecond": 4092.96,

2import { ITERATIONS_TABLE, KEY, PROJECTS_TABLE, SCHEMA_VERSION } from "./migrations.ts";
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);

7export const ITERATIONS_TABLE = "cerebras_coder_iterations";
8
9export async function createTables() {
10  await sqlite.execute(`
11    CREATE TABLE IF NOT EXISTS ${PROJECTS_TABLE} (

6await createTables();
7
8export default async function cerebras_coder(req: Request): Promise<Response> {
9  if (req.method === "POST") {
10    let { prompt, currentCode, versionHistory, projectId } = await req.json();

23);
24
25function Hero({
26  prompt,
27  setPrompt,
44
45      <p className="text-[#bababa] text-center max-w-[25ch] mx-auto my-4 font-dm-sans">
46        Turn your ideas into fully functional apps in{" "}
47        <span className="relative w-fit text-fuchsia-400 z-10 italic font-semibold rounded-full">
48          less than a second
115}
116
117function App() {
118  const previewRef = React.useRef<HTMLDivElement>(null);
119  const [prompt, setPrompt] = useState("");
169  });
170
171  function handleStarterPromptClick(promptItem: typeof prompts[number]) {
172    setLoading(true);
173    setTimeout(() => handleSubmit(promptItem.prompt), 0);
174  }
175
176  async function handleSubmit(e: React.FormEvent | string) {
177    if (typeof e !== "string") {
178      e.preventDefault();
225  }
226
227  function handleVersionChange(direction: "back" | "forward") {
228    const { currentVersionIndex, versions } = versionHistory;
229    if (direction === "back" && currentVersionIndex > 0) {
973);
974
975function client() {
976  const path = window.location.pathname;
977  const root = createRoot(document.getElementById("root")!);

19      <meta property="og:site_name" content="Cerebras Coder">
20      <meta property="og:url" content="https://cerebrascoder.com"/>
21      <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
22      <meta property="og:type" content="website">
23      <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">