1/**
2 * This program creates a text storage and management application with a dynamic CSS theme switcher.
3 * It uses Val Town's SQLite for persistence and React for the UI.
4 * The app allows users to add, view, edit, and delete text entries with titles, tags, and categories.
5 * It includes a header with navigation, search bar, filters, a tabbed template page with 100 templates,
7 */
8
9/** @jsxImportSource https://esm.sh/react */
10import React, { useState, useEffect } from "https://esm.sh/react";
11import { createRoot } from "https://esm.sh/react-dom/client";
12
13interface TextEntry {
81 };
82
83 const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
84 event.preventDefault();
85 const form = event.currentTarget;
111 };
112
113 const handleTemplateSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
114 event.preventDefault();
115 const form = event.currentTarget;
4 */
5
6/** @jsxImportSource https://esm.sh/react */
7import React, { useState, useRef, useEffect } from "https://esm.sh/react";
8import { createRoot } from "https://esm.sh/react-dom/client";
9
10interface MemeTemplate {
134 };
135
136 const handleSubmit = (e: React.FormEvent) => {
137 e.preventDefault();
138 generateMeme();
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {
12 */
13
14/** @jsxImportSource https://esm.sh/react */
15import React, { useState, useEffect, useRef } from "https://esm.sh/react";
16import { createRoot } from "https://esm.sh/react-dom/client";
17import jsQR from "https://esm.sh/jsqr";
18
1/** @jsxImportSource https://esm.sh/react */
2import React, { useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4import type { User } from "https://esm.town/v/stevekrouse/zod_demo_shared";
5
9 const [serverResponse, setServerResponse] = useState<string>("");
10
11 const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
12 const { name, value } = e.target;
13 setUser(prev => ({ ...prev, [name]: name === "age" ? parseInt(value) || 0 : value }));
14 };
15
16 const handleSubmit = async (e: React.FormEvent) => {
17 e.preventDefault();
18 setErrors({});
2
3* @stevekrouse/zod_demo_http (this val)
4* @stevekrouse/zod_demo_frontend (client-side react component)
5* @stevekrouse/zod_demo_shared (code that is imported in both vals, but only run on the backend)
6
1/**
2 * This val creates a simple web interface using Hono framework to convert HTML to Markdown.
3 * It uses HTMX for dynamic updates and Alpine.js for reactivity.
4 * The Turndown library is used for HTML to Markdown conversion.
5 * The interface includes two text areas (input and output) and buttons for conversion and copying.
141. The application uses the Hono framework to create a simple web server.
152. HTMX is used for handling AJAX requests without writing JavaScript.
163. Alpine.js provides reactivity for the clipboard functionality.
174. The Turndown library is used to convert HTML to Markdown.
18
2 * This val creates an enhanced NPM package explorer using the npm registry API.
3 * It displays a grid of npm packages with basic information, categories, and navigation.
4 * The approach uses React for the frontend and fetch for API calls.
5 * It includes a details view for each package, a link to the npm page, and category navigation.
6 */
7
8/** @jsxImportSource https://esm.sh/react */
9import React, { useState, useEffect } from "https://esm.sh/react";
10import { createRoot } from "https://esm.sh/react-dom/client";
11
12const ITEMS_PER_PAGE = 30;
1/**
2 * This app implements a "Would You Rather" game with a ranking system for answers and a progress bar.
3 * It uses React for the frontend and SQLite for persistent storage on the backend.
4 * The ranking system updates based on user choices and displays in the Answers tab.
5 * A progress bar is added to show completion of 20 questions.
6 */
7/** @jsxImportSource https://esm.sh/react */
8import React, { useCallback, useEffect, useState } from "https://esm.sh/react";
9import { createRoot } from "https://esm.sh/react-dom/client";
10import {
11 BrowserRouter as Router,
15 useLocation,
16 useNavigate,
17} from "https://esm.sh/react-router-dom";
18
19// Types
240 const [username, setUsername] = useState("");
241
242 const handleLogin = useCallback(async (e: React.FormEvent) => {
243 e.preventDefault();
244 const response = await fetch("/api/login", {
