Val Town Code Snippet Image Generator

\n \n

This service generates images for Val Town code snippets, making your code look great when shared on social media.

\n \n

How It Works

Simply use a URL in this format:

https://[this-service-url]/x/{username}/{project}/{filepath}?L={line}

When this URL is shared on platforms like Twitter, Slack, or Discord, it will display a beautiful code snippet image and redirect to the original Val Town URL.

\n \n

Features

Generates aesthetically pleasing code snippet images
Supports both single lines and line ranges
Automatically redirects to the original Val Town URL
Preserves syntax formatting

\n \n

Examples

\n \n

Single Line Example

View a single line of code:

\n /x/stevekrouse/sqlite/main.tsx?L=10\n

\n $\"Code$ \n

\n Try this example\n View image directly\n

\n \n

Line Range Example

View a range of lines:

\n /x/stevekrouse/sqlite/main.tsx?L=10-15\n

\n $\"Code$ \n

\n Try this example\n View image directly\n

\n \n

Usage Tips

For best results, keep line ranges reasonably small (up to 10 lines)
The service will automatically truncate very long snippets
Works with any public Val Town code
You can directly access images at /image/{username}/{project}/{filepath}?L={line}

\n \n \n

\n\n`;\n}",[],[176],{"_104":185,"_95":186,"_156":116,"_158":-5,"_159":141,"_160":101,"_162":22,"_106":187,"_100":188,"_165":189,"_167":190,"_169":22,"_170":96,"_171":191,"_98":192},"1eaaf3ee-328f-11f0-a141-569c3dd06744","main.tsx",["D",1747425072463],53,"http","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { ImageResponse } from 'npm:@vercel/og';\nimport homepage from './homepage.tsx';\n\nexport default async function(req: Request): Promise {\n try {\n const url = new URL(req.url);\n const path = url.pathname;\n const baseUrl = `${url.protocol}//${url.host}`;\n\n // Homepage route\n if (path === \"/\") {\n return new Response(homepage(baseUrl), {\n headers: { \"Content-Type\": \"text/html\" }\n });\n }\n\n // Image generation route\n if (path.startsWith(\"/image/\")) {\n const match = path.match(/^\\/image\\/([^\\/]+)\\/([^\\/]+)\\/(.+?)$/);\n if (!match) {\n return new Response(\"Invalid image URL format\", { status: 400 });\n }\n\n const [, username, project, filepath] = match;\n const lineParam = url.searchParams.get(\"L\") || \"\";\n const lineMatch = lineParam.match(/^(\\d+)(?:-(\\d+))?$/);\n \n if (!lineMatch) {\n return new Response(\"Invalid line parameter. Use ?L={line} or ?L={start}-{end}\", { status: 400 });\n }\n\n const lineStart = parseInt(lineMatch[1], 10);\n const lineEnd = lineMatch[2] ? parseInt(lineMatch[2], 10) : lineStart;\n\n // Fetch the code\n const valTownUrl = `https://esm.town/v/${username}/${project}/${filepath}`;\n const codeResponse = await fetch(valTownUrl);\n \n if (!codeResponse.ok) {\n return new Response(`Failed to fetch code: ${codeResponse.statusText}`, { status: 500 });\n }\n \n const code = await codeResponse.text();\n const lines = code.split(\"\\n\");\n \n // Extract the requested lines\n const adjustedStart = Math.max(0, lineStart - 1);\n const adjustedEnd = Math.min(lines.length - 1, lineEnd - 1);\n const codeSnippet = lines.slice(adjustedStart, adjustedEnd + 1);\n \n // Limit to 10 lines max\n const displayedLines = codeSnippet.slice(0, 10);\n const hasMoreLines = codeSnippet.length > 10;\n \n // Generate the image\n return new ImageResponse(\n (\n

\n {displayedLines.map((line, index) => (\n

\n \n {adjustedStart + index + 1}\n \n \n {line}\n \n

\n ))}\n {hasMoreLines && (\n

\n ... {codeSnippet.length - 10} more lines\n

\n )}\n

\n ),\n {\n width: 600, // Half the previous width (1200 -> 600)\n height: Math.min(300, 40 + displayedLines.length * 30 + (hasMoreLines ? 30 : 0)) // Also adjusted height proportionally\n }\n );\n }\n\n // Redirect route\n if (path.startsWith(\"/x/\")) {\n const match = path.match(/^\\/x\\/([^\\/]+)\\/([^\\/]+)\\/(.+?)$/);\n if (!match) {\n return new Response(\"Invalid URL format\", { status: 400 });\n }\n\n const [, username, project, filepath] = match;\n const lineParam = url.searchParams.get(\"L\") || \"\";\n \n if (!lineParam) {\n return new Response(\"No line number specified. Use ?L={line} or ?L={start}-{end}\", { status: 400 });\n }\n\n // Create the image URL\n const imageUrl = `${baseUrl}/image/${username}/${project}/${filepath}?L=${lineParam}`;\n \n // Create the original Val Town URL to redirect to\n const lineMatch = lineParam.match(/^(\\d+)(?:-(\\d+))?$/);\n const lineStart = lineMatch ? parseInt(lineMatch[1], 10) : null;\n const lineEnd = lineMatch && lineMatch[2] ? parseInt(lineMatch[2], 10) : lineStart;\n const hashFragment = lineEnd !== lineStart ? `L${lineStart}-${lineEnd}` : `L${lineStart}`;\n const originalUrl = `https://www.val.town/x/${username}/${project}/code/${filepath}#${hashFragment}`;\n\n // Generate HTML with OG tags\n const html = `\n\n\n \n Code from ${username}/${project}/${filepath}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n

Redirecting to Val Town...

If you are not redirected automatically, click here.

\n $\"Code$ \n

\n\n`;\n\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html\" }\n });\n }\n\n // Not found\n return new Response(\"Not found\", { status: 404 });\n } catch (error) {\n console.error(\"Error:\", error);\n return new Response(`Error: ${error.message}`, { status: 500 });\n }\n}",[],[186],{"_104":194,"_95":99,"_156":195,"_158":-5,"_159":141,"_160":196,"_162":118,"_106":197,"_100":198,"_165":189,"_167":199,"_169":22,"_170":-5,"_171":200,"_98":201},"554a8a5a-328e-11f0-a84c-569c3dd06744","0f7501b4-328d-11f0-89d6-569c3dd06744",69,["D",1747424734609],11,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { ImageResponse } from 'npm:@vercel/og';\n \nexport async function GET() {\n return new ImageResponse(\n (\n \n 👋 Hello\n \n ),\n {\n width: 300,\n height: 300,\n },\n );\n}",[],[99],"files",[153,174,184,193],"counts",{"_206":32,"_207":122,"_208":32,"_209":210},"pulls","branches","forks","envVars",{"_211":32,"_212":32},"count","emptyCount","contents",[],{"_104":194,"_95":99,"_156":195,"_158":-5,"_159":141,"_160":196,"_162":118,"_106":216,"_100":198,"_165":189,"_167":199,"_169":22,"_170":-5,"_98":217},["D",1747424734609],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":226,"_151":231,"_202":244,"_166":245,"_213":247,"_248":-5,"_249":-5,"_250":-5,"_251":-5,"_252":253},{"_104":105,"_95":96,"_106":227,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":116,"_117":118,"_119":120,"_121":122,"_16":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_23":228,"_136":229,"_139":230,"_150":22},["D",1747419103041],{"_93":94,"_134":135},{"_93":94,"_138":135,"_14":114},{"_100":120,"_95":43,"_104":141,"_142":105,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":96,"_149":94},[232,235,238,241],{"_104":154,"_95":155,"_156":157,"_158":-5,"_159":141,"_160":161,"_162":22,"_106":163,"_100":164,"_165":166,"_167":168,"_169":22,"_170":-5,"_171":233,"_98":234},[],[155],{"_104":175,"_95":176,"_156":177,"_158":-5,"_159":141,"_160":178,"_162":22,"_106":179,"_100":32,"_165":180,"_167":181,"_169":22,"_170":-5,"_171":236,"_98":237},[],[176],{"_104":185,"_95":186,"_156":116,"_158":-5,"_159":141,"_160":101,"_162":22,"_106":187,"_100":188,"_165":189,"_167":190,"_169":22,"_170":96,"_171":239,"_98":240},[],[186],{"_104":194,"_95":99,"_156":195,"_158":-5,"_159":141,"_160":196,"_162":118,"_106":197,"_100":198,"_165":189,"_167":199,"_169":22,"_170":-5,"_171":242,"_98":243},[],[99],[232,235,238,241],{"_104":194,"_95":99,"_156":195,"_158":-5,"_159":141,"_160":196,"_162":118,"_106":216,"_100":198,"_165":189,"_167":199,"_169":22,"_170":-5,"_98":246},[99],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]