/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { letterVariations } from "https://esm.town/v/karkowg/domainSantaLetterVariations"; function isValidDomain(domain) { const domainRegex = /^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]$/i; return domainRegex.test(domain); } function App() { const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [domain, setDomain] = useState(""); const [letter, setLetter] = useState(""); const [submitted, setSubmitted] = useState(false); const [domainError, setDomainError] = useState(""); const [selectedLetterIndex, setSelectedLetterIndex] = useState(0); const [usedLetterIndices, setUsedLetterIndices] = useState(new Set()); useEffect(() => { selectRandomLetter(); }, []); useEffect(() => { setLetter(letterVariations[selectedLetterIndex](name || "[Your Name]", domain || "[your dream domain]")); }, [name, domain, selectedLetterIndex]); const selectRandomLetter = () => { let availableIndices = Array.from({ length: letterVariations.length }, (_, i) => i) .filter(i => !usedLetterIndices.has(i)); if (availableIndices.length === 0) { setUsedLetterIndices(new Set()); availableIndices = Array.from({ length: letterVariations.length }, (_, i) => i); } const randomIndex = availableIndices[Math.floor(Math.random() * availableIndices.length)]; setSelectedLetterIndex(randomIndex); setUsedLetterIndices(prev => new Set(prev).add(randomIndex)); }; const handleDomainChange = (e) => { const newDomain = e.target.value; setDomain(newDomain); if (newDomain && !isValidDomain(newDomain)) { setDomainError("Please enter a valid domain name."); } else { setDomainError(""); } }; const handleSubmit = async (e) => { e.preventDefault(); if (domainError) { return; } const response = await fetch("/submit", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name, email, domain, letter }), }); if (response.ok) { setSubmitted(true); } }; const handleCreateNewLetter = () => { setSubmitted(false); // setName(""); // setEmail(""); setDomain(""); selectRandomLetter(); }; if (submitted) { return (

🎄 Thank you for your letter to Domain Santa! 🎅

Your Christmas domain wish has been sent to Domain Santa's email. Keep coding and believing!

~~Chris Morrell~~ Domain Santa{" "} is an all-around good guy in the Laravel community who's been building{" "} Verbs, a Laravel-y event-sourcing package for the average developer. At some point, he used to own 700 domains (listen to{" "} this podcast ), and more recently he couldn't bear seeing his friend use a domain for his app that wasn't the perfect one, so he had to go and buy it for him (btw, you should try{" "} How Tall Is ). As a funny bit, I have built{" "} Domain Santa . Yours truly,{" "} @gksh.dev .

Hahahahaha this just made my day.

—{" "} Chris Morrell (@cmorrell.com) November 28, 2024 at 8:01 PM

); } return (

🎄 Write to Domain Santa 🎅

setName(e.target.value)} required className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" /> setEmail(e.target.value)} required className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" />

{domainError &&

{domainError}

}

Your Letter to Domain Santa

Feel free to edit the letter or write your own from scratch!

setLetter(e.target.value)}
            required
            className="w-full p-3 border border-gray-300 rounded-md h-64 resize-y focus:outline-none focus:ring-2 focus:ring-red-500"
          />
        </div>
        <button
          type="submit"
          className="w-full bg-red-600 text-white py-3 px-4 rounded-md hover:bg-red-700 transition duration-300 font-christmas text-xl"
          disabled={!!domainError}
        >
          Send to <del>Chris Morell</del> <ins>Domain Santa</ins>'s elves
        </button>
      </form>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}

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

export default async function server(request: Request): Promise<Response> {
  if (request.method === "POST" && new URL(request.url).pathname === "/submit") {
    const { email } = await import("https://esm.town/v/std/email");
    const { name, email: senderEmail, domain, letter } = await request.json();

await email({
      subject: `Domain Santa Letter from ${name}`,
      text: `Name: ${name}\nEmail: ${senderEmail}\nDesired Domain: ${domain}\n\nLetter:\n${letter}`,
      html: `
        <h1>Domain Santa Letter</h1>
        <p><strong>Name:</strong> ${name}</p>
        <p><strong>Email:</strong> ${senderEmail}</p>
        <p><strong>Desired Domain:</strong> ${domain}</p>
        <h2>Letter:</h2>
        <pre>${letter}</pre>
      `,
    });

return new Response(JSON.stringify({ success: true }), {
      headers: { "Content-Type": "application/json" },
    });
  }

return new Response(
    `
    <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <title>Domain Santa's Christmas Wish</title>
        <meta name="description" content="Send your domain wishes to Domain Santa cmorrel.">
        
        
        <meta property="og:url" content="https://karkowg-domainsanta.web.val.run/">
        <meta property="og:type" content="website">
        <meta property="og:title" content="Domain Santa's Christmas Wish">
        <meta property="og:description" content="Send your domain wishes to Domain Santa cmorrel.">
        <meta property="og:image" content="">
        
        
        <meta name="twitter:card" content="summary_large_image">
        <meta property="twitter:domain" content="karkowg-domainsanta.web.val.run">
        <meta property="twitter:url" content="https://karkowg-domainsanta.web.val.run/">
        <meta name="twitter:title" content="Domain Santa's Christmas Wish">
        <meta name="twitter:description" content="Send your domain wishes to Domain Santa cmorrel.">
        <meta name="twitter:image" content="">

domainSanta

Version 7