/** @jsxImportSource https://esm.sh/react */ import confetti from "https://esm.sh/canvas-confetti@1.6.0"; import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const NAMING_OPTIONS = { ANIMAL: "animal", PLANT: "plant", ROOM: "room", COLOR: "color", WEATHER: "weather", FOOD: "food", EMOTION: "emotion", RANDOM: "random", }; function App() { const [createdValUrl, setCreatedValUrl] = useState(null); const [selectedOptions, setSelectedOptions] = useState([]); const [consoleInfo, setConsoleInfo] = useState([]); const [showPopup, setShowPopup] = useState(true); useEffect(() => { const originalConsoleLog = console.log; const originalConsoleInfo = console.info; const originalConsoleWarn = console.warn; const originalConsoleError = console.error; console.log = (...args) => { setConsoleInfo(prev => [...prev, { type: "log", message: args.join(" ") }]); originalConsoleLog.apply(console, args); }; console.info = (...args) => { setConsoleInfo(prev => [...prev, { type: "info", message: args.join(" ") }]); originalConsoleInfo.apply(console, args); }; console.warn = (...args) => { setConsoleInfo(prev => [...prev, { type: "warn", message: args.join(" ") }]); originalConsoleWarn.apply(console, args); }; console.error = (...args) => { setConsoleInfo(prev => [...prev, { type: "error", message: args.join(" ") }]); originalConsoleError.apply(console, args); }; return () => { console.log = originalConsoleLog; console.info = originalConsoleInfo; console.warn = originalConsoleWarn; console.error = originalConsoleError; }; }, []); const generateRandomName = (options) => { const animals = ["Lion", "Elephant", "Giraffe", "Penguin", "Koala", "Tiger", "Dolphin"]; const plants = ["Oak", "Rose", "Cactus", "Fern", "Tulip", "Bamboo", "Orchid"]; const rooms = ["Kitchen", "Bedroom", "Library", "Office", "Lounge", "Studio", "Gallery"]; const colors = ["Red", "Blue", "Green", "Yellow", "Purple", "Orange", "Pink"]; const weather = ["Sunny", "Rainy", "Cloudy", "Windy", "Stormy", "Snowy", "Foggy"]; const foods = ["Pizza", "Sushi", "Taco", "Burger", "Pasta", "Salad", "Curry"]; const emotions = ["Happy", "Sad", "Excited", "Calm", "Angry", "Surprised", "Curious"]; const getRandomFromArray = (arr) => arr[Math.floor(Math.random() * arr.length)]; let nameParts = []; options.forEach(option => { switch (option) { case NAMING_OPTIONS.ANIMAL: nameParts.push(getRandomFromArray(animals)); break; case NAMING_OPTIONS.PLANT: nameParts.push(getRandomFromArray(plants)); break; case NAMING_OPTIONS.ROOM: nameParts.push(getRandomFromArray(rooms)); break; case NAMING_OPTIONS.COLOR: nameParts.push(getRandomFromArray(colors)); break; case NAMING_OPTIONS.WEATHER: nameParts.push(getRandomFromArray(weather)); break; case NAMING_OPTIONS.FOOD: nameParts.push(getRandomFromArray(foods)); break; case NAMING_OPTIONS.EMOTION: nameParts.push(getRandomFromArray(emotions)); break; case NAMING_OPTIONS.RANDOM: nameParts.push(Math.random().toString(36).substring(2, 8)); break; } }); return nameParts.join(""); }; const toggleOption = (option, event) => { setSelectedOptions(prev => { if (prev.includes(option)) { return prev.filter(o => o !== option); } else { return [...prev, option]; } }); fireConfetti(event); }; const fireConfetti = (event) => { const rect = event.target.getBoundingClientRect(); const x = (rect.left + rect.right) / 2 / window.innerWidth; const y = (rect.top + rect.bottom) / 2 / window.innerHeight; confetti({ particleCount: 100, spread: 70, origin: { x, y }, }); }; const createNewVal = async (event) => { console.info("Creating new val..."); fireConfetti(event); const code = `import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo?v=29"; import { blob } from "https://esm.town/v/std/blob?v=12"; import { createExcalidraw } from "https://jsr.io/@smallweb/excalidraw/0.3.0/mod.ts"; import { join } from "jsr:@std/path@0.225.2"; const { name } = extractValInfo(import.meta.url); export default async function server(request: Request): Promise { const excalidraw = createExcalidraw({ store: { get: async (key) => { try { const res = await blob.get(join(name, key)); return new Uint8Array(await res.arrayBuffer()); } catch (e) { return null; } }, set: (key, value) => { return blob.set(join(name, key), value); }, }, }); return excalidraw(request); }`; const generatedName = `excali${generateRandomName(selectedOptions)}`; const response = await fetch("/create-val", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ code, name: generatedName }), }); if (response.ok) { const result = await response.json(); setCreatedValUrl(result.url); console.info(`New val created: ${result.url}`); } else { console.error("Failed to create new val"); } }; return (

{showPopup && (

Welcome to ExcaliVal Creator!

This tool allows you to create custom Excalidraw instances with unique names.

To get started:

Select one or more naming options from the pillbox below.
Click the "Create New Val" button to generate your Excalidraw instance.
Use the generated link to access your custom Excalidraw board!

)}

🎨 Unleash the ExcaliVal! 🚀

Create Excalidraw Val

{Object.entries(NAMING_OPTIONS).map(([key, option]) => ( ))}

{createdValUrl && (

New val created! View it here:{" "} {createdValUrl}

)}

Console Output

          {consoleInfo.map((info, index) => (
            
              [{info.type}] {info.message}
            
          ))}

View source:{" "} {import.meta.url.replace("esm.town", "val.town")}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { if (request.method === "POST" && new URL(request.url).pathname === "/create-val") { const { code, name } = await request.json(); // Create a new val using the Val Town API const response = await fetch("https://api.val.town/v1/vals", { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${Deno.env.get("VAL_TOWN_API_KEY")}`, }, body: JSON.stringify({ name, code, privacy: "unlisted", type: "http", }), }); if (response.ok) { const result = await response.json(); return Response.json({ url: `https://val.town/v/${result.author.username}/${result.name}` }); } else { return new Response("Failed to create new val", { status: 500 }); } } return new Response( ` ExcaliVal

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'); body { font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); margin: 0; padding: 0; min-height: 100vh; display: flex; justify-content: center; align-items: center; } .container { background-color: rgba(255, 255, 255, 0.9); border-radius: 20px; padding: 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); max-width: 800px; width: 100%; position: relative; overflow: hidden; } .splash { background-color: #FF6B6B; color: white; padding: 15px; border-radius: 10px; text-align: center; font-size: 1.2em; margin-bottom: 20px; animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 107, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); } } h1, h2 { color: #4A4A4A; text-align: center; } .pillbox { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; justify-content: center; } .pill { background-color: #f0f0f0; border: none; border-radius: 20px; padding: 10px 20px; cursor: pointer; transition: all 0.3s ease; font-size: 0.9em; } .pill:hover { background-color: #e0e0e0; transform: translateY(-2px); } .pill.active { background-color: #4ECDC4; color: white; } .create-button { background-color: #FF6B6B; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: block; font-size: 16px; margin: 20px auto; cursor: pointer; transition: all 0.3s ease; border-radius: 50px; } .create-button:hover { background-color: #FF8787; transform: scale(1.05); } a { color: #45B7D1; text-decoration: none; transition: color 0.3s ease; } a:hover { color: #FF6B6B; } .success-message { background-color: #4ECDC4; color: white; padding: 15px; border-radius: 10px; text-align: center; margin-top: 20px; } .console { background-color: #2C3E50; color: #ECF0F1; padding: 15px; border-radius: 10px; margin-top: 20px; } pre { margin: 0; white-space: pre-wrap; word-wrap: break-word; } .console-log { color: #ECF0F1; } .console-info { color: #3498DB; } .console-warn { color: #F1C40F; } .console-error { color: #E74C3C; } .footer { text-align: center; margin-top: 20px; font-size: 0.8em; color: #7F8C8D; } .popup-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; } .popup { background-color: white; padding: 30px; border-radius: 10px; max-width: 500px; width: 90%; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .popup h2 { color: #FF6B6B; margin-top: 0; } .popup p { margin-bottom: 15px; } .popup ol { margin-bottom: 20px; padding-left: 20px; } .popup button { background-color: #4ECDC4; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } .popup button:hover { background-color: #45B7D1; } `;

excaliVal