[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_176":177,"_178":179},"routes/_app.x.$handle.$name",{"_93":92,"_31":42,"_102":83,"_26":103,"_13":14,"_104":-5,"_11":105,"_106":107,"_108":109,"_110":111,"_112":113,"_20":-5,"_114":-5,"_115":-5,"_116":24,"_117":118,"_119":55,"_120":-5,"_121":-5,"_122":123},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_40":41,"_31":42,"_35":43,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":-5,"_50":-5,"_18":51,"_52":53,"_54":55,"_56":55,"_57":-5,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":-5,"_65":-5,"_66":67,"_68":67,"_69":70,"_71":70,"_72":70,"_73":67,"_74":67,"_75":76,"_77":78,"_79":80,"_81":24},"version",127,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":20,"_33":34,"_35":36,"_37":14,"_38":39,"_23":24},"previous","deleted",false,"deletedHere","path","deno.json","latestPath","fileId","4cf95db0-737d-11f0-b6cf-0224a6c84d84","name","fileType","content","{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}","createdAt",["D",1754564244704],"branchVersion","branchId","0e10438a-7228-11f0-89a4-0224a6c84d84","id","0e0fd63e-7228-11f0-89a4-0224a6c84d84","letterboxd-last-four-watched",["D",1754417680862],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","5f4a2074-3801-400b-a57f-927baf520b17","pinnedFileId","0e126200-7228-11f0-89a4-0224a6c84d84","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","f54b74cf-26ce-4fe0-8bbd-bacb1e938519","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_93":92,"_101":97},"org",{"_93":92,"_94":95,"_96":97,"_18":51,"_98":99,"_100":24},"branch",{"_13":82,"_31":83,"_40":39,"_84":41,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":42,"_91":92},"isOwned",157,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","gmcabrita","handle","displayName","Gonçalo Mendes Cabrita","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJ5bFUzY3RwTENsM0daNk5mcWdMN2hRdWlmTiJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_40":41,"_31":42,"_35":172,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":-5,"_50":-5,"_18":51,"_52":53,"_54":55,"_56":55,"_57":-5,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":-5,"_65":-5,"_66":67,"_68":67,"_69":70,"_71":70,"_72":70,"_73":67,"_74":67,"_75":173,"_77":174,"_79":175,"_81":24},"tree",[159,160,161],"files",[159,160,161],"counts",{"_148":59,"_149":150,"_151":59,"_152":153,"_154":155},"contents",[124,125,126],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_40":141,"_31":142,"_29":143,"_129":-5,"_38":39,"_37":144,"_131":55,"_35":145,"_13":59,"_32":20,"_33":146,"_23":24,"_136":-5,"_26":147},{"_40":138,"_31":27,"_29":30,"_129":-5,"_38":39,"_37":14,"_131":55,"_35":139,"_13":59,"_32":20,"_33":34,"_23":24,"_136":-5,"_26":140},{"_40":127,"_31":128,"_29":53,"_129":-5,"_38":39,"_37":130,"_131":24,"_35":132,"_13":133,"_32":134,"_33":135,"_23":24,"_136":42,"_26":137},"4cec3658-737d-11f0-8f54-0224a6c84d84","main.tsx","parentId",125,"latest",["D",1754564244703],124,"http","/** @jsxImportSource https://esm.sh/react */\nimport { renderToString } from \"npm:react-dom/server\";\n\n// Define the styles as a template literal string\nconst styles = `\n body {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n background-color: #f0f2f5;\n color: #1c1e21;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n margin: 0;\n padding: 2rem;\n min-height: 100vh;\n box-sizing: border-box;\n }\n .container {\n text-align: center;\n background: #fff;\n padding: 2rem;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n }\n .controls {\n margin: 1.5rem 0;\n display: flex;\n gap: 0.5rem;\n justify-content: center;\n }\n input[type=\"text\"] {\n padding: 0.75rem;\n border: 1px solid #ddd;\n border-radius: 6px;\n font-size: 1rem;\n min-width: 250px;\n }\n button {\n padding: 0.75rem 1.5rem;\n border: none;\n background-color: #007bff;\n color: white;\n border-radius: 6px;\n font-size: 1rem;\n cursor: pointer;\n transition: background-color 0.2s;\n }\n #shareBtn {\n display: none;\n }\n #copyBtn {\n display: none;\n }\n button:hover {\n background-color: #0056b3;\n }\n canvas {\n border: 1px solid #ccc;\n width: 1080px; /* 1080 / 4 */\n height: 1920px; /* 1920 / 4 */\n visibility: hidden;\n display: none;\n border-radius: 4px;\n }\n\n div#last-four-watched > img {\n width: 270px;\n height: 480px;\n }\n\n .loader {\n border: 5px solid #f3f3f3;\n -webkit-animation: spin 1s linear infinite;\n animation: spin 1s linear infinite;\n border-top: 5px solid #555;\n border-radius: 50%;\n width: 50px;\n height: 50px;\n display: none;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n`;\n\n// Define the client-side script that will run in the browser\nconst clientScript = `\n (() => {\n const canvas = document.getElementById('posterCanvas');\n const generateBtn = document.getElementById('generateBtn');\n const shareBtn = document.getElementById('shareBtn');\n const copyBtn = document.getElementById('copyBtn');\n const lastFourWatchedDiv = document.getElementById('last-four-watched');\n const letterboxdHandle = document.getElementById('letterboxdHandle');\n const loaderDiv = document.querySelector(\".loader\");\n const ctx = canvas.getContext('2d');\n ctx.imageSmoothingQuality = \"high\";\n\n function loadImage(src) {\n return new Promise((resolve, reject) => {\n const img = new Image();\n // This is crucial for loading cross-domain images onto the canvas\n img.crossOrigin = \"Anonymous\";\n img.onload = () => resolve(img);\n img.onerror = reject;\n img.src = src;\n });\n }\n\n async function sharePoster() {\n const blob = await (await fetch(document.querySelector('#last-four-watched > img').getAttribute('src'))).blob();\n const file = new File([blob], 'fileName.png', { type: blob.type });\n navigator.share({\n title: 'Letterboxd Last Four Watched',\n files: [file],\n }).catch(() => {});\n }\n\n async function onBegin() {\n shareBtn.style.display = 'none';\n copyBtn.style.display = 'none';\n loaderDiv.style.display = 'block';\n if (lastFourWatchedDiv.firstChild) {\n lastFourWatchedDiv.removeChild(lastFourWatchedDiv.firstChild);\n }\n generateBtn.disabled = true;\n }\n\n async function onSuccess() {\n shareBtn.style.display = 'block';\n copyBtn.style.display = 'block';\n loaderDiv.style.display = 'none';\n generateBtn.disabled = false;\n }\n\n async function onError() {\n shareBtn.style.display = 'none';\n copyBtn.style.display = 'none';\n loaderDiv.style.display = 'none';\n generateBtn.disabled = false;\n }\n\n async function drawPosters(posterUrls) {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.fillStyle = 'black';\n ctx.textAlign = 'center';\n ctx.font = '48px Arial';\n ctx.fillText('Loading Posters...', canvas.width / 2, canvas.height / 2);\n\n try {\n const images = await Promise.all(posterUrls.map(loadImage));\n // NOTE: Posters get slightly distored since 540/960 < 2000/3000 (0.5625 < 0.6666666667)\n const quadrantWidth = canvas.width / 2;\n const quadrantHeight = canvas.height / 2;\n\n // TODO: Think about a solution for the poster resizing problem\n // - 2000x3000 (Poster) vs 1080x1920 (Instagram)\n // - Could resize the posters so that 4 posters together are under 1080x1920\n // - Instead of resizing to 540x960 too make up 1080x1920, resize to:\n // - 636x960, or\n // - Canvas: 1272x1920\n // - 540x810\n // - Canvas: 1080x1620\n ctx.drawImage(images[0], 0, 0, quadrantWidth, quadrantHeight);\n ctx.drawImage(images[1], quadrantWidth, 0, quadrantWidth, quadrantHeight);\n ctx.drawImage(images[2], 0, quadrantHeight, quadrantWidth, quadrantHeight);\n ctx.drawImage(images[3], quadrantWidth, quadrantHeight, quadrantWidth, quadrantHeight);\n\n const dataImage = canvas.toDataURL('image/png');\n const img = new Image();\n img.src = dataImage;\n img.onload = () => {\n onSuccess();\n }\n lastFourWatchedDiv.appendChild(img);\n } catch (error) {\n console.error('Failed to load one or more images:', error);\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.fillStyle = 'red';\n ctx.fillText('Could not load images.', canvas.width / 2, canvas.height / 2);\n onError();\n }\n }\n\n async function generatePosters() {\n try {\n await onBegin();\n\n const response = await fetch(\\`https://http-proxy.val.run/?finalUrl=https://letterboxd.com/\\${letterboxdHandle.value || letterboxdHandle.placeholder}\\`);\n const html = await response.text();\n const parser = new DOMParser();\n const doc = parser.parseFromString(html, 'text/html');\n const result = doc.evaluate(\\`//*[@id=\"recent-activity\"]/ul/li[*]/div[contains(@class, 'film-poster')]\\`, doc, null, XPathResult.ANY_TYPE, null);\n const posterUrls = [];\n let currentNode = result.iterateNext();\n while (currentNode) {\n const slug = currentNode.getAttribute('data-film-slug');\n const alt = currentNode.getAttribute('data-alt-poster') || slug;\n const width = currentNode.getAttribute('data-image-width');\n const height = currentNode.getAttribute('data-image-height');\n const proxyPosterUrl = \\`https://http-proxy.val.run/?finalUrl=https://letterboxd.com/ajax/poster/film/\\${slug}/std/\\${alt}/\\${width}x\\${height}/\\`;\n const posterHtml = await (await fetch(proxyPosterUrl)).text();\n\n const posterParser = new DOMParser();\n const posterDoc = posterParser.parseFromString(posterHtml, 'text/html');\n\n const posterUrl = posterDoc.querySelector('img').getAttribute('src').replace(/-0-\\\\d+-0-\\\\d+-crop\\\\.jpg/, '-0-2000-0-3000-crop.jpg');\n posterUrls.push(\\`https://http-proxy.val.run/?finalUrl=\\${posterUrl}\\`);\n currentNode = result.iterateNext();\n }\n\n drawPosters(posterUrls);\n\n } catch (_error) {\n console.error('Failed to load one or more images:', error);\n onError();\n }\n }\n\n async function copyToClipboard() {\n await canvas.toBlob(async (blob) => {\n await navigator.clipboard.write([\n new ClipboardItem({ 'image/png': blob })\n ]);\n },'image/png');\n }\n\n shareBtn.addEventListener('click', async () => {\n sharePoster();\n });\n\n copyBtn.addEventListener('click', async () => {\n copyToClipboard();\n });\n\n letterboxdHandle.addEventListener('keydown', async (event) => {\n if (event.keyCode === 13) {\n generateBtn.click();\n }\n });\n\n generateBtn.addEventListener('click', async () => {\n generatePosters();\n });\n })();\n`;\n\n/**\n * A React component that renders the entire HTML page structure.\n */\nconst LetterboxdCanvasPage = () => {\n return (\n \n \n \n \n Letterboxd Last Four Watched\n \n \n \n

Letterboxd Last Four Watched

Enter a username to generate your last four watched grid.

\n\n

\n \n \n

\n\n

\n \n \n

\n\n {/* The client-side logic is injected here */}\n \n \n \n );\n};\n\n// Main export function that renders the React component to an HTML string\nexport const _ = (_request: Request) =>\n new Response(renderToString(), {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n","label",[128],"4cf95cf2-737d-11f0-b6cf-0224a6c84d84",["D",1754564244704],[27],"4cf0ea4a-737d-11f0-a389-0224a6c84d84",".vtignore","4cf0eb1c-737d-11f0-a389-0224a6c84d84",126,["D",1754564244703],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[142],"pulls","branches",1,"forks","envVars",{"_156":59,"_158":59},"connections",{"_156":59,"_157":59},"count","unfilledCount","emptyCount",{"_40":141,"_31":142,"_29":143,"_129":-5,"_38":39,"_37":144,"_131":55,"_35":169,"_13":59,"_32":20,"_33":146,"_23":24,"_136":-5,"_163":170,"_26":171},{"_40":138,"_31":27,"_29":30,"_129":-5,"_38":39,"_37":14,"_131":55,"_35":166,"_13":59,"_32":20,"_33":34,"_23":24,"_136":-5,"_163":167,"_26":168},{"_40":127,"_31":128,"_29":53,"_129":-5,"_38":39,"_37":130,"_131":24,"_35":162,"_13":133,"_32":134,"_33":135,"_23":24,"_136":42,"_163":164,"_26":165},["D",1754564244703],"children",[],[128],["D",1754564244704],[],[27],["D",1754564244703],[],[142],["D",1754417680862],{"_93":92,"_101":97},{"_93":92,"_94":95,"_96":97,"_18":51,"_98":99,"_100":24},{"_13":82,"_31":83,"_40":39,"_84":41,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":42,"_91":92},"ctx",{"_75":-5,"_121":209,"_210":211,"_212":213,"_214":24,"_215":24,"_216":24,"_217":55,"_218":-5,"_219":-7,"_220":-7,"_221":59,"_222":24,"_223":24,"_224":-5,"_225":24,"_226":24,"_227":24,"_228":-5},"ENV",{"_180":181,"_182":183,"_184":83,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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 · v127