6 <title>React Hono Val Town Starter</title>
7 <link rel="stylesheet" href="/frontend/style.css">
8 <link rel="icon" href="/frontend/favicon.svg" type="image/svg+xml">
9 </head>
10 <body>
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,
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
25
4 const url = new URL(req.url);
5
6 // Serve the cached image
7 if (url.pathname === '/og-image.png') {
8 try {
9 // Try to get cached image from blob storage
10 let imageData = await blob.get('og-image-png');
11
12 if (!imageData) {
13 // If not cached, fetch from CDN and cache it
14 const response = await fetch('https://discord.hacksore.com/do-not-middleclick.png');
15 if (response.ok) {
16 const arrayBuffer = await response.arrayBuffer();
17 imageData = new Uint8Array(arrayBuffer);
18 await blob.set('og-image-png', imageData);
19 } else {
20 return new Response('Image not found', { status: 404 });
21 }
22 }
23
24 return new Response(imageData, {
25 headers: {
26 'Content-Type': 'image/png',
27 'Cache-Control': 'public, max-age=86400' // Cache for 24 hours
28 }
29 });
30 } catch (error) {
31 return new Response('Error serving image', { status: 500 });
32 }
33 }
39
40 if (isDiscord) {
41 // Render an image/page for Discord users
42 const html = `
43 <!DOCTYPE html>
52 <meta property="og:title" content="Warning">
53 <meta property="og:description" content="This link is not what it seems...">
54 <meta property="og:image" content="${url.origin}/og-image.png">
55
56 <!-- Twitter -->
57 <meta property="twitter:card" content="summary_large_image">
58 <meta property="twitter:title" content="Warning">
59 <meta property="twitter:description" content="This link is not what it seems...">
60 <meta property="twitter:image" content="${url.origin}/og-image.png">
61 <style>
62 body {
27 embed?: {
28 $type: string;
29 images?: Array<{
30 alt: string;
31 image: {
32 $type: string;
33 ref: { $link: string };
297
298 if (post.record.embed) {
299 // Handle image embeds
300 if (post.record.embed.images && Array.isArray(post.record.embed.images)) {
301 post.record.embed.images.forEach(img => {
302 // Convert AT Protocol image reference to URL
303 const imageRef = img.image.ref.$link;
304 const imageUrl = `https://bsky.social/xrpc/com.atproto.sync.getBlob?did=${post.author.did}&cid=${imageRef}`;
305 mediaUrls.push(imageUrl);
306 });
307 }
146 if (status.media_attachments && Array.isArray(status.media_attachments)) {
147 status.media_attachments.forEach(attachment => {
148 // Use preview_url for images, url as fallback
149 const url = attachment.preview_url || attachment.url;
150 if (url) {
116 const mediaUrls = [];
117
118 // Check for image property
119 if (post.image) {
120 mediaUrls.push(post.image);
121 }
122
130 }
131
132 // Extract images from HTML content if present
133 if (post.content_html) {
134 const imgRegex = /<img[^>]+src="([^">]+)"/g;
36 private_ip: string;
37 config: {
38 image: string;
39 guest: {
40 cpu_kind: string;
9
10 <!-- Favicon -->
11 <link rel="icon" type="image/svg+xml" href="/frontend/favicon.svg">
12
13 <!-- Tailwind CSS -->
121
122 .hero-pattern {
123 background-image:
124 radial-gradient(circle at 25px 25px, rgba(255,255,255,0.1) 2px, transparent 0),
125 radial-gradient(circle at 75px 75px, rgba(255,255,255,0.1) 2px, transparent 0);
128
129 .tech-grid {
130 background-image:
131 linear-gradient(rgba(37, 99, 235, 0.1) 1px, transparent 1px),
132 linear-gradient(90deg, rgba(37, 99, 235, 0.1) 1px, transparent 1px);
219 stockQuantity: { type: 'number' as const, min: 0 },
220 specifications: { type: 'array' as const },
221 images: { type: 'array' as const },
222 datasheetUrl: { type: 'string' as const },
223 featured: { type: 'boolean' as const }
