// This val creates a Lorem Ipsum generator that outputs in markdown format with a copy to clipboard button. // It uses the 'lorem-ipsum' npm package for text generation and React for the UI. /** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { LoremIpsum } from "https://esm.sh/lorem-ipsum"; function App() { const [markdown, setMarkdown] = useState(""); const [copied, setCopied] = useState(false); const generateLoremIpsum = () => { const lorem = new LoremIpsum({ sentencesPerParagraph: { max: 8, min: 4 }, wordsPerSentence: { max: 16, min: 4 } }); const paragraphs = lorem.generateParagraphs(3); const markdownText = paragraphs.split('\n').map(p => `## ${lorem.generateWords(3)}\n\n${p}`).join('\n\n'); setMarkdown(markdownText); setCopied(false); }; const copyToClipboard = () => { navigator.clipboard.writeText(markdown).then(() => { setCopied(true); setTimeout(() => setCopied(false), 2000); }); }; return (

Lorem Ipsum Markdown Generator

{markdown && (

{markdown}

)}

View source on Val Town

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Lorem Ipsum Markdown Generator

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: 0 auto; padding: 20px; } .container { display: flex; flex-direction: column; align-items: center; } h1 { color: #2c3e50; } button { background-color: #3498db; color: white; border: none; padding: 10px 20px; margin: 10px 0; cursor: pointer; font-size: 16px; border-radius: 5px; } button:hover { background-color: #2980b9; } .output { width: 100%; margin-top: 20px; } pre { background-color: #f8f8f8; border: 1px solid #ddd; border-radius: 5px; padding: 15px; white-space: pre-wrap; word-wrap: break-word; } .footer { margin-top: 20px; font-size: 14px; color: #7f8c8d; } .footer a { color: #3498db; text-decoration: none; } .footer a:hover { text-decoration: underline; } `;

loremIpsumMarkdownGenerator

Versions

v0