Search

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

function debounce(func: Function, wait: number) {

let timeout: number | undefined;

return function executedFunction(...args: any[]) {

const later = () => {

timeout = setTimeout(later, wait);

function App() {

const [prompt, setPrompt] = useState("Generate a colorful gradient shader");

}, [code, debouncedRenderShader, retryCount]);

async function handleSubmit(e: React.FormEvent, errorMessage?: string) {

if (e) e.preventDefault();

</div>

function client() {

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

client();

function renderShader(canvas: HTMLCanvasElement, fragmentShaderSource: string, time: number) {

const gl = canvas.getContext("webgl");

gl_Position = a_position;

function createShader(gl: WebGLRenderingContext, type: number, source: string) {

const shader = gl.createShader(type);

gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

function extractGLSLCode(text: string): string {

const glslMatch = text.match(/```glsl\n([\s\S]*?)\n```/);

: text.trim();

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

if (req.method === "POST") {

export function inTheBackground<T>(doSomething: () => T): Promise<T> {

return new Promise(async (resolve, reject) => {

try {

The first timestamp should be 0.`;

async function processAudio(audio_uri) {

const substrate = new Substrate({ apiKey: Deno.env.get("SUBSTRATE_API_KEY") });

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

const url = new URL(req.url);

let currentChapterIndex = 0;

function updateText() {

const currentTime = audioPlayer.currentTime;

const updateInterval = 1000 / 40;

function updateLoop(timestamp) {

if (timestamp - lastUpdateTime > updateInterval) {

let { emails } = await import("https://esm.town/v/eric/emails");

export let setEmails = function(emailSet) {

emails = [...emailSet.values()]

return emails.length

margin-bottom: 1em;

Render InstantSearch

Lastly, render InstantSearch by importing the search.js module and calling search.start().

import search from "./search.js";

import 'instantsearch.css/themes/satellite.css';

<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.73.4/dist/instantsearch.production.min.js" integrity="sha256-KhJczbX11JwgRQX1pcxQOK+/ymw2x3XxJqz1CUIMHBk=" crossorigin="anonymous"></script>

The jsDelivr CDN is highly available with over 110 locations in the world.

You will then have access to the instantsearch function in the global scope (window).

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

function GameStoreApps() {

const [games, setGames] = useState([]);

useEffect(() => {

async function fetchTopGames() {

try {

</div>

function App() {

return (

</html>

function client() {

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

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

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

return new Response(

const SAMPLE_STORIES_KEY = "hn_realistic_sample_stories";

async function initializeSampleStories() {

const existingStories = await blob.getJSON(SAMPLE_STORIES_KEY);

if (!existingStories) {

A simple Discord Bot scaffolding, a slight rev on the one in the [valtown guide](https://docs.val.town/integrations/discord/how-to-make-a-discord-bot-hosted-24-7-for-free-in-/).

The `discordBot` function takes in an object where each key is a Discord command and the value is a function to handle the command. If the function returns a `Promise`, it will be handled as a deferred interaction with a [followup message](https://discord.com/developers/docs/interactions/receiving-and-responding#followup-messages).

Usage:

import { generateId, Scrypt } from "npm:lucia";

export async function createTables(userTable: string, sessionTable: string) {

return sqlite.batch([

FOREIGN KEY (user_id) REFERENCES ${userTable}(id)

async function safeExecute({ userTable, sessionTable, query, error }: {

userTable: string;

throw e;

export async function createUser({ userTable, sessionTable, username, password, github_id, google_id }: {

userTable: string;

return userId;

export async function getUser(

{ userTable, sessionTable, username, github_id, google_id }: {

return Object.fromEntries(zip(columns, rows[0])) as any;

export async function verifyPassword(hashed_password: string, password: string): Promise<boolean> {

return new Scrypt().verify(hashed_password, password);

"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36";

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

const { searchParams } = new URL(req.url);

return Response.redirect("https://www.google.com");

export function search(query: string, userAgent = DEFAULT_USER_AGENT) {

const searchUrl = createSearchUrl(query);

return getRedirectUrl(searchUrl, userAgent);

export function createSearchUrl(query: string, buttonName = "") {

const searchURL = new URL("https://www.google.com/search");

return searchURL.href;

export async function getRedirectUrl(searchUrl: string | URL, userAgent = DEFAULT_USER_AGENT) {

const resp = await ky.get(searchUrl, { headers: { "user-agent": userAgent } });

return redirectURL.href;

export async function signSearchUrl(searchUrl: string | URL) {

const signedURL = new URL(searchUrl);

return signedURL.href;

export async function getSearchParams(userAgent = DEFAULT_USER_AGENT) {

await initParser();

import { hackerNewsAuthors } from "https://esm.town/v/timwee/hackerNewsAuthors";

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

export async function hnFollowPollJob({ lastRunAt }) {

let posts = await hnLatestPosts({

authors: hackerNewsAuthors,

import { parseAuthorizationHeader } from "https://esm.town/v/pomdtr/parseAuthorizationHeader";

import { readmeToHtmlResponse } from "https://esm.town/v/pomdtr/readme";

async function createScreenshot(code: string) {

const apiUrl = "https://sourcecodeshots.com/api/image";

const resp = await fetch(apiUrl, {

throw new Error(await resp.text());

return resp.blob();

export default async function(req: Request) {

const url = new URL(req.url);

const [author, file] = url.pathname.slice(1).split("/");

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

export async function semanticSearchBlogPostPlot() {

const Plot = await import("https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.14/+esm");

const d3 = await import("https://cdn.jsdelivr.net/npm/d3@7/+esm");

date: string;

function App() {

const [posts, setPosts] = useState<BlogPost[]>([]);

</div>

function Sidebar({ posts, onSelectPost, onNewPost }: {

posts: BlogPost[];

</nav>

function HomePage({ posts }: { posts: BlogPost[] }) {

return (

</div>

function BlogPost({ post, onEdit }: { post: BlogPost; onEdit: () => void }) {

useEffect(() => {

</div>

function PostForm({ post, onSubmit, onClose }: {

post?: BlogPost;

</div>

function client() {

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

client();

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

const { blob } = await import("https://esm.town/v/std/blob");

<script>

function copyToClipboard(text) {

navigator.clipboard.writeText(text).then(() => {

A helper function to take an array and return a paginated response. This is useful when defining one's own folders for [pomdtr's vscode extension](https://github.com/pomdtr/valtown-vscode).

Usage:

const data = [...]

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

return paginatedResponse(req, data);