Moonshot Commons

\n {projects.map((p) => {\n const counts = { thinking: 0, resources: 0, funds: 0 };\n p.pledges.forEach((pl) => counts[pl.kind]++);\n return (\n

\n {p.emoji}\n {p.scale}\n

{p.title}

{p.pitch}

\n {(Object.keys(KIND_META) as Pledge[\"kind\"][]).map((k) => (\n \n {KIND_META[k].icon} {counts[k]}\n \n ))}\n

{p.pledges.length} people in · join them

\n {pl.name}\n \n {KIND_META[pl.kind].icon} {pl.detail}\n \n

\n \n

\n );\n })}\n

\n\n

✨ Propose a new moonshot

Dream big. The crazier, the better — someone out there has the skills.

\n \n \n \n

\n              <button type=\"submit\">Launch proposal 🚀</button>\n            </form>\n          </section>\n        </main>\n\n        <footer>\n          <p>Built on shared resources & collective imagination.</p>\n          <a href={import.meta.url.replace(\"esm.town\", \"val.town\")}>View source</a>\n        </footer>\n      </body>\n    </html>\n  );\n}\n\nexport default async function (req: Request): Promise<Response> {\n  const url = new URL(req.url);\n\n  if (req.method === \"POST\" && url.pathname === \"/pledge\") {\n    const form = await req.formData();\n    const projectId = String(form.get(\"projectId\") || \"\");\n    const projects = await getProjects();\n    const proj = projects.find((p) => p.id === projectId);\n    if (proj) {\n      proj.pledges.push({\n        name: String(form.get(\"name\") || \"Anonymous\").slice(0, 40),\n        kind: (String(form.get(\"kind\")) as Pledge[\"kind\"]) || \"thinking\",\n        detail: String(form.get(\"detail\") || \"\").slice(0, 80),\n      });\n      await blob.setJSON(STORE, projects);\n    }\n    return Response.redirect(url.origin + \"/\", 303);\n  }\n\n  if (req.method === \"POST\" && url.pathname === \"/propose\") {\n    const form = await req.formData();\n    const title = String(form.get(\"title\") || \"\").slice(0, 60);\n    const projects = await getProjects();\n    if (title.trim()) {\n      projects.unshift({\n        id: title.toLowerCase().replace(/[^a-z0-9]+/g, \"-\").slice(0, 40) + \"-\" + Date.now().toString(36),\n        title,\n        emoji: String(form.get(\"emoji\") || \"💡\").slice(0, 4) || \"💡\",\n        pitch: String(form.get(\"pitch\") || \"\").slice(0, 300),\n        scale: String(form.get(\"scale\") || \"Local\").slice(0, 30) || \"Local\",\n        pledges: [],\n      });\n      await blob.setJSON(STORE, projects);\n    }\n    return Response.redirect(url.origin + \"/\", 303);\n  }\n\n  const projects = await getProjects();\n  return new Response(\"<!DOCTYPE html>\" + renderToString(<Page projects={projects} />), {\n    headers: { \"content-type\": \"text/html; charset=utf-8\" },\n  });\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { renderToString } from \"https://esm.sh/react-dom@18.2.0/server\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst STORE = \"moonshot-commons-projects-v1\";\n\ntype Pledge = { name: string; kind: \"thinking\" | \"resources\" | \"funds\"; detail: string };\ntype Project = {\n  id: string;\n  title: string;\n  emoji: string;\n  pitch: string;\n  scale: string;\n  pledges: Pledge[];\n};\n\nconst SEED: Project[] = [\n  {\n    id: \"sahara-forest\",\n    title: \"Re-Green the Sahara\",\n    emoji: \"🌳\",\n    pitch: \"A continent-spanning lattice of solar-powered fog harvesters and seed drones that turn 1% of the desert green every year.\",\n    scale: \"Continental\",\n    pledges: [\n      { name: \"Amara\", kind: \"thinking\", detail: \"Hydrology modeling\" },\n      { name: \"Lin\", kind: \"resources\", detail: \"12 retired shipping containers\" },\n    ],\n  },\n  {\n    id: \"ocean-library\",\n    title: \"The Floating Library\",\n    emoji: \"📚\",\n    pitch: \"A self-sustaining flotilla of reading-rooms drifting between coastlines, carrying knowledge to communities without it.\",\n    scale: \"Ocean-wide\",\n    pledges: [{ name: \"Theo\", kind: \"funds\", detail: \"$500 / month\" }],\n  },\n  {\n    id: \"sky-bridge\",\n    title: \"The Living Sky-Bridge\",\n    emoji: \"🌉\",\n    pitch: \"A pedestrian bridge of grown mycelium and bamboo connecting two valley towns, glowing softly with bioluminescent algae.\",\n    scale: \"Regional\",\n    pledges: [\n      { name: \"Priya\", kind: \"thinking\", detail: \"Structural load math\" },\n      { name: \"Sam\", kind: \"resources\", detail: \"Mycelium starter cultures\" },\n      { name: \"Jo\", kind: \"funds\", detail: \"$1,200 seed fund\" },\n    ],\n  },\n];\n\nasync function getProjects(): Promise<Project[]> {\n  try {\n    const data = await blob.getJSON(STORE);\n    if (Array.isArray(data) && data.length) return data;\n  } catch (_) {}\n  await blob.setJSON(STORE, SEED);\n  return SEED;\n}\n\nconst KIND_META: Record<Pledge[\"kind\"], { label: string; icon: string; color: string }> = {\n  thinking: { label: \"Brainpower\", icon: \"🧠\", color: \"#7c3aed\" },\n  resources: { label: \"Resources\", icon: \"📦\", color: \"#0891b2\" },\n  funds: { label: \"Funds\", icon: \"💧\", color: \"#16a34a\" },\n};\n\nfunction Page({ projects }: { projects: Project[] }) {\n  return (\n    <html lang=\"en\">\n      <head>\n        <meta charSet=\"utf-8\" />\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n        <title>Moonshot Commons</title>\n        <link rel=\"icon\" href=\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌍</text></svg>\" />\n        <link rel=\"stylesheet\" href=\"/style.css\" />\n      </head>\n      <body>\n        <header>\n          <div className=\"orbit\">🌍</div>\n          <h1>Moonshot Commons</h1>\n          <p className=\"tagline\">\n            Impossible structures, built by everyone. Pledge your brainpower,\n            spare resources, or funds to wild ideas the world has never dared to build.\n          </p>\n        </header>\n\n        <main>\n          <div className=\"grid\">\n            {projects.map((p) => {\n              const counts = { thinking: 0, resources: 0, funds: 0 };\n              p.pledges.forEach((pl) => counts[pl.kind]++);\n              return (\n                <article className=\"card\" key={p.id}>\n                  <div className=\"card-head\">\n                    <span className=\"emoji\">{p.emoji}</span>\n                    <span className=\"scale\">{p.scale}</span>\n                  </div>\n                  <h2>{p.title}</h2>\n                  <p className=\"pitch\">{p.pitch}</p>\n                  <div className=\"stats\">\n                    {(Object.keys(KIND_META) as Pledge[\"kind\"][]).map((k) => (\n                      <span key={k} style={{ color: KIND_META[k].color }}>\n                        {KIND_META[k].icon} {counts[k]}\n                      </span>\n                    ))}\n                  </div>\n                  <details>\n                    <summary>{p.pledges.length} people in · join them</summary>\n                    <ul className=\"pledge-list\">\n                      {p.pledges.map((pl, i) => (\n                        <li key={i}>\n                          <strong>{pl.name}</strong>\n                          <span style={{ color: KIND_META[pl.kind].color }}>\n                            {KIND_META[pl.kind].icon} {pl.detail}\n                          </span>\n                        </li>\n                      ))}\n                    </ul>\n                    <form className=\"pledge-form\" method=\"POST\" action=\"/pledge\">\n                      <input type=\"hidden\" name=\"projectId\" value={p.id} />\n                      <input name=\"name\" placeholder=\"Your name\" required maxLength={40} />\n                      <select name=\"kind\">\n                        <option value=\"thinking\">🧠 Brainpower</option>\n                        <option value=\"resources\">📦 Resources</option>\n                        <option value=\"funds\">💧 Funds</option>\n                      </select>\n                      <input name=\"detail\" placeholder=\"What you'll contribute\" required maxLength={80} />\n                      <button type=\"submit\">Pledge</button>\n                    </form>\n                  </details>\n                </article>\n              );\n            })}\n          </div>\n\n          <section className=\"propose\">\n            <h2>✨ Propose a new moonshot</h2>\n            <p>Dream big. The crazier, the better — someone out there has the skills.</p>\n            <form method=\"POST\" action=\"/propose\">\n              <div className=\"row\">\n                <input name=\"emoji\" placeholder=\"🛰️\" maxLength={4} className=\"emoji-in\" />\n                <input name=\"title\" placeholder=\"Name your structure\" required maxLength={60} />\n                <input name=\"scale\" placeholder=\"Scale (e.g. Continental)\" maxLength={30} />\n              </div>\n              <textarea name=\"pitch\" placeholder=\"Pitch the impossible in a sentence or two...\" required maxLength={300} />\n              <button type=\"submit\">Launch proposal 🚀</button>\n            </form>\n          </section>\n        </main>\n\n        <footer>\n          <p>Built on shared resources & collective imagination.</p>\n          <a href={import.meta.url.replace(\"esm.town\", \"val.town\")}>View source</a>\n        </footer>\n      </body>\n    </html>\n  );\n}\n\nexport default async function (req: Request): Promise<Response> {\n  const url = new URL(req.url);\n\n  if (req.method === \"POST\" && url.pathname === \"/pledge\") {\n    const form = await req.formData();\n    const projectId = String(form.get(\"projectId\") || \"\");\n    const projects = await getProjects();\n    const proj = projects.find((p) => p.id === projectId);\n    if (proj) {\n      proj.pledges.push({\n        name: String(form.get(\"name\") || \"Anonymous\").slice(0, 40),\n        kind: (String(form.get(\"kind\")) as Pledge[\"kind\"]) || \"thinking\",\n        detail: String(form.get(\"detail\") || \"\").slice(0, 80),\n      });\n      await blob.setJSON(STORE, projects);\n    }\n    return Response.redirect(url.origin + \"/\", 303);\n  }\n\n  if (req.method === \"POST\" && url.pathname === \"/propose\") {\n    const form = await req.formData();\n    const title = String(form.get(\"title\") || \"\").slice(0, 60);\n    const projects = await getProjects();\n    if (title.trim()) {\n      projects.unshift({\n        id: title.toLowerCase().replace(/[^a-z0-9]+/g, \"-\").slice(0, 40) + \"-\" + Date.now().toString(36),\n        title,\n        emoji: String(form.get(\"emoji\") || \"💡\").slice(0, 4) || \"💡\",\n        pitch: String(form.get(\"pitch\") || \"\").slice(0, 300),\n        scale: String(form.get(\"scale\") || \"Local\").slice(0, 30) || \"Local\",\n        pledges: [],\n      });\n      await blob.setJSON(STORE, projects);\n    }\n    return Response.redirect(url.origin + \"/\", 303);\n  }\n\n  const projects = await getProjects();\n  return new Response(\"<!DOCTYPE html>\" + renderToString(<Page projects={projects} />), {\n    headers: { \"content-type\": \"text/html; charset=utf-8\" },\n  });\n}\n","createdAt",["D",1780485525346],"branchVersion","branchId","11437ede-5f3d-11f1-8192-1607ee4eb77e","id","1142a612-5f3d-11f1-8192-1607ee4eb77e","moonshot-commons",["D",1780485131241],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Crowdsourced megastructure proposals built by global community","imageUrl","64cb90ef-7679-4d8b-b58b-9ac03b312072","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019e8d2c-2903-75fe-9c25-c21f8109fdce","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_102":101,"_110":106},"org",{"_102":101,"_103":104,"_105":106,"_19":61,"_107":108,"_109":31},"branch",{"_13":91,"_38":92,"_49":48,"_93":50,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":51,"_100":101},"isOwned",13,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","SunnyMonday","handle","displayName","Piotrek","avatar","https://lh3.googleusercontent.com/a/ACg8ocIQgzNvmB-8IyhwI5dx6nO1TBf6UdAdNgwmrmOMKPV6vokFxPZS=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_49":50,"_38":51,"_44":168,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":59,"_60":-5,"_19":61,"_62":37,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":169,"_86":170,"_88":171,"_90":31},"tree",[159,160],"files",[159,160],"counts",{"_149":68,"_150":147,"_151":68,"_152":153,"_154":155},"contents",[133,134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_49":145,"_38":34,"_36":37,"_138":-5,"_47":48,"_46":14,"_140":31,"_44":146,"_13":147,"_39":40,"_41":43,"_30":31,"_143":-5,"_33":148},{"_49":135,"_38":136,"_36":137,"_138":-5,"_47":48,"_46":139,"_140":31,"_44":141,"_13":68,"_39":26,"_41":142,"_30":31,"_143":-5,"_33":144},"34c52718-5f3d-11f1-8192-1607ee4eb77e","style.css","34c527d6-5f3d-11f1-8192-1607ee4eb77e","parentId",2,"latest",["D",1780485190805],":root {\n  --bg: #0a0e1a;\n  --panel: #141a2e;\n  --panel-2: #1c2440;\n  --ink: #e8ecf8;\n  --muted: #8b95b5;\n  --accent: #6d8bff;\n  --glow: #ffb86c;\n}\n* { box-sizing: border-box; }\nbody {\n  margin: 0;\n  font-family: ui-sans-serif, system-ui, \"Segoe UI\", Roboto, sans-serif;\n  background:\n    radial-gradient(1200px 600px at 80% -10%, #1a2350 0%, transparent 60%),\n    radial-gradient(900px 500px at 0% 10%, #2a1840 0%, transparent 55%),\n    var(--bg);\n  color: var(--ink);\n  min-height: 100vh;\n}\n\nheader {\n  text-align: center;\n  padding: 64px 20px 32px;\n}\n.orbit {\n  font-size: 64px;\n  display: inline-block;\n  animation: float 6s ease-in-out infinite;\n  filter: drop-shadow(0 0 24px rgba(109, 139, 255, 0.6));\n}\n@keyframes float {\n  0%, 100% { transform: translateY(0) rotate(-4deg); }\n  50% { transform: translateY(-14px) rotate(4deg); }\n}\nh1 {\n  font-size: clamp(2.2rem, 6vw, 4rem);\n  margin: 8px 0 0;\n  background: linear-gradient(90deg, #fff, var(--accent), var(--glow));\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n  letter-spacing: -1px;\n}\n.tagline {\n  max-width: 620px;\n  margin: 16px auto 0;\n  color: var(--muted);\n  font-size: 1.1rem;\n  line-height: 1.6;\n}\n\nmain { max-width: 1080px; margin: 0 auto; padding: 24px 20px 80px; }\n\n.grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 22px;\n}\n\n.card {\n  background: linear-gradient(180deg, var(--panel-2), var(--panel));\n  border: 1px solid rgba(255, 255, 255, 0.07);\n  border-radius: 18px;\n  padding: 22px;\n  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;\n}\n.card:hover {\n  transform: translateY(-4px);\n  border-color: rgba(109, 139, 255, 0.5);\n  box-shadow: 0 18px 40px -20px rgba(109, 139, 255, 0.6);\n}\n.card-head { display: flex; align-items: center; justify-content: space-between; }\n.emoji { font-size: 40px; }\n.scale {\n  font-size: 0.72rem;\n  text-transform: uppercase;\n  letter-spacing: 1px;\n  color: var(--glow);\n  background: rgba(255, 184, 108, 0.12);\n  padding: 4px 10px;\n  border-radius: 999px;\n}\n.card h2 { margin: 14px 0 8px; font-size: 1.3rem; }\n.pitch { color: var(--muted); line-height: 1.55; margin: 0 0 16px; font-size: 0.95rem; }\n.stats { display: flex; gap: 16px; font-weight: 700; font-size: 0.95rem; margin-bottom: 12px; }\n\ndetails summary {\n  cursor: pointer;\n  color: var(--accent);\n  font-size: 0.9rem;\n  font-weight: 600;\n  list-style: none;\n  padding: 8px 0;\n}\ndetails summary::-webkit-details-marker { display: none; }\n.pledge-list { list-style: none; padding: 0; margin: 8px 0 14px; }\n.pledge-list li {\n  display: flex;\n  justify-content: space-between;\n  gap: 10px;\n  padding: 7px 0;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.05);\n  font-size: 0.9rem;\n}\n\ninput, select, textarea, button {\n  font: inherit;\n  border-radius: 10px;\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  background: rgba(0, 0, 0, 0.25);\n  color: var(--ink);\n  padding: 10px 12px;\n  outline: none;\n}\ninput:focus, select:focus, textarea:focus { border-color: var(--accent); }\n.pledge-form { display: grid; gap: 8px; }\nbutton {\n  background: linear-gradient(90deg, var(--accent), #8b6dff);\n  border: none;\n  font-weight: 700;\n  cursor: pointer;\n  color: #fff;\n  transition: filter 0.15s, transform 0.1s;\n}\nbutton:hover { filter: brightness(1.1); }\nbutton:active { transform: scale(0.98); }\n\n.propose {\n  margin-top: 48px;\n  background: linear-gradient(180deg, rgba(109, 139, 255, 0.08), transparent);\n  border: 1px dashed rgba(109, 139, 255, 0.4);\n  border-radius: 22px;\n  padding: 32px;\n  text-align: center;\n}\n.propose h2 { margin-top: 0; }\n.propose p { color: var(--muted); margin-top: -6px; }\n.propose form { display: grid; gap: 12px; max-width: 640px; margin: 18px auto 0; }\n.row { display: flex; gap: 12px; }\n.row input { flex: 1; }\n.emoji-in { max-width: 70px; text-align: center; }\n.propose textarea { min-height: 90px; resize: vertical; }\n.propose button { justify-self: center; padding: 12px 28px; }\n\nfooter {\n  text-align: center;\n  padding: 30px;\n  color: var(--muted);\n  font-size: 0.85rem;\n}\nfooter a { color: var(--accent); text-decoration: none; }\n\n@media (max-width: 520px) {\n  .row { flex-direction: column; }\n  .emoji-in { max-width: none; }\n}\n","label",[136],"fc2bf61a-5f3d-11f1-85a4-1607ee4eb77e",["D",1780485525346],1,[34],"pulls","branches","forks","envVars",{"_156":68,"_158":68},"connections",{"_156":68,"_157":68},"count","unfilledCount","emptyCount",{"_49":145,"_38":34,"_36":37,"_138":-5,"_47":48,"_46":14,"_140":31,"_44":165,"_13":147,"_39":40,"_41":43,"_30":31,"_143":-5,"_162":166,"_33":167},{"_49":135,"_38":136,"_36":137,"_138":-5,"_47":48,"_46":139,"_140":31,"_44":161,"_13":68,"_39":26,"_41":142,"_30":31,"_143":-5,"_162":163,"_33":164},["D",1780485190805],"children",[],[136],["D",1780485525346],[],[34],["D",1780485131241],{"_102":101,"_110":106},{"_102":101,"_103":104,"_105":106,"_19":61,"_107":108,"_109":31},{"_13":91,"_38":92,"_49":48,"_93":50,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":51,"_100":101},"ctx",{"_84":-5,"_130":205,"_206":207,"_208":209,"_210":31,"_211":31,"_212":31,"_213":64,"_214":-5,"_215":-7,"_216":-7,"_217":68,"_218":31,"_219":31,"_220":-5,"_221":31,"_222":31,"_223":31,"_224":-5},"ENV",{"_176":177,"_178":179,"_180":92,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>

Diff · v3