slogan_historymain.tsx3 matches
1/** @jsxImportSource https://esm.sh/react */2import { ArrowDownIcon, ChevronRightIcon } from "npm:@heroicons/react/20/solid";3import { Hono } from "npm:hono@3";4import { renderToString } from "npm:react-dom/server";56const timeline = [
OpticonRemindermain.tsx2 matches
1/** @jsxImportSource https://esm.sh/react */2import { email } from "https://esm.town/v/std/email?v=11";3import { discordWebhook } from "https://esm.town/v/stevekrouse/discordWebhook";4import { html } from "https://esm.town/v/stevekrouse/html";5import { thisValURL } from "https://esm.town/v/stevekrouse/thisValURL";6import { renderToString } from "npm:react-dom/server";78let welcomeEmail = renderToString(
1import { render } from "npm:preact-render-to-string";23export const htmlResponse = (html) =>8});910export const reactResponse = (component) => htmlResponse(render(component));
30* If email, show that user's content, and a logout link to "/auth/logout"; if no email, show login options.31* `import { LoginWithGoogleButton } from "https://esm.town/v/stevekrouse/LoginWithGoogleButton"`32* Use the <LoginWithGoogleButton /> React Component, optionally supplying the `text` attribute33* Add "via LastLogin" underneat LoginWithGoogleButton, centered, secondary text, linking to https://lastlogin.io/34* Pass the email from the server to the client-side code if using React hydration or similar techniques.3536### How it works37381. Your users click on the <LoginWithGoogleButton /> React Component in your app392. The <LoginWithGoogleButton /> opens a new window to /auth/login?provider=google in your app403. This middleware directs them to log into Google via LastLogin64* If email, show that user's content, and a logout link to "/auth/logout";65* If no email, add a link to "Login or Sign Up" to "/auth/login"66* Pass the email from the server to the client-side code if using React hydration or similar techniques.6768### How it works
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{
valleGetValsContextWindowmain.tsx9 matches
41{42type: "http",43prompt: "Generate a val that uses React to render HTML",44code: `/** @jsxImportSource https://esm.sh/react */45import { renderToString } from "npm:react-dom/server";46export const reactExample = (request: Request) =>48new Response(renderToString(<div>Test {1 + 1}</div>), {49headers: {74type: "http",75prompt: null,76code: `/** @jsxImportSource https://esm.sh/preact */77import { render } from "npm:preact-render-to-string";78export const preactExample = (request: Request) =>80new Response(render(<div>Test {1 + 1}</div>), {81headers: {191prompt: "Write a val that renders a website and uses tailwind css",192type: "http",193code: `/** @jsxImportSource https://esm.sh/preact */194import { render } from "npm:preact-render-to-string";195export default async function(req: Request) {
caniuse_notifiermain.tsx2 matches
1/** @jsxImportSource npm:react **/2import { blob } from "https://esm.town/v/std/blob";3import { email } from "https://esm.town/v/std/email";4import { renderToString } from "npm:react-dom@18/server";56const updatedKey = "caniuse-updated-at";
valleCodemirrormain.tsx1 match
68target: ts.ScriptTarget.ESNext,69module: ts.ModuleKind.ESNext,70jsx: ts.JsxEmit.React,71lib: ["esnext", "dom"],72moduleDetection: ModuleDetectionKind.Force,
linkInBioTemplatemain.tsx2 matches
1/** @jsxImportSource https://esm.sh/react */2import { renderToString } from "npm:react-dom/server";34export default async function(req: Request) {
hardwarebingomain.tsx4 matches
1/** @jsxImportSource https://esm.sh/react */2import React, { useEffect, useState } from "https://esm.sh/react";3import { createRoot } from "https://esm.sh/react-dom/client";4import { renderToString } from "https://esm.sh/react-dom/server";5import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";6
