Val Town Code SearchReturn to Val Town

21## `favicon.svg`
22
23As 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/).
24
25## `components/`

6
7**Example:**
8![IMG_3066.jpg](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/eb331574-b7d5-4b76-5fbb-fd8ba3b72c00/public)
9
10---

1/**
2 * Unsplash API Random Photo Endpoint Implementation
3 * Generates random images using the official Unsplash API with caching
4 * Restricted to Val Town and specific origins
5 */
150
151    if (cachedResponse && Date.now() - cachedResponse.timestamp < 1 * 60 * 1000) {
152      // Reconstruct image URL with all additional parameters
153      const imageUrl = `${cachedResponse.rawUrl}${additionalParams ? `&${additionalParams}` : ""}`;
154
155      // Serve cached response if less than 1 minute old
156      const imageResponse = await fetch(imageUrl);
157
158      if (imageResponse.ok) {
159        const imageBlob = await imageResponse.blob();
160        return new Response(imageBlob, {
161          headers: {
162            "Content-Type": "image/jpeg",
163            "Cache-Control": "public, max-age=60", // Cache for 1 minute
164            "X-Cached-Response": "true",
165            "X-Unsplash-User": cachedResponse.username,
166            "X-Unsplash-Description": cachedResponse.description || "Random Unsplash Image",
167            "X-Powered-By": "Val Town Unsplash API",
168            "Link": `<${cachedResponse.originalLink}>; rel="describedby"`, // Updated link relation type
244    const photo = await response.json();
245
246    // Reconstruct image URL with all additional parameters
247    const imageUrl = `${photo.urls.raw}${additionalParams ? `&${additionalParams}` : ""}`;
248
249    // Fetch the specific image
250    const imageResponse = await fetch(imageUrl);
251
252    if (!imageResponse.ok) {
253      return new Response("Failed to download image", { status: 500 });
254    }
255
256    const imageBlob = await imageResponse.blob();
257
258    // Cache the response
260      await blob.setJSON(cacheKey, {
261        rawUrl: photo.urls.raw,
262        imageUrl: imageUrl,
263        username: photo.user.username,
264        description: photo.description,
270    }
271
272    return new Response(imageBlob, {
273      headers: {
274        "Content-Type": "image/jpeg",
275        "Cache-Control": "public, max-age=60", // Cache for 1 minute
276        "X-Unsplash-User": photo.user.username,
277        "X-Unsplash-Description": photo.description || "Random Unsplash Image",
278        "X-Powered-By": "Val Town Unsplash API",
279        "Link": `<${photo.links.html}>; rel="describedby"`, // Updated link relation type

3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.

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:
4
5![shapes at 25-02-25 11.57.13.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/75db1d51-d9b3-45e0-d178-25d886c10700/public)
6
7For 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.

21## `favicon.svg`
22
23As 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/).
24
25## `components/`

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>

23    "prompt": "two column interactive markdown editor with live preview and default text to explain markdown features",
24    "title": "Markdown Editor",
25    "code": "<!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>",
26    "performance": {
27      "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          

84
85  const THUNDER_LOGO_URL =
86    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWV6j1lss3TUvaeY0W5BHk6xuZ3nG4twxi0OCgIfBkW-yTWHqOJbEmHDA&s=10";
87  const THEME_COLORS = {
88    primary: "#1A73E8", // Professional blue