weeksummarymain.tsx3 matches
1/** @jsxImportSource https://esm.sh/react */
2import { createClient } from "https://esm.sh/@supabase/supabase-js";
3import DOMPurify from "https://esm.sh/dompurify";
4import { marked } from "https://esm.sh/marked";
5import React, { useEffect, useState } from "https://esm.sh/react";
6import { createRoot } from "https://esm.sh/react-dom/client";
78interface Metadata {
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\`\`\`ts
409/** @jsxImportSource https://esm.sh/react */
410411import React from "npm:react";
412import { renderToString } from "npm:react-dom/server";
413414const 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.
441442import React from "npm:react";
443[/REPLACE]
444\`\`\`
479code as possible, only changing things that are strictly necessary to change.
480\`\`\`ts
481/** @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\`\`\`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\`\`\`
560code as possible, only changing things that are strictly necessary to change.
561\`\`\`ts
562/** @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{
12* Sub-functionalities are now listed under the main functionality to help describe it better.
13*/
14/** @jsxImportSource https://esm.sh/react */
15import React, { useEffect, useState } from "https://esm.sh/react";
16import { createRoot } from "https://esm.sh/react-dom/client";
1718// Simulated API for Hono and Deno features
99const npmPackages = {
100frontend: [
101"react",
102"vue",
103"angular",
180"babylon.js",
181"aframe",
182"react-three-fiber",
183"cannon-es",
184"ammo.js",
12* Sub-functionalities are now listed under the main functionality to help describe it better.
13*/
14/** @jsxImportSource https://esm.sh/react */
15import React, { useEffect, useState } from "https://esm.sh/react";
16import { createRoot } from "https://esm.sh/react-dom/client";
1718// Simulated API for Hono and Deno features
99const npmPackages = {
100frontend: [
101"react",
102"vue",
103"angular",
180"babylon.js",
181"aframe",
182"react-three-fiber",
183"cannon-es",
184"ammo.js",
4* The generated prompt is tailored to Val Town's specific features and best practices.
5*/
6/** @jsxImportSource https://esm.sh/react */
7import React, { useState } from "https://esm.sh/react";
8import { createRoot } from "https://esm.sh/react-dom/client";
910const valTownFeatures = [
15"Email sending",
16"OpenAI integration",
17"React support",
18"TypeScript support",
19"Deno runtime",
multirouteHonomain.tsx5 matches
1/**
2* This val creates a simple website for Janic Business Group, a business consulting firm.
3* It uses React for the frontend and Hono for the backend routing.
4* The website includes a home page, about page, and services page.
5*/
6/** @jsxImportSource https://esm.sh/react */
7import React from "https://esm.sh/react";
8import { createRoot } from "https://esm.sh/react-dom/client";
9import { Hono } from "https://esm.sh/hono";
10import { jsx } from "https://esm.sh/hono/jsx";
1314function App() {
15const [page, setPage] = React.useState('home');
1617const renderPage = () => {
postmanClonemain.tsx4 matches
1/**
2* This val creates a Postman-like interface for testing HTTP requests directly in the browser.
3* It uses React for the UI and the Fetch API to make requests.
4* The server function serves the HTML and handles the API requests.
5*/
67/** @jsxImportSource https://esm.sh/react */
8import React, { useState } from "https://esm.sh/react";
9import { createRoot } from "https://esm.sh/react-dom/client";
1011function App() {
czarkowyEdytorDatmain.tsx3 matches
6*/
78/** @jsxImportSource https://esm.sh/react */
9import React, { useState, useRef, useEffect } from "https://esm.sh/react";
10import { createRoot } from "https://esm.sh/react-dom/client";
1112function App() {
resumeDetailsmain.tsx1 match
107"name": "Web Development",
108"level": "",
109"keywords": ["HTML5", "CSS", "Tailwind CSS", "React", "Next.js", "Vite", "FastAPI", "Hono", "Framer Motion"],
110},
111{
marineMoccasinLizardmain.tsx6 matches
1/**
2* This app implements a "Would You Rather" game with a ranking system for answers and a progress bar.
3* It uses React for the frontend and SQLite for persistent storage on the backend.
4* The ranking system updates based on user choices and displays in the Answers tab.
5* A progress bar is added to show completion of 20 questions.
6*/
7/** @jsxImportSource https://esm.sh/react */
8import React, { useCallback, useEffect, useState } from "https://esm.sh/react";
9import { createRoot } from "https://esm.sh/react-dom/client";
10import {
11BrowserRouter as Router,
15useLocation,
16useNavigate,
17} from "https://esm.sh/react-router-dom";
1819// Types
240const [username, setUsername] = useState("");
241242const handleLogin = useCallback(async (e: React.FormEvent) => {
243e.preventDefault();
244const response = await fetch("/api/login", {