[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_191":192,"_193":194},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_69":139,"_40":-7,"_140":-5,"_17":141,"_142":143,"_144":145,"_146":147,"_148":149,"_97":-5,"_150":151,"_152":153,"_154":47,"_155":156,"_157":47,"_158":-5,"_159":-5,"_160":161},"routes/_app.x.$handle.$name.compare.$branch",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":30,"_31":-5},"handle","g","name","vttThumbMaker","branchName","main","project",{"_32":56,"_13":14,"_34":101,"_45":-5,"_102":26,"_48":49,"_103":49,"_104":-5,"_105":-5,"_106":107,"_108":-5,"_109":26,"_110":-5,"_111":-5,"_112":113,"_51":52,"_114":-5,"_115":-5,"_116":-5,"_117":-5,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_127":128,"_129":130,"_131":28,"_46":47},"ahead",11,"behind",10,"diff",{"_61":62,"_63":64,"_65":66},"hasChanges",true,"sourceBranch",{"_40":20,"_13":16,"_32":55,"_38":56,"_41":33,"_42":57,"_58":49,"_59":39,"_60":52,"_53":14,"_50":12},"targetBranch",{"_32":33,"_34":35,"_36":37,"_13":16,"_38":39,"_40":22,"_41":-5,"_42":-5,"_43":44,"_45":-5,"_46":47,"_48":49,"_50":12,"_51":52,"_53":54},"pull","id","45a1169a-2781-11f0-b46e-569c3dd06744","createdAt",["D",1746209662089],"updatedAt",["D",1726311743678],"projectId","45a0c884-2781-11f0-b46e-569c3dd06744","version","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","4b7be7b6-2781-11f0-b46e-569c3dd06744","4b7b9ae0-2781-11f0-b46e-569c3dd06744",0,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","added",[67,68],"deleted",[],"modified",[],{"_69":91,"_71":-7,"_72":92},{"_69":70,"_71":-7,"_72":73},"path","main.tsx","targetFile","sourceFile",{"_32":74,"_13":70,"_75":76,"_77":-5,"_78":55,"_79":20,"_80":26,"_34":81,"_40":22,"_82":83,"_84":85,"_63":47,"_86":-5,"_87":-7,"_69":88,"_89":90},"4bb636d2-2781-11f0-b46e-569c3dd06744","fileId","4b7e6ab8-2781-11f0-b46e-569c3dd06744","parentId","branchId","branchVersion","latest",["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}","label","children",[70],"contentHash","d5eb6b3ec56e54b0eafdd5fd4180a69022204d269c118351e14ae220d56a47c6","README.md",{"_32":93,"_13":91,"_75":94,"_77":-5,"_78":55,"_79":95,"_80":26,"_34":96,"_40":57,"_82":97,"_84":98,"_63":47,"_86":-5,"_87":-7,"_69":99,"_89":100},"4b7e7b70-2781-11f0-b46e-569c3dd06744","4b7e7bf2-2781-11f0-b46e-569c3dd06744",1,["D",1730741883931],"file","# 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",[91],"66d0b76ca624ab7ae6ff64be3ad5e27926f455ab95e753c665323770a2a1232c",["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,"_138":134},"org",{"_11":12,"_132":-5,"_133":134,"_106":107,"_135":136,"_137":47},"branch","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJqRlBqSjdFTUlTVmVORmpObmFqZmJLVWh5VCJ9","tier","free","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":56,"_13":14,"_34":187,"_45":-5,"_102":26,"_48":49,"_103":49,"_104":-5,"_105":-5,"_106":107,"_108":-5,"_109":26,"_110":-5,"_111":-5,"_112":113,"_51":52,"_114":-5,"_115":-5,"_116":-5,"_117":-5,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_127":188,"_129":189,"_131":190,"_46":47},"tree",[181,182],"files",[181,182],"counts",{"_171":57,"_172":95,"_173":57,"_174":175,"_176":177},"contents",[165,166],"upstreamProject",{"_32":39,"_13":54,"_104":-5,"_105":-5,"_48":49,"_127":164},"upstreamBranch",{"_32":33,"_34":162,"_36":163,"_13":16,"_38":39,"_40":22,"_41":-5,"_42":-5,"_43":44,"_45":-5,"_46":47,"_48":49,"_50":12,"_51":52,"_53":54},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746209662089],["D",1726311743678],{"_11":12,"_138":134},{"_32":93,"_13":91,"_75":94,"_77":-5,"_78":55,"_79":95,"_80":26,"_34":169,"_40":57,"_82":97,"_84":98,"_63":47,"_86":-5,"_69":170},{"_32":74,"_13":70,"_75":76,"_77":-5,"_78":55,"_79":20,"_80":26,"_34":167,"_40":22,"_82":83,"_84":85,"_63":47,"_86":-5,"_69":168},["D",1730753205365],[70],["D",1730741883931],[91],"pulls","branches","forks","envVars",{"_178":57,"_180":57},"connections",{"_178":57,"_179":57},"count","unfilledCount","emptyCount",{"_32":93,"_13":91,"_75":94,"_77":-5,"_78":55,"_79":95,"_80":26,"_34":96,"_40":57,"_82":97,"_84":98,"_63":47,"_86":-5,"_87":185,"_69":186},{"_32":74,"_13":70,"_75":76,"_77":-5,"_78":55,"_79":20,"_80":26,"_34":81,"_40":22,"_82":83,"_84":85,"_63":47,"_86":-5,"_87":183,"_69":184},[],[70],[],[91],["D",1746209671912],{"_11":12,"_138":134},{"_11":12,"_132":-5,"_133":134,"_106":107,"_135":136,"_137":47},{"_40":20,"_13":16,"_32":55,"_38":56,"_41":33,"_42":57,"_58":49,"_59":39,"_60":52,"_53":14,"_50":12},"ctx",{"_127":-5,"_159":224,"_225":226,"_227":228,"_229":47,"_230":47,"_231":47,"_232":26,"_233":-5,"_234":-7,"_235":-7,"_236":57,"_237":47,"_238":47,"_239":-5,"_240":47,"_241":47,"_242":47,"_243":-5},"ENV",{"_195":196,"_197":198,"_199":16,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223},"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"]

Compare

MergevttThumbMaker/mainintoThumbMaker/main

README.md+17-0

main.tsx+391-0