Forked from all/townGen
Public
HTTP
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/**
* 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: [