[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_183":184,"_185":186},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_137":-5,"_20":138,"_22":139,"_140":141,"_142":143,"_25":144,"_24":-5,"_145":146,"_147":148,"_149":49,"_150":151,"_152":49,"_153":-5,"_154":-5,"_155":156},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":28,"_29":-5,"_30":31,"_32":33,"_34":-5},"handle","g","name","vttThumbMaker","branchName","main","version","path","","project",{"_35":94,"_13":14,"_37":95,"_47":-5,"_96":68,"_50":51,"_97":51,"_98":-5,"_99":-5,"_100":101,"_102":-5,"_103":68,"_104":-5,"_105":-5,"_106":107,"_53":54,"_108":-5,"_109":-5,"_110":-5,"_111":-5,"_112":113,"_114":113,"_115":116,"_117":116,"_118":116,"_119":113,"_120":113,"_121":122,"_123":124,"_125":126,"_48":49},"tree",[85,86],"file","contents",[57,58],"upstream",{"_35":36,"_37":38,"_39":40,"_13":16,"_41":42,"_17":33,"_43":-5,"_44":-5,"_45":46,"_47":-5,"_48":49,"_50":51,"_52":12,"_53":54,"_55":56},"pull","ahead",11,"behind",10,"envVars","id","45a1169a-2781-11f0-b46e-569c3dd06744","createdAt",["D",1746209662089],"updatedAt",["D",1726311743678],"projectId","45a0c884-2781-11f0-b46e-569c3dd06744","forkedBranchId","forkedBranchVersion","lockfileKey","1746245944170-esm.town_v_g_ThumbMaker@10-main","deletedAt","isOwned",false,"privacy","public","userHandle","orgId","4f4797d6-1767-45ca-8dc5-5113174ca1c1","projectName","ThumbMaker",{"_35":77,"_13":78,"_61":79,"_63":-5,"_64":65,"_66":80,"_67":68,"_37":81,"_17":82,"_70":24,"_72":83,"_74":49,"_75":-5,"_18":84},{"_35":59,"_13":60,"_61":62,"_63":-5,"_64":65,"_66":31,"_67":68,"_37":69,"_17":33,"_70":71,"_72":73,"_74":49,"_75":-5,"_18":76},"4bb636d2-2781-11f0-b46e-569c3dd06744","main.tsx","fileId","4b7e6ab8-2781-11f0-b46e-569c3dd06744","parentId","branchId","4b7be7b6-2781-11f0-b46e-569c3dd06744","branchVersion","latest",true,["D",1730753205365],"fileType","script","content","// Val Town Town implementation of Thumb Maker\nimport { serve } from 'https://esm.town/v/g/serveUtils';\nimport { Hono } from 'npm:hono';\n\nconst app = new Hono();\nconst r404 = () => new Response('[116] 404 not found', { status: 404 });\n\napp.get('/serve/116', (c) => {\n const url = new URL(c.req.url);\n const file = url.searchParams.get('f');\n if (!file || file === 'index.html') return serve(html, 'texthtml')(c);\n if (file === 'styles.css') return serve(css, 'text/css')(c);\n if (file === 'main.js') return serve(js, 'text/javascript')(c);\n\n return r404();\n});\n\napp.get('*', r404);\n\nexport default app.fetch;\n\nfunction html() {\n /*\n\n\n\n \n \n Thumbnail Maker\n \n \n\n\n

Thumbnail Maker

📷 Drag & drop images here or click to select

\n \n

Step 1: Generate Thumbnails

\n \n Thumbnail Height:\n \n
\n \n \n Keep Aspect Ratio\n
\n \n Thumbnail Width:\n \n
\n \n

Step 2: Render and Export

\n \n Output Format:\n \n
\n \n Quality (JPEG/WebP):\n \n
\n \n \n

\n \n

\n Download Thumbnails\n \n

\n\n\n */\n}\n\nfunction css() {\n /*\nbody {\n font-family: Arial, sans-serif;\n font-size: 16px;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f0f0f0;\n}\n\n#app {\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n color: #333;\n}\n\n#dropZone {\n border: 2px dashed #ccc;\n border-radius: 4px;\n padding: 20px;\n text-align: center;\n cursor: pointer;\n margin-bottom: 20px;\n transition: background-color 0.3s ease;\n}\n\n#dropZone.drag-over {\n background-color: #e0e0e0;\n}\n\n#thumbnailOptions, #renderOptions {\n margin-bottom: 20px;\n}\n\nlabel {\n display: block;\n margin-bottom: 10px;\n}\n\ninput[type=\"number\"], select {\n width: 100%;\n padding: 8px;\n margin-top: 5px;\n border: 1px solid #ccc;\n border-radius: 4px;\n box-sizing: border-box;\n}\n\ninput[type=\"checkbox\"] {\n margin-right: 5px;\n}\n\nselect {\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z' fill='%23333'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 10px center;\n padding-right: 30px;\n}\n\nbutton {\n display: inline-block;\n width: calc(50% - 5px);\n padding: 10px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 16px;\n transition: background-color 0.3s ease;\n margin-top: 10px;\n}\n\nbutton:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n\nbutton:hover:not(:disabled) {\n background-color: #45a049;\n}\n\n#backBtn {\n background-color: #f44336;\n}\n\n#backBtn:hover {\n background-color: #d32f2f;\n}\n\n#progressBar {\n width: 100%;\n margin-top: 20px;\n height: 20px;\n border-radius: 10px;\n}\n\n#downloadSection {\n display: flex;\n justify-content: space-between;\n margin-top: 20px;\n}\n\n#downloadLink, #downloadMetadataBtn {\n display: inline-block;\n width: calc(50% - 5px);\n text-align: center;\n padding: 10px;\n background-color: #008CBA;\n color: white;\n text-decoration: none;\n border-radius: 4px;\n transition: background-color 0.3s ease;\n}\n\n#downloadLink:hover, #downloadMetadataBtn:hover {\n background-color: #007B9A;\n}\n\n#imagePreview {\n margin-top: 20px;\n text-align: center;\n}\n\n#imagePreview img {\n max-width: 100%;\n height: auto;\n}\n */\n}\n\nfunction js() {\n /*\nconst fileInput = document.getElementById('fileInput');\nconst dropZone = document.getElementById('dropZone');\nconst generateBtn = document.getElementById('generateBtn');\nconst renderBtn = document.getElementById('renderBtn');\nconst backBtn = document.getElementById('backBtn');\nconst progressBar = document.getElementById('progressBar');\nconst downloadLink = document.getElementById('downloadLink');\nconst downloadMetadataBtn = document.getElementById('downloadMetadataBtn');\nconst outputFormat = document.getElementById('outputFormat');\nconst outputQuality = document.getElementById('outputQuality');\nconst thumbHeight = document.getElementById('thumbHeight');\nconst keepAspectRatio = document.getElementById('keepAspectRatio');\nconst thumbWidth = document.getElementById('thumbWidth');\nconst imagePreview = document.getElementById('imagePreview');\nconst thumbnailOptions = document.getElementById('thumbnailOptions');\nconst renderOptions = document.getElementById('renderOptions');\nconst downloadSection = document.getElementById('downloadSection');\n\nlet files = [];\nlet thumbnailCanvas;\nlet thumbnailMetadata;\n\nfunction updateUI() {\n generateBtn.disabled = files.length === 0;\n thumbWidth.disabled = keepAspectRatio.checked;\n}\n\nfunction resetToStep1() {\n thumbnailOptions.style.display = 'block';\n renderOptions.style.display = 'none';\n downloadSection.style.display = 'none';\n imagePreview.innerHTML = '';\n thumbnailCanvas = null;\n thumbnailMetadata = null;\n updateUI();\n}\n\nfileInput.addEventListener('change', (event) => {\n files = Array.from(event.target.files);\n resetToStep1();\n});\n\ndropZone.addEventListener('click', () => fileInput.click());\n\ndropZone.addEventListener('dragover', (event) => {\n event.preventDefault();\n dropZone.classList.add('drag-over');\n});\n\ndropZone.addEventListener('dragleave', () => {\n dropZone.classList.remove('drag-over');\n});\n\ndropZone.addEventListener('drop', (event) => {\n event.preventDefault();\n dropZone.classList.remove('drag-over');\n files = Array.from(event.dataTransfer.files).filter(file => file.type.startsWith('image/'));\n resetToStep1();\n});\n\nkeepAspectRatio.addEventListener('change', updateUI);\n\ngenerateBtn.addEventListener('click', async (event) => {\n event.preventDefault();\n\n if (files.length === 0) return;\n\n generateBtn.disabled = true;\n progressBar.style.display = 'block';\n progressBar.value = 0;\n\n const image0 = await getImage(files[0]);\n const cols = Math.ceil(Math.sqrt(files.length));\n const rows = Math.ceil(files.length / cols);\n const tHeight = parseInt(thumbHeight.value);\n let tWidth = keepAspectRatio.checked\n ? Math.floor(tHeight / image0.height * image0.width)\n : parseInt(thumbWidth.value);\n\n const canvasWidth = cols * tWidth;\n const canvasHeight = rows * tHeight;\n\n image0.revoke();\n\n thumbnailCanvas = new OffscreenCanvas(canvasWidth, canvasHeight);\n const ctx = thumbnailCanvas.getContext('2d', { alpha: false });\n\n let i = 0;\n for (const file of files) {\n const col = i % cols;\n const row = Math.floor(i / cols);\n\n const img = await getImage(file);\n ctx.drawImage(img, col * tWidth, row * tHeight, tWidth, tHeight);\n img.revoke();\n\n i++;\n progressBar.value = (i / files.length) * 100;\n }\n\n thumbnailMetadata = {\n rows,\n cols,\n thumbnailCount: files.length,\n thumbnailWidth: tWidth,\n thumbnailHeight: tHeight,\n canvasWidth,\n canvasHeight\n };\n\n thumbnailOptions.style.display = 'none';\n renderOptions.style.display = 'block';\n progressBar.style.display = 'none';\n renderBtn.disabled = false;\n});\n\nrenderBtn.addEventListener('click', async () => {\n if (!thumbnailCanvas) return;\n\n renderBtn.disabled = true;\n progressBar.style.display = 'block';\n progressBar.value = 0;\n\n const blob = await thumbnailCanvas.convertToBlob({\n type: outputFormat.value,\n quality: outputFormat.value !== 'image/png' ? parseFloat(outputQuality.value) : undefined\n });\n\n const url = URL.createObjectURL(blob);\n downloadLink.href = url;\n downloadLink.download = `thumbnails.${outputFormat.value.split('/')[1]}`;\n downloadSection.style.display = 'flex';\n\n // Display the generated image\n const img = document.createElement('img');\n img.src = url;\n imagePreview.innerHTML = '';\n imagePreview.appendChild(img);\n\n progressBar.style.display = 'none';\n renderBtn.disabled = false;\n});\n\nbackBtn.addEventListener('click', resetToStep1);\n\ndownloadMetadataBtn.addEventListener('click', () => {\n if (!thumbnailMetadata) return;\n\n const metadataBlob = new Blob([JSON.stringify(thumbnailMetadata, null, 2)], { type: 'application/json' });\n const metadataUrl = URL.createObjectURL(metadataBlob);\n const tempLink = document.createElement('a');\n tempLink.href = metadataUrl;\n tempLink.download = 'thumbnail_metadata.json';\n tempLink.click();\n URL.revokeObjectURL(metadataUrl);\n});\n\nfunction getImage(file) {\n return new Promise((resolve) => {\n const url = URL.createObjectURL(file);\n const img = new Image();\n img.revoke = () => URL.revokeObjectURL(url);\n img.onload = () => resolve(img);\n img.src = url;\n });\n}\n\nupdateUI();\n */\n}","deleted","label",[60],"4b7e7b70-2781-11f0-b46e-569c3dd06744","README.md","4b7e7bf2-2781-11f0-b46e-569c3dd06744",1,["D",1730741883931],0,"# Val Town Town: Thumbnail Maker\n\n[Live on VTT!](https://maxm-valtowntown.web.val.run/handler/116)\n\nThis is a port of my\n[Thumbnail Maker val](https://www.val.town/v/g/ThumbMaker)\nfor the\n[Val Town Town Runtime](https://www.val.town/v/maxm/valtowntown)\nby @maxm\nbuild on top of\n[val.town](https://val.town/).\n\nLimitations:\n - On Val Town Town, your application lives on a single route.
\n This means serving multiple assets (main.js, styles.css) does not work the traditional way.
\n In this example, I use a `?f=` query parameter to work around this limitation.\n - Updates to this val are not instantly applied because of caching.\n",[78],{"_35":77,"_13":78,"_61":79,"_63":-5,"_64":65,"_66":80,"_67":68,"_37":91,"_17":82,"_70":24,"_72":83,"_74":49,"_75":-5,"_88":92,"_18":93},{"_35":59,"_13":60,"_61":62,"_63":-5,"_64":65,"_66":31,"_67":68,"_37":87,"_17":33,"_70":71,"_72":73,"_74":49,"_75":-5,"_88":89,"_18":90},["D",1730753205365],"children",[],[60],["D",1730741883931],[],[78],"4b7b9ae0-2781-11f0-b46e-569c3dd06744",["D",1746209671912],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","8d6857d3-cf1c-4e98-a094-0e379c10badf","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",2,"tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_136":132},"org",{"_11":12,"_130":-5,"_131":132,"_100":101,"_133":134,"_135":49},"branch",{"_17":31,"_13":16,"_35":65,"_41":94,"_43":36,"_44":82,"_127":51,"_128":42,"_129":54,"_55":14,"_52":12},"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJqRlBqSjdFTUlTVmVORmpObmFqZmJLVWh5VCJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":94,"_13":14,"_37":179,"_47":-5,"_96":68,"_50":51,"_97":51,"_98":-5,"_99":-5,"_100":101,"_102":-5,"_103":68,"_104":-5,"_105":-5,"_106":107,"_53":54,"_108":-5,"_109":-5,"_110":-5,"_111":-5,"_112":113,"_114":113,"_115":116,"_117":116,"_118":116,"_119":113,"_120":113,"_121":180,"_123":181,"_125":182,"_48":49},[173,174],"files",[173,174],"counts",{"_164":82,"_165":80,"_166":82,"_34":167,"_168":169},[160,161],"upstreamProject",{"_35":42,"_13":56,"_98":-5,"_99":-5,"_50":51,"_121":159},"upstreamBranch",{"_35":36,"_37":157,"_39":158,"_13":16,"_41":42,"_17":33,"_43":-5,"_44":-5,"_45":46,"_47":-5,"_48":49,"_50":51,"_52":12,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746209662089],["D",1726311743678],{"_11":12,"_136":132},{"_35":77,"_13":78,"_61":79,"_63":-5,"_64":65,"_66":80,"_67":68,"_37":81,"_17":82,"_70":24,"_72":83,"_74":49,"_75":-5,"_18":163},{"_35":59,"_13":60,"_61":62,"_63":-5,"_64":65,"_66":31,"_67":68,"_37":69,"_17":33,"_70":71,"_72":73,"_74":49,"_75":-5,"_18":162},[60],[78],"pulls","branches","forks",{"_170":82,"_172":82},"connections",{"_170":82,"_171":82},"count","unfilledCount","emptyCount",{"_35":77,"_13":78,"_61":79,"_63":-5,"_64":65,"_66":80,"_67":68,"_37":91,"_17":82,"_70":24,"_72":83,"_74":49,"_75":-5,"_88":177,"_18":178},{"_35":59,"_13":60,"_61":62,"_63":-5,"_64":65,"_66":31,"_67":68,"_37":87,"_17":33,"_70":71,"_72":73,"_74":49,"_75":-5,"_88":175,"_18":176},[],[60],[],[78],["D",1746209671912],{"_11":12,"_136":132},{"_11":12,"_130":-5,"_131":132,"_100":101,"_133":134,"_135":49},{"_17":31,"_13":16,"_35":65,"_41":94,"_43":36,"_44":82,"_127":51,"_128":42,"_129":54,"_55":14,"_52":12},"ctx",{"_121":-5,"_154":216,"_217":218,"_219":220,"_221":49,"_222":49,"_223":49,"_224":68,"_225":-5,"_226":-7,"_227":-7,"_228":82,"_229":49,"_230":49,"_231":-5,"_232":49,"_233":49,"_234":49,"_235":-5},"ENV",{"_187":188,"_189":190,"_191":16,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215},"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"]

Code