\n \n

\n\n \n \n\n

\n \n

background

\n \n

materialType

\n \n

colorPalette

\n \n

pixelSize

\n \n

outlineWidth

\n \n

enableDithering

\n \n

ditheringStrength

\n \n

ditheringScale

\n \n

bayerSize

\n \n

colorLevels

\n \n

rotationSpeed

\n \n

floatSpeed

\n \n

floatAmount

\n \n

\n \n",[],[181,188],[181],{"_104":199,"_95":200,"_153":201,"_155":-5,"_156":138,"_157":202,"_159":160,"_106":203,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":204,"_98":212},"087a1562-3bba-11f0-953e-9e149126039e","utils","4fb1fbdc-ab43-4753-b8fc-588d7e249ad4",3,["D",1748433064060],[205],{"_104":206,"_95":171,"_153":207,"_155":201,"_156":138,"_157":202,"_159":160,"_106":208,"_100":32,"_162":174,"_164":209,"_165":22,"_166":-5,"_167":210,"_98":211},"0879f118-3bba-11f0-953e-9e149126039e","0879f1cc-3bba-11f0-953e-9e149126039e",["D",1748433064060],"import { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\ninterface TemplateData {\n title?: string;\n head?: string;\n content: string;\n scripts?: string;\n}\n\n/**\n * Render HTML using a template with variable substitution\n */\nexport async function renderTemplate(templatePath: string, data: TemplateData): Promise {\n let html = await readFile(templatePath, import.meta.url);\n \n // Default values\n const templateData = {\n title: \"My App\",\n head: \"\",\n scripts: \"\",\n ...data\n };\n \n // Replace template variables\n for (const [key, value] of Object.entries(templateData)) {\n const placeholder = `{{${key}}}`;\n html = html.replaceAll(placeholder, value || \"\");\n }\n \n return html;\n}\n\n/**\n * Generate a complete HTML page with common patterns\n */\nexport async function generatePage(options: {\n title: string;\n content: string;\n includeReact?: boolean;\n customCSS?: string;\n customJS?: string;\n}): Promise {\n const { title, content, includeReact = false, customCSS = \"\", customJS = \"\" } = options;\n \n let head = customCSS ? `` : \"\";\n let scripts = customJS ? `` : \"\";\n \n if (includeReact) {\n head += `\n `;\n }\n \n return renderTemplate(\"/templates/base.html\", {\n title,\n head,\n content,\n scripts\n });\n}\n\n/**\n * Create a downloadable HTML file response\n */\nexport function createHTMLDownload(html: string, filename: string = \"export.html\"): Response {\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n \"Content-Disposition\": `attachment; filename=\"${filename}\"`\n }\n });\n}\n\n/**\n * Minify HTML by removing unnecessary whitespace\n */\nexport function minifyHTML(html: string): string {\n return html\n .replace(/\\s+/g, ' ')\n .replace(/>\\s+<')\n .trim();\n}",[],[200,171],[200],{"_104":214,"_95":215,"_153":216,"_155":-5,"_156":138,"_157":217,"_159":160,"_106":218,"_100":32,"_162":193,"_164":219,"_165":22,"_166":-5,"_167":220,"_98":221},"3348ecaa-3bba-11f0-8e23-9e149126039e","README.md","3348ed4a-3bba-11f0-8e23-9e149126039e",7,["D",1748433135882],"# HTML Export System\n\nA comprehensive HTML generation and export system for Val Town with multiple approaches for different use cases.\n\n## Features\n\n- 🎨 **Template-based HTML generation** with variable substitution\n- 🧩 **Component-based HTML building** for programmatic generation\n- 📱 **Responsive design** with TailwindCSS integration\n- ⚛️ **React app export** support\n- 📦 **Minification** for optimized output\n- 💾 **Direct download** functionality\n- 🎯 **Custom styling** and scripting options\n\n## Quick Start\n\nVisit the main endpoint to see available export options:\n- `/` - Main dashboard with export options\n- `/export/simple` - Download a simple HTML page\n- `/export/react` - Download a React application\n- `/export/custom` - Form to create custom HTML exports\n\n## Usage Examples\n\n### Template-Based Generation\n\n```typescript\nimport { renderTemplate, generatePage } from \"./utils/html.ts\";\n\n// Using templates\nconst html = await renderTemplate(\"/templates/base.html\", {\n title: \"My Page\",\n content: \"

Hello World

\",\n scripts: \"\"\n});\n\n// Using the page generator\nconst page = await generatePage({\n title: \"My App\",\n content: \"

Content here

\",\n includeReact: true,\n customCSS: \"body { background: #f0f0f0; }\"\n});\n```\n\n### Component-Based Generation\n\n```typescript\nimport { HTML, renderComponent, createDocument } from \"./components/html.ts\";\n\n// Build components\nconst header = HTML.h1(\"Welcome\", { class: \"text-3xl font-bold\" });\nconst paragraph = HTML.p(\"This is a paragraph\", { class: \"text-gray-600\" });\nconst button = HTML.button(\"Click me\", { \n class: \"bg-blue-500 text-white px-4 py-2 rounded\",\n onclick: \"alert('Hello!')\"\n});\n\n// Create complete document\nconst html = createDocument({\n title: \"Component Example\",\n body: [\n HTML.div({ class: \"container mx-auto p-8\" }, [\n header,\n paragraph,\n button\n ])\n ]\n});\n```\n\n### Export with Download\n\n```typescript\nimport { createHTMLDownload, minifyHTML } from \"./utils/html.ts\";\n\n// Create downloadable response\nconst html = await generatePage({\n title: \"Export Example\",\n content: \"

Downloaded Content

\"\n});\n\nreturn createHTMLDownload(minifyHTML(html), \"my-export.html\");\n```\n\n## File Structure\n\n```\n├── main.tsx # HTTP val with export endpoints\n├── templates/\n│ └── base.html # Base HTML template\n├── utils/\n│ └── html.ts # Template utilities\n├── components/\n│ └── html.ts # Component-based HTML generation\n└── README.md # This file\n```\n\n## API Endpoints\n\n### GET `/`\nMain dashboard showing available export options.\n\n### GET `/export/simple`\nDownloads a simple HTML page with current timestamp.\n\n### GET `/export/react`\nDownloads a React counter application as a standalone HTML file.\n\n### GET `/export/custom`\nShows a form for creating custom HTML exports.\n\n### POST `/export/custom`\nProcesses form data and generates custom HTML download.\n\n**Form Parameters:**\n- `title` - Page title\n- `content` - HTML content\n- `includeStyles` - Whether to include custom CSS\n\n## Template Variables\n\nThe base template supports these variables:\n- `{{title}}` - Page title\n- `{{head}}` - Additional head content\n- `{{content}}` - Main page content \n- `{{scripts}}` - JavaScript content\n\n## Customization\n\n### Adding New Templates\n\n1. Create a new HTML file in `/templates/`\n2. Use `{{variable}}` syntax for dynamic content\n3. Load with `renderTemplate()`\n\n### Custom Components\n\nExtend the `HTML` object in `/components/html.ts`:\n\n```typescript\nexport const HTML = {\n // ... existing components\n \n customCard: (title: string, content: string): HTMLComponent => ({\n tag: \"div\",\n attributes: { class: \"bg-white p-6 rounded-lg shadow\" },\n children: [\n HTML.h3(title, { class: \"text-lg font-semibold mb-2\" }),\n HTML.p(content, { class: \"text-gray-600\" })\n ]\n })\n};\n```\n\n## Best Practices\n\n1. **Use templates** for consistent layouts\n2. **Minify HTML** for production exports\n3. **Pin React versions** when including React\n4. **Validate user input** in custom exports\n5. **Use semantic HTML** for accessibility\n6. **Include meta tags** for proper rendering\n\n## Troubleshooting\n\n- **Template not found**: Ensure template files exist in `/templates/`\n- **React not loading**: Check that versions are pinned to 18.2.0\n- **Styles not applying**: Verify TailwindCSS script is included\n- **Download not working**: Check Content-Disposition headers",[],[215],{"_104":223,"_95":99,"_153":224,"_155":-5,"_156":138,"_157":101,"_159":22,"_106":225,"_100":226,"_162":227,"_164":228,"_165":22,"_166":-5,"_167":229,"_98":230},"f91edd2c-3bba-11f0-ab61-9e149126039e","d70a565e-3bb9-11f0-90db-9e149126039e",["D",1748433467791],5,"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { createHTMLDownload, generatePage, minifyHTML, renderTemplate } from \"./utils/html.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Example: Generate a simple page\napp.get(\"/\", async (c) => {\n const html = await generatePage({\n title: \"HTML Export Demo\",\n content: `\n

HTML Export System

\n \n Export Simple HTML\n \n \n Export React App\n \n \n Export Custom Page\n \n

\n `,\n });\n\n return c.html(html);\n});\n\nexport default app.fetch;",[],[99],"files",[150,169,179,186,198,205,213,222],"counts",{"_235":32,"_236":192,"_237":32,"_238":239},"pulls","branches","forks","envVars",{"_240":32,"_241":32},"count","emptyCount","contents",[],{"_104":223,"_95":99,"_153":224,"_155":-5,"_156":138,"_157":101,"_159":22,"_106":245,"_100":226,"_162":227,"_164":228,"_165":22,"_166":-5,"_98":246},["D",1748433467791],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":255,"_148":260,"_231":285,"_193":286,"_242":288,"_289":-5,"_290":-5,"_291":-5,"_292":-5,"_181":293},{"_104":105,"_95":96,"_106":256,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":257,"_132":258,"_135":259,"_147":22},["D",1748432981111],{"_93":94,"_130":131},{"_93":94,"_134":131,"_14":114},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[261,267,273,279,282],{"_104":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":158,"_159":160,"_106":161,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":262,"_98":266},[263],{"_104":170,"_95":171,"_153":172,"_155":154,"_156":138,"_157":158,"_159":160,"_106":173,"_100":32,"_162":174,"_164":175,"_165":22,"_166":-5,"_167":264,"_98":265},[],[152,171],[152],{"_104":180,"_95":181,"_153":182,"_155":-5,"_156":138,"_157":183,"_159":160,"_106":184,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":268,"_98":272},[269],{"_104":187,"_95":188,"_153":189,"_155":182,"_156":138,"_157":190,"_159":160,"_106":191,"_100":192,"_162":193,"_164":194,"_165":22,"_166":-5,"_167":270,"_98":271},[],[181,188],[181],{"_104":199,"_95":200,"_153":201,"_155":-5,"_156":138,"_157":202,"_159":160,"_106":203,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":274,"_98":278},[275],{"_104":206,"_95":171,"_153":207,"_155":201,"_156":138,"_157":202,"_159":160,"_106":208,"_100":32,"_162":174,"_164":209,"_165":22,"_166":-5,"_167":276,"_98":277},[],[200,171],[200],{"_104":214,"_95":215,"_153":216,"_155":-5,"_156":138,"_157":217,"_159":160,"_106":218,"_100":32,"_162":193,"_164":219,"_165":22,"_166":-5,"_167":280,"_98":281},[],[215],{"_104":223,"_95":99,"_153":224,"_155":-5,"_156":138,"_157":101,"_159":22,"_106":225,"_100":226,"_162":227,"_164":228,"_165":22,"_166":-5,"_167":283,"_98":284},[],[99],[261,263,267,269,273,275,279,282],{"_104":223,"_95":99,"_153":224,"_155":-5,"_156":138,"_157":101,"_159":22,"_106":245,"_100":226,"_162":227,"_164":228,"_165":22,"_166":-5,"_98":287},[99],[],"upstream","pull","ahead","behind",[],"actionData","errors"]

dhvanil

untitled-421