Search results for "react client side"

ThumbMaker

@g

* This application creates a thumbnail maker using Hono for server-side routing and client-side JavaScript for image processing. * It allows users to upload images, specify output options, and generate a composite thumbnail image. * The app uses the HTML5 Canvas API for image manipulation and supports drag-and-drop functionality. * * The process is divided into two steps: * 1. Generating thumbnails: Users choose thumbnail size options and create individual thumbnails. * 2. Rendering: Users can create and export the final composite image with options for format and quality. * This two-step process allows changing format or quality without re-rendering the entire canvas. * * Additional features: * - Users can go back from the second step to the first one to regenerate thumbnails. * - Dropping new files takes the user back to the first step. * - A "Download Metadata" button is added to download a JSON file with thumbnail information.

0

HTTP

* This application creates a thumbnail maker using Hono for server-side routing and client-side JavaScript for image process

* It allows users to upload images, specify output options, and generate a composite thumbnail image.

* The app uses the HTML5 Canvas API for image manipulation and supports drag-and-drop functionality.

valle_tmp_1369396001916440808441248753827946

@janpaul123

@jsxImportSource https://esm.sh/react

0

HTTP (deprecated)

/** @jsxImportSource https://esm.sh/react */

import valleGetValsContextWindow from "https://esm.town/v/janpaul123/valleGetValsContextWindow";

import archiveVal from "https://esm.town/v/nbbaier/archiveVal?v=10";

import _ from "npm:lodash@4";

import OpenAI from "npm:openai";

import { renderToString } from "npm:react-dom/server";

// Set these to your own

const username = "janpaul123";

codemirrorTsBrowser

@maxm

codemirror-ts You can import this a val like this in browser to run codemirror-ts. Bundling done with esm.sh. Working demo: preview / source Run an editor like so: /** @jsxImportSource https://esm.sh/react */ import { renderToString } from "npm:react-dom/server"; export default async function(req: Request): Promise<Response> { return new Response( renderToString( <> <script type="module" src="https://esm.town/v/maxm/codemirrorTsBrowser" /> <form> <textarea id="editorSource" className="for-codemirror" name="editorSource"> {`let hasAnError: string = 10; function increment(num: number) { return num + 1; } increment('not a number');`} </textarea> <button id="submit" type="submit">Submit</button> </form> </>, ), { headers: { "content-type": "text/html" } }, ); }

2

0

Script

```tsx

/** @jsxImportSource https://esm.sh/react */

import { renderToString } from "npm:react-dom/server";

export default async function(req: Request): Promise<Response> {

module: ts.ModuleKind.ESNext,

jsx: ts.JsxEmit.React,

lib: ["esnext", "dom"],

spotify

@niek

// Uncomment this line for one run of the Val to create the DB lol

1

0

HTTP (deprecated)

export let spotifyRequestToken = ({ client_id, client_secret, code, redirect_uri }) =>

"Authorization": "Basic " + (new Buffer(client_id + ":" + client_secret).toString("base64")),

export let spotifyRefreshToken = async ({ refresh_token, client_id, client_secret }) =>

"Authorization": "Basic " + (new Buffer(client_id + ":" + client_secret).toString("base64")),

`https://accounts.spotify.com/authorize?response_type=code&client_id=${

encodeURIComponent(Deno.env.get("SPOTIFY_CLIENT_ID"))

client_id: Deno.env.get("SPOTIFY_CLIENT_ID"),

client_secret: Deno.env.get("SPOTIFY_CLIENT_SECRET"),

client_id: Deno.env.get("SPOTIFY_CLIENT_ID"),

client_secret: Deno.env.get("SPOTIFY_CLIENT_SECRET"),

valTownChatGPT2

@janpaul123

https://x.com/JanPaul123/status/1811801305066651997 Fork it and authenticate with your Val Town API token as the password.

1

0

HTTP (deprecated)

/** @jsxImportSource https://esm.sh/react */

import getValsContextWindow from "https://esm.town/v/janpaul123/getValsContextWindow";

import { updateValByName } from "https://esm.town/v/nbbaier/updateValByName?v=14";

import { Hono } from "npm:hono@3";

import OpenAI from "npm:openai";

import { renderToString } from "npm:react-dom/server";

const vt = new ValTown({ bearerToken: Deno.env.get("valtown") });

const username = "janpaul123";

WebSiteReact

@vyatka

Simple HTML page with react-dom/server

0

HTTP (deprecated)

# Simple HTML page

with react-dom/server

/** @jsxImportSource https://esm.sh/react */

import { renderToString } from "npm:react-dom/server";

export default function(_req: Request) {

valle_tmp_202239440460780356420276977660784

@janpaul123

@jsxImportSource https://esm.sh/react

0

HTTP (deprecated)

/** @jsxImportSource https://esm.sh/react */

import valleGetValsContextWindow from "https://esm.town/v/janpaul123/valleGetValsContextWindow";

import archiveVal from "https://esm.town/v/nbbaier/archiveVal?v=10";

import _ from "npm:lodash@4";

import OpenAI from "npm:openai";

import { renderToString } from "npm:react-dom/server";

// Set these to your own

const username = "janpaul123";

homepage

@willthereader

@jsxImportSource https://esm.sh/hono@latest/jsx

4 3

0

HTTP

change my understanding. I really like{" "}

<a className="text-blue-500 hover:underline" href="https://www.readtangle.com">Tangle</a>{" "}

because it offers perspectives from all sides. I dislike when people assume the worst of their opponents and

when I can't tell who's right because no one addresses the best arguments from their opponents.

</p>

faviconGenerator

@iamseeley

// This approach will use the fal.ai API to generate a custom favicon based on a user-provided prompt.

2

0

HTTP

// The favicon will be displayed on the page for the user to download.

/** @jsxImportSource https://esm.sh/react */

import React, { useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

function App() {

const [loading, setLoading] = useState(false);

const handleSubmit = async (e: React.FormEvent) => {

e.preventDefault();

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") {

client();

async function generateImage(prompt: string) {

examplePreactWebApp

@easrng

@easrng.preactWebApp example

1

Express

# @easrng.preactWebApp example

[![Open](https://easrng-button.express.val.run/Open)](https://easrng-examplepreactwebapp.express.val.run/)

import { preactWebApp } from "https://esm.town/v/easrng/preactWebApp";

export const examplePreactWebApp = preactWebApp(

function App(

{ html, req, ...rest }: typeof preactWebApp.props,

const KeyList = ({ obj, maxDepth = 3 }) =>

return html`

<title>@easrng.preactWebApp example</title>

<h1><a href="https://www.val.town/v/easrng.preactWebApp">@easrng.preactWebApp</a> example</h1>

<p>available props:</p>

dateme_routes

@stevekrouse

Important that this code run on the server & client both!

3

0

Script

Important that this code run on the server & client both!

/** @jsxImportSource https://esm.sh/react@18.2.0 */

import { Browse, loader } from "https://esm.town/v/stevekrouse/dateme_browse_react";

import FAQ from "https://esm.town/v/stevekrouse/dateme_faq_react";

import Submit, { action } from "https://esm.town/v/stevekrouse/dateme_form_react";

import Home from "https://esm.town/v/stevekrouse/dateme_home_react";

import Root from "https://esm.town/v/stevekrouse/dateme_layout_react";

export const routes = [

GistGPT_Client

@weaverwhale

GistGPT Client Provide a RAW file URL from Github, BitBucket, GitLab, Val Town, etc. and GistGPT will provide you the gist of the code. Client for https://www.val.town/v/weaverwhale/GistGPT

0

HTTP (deprecated)

# GistGPT Client

> Provide a RAW file URL from Github, BitBucket, GitLab, Val Town, etc. and GistGPT will provide you the gist of the code.

[Client](https://weaverwhale-gistgpt_client.web.val.run/) for https://www.val.town/v/weaverwhale/GistGPT

</h1>

<p class="mb-4">Client for the <a class="underline" target="_blank" href="https://www.val.town/v/weaverwhale/GistGPT"

<p class="mb-4">Provide a RAW file URL from Github, BitBucket, GitLab, Val Town, etc. and GistGPT will provide you th

e.target.disabled = true;

window.location.href = "/gist?url=https://esm.town/v/weaverwhale/GistGPT_Client";

document.querySelector("input").value = "Summarizing this file...";

REACT_MINIFIED

@liamdanielduffy

// set by liamdanielduffy.buildReactMinified at 2023-06-01T12:15:21.371Z

3

0

Script

// set by liamdanielduffy.buildReactMinified at 2023-06-01T12:15:21.371Z

export let REACT_MINIFIED = "/**\n * @license React\n * react.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its

sqliteExplorerApp

@postpostscript

fork of @nbbaier/sqliteExplorerApp with my authentication middleware

1

0

HTTP (deprecated)

<h1>sqlite explorer</h1>

<option value="default" selected={source === "default"}>Default (@std/sqlite)</option>

return c.render(

{tableList}

azureBeetle

@stevekrouse

@jsxImportSource https://esm.sh/hono@latest/jsx

0

HTTP (deprecated)

change my understanding. I really like{" "}

<a className="text-blue-500 hover:underline" href="https://www.readtangle.com">Tangle</a>{" "}

because it offers perspectives from all sides. I dislike when people assume the worst of their opponents and

when I can't tell who's right because no one addresses the best arguments from their opponents.

</p>