reactHonoExampleindex.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>
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<script src="https://cdn.tailwindcss.com"></script>
10</head>
Superapp_Templatehttp.tsx1 match
34<a href="/auth/login?provider=google" className="login-button">
35<img
36src="https://developers.google.com/identity/images/g-logo.png"
37alt="Google logo"
38className="google-logo"
1/** @jsxImportSource https://esm.sh/react */
2import React from 'https://esm.sh/react';
3import { ImageResponse } from 'npm:@vercel/og';
45export default async function handler(req: Request) {
10const repo = url.searchParams.get('repo') || 'repo';
1112return new ImageResponse(
13<div
14style={{
17width: '100%',
18flexDirection: 'column',
19backgroundImage: 'linear-gradient(to bottom, #dbf4ff, #fff1f1)',
20padding: '1rem 3rem',
21}}
53<b
54style={{
55'backgroundImage': 'linear-gradient(90deg, rgb(255, 77, 77), rgb(249, 203, 40))',
56'backgroundClip': 'text',
57'-webkit-background-clip': 'text',
20<meta property="og:title" content="GitHub Line Counter">
21<meta property="og:description" content="Find out how many lines of code any repository on GitHub has, right from your browser.">
22<meta property="og:image" content="https://g-countgithublocopengraph.web.val.run/og">
23<meta property="og:type" content="website">
24<meta property="og:url" content="https://g-countgithublocui.web.val.run/">
25<meta property="twitter:card" content="summary_large_image">
26<meta property="twitter:title" content="GitHub Line Counter">
27<meta property="twitter:description" content="Find out how many lines of code any repository on GitHub has, right from your browser.">
28<meta property="twitter:image" content="https://g-countgithublocopengraph.web.val.run/og">
29<meta property="twitter:url" content="https://g-countgithublocui.web.val.run/">
30<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>">
31<link rel="stylesheet" href="/styles.css">
32<script type="module" src="/main.js" defer></script>
273<meta property="og:title" content="GitHub Line Counter for ${escape(user)}/${escape(repo)}">
274<meta property="og:description" content="Find out how many lines of code this or any other GitHub repository has, right from your browser.">
275<meta property="og:image" content="${ogImg.href}">
276<meta property="og:type" content="website">
277<meta property="og:url" content="${url.href}">
278<meta property="twitter:card" content="summary_large_image">
279<meta property="twitter:title" content="GitHub Line Counter for ${escape(user)}/${escape(repo)}">
280<meta property="twitter:description" content="Find out how many lines of code this or any other GitHub repository has, right from your browser.">
281<meta property="twitter:image" content="${ogImg.href}">
282<meta property="twitter:url" content="${url.href}">
283<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>">
284<script>
285window.location.href = ${JSON.stringify(redirectUrl.href)};
76<a href="/auth/login?provider=google" className="login-button">
77<img
78src="https://developers.google.com/identity/images/g-logo.png"
79alt="Google logo"
80className="google-logo"
121<a href="/auth/login?provider=google" className="login-button">
122<img
123src="https://developers.google.com/identity/images/g-logo.png"
124alt="Google logo"
125className="google-logo"
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,
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
25
11- Fork any public Val Town project with a single click
12- Preserves the entire project structure, including all files and directories
13- Maintains project metadata (descriptions, images, etc.)
14- Clean, responsive UI built with React and TailwindCSS
15