/** * This val creates a website called TownGen that generates optimized prompts for Hono and Deno based on user input. * It uses a simulated API for Hono and Deno features and incorporates a loading animation. * The prompt is tested and debugged using a simulated API before presenting to the user. * It includes a pill box multi-select for enhanced features from npm packages, organized into categories. * A large submit button and a 10-second animation are added when generating the prompt. * Categories have been updated to focus on specific areas as requested. * Clicking on categories now brings up relevant npm packages and features. * Added 25 small prompt phrases below the generate button to assist in website generation. * A welcome message from the Mayor of val.town is now included. * When submitted, it now iterates step by step in a tree structure on features for main functionality. * Sub-functionalities are now listed under the main functionality to help describe it better. */ /** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; // Simulated API for Hono and Deno features const features = { hono: [ "Routing", "Middleware", "Static file serving", "WebSocket support", "JWT authentication", "Validation", "Templating", ], deno: [ "TypeScript support", "Top-level await", "ES modules", "Standard library", "Built-in testing", "Permissions system", "Web standard APIs", ], }; const categoryIcons = { frontend: { icon: "🎨", items: ["Material UI", "Bootstrap", "Tailwind CSS", "Styled Components", "CSS Modules", "Sass/SCSS", "CSS-in-JS"], }, backend: { icon: "🖧", items: ["GraphQL", "RESTful API", "WebSockets", "gRPC", "Microservices", "Serverless", "Event-driven"], }, database: { icon: "💾", items: ["sqlite", "PostgreSQL", "MySQL", "Redis", "Cassandra", "Elasticsearch", "DynamoDB"], }, tools: { icon: "🪚", items: ["obsidian", "pinokio", "excalidraw automate", "freeform"], }, devops: { icon: "🏗️", items: ["Monolithic", "Microservices", "Serverless", "Event-driven", "Layered", "Hexagonal", "Modular Monolith"], }, testing: { icon: "🧪", items: ["Unit Testing", "Integration Testing", "E2E Testing", "TDD", "BDD", "Load Testing", "Security Testing"], }, security: { icon: "🔒", items: ["ports", "Vault", "Encryption", "2FA", "OAuth", "JWT", "HTTPS"], }, "3d": { icon: "🧊", items: ["Three.js", "WebGL", "GeoJSON", "CityJSON", "Blender", "aframe"], }, design: { icon: "✏️", items: ["excalidraw", "mapshaper", "comfyui", "sketchup", "blender", "krita"], }, content: { icon: "📝", items: ["Blog", "Article", "Podcast", "Portfolio", "CMS", "Markdown"], }, automation: { icon: "🤖", items: ["CI/CD", "Task Runners", "Workflow Automation", "Scripting", "Cron Jobs", "Chatbots", "RPA"], }, other: { icon: "🔥", items: [ "cracktro loader", "keygen", "Richard Stallman Seal of Approval", "pickle dump", "crud chron", "Chatbots", "RPA", ], }, }; const npmPackages = { frontend: [ "react", "vue", "angular", "svelte", "emotion", "styled-components", "sass", "@material-ui/core", "bootstrap", "tailwindcss", "bulma", "foundation-sites", ], backend: [ "express", "koa", "fastify", "nest", "apollo-server", "graphql", "socket.io", "grpc", "microservices", "serverless", "aws-sdk", "azure-functions", ], database: [ "mongoose", "sequelize", "typeorm", "prisma", "knex", "pg", "mysql2", "redis", "cassandra-driver", "elasticsearch", "aws-sdk", ], devops: [ "docker", "kubernetes", "pm2", "nodemon", "forever", "babel", "webpack", "rollup", "parcel", "gulp", "grunt", ], testing: [ "jest", "mocha", "chai", "jasmine", "karma", "cypress", "puppeteer", "selenium-webdriver", "supertest", "artillery", ], security: [ "bcrypt", "jsonwebtoken", "passport", "helmet", "cors", "oauth", "https", "crypto-js", "node-vault", "keycloak-connect", ], "3d": [ "three", "babylon.js", "aframe", "react-three-fiber", "cannon-es", "ammo.js", "geojson", "cityjson", "cesium", ], design: [ "ora processing", "sketch-js", "---", "svg.js", "paper.js", "fabric.js", "p5.js", "d3", "chart.js", "plotly.js", ], content: [ "contentful", "strapi", "ghost", "markdown-it", "remark", "rehype", "showdown", "turndown", "unified", "gray-matter", ], automation: [ "puppeteer", "selenium-webdriver", "robotjs", "nut.js", "node-cron", "agenda", "bull", "node-schedule", "husky", "lint-staged", ], other: [ "puppeteer", "selenium-webdriver", "robotjs", "nut.js", "node-cron", "agenda", "bull", "node-schedule", "husky", "lint-staged", ], }; const promptPhrases = [ "Respond with a valid unified diff only", "Ensure packages available", "Use semantic HTML5 elements", "Implement responsive design", "Add accessibility features", "Optimize for performance", "Include SEO best practices", "Implement progressive enhancement", "Use modern CSS techniques", "Add client-side form validation", "Implement lazy loading for images", "Use CSS Grid for layout", "Use CSS flex for layout", "Add dark mode support", "Implement infinite scrolling", "Add social media sharing buttons", "Implement a search feature", "Add internationalization support", "CSS animations for transitions", "Implement a responsive navigation menu", "Add a contact form with validation", "Implement a custom 404 error page", "Add splash page", "Add excessive emojis", "Use Web Storage API for local data", "Add a cookie consent banner", "Implement a progress bar for long forms", "Use Web Workers for background tasks", "Ensure it works properly in both server and client environments", "Add offline support with Service Workers", ]; function App() { const [idea, setIdea] = useState(""); const [prompt, setPrompt] = useState(""); const [loading, setLoading] = useState(false); const [progress, setProgress] = useState(0); const [selectedFeatures, setSelectedFeatures] = useState([]); const [animationActive, setAnimationActive] = useState(false); const [activeCategory, setActiveCategory] = useState(null); const [selectedPromptPhrases, setSelectedPromptPhrases] = useState([]); const [featureTree, setFeatureTree] = useState([]); const generatePrompt = async () => { setLoading(true); setProgress(0); setAnimationActive(true); setFeatureTree([]); // Simulated prompt generation process with feature tree iteration for (let i = 0; i < 10; i++) { await new Promise(resolve => setTimeout(resolve, 1000)); setProgress((prev) => prev + 10); setFeatureTree(prev => [...prev, `Step ${i + 1}: ${generateFeatureStep(i)}`]); } const subFunctionalities = generateSubFunctionalities(idea); const generatedPrompt = `Create a Hono application for Deno with the following features: 1. Main functionality: ${idea} Sub-functionalities: ${subFunctionalities.map(sub => ` - ${sub}`).join("\n")} 2. Incorporate Hono features: ${features.hono.map(feature => `- ${feature}`).join("\n ")} 3. Leverage Deno capabilities: ${features.deno.map(feature => `- ${feature}`).join("\n ")} 4. Implement RESTful API endpoints 5. Add error handling and logging 6. Include unit tests using Deno's built-in testing framework 7. Implement CORS middleware for cross-origin requests 8. Use environment variables for configuration 9. Enhanced features from npm packages: ${selectedFeatures.map(feature => `- ${feature}`).join("\n ")} 10. Additional requirements: ${selectedPromptPhrases.map(phrase => `- ${phrase}`).join("\n ")} 11. Feature tree: ${featureTree.map(step => `- ${step}`).join("\n ")} Please generate TypeScript code for a Hono application running on Deno that implements these features.`; // Simulated API call for testing and debugging const debuggedPrompt = await simulateDebugAPI(generatedPrompt); setPrompt(debuggedPrompt); setLoading(false); setAnimationActive(false); }; const generateFeatureStep = (step: number) => { const features = [ "Initialize project structure", "Set up Hono router", "Implement main functionality logic", "Add database integration", "Implement authentication system", "Set up API endpoints", "Add error handling and logging", "Implement unit tests", "Set up CORS middleware", "Configure environment variables", ]; return features[step] || "Finalize and optimize"; }; const generateSubFunctionalities = (mainIdea: string) => { // This is a simple example. In a real-world scenario, you might use AI or a more sophisticated algorithm const commonSubFunctionalities = [ "User authentication and authorization", "Data persistence and retrieval", "API integration", "Error handling and logging", "Performance optimization", ]; const specificSubFunctionalities = mainIdea.split(" ") .filter(word => word.length > 3) .map(word => `${word.charAt(0).toUpperCase() + word.slice(1)} management`); return [...new Set([...commonSubFunctionalities, ...specificSubFunctionalities])].slice(0, 5); }; const simulateDebugAPI = async (prompt: string) => { // Simulated API call for testing and debugging await new Promise(resolve => setTimeout(resolve, 2000)); return prompt + "\n\nNote: This prompt has been tested and debugged for Hono and Deno compatibility."; }; const toggleFeature = (feature: string) => { setSelectedFeatures(prev => prev.includes(feature) ? prev.filter(f => f !== feature) : [...prev, feature] ); }; const toggleCategory = (category: string) => { setActiveCategory(prev => prev === category ? null : category); }; const togglePromptPhrase = (phrase: string) => { setSelectedPromptPhrases(prev => prev.includes(phrase) ? prev.filter(p => p !== phrase) : [...prev, phrase] ); }; useEffect(() => { if (animationActive) { document.body.classList.add("animation-active"); } else { document.body.classList.remove("animation-active"); } }, [animationActive]); return (

TownGen

Welcome to TownGen!

Greetings, esteemed visitor! As the Mayor of val.town, it brings me great joy to welcome you to TownGen. Here, we empower you to build the future of web development val.town. Let your creativity flourish and construct digital marvels that will shape our town and beyond. Happy coding!

{Object.entries(categoryIcons).slice(0, 5).map(([category, { icon, items }]) => (

toggleCategory(category)} style={{ cursor: "pointer" }} > {icon} {category}

{activeCategory === category && (

Relevant npm packages:

{pkg}

)} {items.map(feature => ( ))}

))}

setIdea(e.target.value)}
            placeholder="Enter your val.town application idea"
            rows={4}
          />
          <button className="generate-button" onClick={generatePrompt} disabled={loading || !idea}>
            Generate Optimized Prompt
          </button>
          <div className="prompt-phrases">
            <h3>Additional Requirements:</h3>
            {promptPhrases.map(phrase => (
              <button
                key={phrase}
                className={`pill ${selectedPromptPhrases.includes(phrase) ? "selected" : ""}`}
                onClick={() => togglePromptPhrase(phrase)}
              >
                {phrase}
              </button>
            ))}
          </div>
          {loading && (
            <div className="loading">
              <div className="spinner"></div>
              <p>Generating prompt: {progress}% complete</p>
              <ul className="feature-tree">
                {featureTree.map((step, index) => <li key={index}>{step}</li>)}
              </ul>
            </div>
          )}
          {prompt && (
            <div className="result">
              <h2>Generated Prompt:</h2>
              <pre>{prompt}</pre>
            </div>
          )}
        </div>
        <div className="right-categories">
          {Object.entries(categoryIcons).slice(5).map(([category, { icon, items }]) => (
            <div key={category} className="category">
              <h3
                onClick={() =>
                  toggleCategory(category)}
                style={{ cursor: "pointer" }}
              >
                {icon} {category}
              </h3>
              {activeCategory === category && (
                <div className="npm-packages">
                  <h4>Relevant npm packages:</h4>
                  <ul>
                    {npmPackages[category as keyof typeof npmPackages].map(pkg => <li key={pkg}>{pkg}</li>)}
                  </ul>
                </div>
              )}
              {items.map(feature => (
                <button
                  key={feature}
                  className={`pill ${selectedFeatures.includes(feature) ? "selected" : ""}`}
                  onClick={() => toggleFeature(feature)}
                >
                  {feature}
                </button>
              ))}
            </div>
          ))}
        </div>
      </div>
      <a
        href={import.meta.url.replace("esm.town", "val.town")}
        target="_blank"
        rel="noopener noreferrer"
        className="view-source"
      >
        View Source
      </a>
    </div>
  );
}

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

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

async function server(request: Request): Promise<Response> {
  return new Response(
    `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>TownGen - Val Generator</title>
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `,
    {
      headers: { "content-type": "text/html" },
    },
  );
}

const css = `
body {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  color: #333;
  transition: background-color 0.5s ease;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h1, h2, h3, h4 {
  font-weight: 600;
}

h1 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 20px;
  font-size: 2.5em;
}

.welcome-message {
  background-color: #e8f5e9;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.welcome-message h2 {
  color: #2e7d32;
  margin-top: 0;
}

.welcome-message p {
  color: #1b5e20;
}

.main-content {
  display: flex;
  justify-content: space-between;
}

.left-categories, .right-categories {
  width: 25%;
}

.center-content {
  width: 50%;
}

textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
}

.generate-button {
  display: block;
  width: 100%;
  padding: 20px;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 24px;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.generate-button:hover {
  background-color: #2980b9;
  transform: scale(1.05);
}

.generate-button:disabled {
  background-color: #bdc3c7;
  cursor: not-allowed;
}

.loading {
  text-align: center;
  margin-top: 20px;
}

.spinner {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.result {
  margin-top: 30px;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
  font-family: 'Courier New', Courier, monospace;
}

.view-source {
  display: inline-block;
  margin-top: 20px;
  padding: 8px 15px;
  background-color: #2ecc71;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.view-source:hover {
  background-color: #27ae60;
}

.category {
  margin-bottom: 20px;
}

.category h3 {
  margin-bottom: 10px;
}

.pill {
  background-color: #ecf0f1;
  border: none;
  border-radius: 20px;
  padding: 8px 15px;
  margin: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.pill:hover {
  background-color: #bdc3c7;
}

.pill.selected {
  background-color: #3498db;
  color: white;
}

.npm-packages {
  background-color: #f8f9fa;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.npm-packages h4 {
  margin-top: 0;
}

.npm-packages ul {
  list-style-type: none;
  padding-left: 0;
}

.npm-packages li {
  font-size: 14px;
  margin-bottom: 5px;
}

.prompt-phrases {
  margin-top: 20px;
}

.prompt-phrases h3 {
  margin-bottom: 10px;
}

.feature-tree {
  list-style-type: none;
  padding-left: 0;
  text-align: left;
}

.feature-tree li {
  margin-bottom: 5px;
  padding-left: 20px;
  position: relative;
}

.feature-tree li::before {
  content: "🌳";
  position: absolute;
  left: 0;
  top: 0;
}

@media (max-width: 1000px) {
  .main-content {
    flex-direction: column;
  }
  
  .left-categories, .right-categories, .center-content {
    width: 100%;
  }
}

@keyframes colorChange {
  0% { background-color: #f4f4f4; }
  50% { background-color: #e0f7fa; }
  100% { background-color: #f4f4f4; }
}

.animation-active {
  animation: colorChange 10s ease infinite;
}

@media (max-width: 600px) {
  .container {
    padding: 10px;
  }
  
  .pill {
    font-size: 12px;
    padding: 6px 12px;
  }
  
  .generate-button {
    font-size: 20px;
    padding: 15px;
  }
}
`;

export default server;</article></body></html>

townGen

Versions

v0