Val Town Code Search

healthdatasimple main.tsx4 matches

@ejfox•Updated 8 months ago

1/** @jsxImportSource https://esm.sh/react */
2import React from "https://esm.sh/react";
3import { renderToString } from "https://esm.sh/react-dom/server";
4import { createRoot } from "https://esm.sh/react-dom/client";
5
6const BLOB_KEY = 'health_data';

starlightFaker main.tsx5 matches

@kylem•Updated 8 months ago

1/** @jsxImportSource https://esm.sh/react */
2import React, { useState, useEffect } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4import ReactMarkdown from "https://esm.sh/react-markdown";
5import remarkGfm from "https://esm.sh/remark-gfm";
6import { faker } from "https://esm.sh/@faker-js/faker";
170        </div>
171        <div className="preview">
172          <ReactMarkdown remarkPlugins={[remarkGfm]}>{markdown}</ReactMarkdown>
173        </div>
174      </div>

status main.tsx3 matches

@robincsl•Updated 8 months ago

1/** @jsxImportSource https://esm.sh/react */
2import { sqlite } from "https://esm.town/v/std/sqlite?v=6";
3import { html } from "https://esm.town/v/stevekrouse/html";
4import { SparklineSVG } from "https://esm.town/v/stevekrouse/sparklineSVGReact";
5import { renderToString } from "npm:react-dom/server";
6
7function StatusRow({ rows }) {

successiveVioletGrouse main.tsx4 matches

@ankitkr0•Updated 8 months ago

1/**
2 * This game challenges players to click and hold a button for as long as possible.
3 * It uses React for the UI, SQLite for storing high scores, and includes a leaderboard.
4 * The game features vibrant colors and a pre-game explanation.
5 */
6/** @jsxImportSource https://esm.sh/react */
7import React, { useState, useEffect, useRef } from "https://esm.sh/react";
8import { createRoot } from "https://esm.sh/react-dom/client";
9
10function App() {

VALLErun main.tsx31 matches

@ubyk•Updated 8 months ago

1/** @jsxImportSource https://esm.sh/react */
2
3import valleGetValsContextWindow from "https://esm.town/v/janpaul123/valleGetValsContextWindow";
14import { Hono } from "npm:hono@3";
15import _ from "npm:lodash@4";
16import { renderToString } from "npm:react-dom/server";
17
18function parseSearchReplaceBlocks(content: string): Array<{ searchStart: string; searchEnd: string; replace: string }> {
232  executed on every HTTP request.
233  The val should return a valid HTML website, don't make JUST a backend unless explicitly asked for.
234  You can use React but you don't have to.
235  `.replace("\n", " ");
236
246  const changesMessages = function({ currentCode, userprompt }: { currentCode: string; userprompt: string }) {
247    if (!currentCode) {
248      currentCode = `/** @jsxImportSource https://esm.sh/react */
249
250import React from "npm:react";
251import { renderToString } from "npm:react-dom/server";
252
253const Example = () => (<html></html>);
293executed on every HTTP request.
294The val should return a valid HTML website, don't make JUST a backend unless explicitly asked for.
295You can use React but you don't have to.
296Take requests for changes to the supplied code.
297If the request is ambiguous, ask questions.
407  code as possible, only changing things that are strictly necessary to change.
408  \`\`\`ts
409/** @jsxImportSource https://esm.sh/react */
410
411import React from "npm:react";
412import { renderToString } from "npm:react-dom/server";
413
414const Example = () => (<html></html>);
431\`\`\`ts
432[SEARCH_START_SINGLE_LINE]
433import React from "npm:react";
434[/SEARCH_START_SINGLE_LINE]
435[SEARCH_END_SINGLE_LINE]
436[/SEARCH_END_SINGLE_LINE]
437[REPLACE]
438// This val creates a simple "Hello World" page using React.
439// We'll use React and ReactDOMServer for server-side rendering.
440// The approach is straightforward: create a React component and render it to HTML.
441
442import React from "npm:react";
443[/REPLACE]
444\`\`\`
479  code as possible, only changing things that are strictly necessary to change.
480  \`\`\`ts
481/** @jsxImportSource https://esm.sh/react */
482
483// This val creates a simple "Hello World" page using React.
484// We'll use React and ReactDOMServer for server-side rendering.
485// The approach is straightforward: create a React component and render it to HTML.
486
487import React from "npm:react";
488import { renderToString } from "npm:react-dom/server";
489
490const HelloWorld = () => (
516\`\`\`ts
517[SEARCH_START_SINGLE_LINE]
518// The approach is straightforward: create a React component and render it to HTML.
519[/SEARCH_START_SINGLE_LINE]
520[SEARCH_END_SINGLE_LINE]
521[/SEARCH_END_SINGLE_LINE]
522[REPLACE]
523// The approach is straightforward: create a React component and render it to HTML.
524// We import Tailwind CSS and apply classes to our React elements to style the page.
525[/REPLACE]
526\`\`\`
560  code as possible, only changing things that are strictly necessary to change.
561  \`\`\`ts
562/** @jsxImportSource https://esm.sh/react */
563
564// This val creates a simple Hacker News clone using React, Tailwind CSS, and blob storage.
565// We'll use React and ReactDOMServer for server-side rendering, Tailwind for styling,
566// and blob storage to persist and retrieve posts.
567
568import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
569import { blob } from "https://esm.town/v/std/blob";
570import React from "npm:react";
571import { renderToString } from "npm:react-dom/server";
572
573const { name } = extractValInfo(import.meta.url);
611    const initialPosts: Post[] = [
612      { id: 1, title: "Deno 1.0 Released", url: "https://deno.land/", score: 100 },
613      { id: 2, title: "React 18 Announced", url: "https://reactjs.org/", score: 80 },
614      { id: 3, title: "Tailwind CSS v3.0", url: "https://tailwindcss.com/", score: 60 },
615    ];
764        role: "user",
765        content:
766          `For all requests below, use React and Tailwind for the frontend, and blob storage for the backend, unless otherwise specified.`,
767      },
768      {

rainyAquamarineDonkey main.tsx3 matches

@arthrod•Updated 8 months ago

1/** @jsxImportSource https://esm.sh/react */
2import React from "https://esm.sh/react";
3import styled, { keyframes } from "https://esm.sh/styled-components";
4
50  const root = document.getElementById("root");
51  if (root) {
52    import("https://esm.sh/react-dom/client").then(({ createRoot }) => {
53      createRoot(root).render(<App />);
54    });

personalData main.tsx1 match

@iamseeley•Updated 8 months ago

80    {
81      "name": "Web Development",
82      "keywords": ["HTML5", "CSS", "Tailwind CSS", "React", "Next.js", "Vite", "FastAPI", "Hono", "Framer Motion"]
83    },
84    {

redBallComponent main.tsx5 matches

@arthrod•Updated 8 months ago

1/** @jsxImportSource https://esm.sh/react */
2import React from "https://esm.sh/react";
3
4const pulseKeyframes = `
28        <meta name="viewport" content="width=device-width, initial-scale=1.0">
29        <title>Red Ball Component</title>
30        <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
31        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
32        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
33        <style>
63          }
64          
65          ReactDOM.render(<RedBall />, document.getElementById('root'));
66        </script>
67      </body>

faviconGenerator main.tsx4 matches

@iamseeley•Updated 8 months ago

2// The favicon will be displayed on the page for the user to download.
3
4/** @jsxImportSource https://esm.sh/react */
5import React, { useState } from "https://esm.sh/react";
6import { createRoot } from "https://esm.sh/react-dom/client";
7
8function App() {
12  const [loading, setLoading] = useState(false);
13
14  const handleSubmit = async (e: React.FormEvent) => {
15    e.preventDefault();
16    setLoading(true);

dbpediaenhanced main.tsx35 matches

@ejfox•Updated 9 months ago

1import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
2import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
3
4function sanitizeHtml(html) {
85  };
86
87  return React.createElement(
88    "div",
89    { className: "container mx-auto px-4 py-8" },
90    React.createElement("h1", { className: "text-3xl font-bold text-center mb-8" }, "DBpedia Entity Search"),
91    React.createElement(
92      "form",
93      { onSubmit: handleSubmit, className: "flex mb-8" },
94      React.createElement("input", {
95        type: "text",
96        value: query,
99        className: "flex-grow p-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500",
100      }),
101      React.createElement(
102        "button",
103        {
108      )
109    ),
110    loading && React.createElement("p", { className: "text-center" }, "Loading..."),
111    error && React.createElement("p", { className: "text-red-500 text-center" }, error),
112    results.length > 0 && React.createElement(
113      "div",
114      { className: "bg-white shadow-md rounded-md p-6" },
115      React.createElement("h2", { className: "text-2xl font-semibold mb-4" }, "Search Results:"),
116      React.createElement(
117        "div",
118        { className: "grid gap-6" },
119        results.map((result, index) =>
120          React.createElement(
121            "div",
122            { key: index, className: "border-b border-gray-200 pb-4 last:border-b-0 flex" },
123            result.image && React.createElement(
124              "div",
125              { className: "mr-4 flex-shrink-0" },
126              React.createElement("img", {
127                src: result.image,
128                alt: result.label || "Entity image",
130              })
131            ),
132            React.createElement(
133              "div",
134              { className: "flex-grow" },
135              React.createElement(
136                "h3",
137                { className: "text-xl font-semibold mb-2" },
138                React.createElement(
139                  "a",
140                  {
146                  sanitizeHtml(result.label && result.label[0])
147                ),
148                React.createElement(
149                  "span",
150                  { className: "ml-2 text-sm font-normal text-gray-500" },
152                )
153              ),
154              result.comment && result.comment[0] && React.createElement("p", { className: "text-gray-600 mb-2" }, sanitizeHtml(result.comment[0])),
155              result.type && React.createElement(
156                "p",
157                { className: "text-sm text-gray-500" },
159                result.type.map(type => type.split("/").pop()).join(", ")
160              ),
161              result.category && React.createElement(
162                "p",
163                { className: "text-sm text-gray-500" },
165                result.category.map(cat => cat.split("/").pop()).join(", ")
166              ),
167              React.createElement(
168                "div",
169                { className: "mt-2 text-sm text-gray-500" },
170                React.createElement("p", { className: "font-semibold" }, "Score Calculation:"),
171                React.createElement(
172                  "ul",
173                  { className: "list-disc list-inside" },
174                  result.explanation.map((exp, i) => React.createElement("li", { key: i }, exp))
175                )
176              )
180      )
181    ),
182    results.length === 0 && !loading && !error && React.createElement("p", { className: "text-center" }, "No results found."),
183    React.createElement(
184      "footer",
185      { className: "mt-8 text-center text-sm text-gray-600" },
186      React.createElement(
187        "a",
188        {
195      )
196    ),
197    React.createElement(
198      "div",
199      { className: "mt-8 bg-gray-100 p-4 rounded-md" },
200      React.createElement("h3", { className: "text-lg font-semibold mb-2" }, "API Endpoints:"),
201      React.createElement(
202        "pre",
203        { className: "bg-gray-200 p-2 rounded text-sm overflow-x-auto" },
205Raw JSON: GET /api/raw?query=your_query`
206      ),
207      React.createElement("h3", { className: "text-lg font-semibold mt-4 mb-2" }, "cURL Example:"),
208      React.createElement(
209        "pre",
210        { className: "bg-gray-200 p-2 rounded text-sm overflow-x-auto" },
216
217function client() {
218  createRoot(document.getElementById("root")).render(React.createElement(App));
219}
220

« Previous

1...1521 1522 1523 1524 1525 1526 1527...1578

Projects

View all 222 vals

hanabi3 file matches

@jxnblk•Updated 3 hours ago

React Router for Hono in Val Town

Discord-to-Linear4 file matches

@charmaine•Updated 23 hours ago

Discord -> Linear ticket based on emoji reaction trigger

Users

View all 2 users

@effector2 vals

Updated 1 month ago

Write business logic with ease Meet the new standard for modern TypeScript development. Type-safe, reactive, framework-agnostic library to manage your business logic.

@officialrajdeepsingh1 val

Updated 1 month ago

Documentation

View all 4 documentation results

Val Town Code SearchReturn to Val Town

healthdatasimplemain.tsx4 matches

starlightFakermain.tsx5 matches

statusmain.tsx3 matches

successiveVioletGrousemain.tsx4 matches

VALLErunmain.tsx31 matches

rainyAquamarineDonkeymain.tsx3 matches

personalDatamain.tsx1 match

redBallComponentmain.tsx5 matches

faviconGeneratormain.tsx4 matches

dbpediaenhancedmain.tsx35 matches