Val Town Code SearchReturn to Val Town

34
35  const dist_nowcast_warnings =
36    "https://reactjs.imd.gov.in/geoserver/imd/wms?service=WMS&request=GetMap&layers=imd%3ANowcast_StateDistrict_Merged&styles=&format=image%2Fsvg&transparent=true&version=1.1.1&width=256&height=256&srs=EPSG%3A4326&bbox="
37    + bbox;
38
39  // env=day:Day1_Color
40  const dist_warnings_today =
41    "https://reactjs.imd.gov.in/geoserver/imd/wms?service=WMS&request=GetMap&layers=imd%3AWarnings_StateDistrict_Merged&styles=&format=image%2Fsvg&transparent=true&version=1.1.1&env=day%3ADay1_Color&width=256&height=256&srs=EPSG%3A4326&bbox="
42    + bbox;
43
44  // env=day:Day2_Color
45  const dist_warnings_today_plus_1 =
46    "https://reactjs.imd.gov.in/geoserver/imd/wms?service=WMS&request=GetMap&layers=imd%3AWarnings_StateDistrict_Merged&styles=&format=image%2Fsvg&transparent=true&version=1.1.1&env=day%3ADay2_Color&width=256&height=256&srs=EPSG%3A4326&bbox="
47    + bbox;
48
49  // env=day:Day3_Color
50  const dist_warnings_today_plus_2 =
51    "https://reactjs.imd.gov.in/geoserver/imd/wms?service=WMS&request=GetMap&layers=imd%3AWarnings_StateDistrict_Merged&styles=&format=image%2Fsvg&transparent=true&version=1.1.1&env=day%3ADay3_Color&width=256&height=256&srs=EPSG%3A4326&bbox="
52    + bbox;
53
54  // env=day:Day4_Color
55  const dist_warnings_today_plus_3 =
56    "https://reactjs.imd.gov.in/geoserver/imd/wms?service=WMS&request=GetMap&layers=imd%3AWarnings_StateDistrict_Merged&styles=&format=image%2Fsvg&transparent=true&version=1.1.1&env=day%3ADay4_Color&width=256&height=256&srs=EPSG%3A4326&bbox="
57    + bbox;
58
59  // env=day:Day5_Color
60  const dist_warnings_today_plus_4 =
61    "https://reactjs.imd.gov.in/geoserver/imd/wms?service=WMS&request=GetMap&layers=imd%3AWarnings_StateDistrict_Merged&styles=&format=image%2Fsvg&transparent=true&version=1.1.1&env=day%3ADay5_Color&width=256&height=256&srs=EPSG%3A4326&bbox="
62    + bbox;
63  /*

1// This approach will create a Game of Life simulation using React for the frontend and
2// a simple backend to serve the HTML. We'll use a canvas element for efficient rendering
3// of the game grid and implement the Game of Life rules on the client side. An explanation
4// dialog is added to provide information about the game and common patterns.
5
6/** @jsxImportSource https://esm.sh/react */
7import React, { useCallback, useEffect, useRef, useState } from "https://esm.sh/react";
8import { createRoot } from "https://esm.sh/react-dom/client";
9
10const CELL_SIZE = 10;

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';

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>

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 }) {

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() {

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      {

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    });

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

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>