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
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\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
16 href="/public/favicon.svg"
17 sizes="any"
18 type="image/svg+xml"
19 />
20 <style>
10 href="/public/favicon.svg"
11 sizes="any"
12 type="image/svg+xml"
13 >
14 </head>
9import { Vantom } from "./vantom.http.tsx";
10
11const OGIMAGE = "https://jxnblk--92670e2200e811f0a151569c3dd06744.web.val.run/";
12const URL = "https://jxnblk.com";
13const DESCRIPTION = "Design engineer and aspiring indie game dev based in Brooklyn, NY";
66 let description = DESCRIPTION;
67 let title = "Jxnblk | Brent Jackson";
68 let image = OGIMAGE;
69 if (post) {
70 params = `?text=${post.title}`;
71 title = post.title + " | Jxnblk";
72 image = post.image || (OGIMAGE + params);
73 }
74
81 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
82
83 <meta property="og:image" content={image} />
84 <meta property="og:title" content={title} />
85 <meta property="og:description" content={description} />
88 <meta property="og:logo" content="https://jxnblk-avatar.web.val.run" />
89
90 <meta name="twitter:card" content="summary_large_image" />
91 <meta name="twitter:title" content={title} />
92 <meta name="twitter:description" content={description} />
93 <meta name="twitter:image" content={image} />
94 <meta name="twitter:site" content="@jxnblk" />
95
244 <div className="promo-inner">
245 <img
246 src="https://novanticagame.com/images/hero-xx.webp"
247 alt="Novantica game hero shot"
248 width="864"
260 <div className="promo-inner promo-short">
261 <img
262 src="https://novanticagame.com/images/hero-xx.webp"
263 alt="Novantica game hero shot"
264 width="864"
25 return new Response(svg, {
26 headers: {
27 "content-type": "image/svg+xml",
28 },
29 });
302.guides {
303 background-size: 32px 32px;
304 background-image:
305 linear-gradient(to right, var(--highlight-2) 1px, transparent 1px),
306 linear-gradient(to bottom, var(--highlight-2) 1px, transparent 1px);
310 background-position: 0 22px;
311 /*
312 background-image: linear-gradient(to bottom, rgba(255, 0, 127, 0.1) 1px, transparent 1px);
313 */
314 background-image: linear-gradient(to bottom, var(--primary-0) 1px, transparent 1px);
315}
316.dotgrid {
317 background-size: 32px 32px;
318 background-position: calc(50% - 15px) -15px;
319 background-image: radial-gradient(var(--primary-2) 1px, transparent 0);
320}
321`;
344.angr::after {
345 right: -32px;
346 background-image: linear-gradient(45deg, var(--greeble) 50%, transparent 50%);
347}
348.angl::after {
349 left: -32px;
350 background-image: linear-gradient(225deg, var(--greeble) 50%, transparent 50%);
351}
352.angr-up::after {
353 /* angle up */
354 background-image: linear-gradient(135deg, var(--greeble) 50%, transparent 50%);
355}
356.angl-up::after {
357 background-image: linear-gradient(-45deg, var(--greeble) 50%, transparent 50%);
358}
359`;
19 return new Response(png, {
20 headers: {
21 "Content-Type": "image/png",
22 ...headers,
23 },
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
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.