Get Sophie's Project

\n \n {thisProjectURL\n ? (\n \n )\n : null}\n

\n );\n}",[],[183,189,195],{"_105":205,"_96":206,"_145":207,"_147":190,"_148":134,"_149":208,"_151":118,"_107":209,"_102":91,"_153":200,"_155":210,"_156":26,"_157":211,"_100":212},"dee54540-f489-11ef-a0d2-569c3dd06744","MessageInput.tsx","2b7b2e94-511a-4601-87ce-8775bc07102d",31,["D",1740605845895],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { Message } from \"../shared/types.ts\";\n\nexport function MessageInput({ onSubmit }: { onSubmit: () => void }) {\n const [message, setMessage] = React.useState(\"\");\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!message.trim()) return;\n\n try {\n const username = \"shouser\"; // PUT YOUR USERNAME HERE\n const projectName = message.trim();\n const response = await fetch(\n `/zip-project?username=${encodeURIComponent(username)}&projectName=${encodeURIComponent(projectName)}`,\n {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n\n if (response.ok) {\n const blob = await response.blob();\n const url = URL.createObjectURL(blob);\n\n const downloadLink = document.createElement(\"a\");\n downloadLink.href = url;\n downloadLink.download = `${projectName}.zip`;\n document.body.appendChild(downloadLink);\n downloadLink.click();\n document.body.removeChild(downloadLink);\n\n setTimeout(() => {\n URL.revokeObjectURL(url);\n }, 100);\n\n onSubmit();\n setMessage(\"\");\n }\n } catch (error) {\n console.error(\"Download failed\", error);\n }\n };\n\n return (\n

\n setMessage(e.target.value)}\n placeholder=\"Type a project name...\"\n />\n \n \n );\n}",[],[183,189,206],[183,189],{"_105":215,"_96":216,"_145":217,"_147":184,"_148":134,"_149":150,"_151":118,"_107":218,"_102":32,"_153":165,"_155":219,"_156":26,"_157":220,"_100":221},"e2e715b8-f486-11ef-b1d7-569c3dd06744","favicon.svg","61497137-c777-4be7-86ba-f1f4034e18a4",["D",1740604564126],"",[],[183,216],{"_105":223,"_96":224,"_145":225,"_147":184,"_148":134,"_149":150,"_151":118,"_107":226,"_102":32,"_153":165,"_155":227,"_156":26,"_157":228,"_100":229},"e2e7175c-f486-11ef-b1d7-569c3dd06744","index.html","802ecd8e-1495-4baf-a6b1-1bae0847d24c",["D",1740604564126],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n",[],[183,224],{"_105":231,"_96":232,"_145":233,"_147":184,"_148":134,"_149":234,"_151":118,"_107":235,"_102":91,"_153":200,"_155":236,"_156":26,"_157":237,"_100":238},"29816fd0-f489-11ef-b2f4-569c3dd06744","index.tsx","a143d9e5-9437-4093-9a88-041c1e204ee1",25,["D",1740605541575],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ndeclare global {\n interface Window {\n __INITIAL_DATA__: {};\n }\n}\n\ncreateRoot(root).render();",[],[183,232],{"_105":240,"_96":241,"_145":242,"_147":184,"_148":134,"_149":150,"_151":118,"_107":243,"_102":32,"_153":165,"_155":244,"_156":26,"_157":245,"_100":246},"e2e71a40-f486-11ef-b1d7-569c3dd06744","style.css","d2c1b371-c8fd-4ea6-baf3-b253db470268",["D",1740604564126],"body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n max-width: 600px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f4f4f4;\n}\n\n.message-board {\n background: white;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n padding: 20px;\n}\n\n.message-input {\n display: flex;\n margin-top: 20px;\n}\n\n.message-input input {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 4px;\n margin-right: 10px;\n}\n\n.message-input button {\n padding: 10px 15px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\n.message-list {\n max-height: 400px;\n overflow-y: auto;\n}\n\n.message-item {\n background-color: #f9f9f9;\n border-radius: 4px;\n padding: 10px;\n margin-bottom: 10px;\n}\n\n.message-item p {\n margin: 0 0 5px 0;\n}\n\n.message-item small {\n color: #888;\n font-size: 0.7em;\n}\n\nfooter {\n text-align: center;\n margin-top: 20px;\n}",[],[183,241],[183],{"_105":249,"_96":250,"_145":251,"_147":-5,"_148":134,"_149":150,"_151":118,"_107":252,"_102":32,"_153":154,"_155":-5,"_156":26,"_157":253,"_100":263},"e2e7201c-f486-11ef-b1d7-569c3dd06744","shared","70d331d7-a590-4e61-896d-8cb555c7aa53",["D",1740604564126],[254],{"_105":255,"_96":256,"_145":257,"_147":251,"_148":134,"_149":258,"_151":118,"_107":259,"_102":150,"_153":200,"_155":260,"_156":26,"_157":261,"_100":262},"453ae468-f489-11ef-8216-569c3dd06744","utils.ts","410f1727-869c-46d1-bb02-1edf3dce59f9",27,["D",1740605588090],"// LEFTOVER FROM TEMPLATE, NOT USED\nexport interface Message {\n content: string;\n}\n\nexport const MESSAGE_LIMIT = 5;",[],[250,256],[250],{"_105":265,"_96":161,"_145":266,"_147":-5,"_148":134,"_149":133,"_151":118,"_107":267,"_102":268,"_153":165,"_155":269,"_156":26,"_157":270,"_100":271},"ee82f41a-f48a-11ef-8e85-569c3dd06744","05f8eb75-d66b-434f-8d60-6384f35bf05f",["D",1740606301591],6,"# Download Projects as a Zip\n\nThis is a proof of concept, showing how to download Val Town projects as zip files. For now, I've hardcoded my username into the code, so you can only download my public/unlisted projects. To see it working, type the name of this project **getProjectsAsZips** and press download. Waalaah!\n\nIf you fork this project, you can update the hardcoded username in frontend/MessageInput.tsx. I forked the [reactHonoStarter](https://www.val.town/x/stevekrouse/reactHonoStarter) to get started quickly (it's great), hence the weird naming and leftover code you'll see around this project.\n\n## Next Steps\nI'd love it if someone wanted to send me a PR and tackle either of these two:\n\n1. Add ability for users to input their own username\n2. Add ability for users to input their API token so they can see private projects",[],[161],"files",[142,159,169,181,187,193,204,214,222,230,239,248,254,264],"counts",{"_276":91,"_277":278,"_279":91,"_280":32},"pulls","branches",5,"forks","envVars","contents",[],{"_105":194,"_96":195,"_145":196,"_147":190,"_148":134,"_149":197,"_151":118,"_107":284,"_102":199,"_153":200,"_155":201,"_156":26,"_100":285},["D",1740605446073],[183,189,195],"upstream",{"_105":288,"_96":289,"_112":290,"_113":-5,"_110":111,"_20":291},"41ef0130-f2f5-11ef-891c-569c3dd06744","reactHonoExample","Example with client-side React & Hono server",{"_94":292,"_129":293},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_94":95,"_96":97,"_98":99,"_100":101,"_103":296,"_165":300,"_303":304,"_373":374},{"_105":106,"_96":97,"_107":297,"_109":-5,"_110":111,"_112":-5,"_113":-5,"_11":114,"_115":116,"_117":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":26,"_20":298,"_131":299},["D",1740582463346],{"_94":95,"_129":130},{"_102":133,"_96":99,"_105":134,"_135":106,"_136":137,"_138":139},{"_105":194,"_96":195,"_145":196,"_147":190,"_148":134,"_149":197,"_151":118,"_107":301,"_102":199,"_153":200,"_155":201,"_156":26,"_100":302},["D",1740605446073],[183,189,195],"history",[305,307,313,319,325,330,336,342,347,351,355,360,364,367,370],{"_105":194,"_145":196,"_96":195,"_153":200,"_155":201,"_147":190,"_148":134,"_102":199,"_149":197,"_156":26,"_107":306,"_151":118},["D",1740605446073],{"_105":308,"_145":196,"_96":195,"_153":200,"_155":309,"_147":190,"_148":134,"_102":310,"_149":311,"_156":26,"_107":312,"_151":26},"dcb3a812-f488-11ef-92f4-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { type Message, MESSAGE_LIMIT } from \"../../shared/utils.ts\";\nimport { MessageInput } from \"./MessageInput.tsx\";\n\nexport function App(\n { initialMessages = [], thisProjectURL }: { initialMessages?: Message[]; thisProjectURL?: string },\n) {\n const [messages, setMessages] = React.useState(initialMessages);\n\n const fetchMessages = async () => {\n try {\n const response = await fetch(\"/messages\");\n const data = await response.json();\n setMessages(data.reverse());\n } catch (error) {\n console.error(\"Failed to fetch messages\", error);\n }\n };\n\n return (\n

Get Sophie's Project

\n \n {thisProjectURL\n ? (\n \n )\n : null}\n

\n );\n}",13,22,["D",1740605412718],{"_105":314,"_145":196,"_96":195,"_153":200,"_155":315,"_147":190,"_148":134,"_102":316,"_149":317,"_156":26,"_107":318,"_151":26},"c059a72a-f488-11ef-a839-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { type Message, MESSAGE_LIMIT } from \"../../shared/utils.ts\";\nimport { MessageInput } from \"./MessageInput.tsx\";\n\nexport function App(\n { initialMessages = [], thisProjectURL }: { initialMessages?: Message[]; thisProjectURL?: string },\n) {\n const [messages, setMessages] = React.useState(initialMessages);\n\n const fetchMessages = async () => {\n try {\n const response = await fetch(\"/messages\");\n const data = await response.json();\n setMessages(data.reverse());\n } catch (error) {\n console.error(\"Failed to fetch messages\", error);\n }\n };\n\n return (\n

Get Sophie's Project

\n \n {thisProjectURL\n ? (\n \n )\n : null}\n

\n );\n}",12,21,["D",1740605365154],{"_105":320,"_145":196,"_96":195,"_153":200,"_155":321,"_147":190,"_148":134,"_102":322,"_149":323,"_156":26,"_107":324,"_151":26},"bd21fc92-f488-11ef-84c1-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { type Message, MESSAGE_LIMIT } from \"../../shared/utils.ts\";\nimport { MessageInput } from \"./MessageInput.tsx\";\n\nexport function App(\n { initialMessages = [], thisProjectURL }: { initialMessages?: Message[]; thisProjectURL?: string },\n) {\n const [messages, setMessages] = React.useState(initialMessages);\n\n const fetchMessages = async () => {\n try {\n const response = await fetch(\"/messages\");\n const data = await response.json();\n setMessages(data.reverse());\n } catch (error) {\n console.error(\"Failed to fetch messages\", error);\n }\n };\n\n return (\n

Get Sophie's Project

\n {thisProjectURL\n ? (\n \n )\n : null}\n

\n );\n}",11,20,["D",1740605359753],{"_105":326,"_145":196,"_96":195,"_153":200,"_155":315,"_147":190,"_148":134,"_102":327,"_149":328,"_156":26,"_107":329,"_151":26},"a5de1d68-f488-11ef-9114-569c3dd06744",10,19,["D",1740605320721],{"_105":331,"_145":196,"_96":195,"_153":200,"_155":332,"_147":190,"_148":134,"_102":333,"_149":334,"_156":26,"_107":335,"_151":26},"9c8b8214-f488-11ef-82d9-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { type Message, MESSAGE_LIMIT } from \"../../shared/utils.ts\";\nimport { MessageInput } from \"./MessageInput.tsx\";\n\nexport function App(\n { initialMessages = [], thisProjectURL }: { initialMessages?: Message[]; thisProjectURL?: string },\n) {\n const [messages, setMessages] = React.useState(initialMessages);\n\n const fetchMessages = async () => {\n try {\n const response = await fetch(\"/messages\");\n const data = await response.json();\n setMessages(data.reverse());\n } catch (error) {\n console.error(\"Failed to fetch messages\", error);\n }\n };\n\n return (\n

Get Sophie's Project

\n \n {thisProjectURL\n ? (\n \n )\n : null}\n

\n );\n}\n\n// function MessageItem({ message }) {\n// const formattedDate = new Date(message.timestamp).toLocaleString();\n\n// return (\n//

\n//

{message.content}

\n// {formattedDate}\n//

\n// );\n// }",9,18,["D",1740605305080],{"_105":337,"_145":196,"_96":195,"_153":200,"_155":338,"_147":190,"_148":134,"_102":339,"_149":340,"_156":26,"_107":341,"_151":26},"8ee09d3e-f488-11ef-b9a5-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { type Message, MESSAGE_LIMIT } from \"../../shared/utils.ts\";\nimport { MessageInput } from \"./MessageInput.tsx\";\n\nexport function App(\n { initialMessages = [], thisProjectURL }: { initialMessages?: Message[]; thisProjectURL?: string },\n) {\n const [messages, setMessages] = React.useState(initialMessages);\n\n const fetchMessages = async () => {\n try {\n const response = await fetch(\"/messages\");\n const data = await response.json();\n setMessages(data.reverse());\n } catch (error) {\n console.error(\"Failed to fetch messages\", error);\n }\n };\n\n return (\n

Get Sophie's Project

\n \n {thisProjectURL\n ? (\n \n )\n : null}\n

\n );\n}\n\nfunction MessageItem({ message }) {\n const formattedDate = new Date(message.timestamp).toLocaleString();\n\n return (\n

{message.content}

\n {formattedDate}\n

\n );\n}",8,17,["D",1740605282152],{"_105":343,"_145":196,"_96":195,"_153":200,"_155":344,"_147":190,"_148":134,"_102":175,"_149":345,"_156":26,"_107":346,"_151":26},"7cc50a18-f488-11ef-b99c-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { type Message, MESSAGE_LIMIT } from \"../../shared/utils.ts\";\nimport { MessageInput } from \"./MessageInput.tsx\";\n\nexport function App(\n { initialMessages = [], thisProjectURL }: { initialMessages?: Message[]; thisProjectURL?: string },\n) {\n const [messages, setMessages] = React.useState(initialMessages);\n\n const fetchMessages = async () => {\n try {\n const response = await fetch(\"/messages\");\n const data = await response.json();\n setMessages(data.reverse());\n } catch (error) {\n console.error(\"Failed to fetch messages\", error);\n }\n };\n\n return (\n

Get Sophie's Project

\n \n {thisProjectURL\n ? (\n \n )\n : null}\n

\n );\n}\n\nfunction MessageList({ messages }: { messages: Message[] }) {\n const displayedMessages = messages.slice(0, MESSAGE_LIMIT);\n return (\n

\n {displayedMessages.map((msg) => )}\n

\n );\n}\n\nfunction MessageItem({ message }) {\n const formattedDate = new Date(message.timestamp).toLocaleString();\n\n return (\n

{message.content}

\n {formattedDate}\n

\n );\n}",16,["D",1740605251770],{"_105":348,"_145":196,"_96":195,"_153":200,"_155":349,"_147":190,"_148":134,"_102":268,"_149":175,"_156":26,"_107":350,"_151":26},"ad468fbe-f487-11ef-b10f-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { type Message, MESSAGE_LIMIT } from \"../../shared/utils.ts\";\nimport { MessageInput } from \"./MessageInput.tsx\";\n\nexport function App(\n { initialMessages = [], thisProjectURL }: { initialMessages?: Message[]; thisProjectURL?: string },\n) {\n const [messages, setMessages] = React.useState(initialMessages);\n\n const fetchMessages = async () => {\n try {\n const response = await fetch(\"/messages\");\n const data = await response.json();\n setMessages(data.reverse());\n } catch (error) {\n console.error(\"Failed to fetch messages\", error);\n }\n };\n\n return (\n

Get Sophie's Project

\n \n \n {thisProjectURL\n ? (\n \n )\n : null}\n

\n );\n}\n\nfunction MessageList({ messages }: { messages: Message[] }) {\n const displayedMessages = messages.slice(0, MESSAGE_LIMIT);\n return (\n

\n {displayedMessages.map((msg) => )}\n

\n );\n}\n\nfunction MessageItem({ message }) {\n const formattedDate = new Date(message.timestamp).toLocaleString();\n\n return (\n

{message.content}

\n {formattedDate}\n

\n );\n}",["D",1740604903655],{"_105":352,"_145":196,"_96":195,"_153":200,"_155":353,"_147":190,"_148":134,"_102":278,"_149":268,"_156":26,"_107":354,"_151":26},"a89b0382-f487-11ef-89e3-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { type Message, MESSAGE_LIMIT } from \"../../shared/utils.ts\";\nimport { MessageInput } from \"./MessageInput.tsx\";\n\nexport function App(\n { initialMessages = [], thisProjectURL }: { initialMessages?: Message[]; thisProjectURL?: string },\n) {\n const [messages, setMessages] = React.useState(initialMessages);\n\n const fetchMessages = async () => {\n try {\n const response = await fetch(\"/messages\");\n const data = await response.json();\n setMessages(data.reverse());\n } catch (error) {\n console.error(\"Failed to fetch messages\", error);\n }\n };\n\n return (\n

Get Sophie's Project

\n \n \n {thisProjectURL\n ? (\n \n )\n : null}\n

\n );\n}\n\nfunction MessageItem({ message }) {\n const formattedDate = new Date(message.timestamp).toLocaleString();\n\n return (\n

{message.content}

\n {formattedDate}\n

\n );\n}",["D",1740604895820],{"_105":356,"_145":196,"_96":195,"_153":200,"_155":357,"_147":190,"_148":134,"_102":358,"_149":278,"_156":26,"_107":359,"_151":26},"a2a4e6dc-f487-11ef-b473-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { type Message, MESSAGE_LIMIT } from \"../../shared/utils.ts\";\nimport { MessageInput } from \"./MessageInput.tsx\";\n\nexport function App(\n { initialMessages = [], thisProjectURL }: { initialMessages?: Message[]; thisProjectURL?: string },\n) {\n const [messages, setMessages] = React.useState(initialMessages);\n\n const fetchMessages = async () => {\n try {\n const response = await fetch(\"/messages\");\n const data = await response.json();\n setMessages(data.reverse());\n } catch (error) {\n console.error(\"Failed to fetch messages\", error);\n }\n };\n\n return (\n

Get Sophie's Project

\n \n \n {thisProjectURL\n ? (\n \n )\n : null}\n

\n );\n}",4,["D",1740604885818],{"_105":361,"_145":196,"_96":195,"_153":200,"_155":353,"_147":190,"_148":134,"_102":362,"_149":358,"_156":26,"_107":363,"_151":26},"6b3a92a0-f487-11ef-95ea-569c3dd06744",3,["D",1740604792846],{"_105":365,"_145":196,"_96":195,"_153":200,"_155":349,"_147":190,"_148":134,"_102":91,"_149":362,"_156":26,"_107":366,"_151":26},"246fe49c-f487-11ef-8b29-569c3dd06744",["D",1740604674075],{"_105":368,"_145":196,"_96":195,"_153":200,"_155":357,"_147":190,"_148":134,"_102":150,"_149":91,"_156":26,"_107":369,"_151":26},"fe0720f4-f486-11ef-a37c-569c3dd06744",["D",1740604609635],{"_105":371,"_145":196,"_96":195,"_153":200,"_155":349,"_147":190,"_148":134,"_102":32,"_149":150,"_156":26,"_107":372,"_151":26},"e2e6fb64-f486-11ef-b1d7-569c3dd06744",["D",1740604564126],"versions",[375,377,378,379,380,381,382,383,384,385,386,387,388,389,390],{"_165":305,"_376":307},"previous",{"_165":307,"_376":313},{"_165":313,"_376":319},{"_165":319,"_376":325},{"_165":325,"_376":330},{"_165":330,"_376":336},{"_165":336,"_376":342},{"_165":342,"_376":347},{"_165":347,"_376":351},{"_165":351,"_376":355},{"_165":355,"_376":360},{"_165":360,"_376":364},{"_165":364,"_376":367},{"_165":367,"_376":370},{"_165":370,"_376":-5},"routes/_app","actionData","errors"]

History for App.tsx