Search

gregariousIvoryOstrich

@danieladmsf

@jsxImportSource https://esm.sh/react

HTTP

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

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

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

import { FaEdit, FaTrash, FaWhatsapp, FaSearch } from "https://esm.sh/react-icons/fa";

const formatDate = (date) => date.toLocaleDateString();

return <Dashboard />;

function client() {

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

if (typeof document !== "undefined") { client(); }

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

hydrate_islands

@pomdtr

Demo: @pomdtr/example_ssr Todo: [ ] only hydrate island when they enter the viewport

Script

const islands = Array.from(document.querySelectorAll("[data-hydration-src]"));

if (islands.length > 0) {

const { hydrateRoot } = await import("https://esm.sh/react-dom@18.2.0/client");

const { jsx: _jsx } = await import("https://esm.sh/react@18.2.0/jsx-runtime");

for (const island of islands) {

let src = island.getAttribute("data-hydration-src");

sqliteExplorerApp

@stef

SQLite Explorer View and interact with your Val Town SQLite data. It's based off Steve's excellent SQLite Admin val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by LibSQL Studio by invisal . This is now more an SPA, with tables, queries and results showing up on the same page. Install Install the latest stable version (v86) by forking this val: Authentication Login to your SQLite Explorer with password authentication with your Val Town API Token as the password. Todos / Plans [ ] improve error handling [ ] improve table formatting [ ] sticky table headers [x] add codemirror [ ] add loading indication to the run button (initial version shipped) [ ] add ability to favorite queries [ ] add saving of last query run for a table (started) [ ] add visible output for non-query statements [ ] add schema viewing [ ] add refresh to table list sidebar after CREATE/DROP/ALTER statements [ ] add automatic execution of initial select query on double click [x] add views to the sidebar [ ] add triggers to sidebar [ ] add upload from SQL, CSV and JSON [ ] add ability to connect to a non-val town Turso database [x] fix wonky sidebar separator height problem (thanks to @stevekrouse) [x] make result tables scrollable [x] add export to CSV, and JSON (CSV and JSON helper functions written in this val . Thanks to @pomdtr for merging the initial version!) [x] add listener for cmd+enter to submit query

HTTP

- [ ] add schema viewing

- [ ] add refresh to table list sidebar after `CREATE/DROP/ALTER` statements

- [ ] add automatic execution of initial select query on double click

- [x] add views to the sidebar

- [ ] add triggers to sidebar

- [ ] add upload from SQL, CSV and JSON

- [ ] add ability to connect to a non-val town Turso database

- [x] fix wonky sidebar separator height problem (thanks to @stevekrouse)

- [x] make result tables scrollable

return c.render(

myApi

@sbeben

An interactive, runnable TypeScript val by sbeben

Script

root;

">Hello World</div><script src=";

path_to_your_react_app.js;

"></script></body></html>`;

web_mhVADHMQe1

@dhvanil

An interactive, runnable TypeScript val by dhvanil

HTTP

emoji.className = 'particle';

emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];

emoji.style.left = event.clientX + 'px';

emoji.style.top = event.clientY + 'px';

emoji.style.transform = `translate(${(Math.random() - 0.5) * 200}px, ${(Math.random() - 0.5) * 200}px)`;

document.body.appendChild(emoji);

recordWebsitePreparer

@willthereader

@jsxImportSource https://esm.sh/react

HTTP

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

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

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

function App() {

</div>

function client() {

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

if (typeof document !== "undefined") { client(); }

function preparestoryForAlgolia(storyTitle, storyText) {

weatherGPT

@seflless

If you fork this, you'll need to set OPENAI_API_KEY in your Val Town Secrets .

HTTP

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

import { Canvas } from "https://esm.sh/react-three-fiber";

import { useEffect, useState } from "https://esm.sh/react@18.2.0";

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

return html(`<html><head></head><body><script type="module">

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

import { jsx as _jsx } from "https://esm.sh/react/jsx-runtime";

import { WeatherSuggest } from "https://esm.town/v/seflless/weatherGPT";

redditSearch

@jasperfurniss

Use Browserbase and Puppeteer to monitor and scrape reddit search results.

HTTP

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

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

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

import { convertRelativeDateToString } from "https://esm.town/v/sarahxc/convertRelativeDateToString";

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

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

e.preventDefault();

</div>

function client() {

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

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

client();

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

dot_com

@stevekrouse

stevekrouse.com - my personal website This val hosts my personal website. The view data is stored in Val Town SQLite - @std/sqlite. It used to live on Github Pages, which is why I proxy over requests to certain blog posts over to the Github Pages site still. Todos [ ] Speed up page load by loading sqlite data later like in @healeycodes/steve_web [ ] Store more (legally storable) analytics data, and maybe make a sparkline! [ ] Add some sort of way to contact me [ ] Move over all my blog posts from Github Pages (maybe into @std/blob as a CMS?)

HTTP

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

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

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

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

const linkClass = "text-blue-500 hover:underline";

{ children, href }: {

children?: React.ReactNode;

href: string;

jamz

@all

@jsxImportSource https://esm.sh/react

HTTP

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

import React from "https://esm.sh/react";

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

const [url, setUrl] = React.useState("");

const [title, setTitle] = React.useState("");

const [tag, setTag] = React.useState("");

const [isLoading, setIsLoading] = React.useState(false);

const [error, setError] = React.useState("");

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

const [isEditing, setIsEditing] = React.useState(false);

dot_com

@vpontis

HTTP

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

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

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

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

const linkClass = "text-blue-500 hover:underline";

{ children, href }: {

children?: React.ReactNode;

href: string;

createReplitDBClient

@claytn

NOTE: THIS CLIENT DOES NOT WORK AS EXPECTED. ALL VALS IN VAL TOWN ARE JSON.stringify-ied SO RETURNED CLOSURES AREN'T SUPPORTED USE THE INDIVIDUAL FUNCTIONS INSTEAD: @claytn.replitGet @claytn.replitSet @claytn.replitDelete @claytn.replitList

Script

NOTE:

THIS CLIENT DOES NOT WORK AS EXPECTED. ALL VALS IN VAL TOWN

ARE JSON.stringify-ied SO RETURNED CLOSURES AREN'T SUPPORTED

@claytn.replitList

/** Database client for replit's key-value store */

export function createReplitDBClient(REPLIT_DB_URL) {

return {

add_to_notion_w_ai_webpage

@nerdymomocat

Example usage of the add_to_notion_w_ai val Try with the money database . Read and watch the demo run here

HTTP

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

import { blob } from "https://esm.town/v/std/blob";

import Instructor from "npm:@instructor-ai/instructor";

import { Client } from "npm:@notionhq/client";

import OpenAI from "npm:openai";

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

import { z } from "npm:zod";

const NOTION_API_KEY = process.env.NOTION_API_KEY;

const notion = new Client({

auth: NOTION_API_KEY,

apiKey: process.env.OPENAI_API_KEY ?? undefined,

const client = Instructor({

client: oai,

mode: "TOOLS",

const db_info = await get_notion_db_info(dbid);

const processed_message = await client.chat.completions.create({

messages: [{ role: "system", content: db_info["system_message"] }, { role: "user", content: text }],

animatedReadmeSVG

@willthereader

Fancy animated SVGs in readmes, along with centering and image sizing. <div align="center"><img width=200 src="https://gpanders.com/img/DEC_VT100_terminal.jpg"></div> <p align="center"> <img src="https://maxm-animatedreadmesvg.web.val.run/comet.svg" /> </p> <p align="center"> <img src="https://maxm-animatedreadmesvg.web.val.run/custom text!" /> </p>

HTTP

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

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

const genSVG = (request: Request): string => {

</svg>,

export const reactExample = (request: Request) =>

new Response(

sparklineEx

@stevekrouse

Server-Rendered React Sparkline Example Vaguely inspired by Easy SVG sparklines , but totally different because that had zero dependencies and this has all the dependencies: react, htm, react-sparklines. This is the live-generated SVG that this very val generates: ![Example SVG Sparkline](https://stevekrouse-sparklineex.web.val.run) It visualizes the amount of times that it itself has been viewed. The data for this val is kept in @stevekrouse.sparklineExData .

HTTP

# Server-Rendered React Sparkline Example

fferent because that had zero dependencies and this has all the dependencies: react, htm, react-sparklines.

This is the live-generated SVG that this very val generates:

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

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

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

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

import { Sparklines, SparklinesLine } from "npm:react-sparklines";

export const sparklineEx = async (req: Request) => {

…

58 59

61 62

…

252