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";67function StatusRow({ rows }) {
successiveVioletGrousemain.tsx4 matches
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";910function App() {
1/** @jsxImportSource https://esm.sh/react */23import 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";1718function parseSearchReplaceBlocks(content: string): Array<{ searchStart: string; searchEnd: string; replace: string }> {232executed on every HTTP request.233The val should return a valid HTML website, don't make JUST a backend unless explicitly asked for.234You can use React but you don't have to.235`.replace("\n", " ");236246const changesMessages = function({ currentCode, userprompt }: { currentCode: string; userprompt: string }) {247if (!currentCode) {248currentCode = `/** @jsxImportSource https://esm.sh/react */249250import React from "npm:react";251import { renderToString } from "npm:react-dom/server";252253const 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.407code as possible, only changing things that are strictly necessary to change.408\`\`\`ts409/** @jsxImportSource https://esm.sh/react */410411import React from "npm:react";412import { renderToString } from "npm:react-dom/server";413414const Example = () => (<html></html>);431\`\`\`ts432[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.441442import React from "npm:react";443[/REPLACE]444\`\`\`479code as possible, only changing things that are strictly necessary to change.480\`\`\`ts481/** @jsxImportSource https://esm.sh/react */482483// 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.486487import React from "npm:react";488import { renderToString } from "npm:react-dom/server";489490const HelloWorld = () => (516\`\`\`ts517[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\`\`\`560code as possible, only changing things that are strictly necessary to change.561\`\`\`ts562/** @jsxImportSource https://esm.sh/react */563564// 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.567568import { 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";572573const { name } = extractValInfo(import.meta.url);611const 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];764role: "user",765content:766`For all requests below, use React and Tailwind for the frontend, and blob storage for the backend, unless otherwise specified.`,767},768{
rainyAquamarineDonkeymain.tsx3 matches
1/** @jsxImportSource https://esm.sh/react */2import React from "https://esm.sh/react";3import styled, { keyframes } from "https://esm.sh/styled-components";450const root = document.getElementById("root");51if (root) {52import("https://esm.sh/react-dom/client").then(({ createRoot }) => {53createRoot(root).render(<App />);54});
personalDatamain.tsx1 match
80{81"name": "Web Development",82"keywords": ["HTML5", "CSS", "Tailwind CSS", "React", "Next.js", "Vite", "FastAPI", "Hono", "Framer Motion"]83},84{
redBallComponentmain.tsx5 matches
1/** @jsxImportSource https://esm.sh/react */2import React from "https://esm.sh/react";34const 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}64ReactDOM.render(<RedBall />, document.getElementById('root'));66</script>67</body>
faviconGeneratormain.tsx4 matches
2// The favicon will be displayed on the page for the user to download.34/** @jsxImportSource https://esm.sh/react */5import React, { useState } from "https://esm.sh/react";6import { createRoot } from "https://esm.sh/react-dom/client";78function App() {12const [loading, setLoading] = useState(false);1314const handleSubmit = async (e: React.FormEvent) => {15e.preventDefault();16setLoading(true);
dbpediaenhancedmain.tsx35 matches
1import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";2import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";34function sanitizeHtml(html) {85};8687return React.createElement(88"div",89{ className: "container mx-auto px-4 py-8" },90React.createElement("h1", { className: "text-3xl font-bold text-center mb-8" }, "DBpedia Entity Search"),91React.createElement(92"form",93{ onSubmit: handleSubmit, className: "flex mb-8" },94React.createElement("input", {95type: "text",96value: query,99className: "flex-grow p-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500",100}),101React.createElement(102"button",103{108)109),110loading && React.createElement("p", { className: "text-center" }, "Loading..."),111error && React.createElement("p", { className: "text-red-500 text-center" }, error),112results.length > 0 && React.createElement(113"div",114{ className: "bg-white shadow-md rounded-md p-6" },115React.createElement("h2", { className: "text-2xl font-semibold mb-4" }, "Search Results:"),116React.createElement(117"div",118{ className: "grid gap-6" },119results.map((result, index) =>120React.createElement(121"div",122{ key: index, className: "border-b border-gray-200 pb-4 last:border-b-0 flex" },123result.image && React.createElement(124"div",125{ className: "mr-4 flex-shrink-0" },126React.createElement("img", {127src: result.image,128alt: result.label || "Entity image",130})131),132React.createElement(133"div",134{ className: "flex-grow" },135React.createElement(136"h3",137{ className: "text-xl font-semibold mb-2" },138React.createElement(139"a",140{146sanitizeHtml(result.label && result.label[0])147),148React.createElement(149"span",150{ className: "ml-2 text-sm font-normal text-gray-500" },152)153),154result.comment && result.comment[0] && React.createElement("p", { className: "text-gray-600 mb-2" }, sanitizeHtml(result.comment[0])),155result.type && React.createElement(156"p",157{ className: "text-sm text-gray-500" },159result.type.map(type => type.split("/").pop()).join(", ")160),161result.category && React.createElement(162"p",163{ className: "text-sm text-gray-500" },165result.category.map(cat => cat.split("/").pop()).join(", ")166),167React.createElement(168"div",169{ className: "mt-2 text-sm text-gray-500" },170React.createElement("p", { className: "font-semibold" }, "Score Calculation:"),171React.createElement(172"ul",173{ className: "list-disc list-inside" },174result.explanation.map((exp, i) => React.createElement("li", { key: i }, exp))175)176)180)181),182results.length === 0 && !loading && !error && React.createElement("p", { className: "text-center" }, "No results found."),183React.createElement(184"footer",185{ className: "mt-8 text-center text-sm text-gray-600" },186React.createElement(187"a",188{195)196),197React.createElement(198"div",199{ className: "mt-8 bg-gray-100 p-4 rounded-md" },200React.createElement("h3", { className: "text-lg font-semibold mb-2" }, "API Endpoints:"),201React.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),207React.createElement("h3", { className: "text-lg font-semibold mt-4 mb-2" }, "cURL Example:"),208React.createElement(209"pre",210{ className: "bg-gray-200 p-2 rounded text-sm overflow-x-auto" },216217function client() {218createRoot(document.getElementById("root")).render(React.createElement(App));219}220
12}1314import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";15import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";1617function App() {42};4344return React.createElement(45"div",46{ className: "container mx-auto px-4 py-8" },47React.createElement("h1", { className: "text-3xl font-bold text-center mb-8" }, "DBpedia Entity Search"),48React.createElement(49"form",50{ onSubmit: handleSubmit, className: "flex mb-8" },51React.createElement("input", {52type: "text",53value: query,56className: "flex-grow p-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500"57}),58React.createElement(59"button",60{ type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded-r-md hover:bg-blue-600 transition duration-300" },62)63),64results.length > 0 && React.createElement(65"div",66{ className: "bg-white shadow-md rounded-md p-6" },67React.createElement("h2", { className: "text-2xl font-semibold mb-4" }, "Results:"),68React.createElement(69"div",70{ className: "grid gap-6" },71results.map((result, index) =>72React.createElement(73"div",74{ key: index, className: "border-b border-gray-200 pb-4 last:border-b-0 flex" },75result.image && React.createElement(76"div",77{ className: "mr-4 flex-shrink-0" },78React.createElement("img", {79src: result.image,80alt: result.label,82})83),84React.createElement(85"div",86{ className: "flex-grow" },87React.createElement(88"a",89{ href: result.uri, target: "_blank", rel: "noopener noreferrer", className: "text-xl font-medium text-blue-600 hover:underline" },90result.label91),92React.createElement("p", { className: "mt-2 text-gray-600" }, result.description),93React.createElement("pre", { className: "mt-2 bg-gray-100 p-2 rounded text-sm overflow-x-auto" }, JSON.stringify(result, null, 2))94)95)97)98),99React.createElement(100"footer",101{ className: "mt-8 text-center text-sm text-gray-600" },102React.createElement(103"a",104{ href: import.meta.url.replace("esm.town", "val.town"), target: "_blank", rel: "noopener noreferrer", className: "hover:underline" },106)107),108React.createElement(109"div",110{ className: "mt-8 bg-gray-100 p-4 rounded-md" },111React.createElement("h3", { className: "text-lg font-semibold mb-2" }, "cURL Example:"),112React.createElement(113"pre",114{ className: "bg-gray-200 p-2 rounded text-sm overflow-x-auto" },120121function client() {122createRoot(document.getElementById("root")).render(React.createElement(App));123}124
prepareChapterForAlgoliamain.tsx5 matches
111And the train just kept rolling.112113Now, StarGazer and Newtype were saying Dragon left them everything in her will. Her properties. Her patents. Even her contracts. The PRT was scrambling to try and cut them out of everything. On one level it seemed like a huge overreaction now that they all knew Newtype and StarGazer hadn't attacked Dragon. On the other, Everett kind of understood it.114115Dragon was a known quantity when the PRT started handing her contracts.255And wasn't that an understatement. Speaking up, purposefully this time, Everett added, "She showed up just in time to show everyone how badly StarGazer has been sandbagging."256257The mere mention of the name sparked a range of reactions.258259It might be official.586Chambers pinched the bridge of his nose and sighed. "We spent twenty years putting heroes on pedestals. No one is shocked when one goes and does something that seems larger than life! We can't put the cat back in the box now just because a teenager showed us up at our own game!"587588"She's definitely a thinker," Reed proposed. "On some level. Things work out for her too much. She reacts too quickly. Figures out what to do too readily. She might not even be aware of it."589590"Her power makes her more intelligent," Kamil recalled. "While we were never able to qualify or quantify it in any way, we know she's far too capable on a technical level for a sixteen-year-old."644Did she see the cautious looks spreading through the other's screens? It really could be quite unnerving. A meeting with a disembodied voice was not new, but with Dragon it had never felt that way. Objectively, it was but also wasn't the same thing. All that really changed was his understanding.645646The things people knew often changed their reactions, especially in light of the things they didn't know.647648"Very well," Seneca decided before anyone could protest. "Given the circumstances, the PRT does not believe it is in either of our interests for Celestial Being to continue executing Dragon's contracts."694Not that they wouldn't. Kamil expected many meetings running late into the night in his future—much like those they'd had concerning Nilbog, the Blasphemies, and the Machine Army. That Veda was now a publicly-known AI only complicated matters further, as well as her nominal status as a hero.695696"I see." Veda's screen watched the room with no flicker or sign of reaction. Very unnerving. "In that case, I request the right to defend my existence at a later date should the PRT choose to debate its potential responses."697698"Defend?" Kamil asked. "In what way?"
