Search results for "react client side"

subaudio

@substrate

sub.audio – generate subtitles and chapters for any audio URL. Speech-to-text and chapter summaries powered by Substrate 🪩 To fork, sign up for Substrate to get your own API key and $50 free credits

3

2

HTTP (deprecated)

display: none;

.side-chapter {

opacity: 0.5;

id="prev-chapter-title"

class="chapter-title-txt side-chapter"

></div>

id="next-chapter-title"

class="chapter-title-txt side-chapter"

></div>

mdx

@pomdtr

export const title = "mdx" {title} Usage import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo"; import { mdx } from "https://esm.town/v/pomdtr/mdx"; const { author, name } = extractValInfo(import.meta.url); export default mdx(author, name);

5

1

HTTP (deprecated)

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

import { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=50";

import { compile } from "npm:@mdx-js/mdx";

import { render } from "npm:preact-render-to-string";

const css = `

const vfile = await compile(readme, {

jsxImportSource: "https://esm.sh/preact",

const url = new URL(req.url);

properBlueLion

@parthstown

@jsxImportSource https://esm.sh/react

0

Script

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

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

export const ShowName = (name: string) => {

return (

status

@rareadmin

Uptime Status Page This is the status page for the data generated by this uptime cron: @stevekrouse/uptime

0

HTTP

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

import { sqlite } from "https://esm.town/v/std/sqlite?v=6";

import { html } from "https://esm.town/v/stevekrouse/html";

import { SparklineSVG } from "https://esm.town/v/stevekrouse/sparklineSVGReact";

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

function StatusRow({ rows }) {

imgurGallery

@edgeeffect

Request proxy so that the front-end of my website can get details of one of my Imgur galleries without storing any secrets in my front-end JavaScript.

0

HTTP (deprecated)

export const jsonOkExample = async () => {

// cSpell:words imgur

const clientId = Deno.env.get("imgur_client_id");

const albumId = "QIY0Aed";

interface ImgurImage {

`https://api.imgur.com/3/album/${albumId}/images`,

headers: {

"Authorization": `Client-ID ${clientId}`,

const imgurResponse = await imgurRequest.json() as ImgurResponse;

return Response.json(

vtApiClient

@nbbaier

An interactive, runnable TypeScript val by nbbaier

11

0

Script

referenceCount: number;

export type ExpressionResult = string | number | Record<string, any> | any[] | boolean;

export class ValTownClient {

private baseURL: string;

private authenticated: boolean;

telemetry

@saolsen

Telemetry For Vals. Telemetry is a library that lets you trace val town executions with opentelemetry. All traces are stored in val.town sqlite and there is an integrated trace viewer to see them. Quickstart Instrument an http val like this. import { init, tracedHandler, } from "https://esm.town/v/saolsen/telemetry"; // Set up tracing by passing in `import.meta.url`. // be sure to await it!!! await init(import.meta.url); async function handler(req: Request): Promise<Response> { // whatever else you do. return } export default tracedHandler(handler); This will instrument the http val and trace every request. Too add additional traces see this widgets example . Then, too see your traces create another http val like this. import { traceViewer } from "https://esm.town/v/saolsen/telemetry"; export default traceViewer; This val will serve a UI that lets you browse traces. For example, you can see my UI here . Tracing By wrapping your http handler in tracedHandler all your val executions will be traced. You can add additional traces by using the helpers. trace lets you trace a block of syncronous code. import { trace } from "https://esm.town/v/saolsen/telemetry"; trace("traced block", () => { // do something }); traceAsync lets you trace a block of async code. import { traceAsync } from "https://esm.town/v/saolsen/telemetry"; await traceAsync("traced block", await () => { // await doSomething(); }); traced wraps an async function in tracing. import { traceAsync } from "https://esm.town/v/saolsen/telemetry"; const myTracedFunction: () => Promise<string> = traced( "myTracedFunction", async () => { // await sleep(100); return "something"; }, ); fetch is a traced version of the builtin fetch function that traces the request. Just import it and use it like you would use fetch . sqlite is a traced version of the val town sqlite client. Just import it and use it like you would use https://www.val.town/v/std/sqlite attribute adds an attribute to the current span, which you can see in the UI. event adds an event to the current span, which you can see in the UI.

10

4

Script

* `fetch` is a traced version of the builtin `fetch` function that traces the request. Just import it and use it like you wou

* `sqlite` is a traced version of the val town sqlite client. Just import it and use it like you would use [https://www.val.t

* `attribute` adds an attribute to the current span, which you can see in the UI.

import { jsxRenderer, useRequestContext } from "npm:hono@4.2.2/jsx-renderer";

import { html } from "npm:hono@4.2.2/html";

import { type TransactionMode } from "npm:@libsql/client";

import {

InStatement,

bloomingButton

@maxm

Add a blooming emoji effect when a button is clicked. Import this val as a module and add the bloom-button class to your button. Demo here: https://www.val.town/v/maxm/bloomingButtonDemo /** @jsxImportSource https://esm.sh/react */ import { renderToString } from "npm:react-dom/server"; export default async function(req: Request): Promise<Response> { return new Response( renderToString( <> <link rel="stylesheet" href="https://jenil.github.io/bulmaswatch/simplex/bulmaswatch.min.css" /> <div style={{ textAlign: "center", marginTop: "100px" }}> <button className="is-success button bloom-button" id="treeButton">Click Me</button> </div> <script type="module" src="https://esm.town/v/maxm/bloomingButton" /> </>, ), { headers: { "content-type": "text/html" } }, ); }

2

Script

```tsx

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

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

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

function positionDivBehindButton(button) {

const rect = button.getBoundingClientRect();

const newDiv = getBackgroundDiv(button);

ssr_router

@pomdtr

SSR Framework for val.town Usage The router map url paths to component vals. Component vals must export a React Component as their default export: export default function() { <h1>Hello World!</h1> } Optionally, you can define an handler next to your component, allowing you to handle query params or form inputs. Use the ctx.render function to pass props to your component. export const handler: Handler = (ctx) => { const url = new URL(ctx.req.url); const params = new URLSearchParams(url.search); return ctx.render({ name: params.get("name") }); }; export default function(props: {name?: string}) { <h1>Hello { name || "World }!</h1> }

0

HTTP (deprecated)

The router map url paths to component vals.

Component vals must export a React Component as their default export:

```ts

subaudio

@kora

sub.audio – generate subtitles and chapters for any audio URL. Speech-to-text and chapter summaries powered by Substrate 🪩 To fork, sign up for Substrate to get your own API key and $50 free credits

0

HTTP (deprecated)

display: none;

.side-chapter {

opacity: 0.5;

id="prev-chapter-title"

class="chapter-title-txt side-chapter"

></div>

id="next-chapter-title"

class="chapter-title-txt side-chapter"

></div>

happyDomExample

@tmcw

happy-dom Happy-dom is a module that provides a DOM-like abstraction that's pretty popular for test frameworks and server-side rendering, because it's a lot faster and lighter than more full-fledged browser-like options. By default, happy-dom doesn't support Deno , which is the basis for Val Town's runtime, but there's a fork that conveniently swaps out the thing it doesn't support, which is the Node.js vm module. Another way to work with the DOM is to use domino .

0

Script

# happy-dom

s a DOM-like abstraction that's pretty popular for test frameworks and server-side rendering, because it's a lot faster and l

Another way to work with the DOM is to use [domino](https://www.val.town/v/tmcw.dominoDomExample).

sapphireThrush

@iamseeley

A handler to serve JSON Resume

0

Script

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

platform with secure authentication and full CRUD capabilities, streamlining client operations","Created an interactive publi

return new Response(JSON.stringify(resumeDetails), {

headers: { "Content-Type": "application/json" },

valle_tmp_161829582363021365248633116958786

@janpaul123

// This val will serve a basic HTML wordle game with very colorful and animated CSS.

0

HTTP (deprecated)

// This val will serve a basic HTML wordle game with very colorful and animated CSS.

// It will be entirely static. For a more interactive version, you would need a backend to handle game logic.

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

import { html } from "https://esm.town/v/stevekrouse/html";

const WebPage = () => (

useLocalStorage

@jxnblk

An interactive, runnable TypeScript val by jxnblk

0

Script

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

export function useLocalStorage<T>(key: string, initialValue: T) {

const [val, setStored] = useState<T>(() => {

subaudio

@kortina

sub.audio – generate subtitles and chapters for any audio URL. Speech-to-text and chapter summaries powered by Substrate 🪩 To fork, sign up for Substrate to get your own API key and $50 free credits

0

HTTP (deprecated)

display: none;

.side-chapter {

opacity: 0.5;

id="prev-chapter-title"

class="chapter-title-txt side-chapter"

></div>

id="next-chapter-title"

class="chapter-title-txt side-chapter"

></div>