3View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page.4567## Install
blob_adminapp.tsx3 matches
437{profile && (438<div className="flex items-center space-x-4">439<img src={profile.profileImageUrl} alt="Profile" className="w-8 h-8 rounded-full" />440<span>{profile.username}</span>441<a href="/auth/logout" className="text-blue-400 hover:text-blue-300">Logout</a>580alt="Blob content"581className="max-w-full h-auto"582onError={() => console.error("Error loading image")}583/>584</div>630<li>Create public shareable links for blobs</li>631<li>View and manage public folder</li>632<li>Preview images directly in the interface</li>633</ul>634</div>
blob_adminmain.tsx2 matches
60const { ValTown } = await import("npm:@valtown/sdk");61const vt = new ValTown();62const { email: authorEmail, profileImageUrl, username } = await vt.me.profile.retrieve();63// const authorEmail = me.email;64128129c.set("email", email);130c.set("profile", { profileImageUrl, username });131await next();132};
17name: string; // Name of the fantasy race18description: string; // Short description (1-2 sentences)19styleHint: string; // Keywords for image generation (e.g., "elven archer forest")20effectColor: string; // CSS hex color for UI effects (e.g., "#4A90E2")21}75- 'name': The name of the race (string).76- 'description': A brief description (string, 1-2 sentences maximum).77- 'styleHint': 3-5 descriptive keywords for generating an image (string).78- 'effectColor': A valid CSS hexadecimal color code string (e.g., "#RRGGBB").79335.race-card img {336width: 100%;337height: 60%; /* Image takes upper portion */338object-fit: cover;339display: block;652653const prompt = encodeURIComponent(\`fantasy character portrait, \${safeStyleHint}, \${safeName}, detailed illustration, cinematic lighting\`);654// *** IMPORTANT: Replace with YOUR Val Town image generation endpoint if different ***655const imageUrl = \`https://maxm-imggenurl.web.val.run/\${prompt}\`;656const fallbackColor = safeEffectColor.substring(1);657const fallbackUrl = \`https://placehold.co/380x320/\${fallbackColor}/1A1A1E?text=\${encodeURIComponent(safeName)}\`;658659card.innerHTML = \`660<img src="\${imageUrl}" alt="Image of \${safeName}" loading="lazy" onerror="this.onerror=null; this.src='\${fallbackUrl}'; console.warn('Image failed for \${safeName}. Using fallback.');">661<div class="\${EFFECT_CONTAINER_CLASS}">662<div class="energy-surge"></div>987const targetCard = e.target.closest('.' + CARD_CLASS);988if (targetCard) {989// Prevent default image dragging etc. only if starting on card content990if (e.target.tagName === 'IMG' || e.target.tagName === 'H3' || e.target.tagName === 'P') {991e.preventDefault();
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\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,
cerebras_coderindex.html1 match
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">24
16name: string; // Name of the fantasy race17description: string; // Short description (1-2 sentences)18styleHint: string; // Keywords for image generation (e.g., "elven archer forest")19effectColor: string; // CSS hex color for UI effects (e.g., "#4A90E2")20}70- 'name': The name of the race (string).71- 'description': A brief description (string, 1-2 sentences maximum).72- 'styleHint': 3-5 descriptive keywords for generating an image (string).73- 'effectColor': A valid CSS hexadecimal color code string (e.g., "#RRGGBB").74218.race-card img {219width: 100%;220height: 60%; /* Image takes upper portion */221object-fit: cover;222display: block;355}356.race-card img {357height: 320px; /* Fixed image height on desktop */358border-radius: 16px 16px 0 0;359}466card.style.setProperty('--effect-color', safeEffectColor); // Set the CSS variable for this card467468// --- Image Generation ---469// Construct URL for Val Town image generator (ensure this endpoint exists and works)470// Encode components to handle spaces and special characters in prompts471const prompt = encodeURIComponent(\`fantasy character portrait, \${safeStyleHint}, \${safeName}, detailed illustration, cinematic lighting\`);472const imageUrl = \`https://maxm-imggenurl.web.val.run/\${prompt}\`; // Replace with your actual image generation endpoint if different473474// Fallback placeholder image using placehold.co (useful for debugging/offline)475const fallbackColor = safeEffectColor.substring(1); // Remove '#'476const fallbackUrl = \`https://placehold.co/380x320/\${fallbackColor}/1A1A1E?text=\${encodeURIComponent(safeName)}\`;478// --- Card HTML Structure ---479// Use template literal for clean HTML construction.480// Includes the image, effect container, and content area.481// The 'onerror' attribute on the img tag handles image loading failures gracefully.482card.innerHTML = \`483<img src="\${imageUrl}"484alt="Image of \${safeName}"485loading="lazy" onerror="this.onerror=null; this.src='\${fallbackUrl}'; console.warn('Image failed to load for \${safeName} (Prompt: \${decodeURIComponent(prompt)}). Using fallback.');">486<div class="\${EFFECT_CONTAINER_CLASS}">487<div class="energy-surge"></div>660function handleDragStart(e) {661if (isTransitioning) return; // Ignore drags during transitions662// Prevent dragging text/images on the page663if (e.target.tagName === 'IMG' || e.target.tagName === 'H3' || e.target.tagName === 'P') {664e.preventDefault();
reactHonoStarterindex.html1 match
6<title>React Hono Val Town Starter</title>7<link rel="stylesheet" href="/public/style.css">8<link rel="icon" href="/public/favicon.svg" sizes="any" type="image/svg+xml">9</head>10<body>
701<meta name="viewport" content="width=device-width, initial-scale=1.0">702<title>🔗 Policy Analysis Tool</title>703<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔗</text></svg>">704<style>${embeddedCss}</style>705</head>
faithfulTanEelmain.tsx7 matches
9name: string;10description: string;11styleHint: string; // Keywords for image generation prompt12effectColor: string; // CSS hex color for effects (e.g., "#4A90E2")13}55const prompt = `56Generate a list of 4 distinct fantasy character races for an RPG character creator carousel.57For each race, provide: 'name', 'description' (2 short sentences), 'styleHint' (3-5 keywords for image generation), and 'effectColor' (a valid CSS hex color code string like "#RRGGBB").5859Return the result STRICTLY as a single JSON object with one key "races", where the value is an array of objects, each representing a race.244const safeStyleHint = race.styleHint || safeName; // Fallback style hint to name245246// Generate image URL using the Val Town image generator endpoint247const prompt = encodeURIComponent(\`fantasy character portrait \${safeStyleHint}, \${safeName}, high detail\`);248const imageUrl = \`https://maxm-imggenurl.web.val.run/\${prompt}\`;249// Fallback placeholder image URL250const fallbackUrl = \`https://placehold.co/380x320/\${effectColor.substring(1)}/ffffff?text=\${encodeURIComponent(safeName)}\`;251252// Use template literal for card's inner HTML253card.innerHTML = \`254<img src="\${imageUrl}"255alt="\${safeName}"256onerror="this.onerror=null; this.src='\${fallbackUrl}'; console.warn('Image failed for \${safeName}, prompt: \${prompt}')">257<div class="\${EFFECT_CONTAINER_CLASS}">258<div class="energy-surge"></div>
