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>
21</div>22<div className="item-detail-content">23{item.images && item.images.length > 0 && (24<div className="item-images-gallery">25{item.images.map((image, index) => (26<img27key={index}28src={image}29alt={`${item.title} image ${index + 1}`}30className="item-gallery-image"31/>32))}49description: '',50price: '',51images: []52});5354const handleImageUpload = async (e) => {55const files = Array.from(e.target.files).slice(0, 5);56const base64Images = await Promise.all(57files.map(file => new Promise((resolve, reject) => {58const reader = new FileReader();62}))63);64setFormData(prev => ({ ...prev, images: base64Images }));65};6676description: '',77price: '',78images: []79});80};134</div>135<div className="form-group">136<label htmlFor="images">Upload Images (Max 5)</label>137<input138id="images"139type="file"140multiple141accept="image/*"142onChange={handleImageUpload}143max={5}144/>145{formData.images.length > 0 && (146<div className="image-preview">147{formData.images.map((image, index) => (148<img149key={index}150src={image}151alt={`Preview ${index + 1}`}152className="preview-thumbnail"197<h3>{item.title}</h3>198<p>Price: ${item.price}</p>199{item.images && item.images.length > 0 && (200<img201src={item.images[0]}202alt={item.title}203className="item-thumbnail"411}412413.image-preview {414margin-top: 10px;415display: flex;426}427428.image-count {429background-color: var(--secondary-color);430color: white;463}464465.item-images-gallery {466display: flex;467flex-wrap: wrap;470}471472.item-gallery-image {473max-width: 100%;474max-height: 400px;
stevensDemoREADME.md1 match
3It's common to have code and types that are needed on both the frontend and the backend. It's important that you write this code in a particularly defensive way because it's limited by what both environments support:4567For example, you *cannot* use the `Deno` keyword. For imports, you can't use `npm:` specifiers, so we reccomend `https://esm.sh` because it works on the server & client. You *can* use TypeScript because that is transpiled in `/backend/index.ts` for the frontend. Most code that works on the frontend tends to work in Deno, because Deno is designed to support "web-standards", but there are definitely edge cases to look out for.
stevensDemoREADME.md1 match
21## `favicon.svg`2223As of this writing Val Town only supports text files, which is why the favicon is an SVG and not an .ico or any other binary image format. If you need binary file storage, check out [Blob Storage](https://docs.val.town/std/blob/).2425## `components/`
stevensDemoindex.ts15 matches
73});7475// --- Blob Image Serving Routes ---7677// GET /api/images/:filename - Serve images from blob storage78app.get("/api/images/:filename", async (c) => {79const filename = c.req.param("filename");8081try {82// Get image data from blob storage83const imageData = await blob.get(filename);8485if (!imageData) {86return c.json({ error: "Image not found" }, 404);87}8890let contentType = "application/octet-stream"; // Default91if (filename.endsWith(".jpg") || filename.endsWith(".jpeg")) {92contentType = "image/jpeg";93} else if (filename.endsWith(".png")) {94contentType = "image/png";95} else if (filename.endsWith(".gif")) {96contentType = "image/gif";97} else if (filename.endsWith(".svg")) {98contentType = "image/svg+xml";99}100101// Return the image with appropriate headers102return new Response(imageData, {103headers: {104"Content-Type": contentType,107});108} catch (error) {109console.error(`Error serving image ${filename}:`, error);110return c.json(111{ error: "Failed to load image", details: error.message },112500,113);
