[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_229":230,"_231":232},"routes/_app.x.$handle.$name",{"_100":99,"_32":50,"_108":90,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_21":-5,"_120":-5,"_121":-5,"_122":25,"_123":124,"_125":25,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_48":49,"_32":50,"_38":51,"_52":-5,"_53":25,"_54":55,"_56":55,"_57":-5,"_58":-5,"_18":59,"_60":31,"_61":62,"_63":62,"_64":-5,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":25},"version",6,"changes",[19,20],"aiChatInfo","userId",{"_21":43,"_23":-7,"_24":25,"_26":25,"_27":44,"_29":44},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous","deleted",false,"deletedHere","path","backend/index.ts","latestPath","fileId","a6c30c4c-380e-11f0-8841-9e149126039e","name","index.ts","fileType","script","content","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Main route - serve the HTML page\napp.get(\"/\", async c => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Health check endpoint\napp.get(\"/health\", c => {\n return c.json({ \n status: \"ok\", \n service: \"Image to PDF Converter\",\n timestamp: new Date().toISOString()\n });\n});\n\n// API endpoint for getting supported formats (for future use)\napp.get(\"/api/formats\", c => {\n return c.json({\n supported: [\n { extension: \"jpg\", mimeType: \"image/jpeg\", description: \"JPEG Image\" },\n { extension: \"jpeg\", mimeType: \"image/jpeg\", description: \"JPEG Image\" },\n { extension: \"png\", mimeType: \"image/png\", description: \"PNG Image\" },\n { extension: \"gif\", mimeType: \"image/gif\", description: \"GIF Image\" },\n { extension: \"webp\", mimeType: \"image/webp\", description: \"WebP Image\" }\n ]\n });\n});\n\nexport default app.fetch;","createdAt",["D",1748029602693],"branchVersion","branchId","6ea4a17c-380e-11f0-9f7a-9e149126039e",{"_30":45,"_32":44,"_34":46,"_36":-5,"_38":47,"_40":14,"_41":42,"_24":25},"backend","493fe9ba-1d31-4693-b10c-a81cf629d669","directory",["D",1748029602693],"id","6ea456c2-380e-11f0-9f7a-9e149126039e","SA7",["D",1748029508543],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","60ec6c90-380e-11f0-8bf7-1b413b1612ec","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","c7253a6b-3efb-483b-ae6d-b395c8bc455a","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_107":103},"org",{"_100":99,"_101":-5,"_102":103,"_18":59,"_104":105,"_106":25},"branch",{"_13":89,"_32":90,"_48":42,"_91":49,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":50,"_98":99},"isOwned",16,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","pro989","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ4Vmk3dkhhVFNlYXJHUzJsaThJbnZPTkxXRCJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_32":50,"_38":225,"_52":-5,"_53":25,"_54":55,"_56":55,"_57":-5,"_58":-5,"_18":59,"_60":31,"_61":62,"_63":62,"_64":-5,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":226,"_84":227,"_86":228,"_88":25},"tree",[169,171,175,177],"files",[169,170,171,172,173,174,175,176,177],"counts",{"_159":66,"_160":138,"_161":66,"_162":163,"_164":165},"contents",[130,131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_48":156,"_32":44,"_30":45,"_137":-5,"_41":42,"_40":14,"_139":62,"_38":157,"_13":66,"_34":46,"_36":-5,"_24":25,"_142":-5,"_27":158},{"_48":150,"_32":151,"_30":152,"_137":-5,"_41":42,"_40":153,"_139":62,"_38":154,"_13":66,"_34":46,"_36":-5,"_24":25,"_142":-5,"_27":155},{"_48":144,"_32":145,"_30":146,"_137":-5,"_41":42,"_40":147,"_139":62,"_38":148,"_13":66,"_34":46,"_36":-5,"_24":25,"_142":-5,"_27":149},{"_48":134,"_32":135,"_30":136,"_137":-5,"_41":42,"_40":138,"_139":25,"_38":140,"_13":66,"_34":21,"_36":141,"_24":25,"_142":-5,"_27":143},"7e44ad5c-380e-11f0-8609-9e149126039e","README.md","7e44af00-380e-11f0-8609-9e149126039e","parentId",1,"latest",["D",1748029534755],"# Image to PDF Converter\n\nA simple web application that allows users to upload images and convert them to PDF format.\n\n## Features\n\n- Upload multiple image files (JPEG, PNG, GIF, WebP)\n- Convert images to a single PDF document\n- Download the generated PDF\n- Responsive design with drag-and-drop interface\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Main Hono server with PDF generation\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # React frontend application\n│ └── style.css # Custom styles\n├── shared/\n│ └── types.ts # Shared TypeScript types\n└── README.md\n```\n\n## Usage\n\n1. Visit the application URL\n2. Drag and drop images or click to select files\n3. Click \"Convert to PDF\" to generate the PDF\n4. Download the generated PDF file\n\n## Technical Details\n\n- **Backend**: Hono framework with PDF generation using jsPDF\n- **Frontend**: React with TypeScript and TailwindCSS\n- **File Upload**: Base64 encoding for image processing\n- **PDF Generation**: Client-side PDF creation for better performance","label",[135],"80b45c5e-380e-11f0-b891-9e149126039e","shared","a8c9a90c-aac0-46f7-9400-29bf69c21bd2",2,["D",1748029538843],[145],"83853fb6-380e-11f0-8a37-9e149126039e","frontend","cbb48a09-44b6-4335-89d3-04293d827a03",3,["D",1748029543568],[151],"a6c32aba-380e-11f0-8841-9e149126039e",["D",1748029602693],[44],"pulls","branches","forks","envVars",{"_166":66,"_168":66},"connections",{"_166":66,"_167":66},"count","unfilledCount","emptyCount",{"_48":156,"_32":44,"_30":45,"_137":-5,"_41":42,"_40":14,"_139":62,"_38":222,"_13":66,"_34":46,"_36":-5,"_24":25,"_142":-5,"_179":223,"_27":224},{"_48":218,"_32":33,"_30":31,"_137":45,"_41":42,"_40":14,"_139":25,"_38":219,"_13":66,"_34":35,"_36":37,"_24":25,"_142":-5,"_179":220,"_27":221},{"_48":150,"_32":151,"_30":152,"_137":-5,"_41":42,"_40":153,"_139":62,"_38":215,"_13":66,"_34":46,"_36":-5,"_24":25,"_142":-5,"_179":216,"_27":217},{"_48":208,"_32":209,"_30":210,"_137":152,"_41":42,"_40":153,"_139":25,"_38":211,"_13":66,"_34":21,"_36":212,"_24":25,"_142":-5,"_179":213,"_27":214},{"_48":200,"_32":201,"_30":202,"_137":152,"_41":42,"_40":203,"_139":25,"_38":204,"_13":66,"_34":35,"_36":205,"_24":25,"_142":-5,"_179":206,"_27":207},{"_48":192,"_32":193,"_30":194,"_137":152,"_41":42,"_40":195,"_139":25,"_38":196,"_13":66,"_34":21,"_36":197,"_24":25,"_142":-5,"_179":198,"_27":199},{"_48":144,"_32":145,"_30":146,"_137":-5,"_41":42,"_40":147,"_139":62,"_38":189,"_13":66,"_34":46,"_36":-5,"_24":25,"_142":-5,"_179":190,"_27":191},{"_48":182,"_32":183,"_30":184,"_137":146,"_41":42,"_40":147,"_139":62,"_38":185,"_13":66,"_34":35,"_36":186,"_24":25,"_142":-5,"_179":187,"_27":188},{"_48":134,"_32":135,"_30":136,"_137":-5,"_41":42,"_40":138,"_139":25,"_38":178,"_13":66,"_34":21,"_36":141,"_24":25,"_142":-5,"_179":180,"_27":181},["D",1748029534755],"children",[],[135],"80b43602-380e-11f0-b891-9e149126039e","types.ts","80b436a2-380e-11f0-b891-9e149126039e",["D",1748029538843],"export interface ImageFile {\n id: string;\n name: string;\n size: number;\n type: string;\n dataUrl: string;\n}\n\nexport interface ConversionOptions {\n pageSize: 'A4' | 'Letter' | 'Legal';\n orientation: 'portrait' | 'landscape';\n margin: number;\n imageQuality: number;\n}",[],[145,183],["D",1748029538843],[176],[145],"88c75ba8-380e-11f0-b7ca-9e149126039e","style.css","88c75c5c-380e-11f0-b7ca-9e149126039e",4,["D",1748029552391],"/* Custom styles for the image to PDF converter */\n\n.drag-drop-zone {\n transition: all 0.3s ease;\n}\n\n.drag-drop-zone.drag-over {\n border-color: #3b82f6;\n background-color: #eff6ff;\n transform: scale(1.02);\n}\n\n.image-preview {\n transition: transform 0.2s ease;\n}\n\n.image-preview:hover {\n transform: scale(1.05);\n}\n\n.loading-spinner {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n.fade-in {\n animation: fadeIn 0.3s ease-in;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n}",[],[151,193],"a14374b4-380e-11f0-90a3-9e149126039e","index.tsx","a143759a-380e-11f0-90a3-9e149126039e",5,["D",1748029593470],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef, useCallback } from 'https://esm.sh/react@18.2.0';\nimport { createRoot } from 'https://esm.sh/react-dom@18.2.0/client';\nimport { jsPDF } from 'https://esm.sh/jspdf@2.5.1';\nimport type { ImageFile, ConversionOptions } from '/shared/types.ts';\n\nconst ImageToPDFConverter: React.FC = () => {\n const [images, setImages] = useState([]);\n const [isConverting, setIsConverting] = useState(false);\n const [dragOver, setDragOver] = useState(false);\n const [options, setOptions] = useState({\n pageSize: 'A4',\n orientation: 'portrait',\n margin: 20,\n imageQuality: 0.8\n });\n \n const fileInputRef = useRef(null);\n\n const generateId = () => Math.random().toString(36).substr(2, 9);\n\n const handleFileSelect = useCallback((files: FileList) => {\n const validFiles = Array.from(files).filter(file => \n file.type.startsWith('image/')\n );\n\n validFiles.forEach(file => {\n const reader = new FileReader();\n reader.onload = (e) => {\n const newImage: ImageFile = {\n id: generateId(),\n name: file.name,\n size: file.size,\n type: file.type,\n dataUrl: e.target?.result as string\n };\n setImages(prev => [...prev, newImage]);\n };\n reader.readAsDataURL(file);\n });\n }, []);\n\n const handleDrop = useCallback((e: React.DragEvent) => {\n e.preventDefault();\n setDragOver(false);\n handleFileSelect(e.dataTransfer.files);\n }, [handleFileSelect]);\n\n const handleDragOver = useCallback((e: React.DragEvent) => {\n e.preventDefault();\n setDragOver(true);\n }, []);\n\n const handleDragLeave = useCallback((e: React.DragEvent) => {\n e.preventDefault();\n setDragOver(false);\n }, []);\n\n const removeImage = (id: string) => {\n setImages(prev => prev.filter(img => img.id !== id));\n };\n\n const convertToPDF = async () => {\n if (images.length === 0) return;\n\n setIsConverting(true);\n try {\n const pdf = new jsPDF({\n orientation: options.orientation,\n unit: 'mm',\n format: options.pageSize.toLowerCase()\n });\n\n const pageWidth = pdf.internal.pageSize.getWidth();\n const pageHeight = pdf.internal.pageSize.getHeight();\n const margin = options.margin;\n const maxWidth = pageWidth - (margin * 2);\n const maxHeight = pageHeight - (margin * 2);\n\n for (let i = 0; i < images.length; i++) {\n if (i > 0) {\n pdf.addPage();\n }\n\n const img = images[i];\n \n // Create an image element to get dimensions\n const imgElement = new Image();\n await new Promise((resolve) => {\n imgElement.onload = resolve;\n imgElement.src = img.dataUrl;\n });\n\n const imgWidth = imgElement.width;\n const imgHeight = imgElement.height;\n const aspectRatio = imgWidth / imgHeight;\n\n // Calculate dimensions to fit within page\n let finalWidth = maxWidth;\n let finalHeight = maxWidth / aspectRatio;\n\n if (finalHeight > maxHeight) {\n finalHeight = maxHeight;\n finalWidth = maxHeight * aspectRatio;\n }\n\n // Center the image on the page\n const x = (pageWidth - finalWidth) / 2;\n const y = (pageHeight - finalHeight) / 2;\n\n pdf.addImage(\n img.dataUrl,\n 'JPEG',\n x,\n y,\n finalWidth,\n finalHeight,\n undefined,\n 'FAST'\n );\n }\n\n // Download the PDF\n pdf.save('converted-images.pdf');\n } catch (error) {\n console.error('Error converting to PDF:', error);\n alert('Error converting images to PDF. Please try again.');\n } finally {\n setIsConverting(false);\n }\n };\n\n const formatFileSize = (bytes: number) => {\n if (bytes === 0) return '0 Bytes';\n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n };\n\n return (\n

\n 📄 Image to PDF Converter\n

\n Upload your images and convert them to a single PDF document\n

\n\n {/* Upload Area */}\n fileInputRef.current?.click()}\n >\n

📸

\n Drop images here or click to select\n

\n Supports JPEG, PNG, GIF, and WebP formats\n

\n e.target.files && handleFileSelect(e.target.files)}\n />\n

\n\n {/* Conversion Options */}\n {images.length > 0 && (\n

PDF Options

\n \n Page Size\n \n setOptions(prev => ({ ...prev, pageSize: e.target.value as any }))}\n className=\"w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n \n

\n \n Orientation\n \n setOptions(prev => ({ ...prev, orientation: e.target.value as any }))}\n className=\"w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n

\n \n Margin (mm)\n \n setOptions(prev => ({ ...prev, margin: parseInt(e.target.value) }))}\n className=\"w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n \n Quality\n \n setOptions(prev => ({ ...prev, imageQuality: parseFloat(e.target.value) }))}\n className=\"w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n \n

\n )}\n\n {/* Image Preview Grid */}\n {images.length > 0 && (\n

\n Selected Images ({images.length})\n

\n setImages([])}\n className=\"text-red-600 hover:text-red-800 text-sm font-medium\"\n >\n Clear All\n \n

\n {images.map((image) => (\n

\n \n

\n removeImage(image.id)}\n className=\"absolute top-2 right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm opacity-0 group-hover:opacity-100 transition-opacity\"\n >\n ×\n \n

\n {image.name}\n

\n {formatFileSize(image.size)}\n

\n ))}\n

\n )}\n\n {/* Convert Button */}\n {images.length > 0 && (\n

\n \n {isConverting ? (\n <>\n

\n Converting...\n \n ) : (\n <>\n 📄 Convert to PDF\n \n )}\n \n

\n )}\n\n {/* Instructions */}\n {images.length === 0 && (\n

🚀 Get started by uploading some images!

\n Your images will be converted to a single PDF document with each image on its own page.\n

\n )}\n

\n \n );\n};\n\n// Mount the app\nconst root = createRoot(document.getElementById('root')!);\nroot.render();",[],[151,201],"83853796-380e-11f0-8a37-9e149126039e","index.html","8385384a-380e-11f0-8a37-9e149126039e",["D",1748029543568],"\n\n\n \n \n Image to PDF Converter\n \n \n \n\n\n

\n \n\n",[],[151,209],["D",1748029543568],[172,173,174],[151],"a6c30b98-380e-11f0-8841-9e149126039e",["D",1748029602693],[],[44,33],["D",1748029602693],[170],[44],["D",1748029508543],{"_100":99,"_107":103},{"_100":99,"_101":-5,"_102":103,"_18":59,"_104":105,"_106":25},{"_13":89,"_32":90,"_48":42,"_91":49,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":50,"_98":99},"ctx",{"_82":-5,"_127":262,"_263":264,"_265":266,"_267":25,"_268":25,"_269":25,"_270":62,"_271":-5,"_272":-7,"_273":-7,"_274":66,"_275":25,"_276":25,"_277":-5,"_278":25,"_279":25,"_280":25,"_281":-5},"ENV",{"_233":234,"_235":236,"_237":90,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","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"]

Diff · v6