[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_208":209,"_210":211},"routes/_app.x.$handle.$name",{"_95":94,"_31":44,"_103":85,"_26":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":24,"_118":119,"_120":24,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":24},"version",5,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","frontend/index.tsx","latestPath","fileId","a143759a-380e-11f0-90a3-9e149126039e","name","index.tsx","fileType","script","content","/** @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();","createdAt",["D",1748029593470],"branchVersion","branchId","6ea4a17c-380e-11f0-9f7a-9e149126039e","id","6ea456c2-380e-11f0-9f7a-9e149126039e","SA7",["D",1748029508543],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","60ec6c90-380e-11f0-8bf7-1b413b1612ec","pinnedFileId","a6c30c4c-380e-11f0-8841-9e149126039e","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",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":24},"branch",{"_13":84,"_31":85,"_42":41,"_86":43,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":44,"_93":94},"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",{"_42":43,"_31":44,"_37":204,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":205,"_79":206,"_81":207,"_83":24},"tree",[161,165,167],"files",[161,162,163,164,165,166,167],"counts",{"_151":61,"_152":132,"_153":61,"_154":155,"_156":157},"contents",[125,126,127],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":145,"_31":146,"_29":147,"_131":-5,"_40":41,"_39":148,"_133":57,"_37":149,"_13":61,"_33":143,"_35":-5,"_23":24,"_136":-5,"_26":150},{"_42":138,"_31":139,"_29":140,"_131":-5,"_40":41,"_39":141,"_133":57,"_37":142,"_13":61,"_33":143,"_35":-5,"_23":24,"_136":-5,"_26":144},{"_42":128,"_31":129,"_29":130,"_131":-5,"_40":41,"_39":132,"_133":24,"_37":134,"_13":61,"_33":20,"_35":135,"_23":24,"_136":-5,"_26":137},"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",[129],"80b45c5e-380e-11f0-b891-9e149126039e","shared","a8c9a90c-aac0-46f7-9400-29bf69c21bd2",2,["D",1748029538843],"directory",[139],"83853fb6-380e-11f0-8a37-9e149126039e","frontend","cbb48a09-44b6-4335-89d3-04293d827a03",3,["D",1748029543568],[146],"pulls","branches","forks","envVars",{"_158":61,"_160":61},"connections",{"_158":61,"_159":61},"count","unfilledCount","emptyCount",{"_42":145,"_31":146,"_29":147,"_131":-5,"_40":41,"_39":148,"_133":57,"_37":201,"_13":61,"_33":143,"_35":-5,"_23":24,"_136":-5,"_169":202,"_26":203},{"_42":194,"_31":195,"_29":196,"_131":147,"_40":41,"_39":148,"_133":24,"_37":197,"_13":61,"_33":20,"_35":198,"_23":24,"_136":-5,"_169":199,"_26":200},{"_42":190,"_31":32,"_29":30,"_131":147,"_40":41,"_39":14,"_133":24,"_37":191,"_13":61,"_33":34,"_35":36,"_23":24,"_136":-5,"_169":192,"_26":193},{"_42":182,"_31":183,"_29":184,"_131":147,"_40":41,"_39":185,"_133":24,"_37":186,"_13":61,"_33":20,"_35":187,"_23":24,"_136":-5,"_169":188,"_26":189},{"_42":138,"_31":139,"_29":140,"_131":-5,"_40":41,"_39":141,"_133":57,"_37":179,"_13":61,"_33":143,"_35":-5,"_23":24,"_136":-5,"_169":180,"_26":181},{"_42":172,"_31":173,"_29":174,"_131":140,"_40":41,"_39":141,"_133":57,"_37":175,"_13":61,"_33":34,"_35":176,"_23":24,"_136":-5,"_169":177,"_26":178},{"_42":128,"_31":129,"_29":130,"_131":-5,"_40":41,"_39":132,"_133":24,"_37":168,"_13":61,"_33":20,"_35":135,"_23":24,"_136":-5,"_169":170,"_26":171},["D",1748029534755],"children",[],[129],"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}",[],[139,173],["D",1748029538843],[166],[139],"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}",[],[146,183],"a14374b4-380e-11f0-90a3-9e149126039e",["D",1748029593470],[],[146,32],"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",[],[146,195],["D",1748029543568],[162,163,164],[146],["D",1748029508543],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":24},{"_13":84,"_31":85,"_42":41,"_86":43,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":44,"_93":94},"ctx",{"_77":-5,"_122":241,"_242":243,"_244":245,"_246":24,"_247":24,"_248":24,"_249":57,"_250":-5,"_251":-7,"_252":-7,"_253":61,"_254":24,"_255":24,"_256":-5,"_257":24,"_258":24,"_259":24,"_260":-5},"ENV",{"_212":213,"_214":215,"_216":85,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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 · v5