[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_165":166,"_167":168},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":49,"_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",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_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":25},"version",18,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","970a081e-2792-11f0-9d52-569c3dd06744","name","fileType","http","content","import { Hono } from \"https://deno.land/x/hono@v3.11.7/mod.ts\";\nimport satori from \"npm:satori\";\nimport { render } from \"https://deno.land/x/resvg_wasm@0.2.0/mod.ts\";\nimport \"jsr:@std/dotenv/load\";\nimport { blob } from \"https://esm.town/v/std/blob\"; // Import Val Town blob\n\nconst app = new Hono();\n\n// Fetch Inter font from CDN\nasync function fetchFont(url: string) {\n const res = await fetch(url);\n return new Uint8Array(await res.arrayBuffer());\n}\n\nconst interRegular = await fetchFont(\n \"https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-400-normal.ttf\"\n);\nconst interMedium = await fetchFont(\n \"https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-500-normal.ttf\"\n);\n\napp.get(\"/img\", async (c) => {\n const { link, title, subtitle, nocache } = c.req.query();\n\n // Create a cache key based on the input parameters\n const cacheKey = `og:${link}:${title}:${subtitle}`;\n\n // Try to get the cached image from Val Town blob\n if (!nocache) {\n try {\n const cachedImage = await blob.get(cacheKey);\n if (cachedImage) {\n // Check if cachedImage is a Response object\n if (cachedImage instanceof Response) {\n // Ensure the response is OK\n if (cachedImage.ok) {\n const imageBuffer = await cachedImage.arrayBuffer();\n c.header(\"Content-Type\", \"image/png\");\n c.header(\"X-Cache\", \"HIT\");\n // console.log(\"Cache hit for\", cacheKey);\n return c.body(new Uint8Array(imageBuffer));\n }\n } else {\n // If it's already a Uint8Array, use it directly\n c.header(\"Content-Type\", \"image/png\");\n c.header(\"X-Cache\", \"HIT\");\n // console.log(\"Cache hit for\", cacheKey);\n return c.body(cachedImage);\n }\n }\n } catch (error) {\n console.error(\"Error fetching image from Val Town blob:\", error);\n }\n }\n\n // If we reach here, either there was no cache hit or nocache was true\n // Continue with generating a new image...\n\n // Use provided title and subtitle, or fallback to defaults\n const imageTitle = title || \"\";\n const imageSubtitle = subtitle || \"\";\n\n const svg = await satori({\n type: 'div',\n props: {\n style: {\n height: '100%',\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n justifyContent: 'flex-start',\n backgroundColor: '#F5F4F4', // Light gray background\n padding: '32px',\n },\n children: [\n {\n type: 'div',\n props: {\n style: {\n display: 'flex',\n flexDirection: 'column',\n backgroundColor: '#FDFBF7',\n border: '1px solid #E2DFDF',\n borderRadius: '12px',\n padding: '24px',\n width: '100%',\n height: '100%',\n boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',\n justifyContent: 'flex-start', // Align content to the top\n },\n children: [\n {\n type: 'div',\n props: {\n style: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n justifyContent: 'flex-start', // Align content to the top\n flexGrow: 1, // Allow this div to grow\n paddingTop: '148px', // Add some padding to the top\n },\n children: [\n {\n type: 'h1',\n props: {\n style: {\n fontSize: '52px',\n fontWeight: 500,\n letterSpacing: '-0.04em',\n color: '#161413',\n marginBottom: '0px', // Add margin to separate title and subtitle\n maxWidth: '100%', // Ensure the title doesn't overflow\n overflow: 'hidden', // Hide overflow\n textOverflow: 'ellipsis', // Add ellipsis for overflow\n display: '-webkit-box',\n WebkitLineClamp: 2, // Limit to 2 lines\n WebkitBoxOrient: 'vertical',\n },\n children: imageTitle,\n },\n },\n {\n type: 'p',\n props: {\n style: {\n fontSize: '32px',\n letterSpacing: '-0.04em',\n fontWeight: 500,\n color: '#161413',\n marginTop: '16px', // Add margin to the top instead of bottom\n marginBottom: '0px',\n },\n children: imageSubtitle,\n },\n },\n ],\n },\n },\n ],\n },\n },\n {\n type: 'div',\n props: {\n style: {\n position: 'absolute',\n bottom: '64px',\n left: '64px',\n display: 'flex',\n flexDirection: 'column', // Changed back to column\n alignItems: 'flex-end', // Align items to the right\n },\n children: [\n {\n type: 'div',\n props: {\n style: {\n display: 'flex',\n alignItems: 'center',\n },\n children: [\n {\n type: 'span',\n props: {\n style: {\n fontSize: '18px',\n letterSpacing: '-0.06em',\n fontWeight: 500,\n color: '#A0AEC0', // Lighter gray for \"https://\"\n },\n children: link ? 'https://' : '',\n },\n },\n {\n type: 'span',\n props: {\n style: {\n fontSize: '18px',\n letterSpacing: '-0.06em',\n fontWeight: 500,\n color: '#161413', // Original color for the rest of the URL\n },\n children: (link && link.replace('https://', '')) || \"\",\n },\n },\n ],\n },\n },\n ],\n },\n },\n {\n type: 'div',\n props: {\n style: {\n position: 'absolute',\n bottom: '48px',\n right: '64px',\n display: 'flex',\n flexDirection: 'column', // Changed back to column\n alignItems: 'flex-end', // Align items to the right\n },\n children: [\n {\n type: 'img',\n props: {\n src: 'https://labspace.ai/labspace/labspace-line-2x.png',\n alt: 'Labspace Logo',\n style: {\n width: '48px',\n objectFit: 'contain',\n marginBottom: '0px', // Add space between image and text\n },\n },\n },\n {\n type: 'p',\n props: {\n style: {\n fontSize: '24px',\n letterSpacing: '-0.06em', // Tighter letter spacing\n fontWeight: 500,\n color: '#161413', // Medium gray\n },\n children: 'labspace.ai',\n },\n },\n ],\n },\n },\n ],\n },\n }, {\n width: 1200,\n height: 630,\n fonts: [\n {\n name: \"Inter\",\n data: interRegular,\n weight: 400,\n style: \"normal\",\n },\n {\n name: \"Inter\",\n data: interMedium,\n weight: 500,\n style: \"normal\",\n },\n ],\n });\n\n const pngBuffer = await render(svg);\n\n // Cache the generated image in Val Town blob\n try {\n // Check if the pngBuffer size is less than 128KB (Val Town blob limit)\n if (pngBuffer.byteLength <= 128 * 1024) {\n await blob.set(cacheKey, pngBuffer);\n c.header(\"X-Cache\", \"MISS\");\n } else {\n console.warn(\"Image too large to cache in Val Town blob\");\n c.header(\"X-Cache\", \"SKIP\");\n }\n } catch (error) {\n console.error(\"Error caching image in Val Town blob:\", error);\n c.header(\"X-Cache\", \"ERROR\");\n }\n\n c.header(\"Content-Type\", \"image/png\");\n return c.body(pngBuffer);\n});\n\napp.get(\"/img2\", async (c) => {\n const { link, title, subtitle, attachment, nocache, objectFit, objectPosition, panelWidth, width, height } = c.req.query();\n\n // Create a cache key based on the input parameters\n const cacheKey = `og:${link}:${title}:${subtitle}:${attachment}:${objectFit}:${objectPosition}:${panelWidth}:${width}:${height}`;\n console.log('cacheKey', cacheKey);\n\n if (!nocache) {\n try {\n const cachedImage = await blob.get(cacheKey);\n if (cachedImage) {\n // Check if cachedImage is a Response object\n if (cachedImage instanceof Response) {\n // Ensure the response is OK\n if (cachedImage.ok) {\n const imageBuffer = await cachedImage.arrayBuffer();\n c.header(\"Content-Type\", \"image/png\");\n c.header(\"X-Cache\", \"HIT\");\n // console.log(\"Cache hit for\", cacheKey);\n return c.body(new Uint8Array(imageBuffer));\n }\n } else {\n // If it's already a Uint8Array, use it directly\n c.header(\"Content-Type\", \"image/png\");\n c.header(\"X-Cache\", \"HIT\");\n // console.log(\"Cache hit for\", cacheKey);\n return c.body(cachedImage);\n }\n }\n } catch (error) {\n console.error(\"Error fetching image from Val Town blob:\", error);\n }\n }\n\n // Use provided title and subtitle, or fallback to defaults\n const imageTitle = title || \"\";\n const imageSubtitle = subtitle || \"\";\n const svg = await satori({\n type: 'div',\n props: {\n style: {\n height: '100%',\n width: '100%',\n display: 'flex',\n flexDirection: 'row',\n backgroundColor: '#F5F4F4',\n padding: '12px',\n },\n children: [\n {\n type: 'div',\n props: {\n style: {\n display: 'flex',\n flexDirection: 'column',\n backgroundColor: '#FDFBF7',\n borderRadius: '12px',\n border: '1px solid #E2DFDF',\n padding: '24px',\n width: panelWidth || '50%',\n height: '100%',\n boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',\n justifyContent: 'space-between',\n },\n children: [\n {\n type: 'div',\n props: {\n style: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n justifyContent: 'flex-start',\n flexGrow: 1,\n paddingTop: '104px',\n maxWidth: '650px',\n },\n children: [\n {\n type: 'img',\n props: {\n src: 'https://labspace.ai/labspace/labspace-line-2x.png',\n alt: 'Labspace Logo',\n style: {\n width: '48px',\n objectFit: 'contain',\n marginBottom: '0px',\n },\n },\n },\n {\n type: 'h1',\n props: {\n style: {\n fontSize: '52px',\n fontWeight: 500,\n letterSpacing: '-0.04em',\n color: '#161413',\n marginBottom: '0px',\n maxWidth: '100%',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n display: '-webkit-box',\n WebkitLineClamp: 2,\n WebkitBoxOrient: 'vertical',\n },\n children: imageTitle,\n },\n },\n {\n type: 'p',\n props: {\n style: {\n fontSize: '32px',\n letterSpacing: '-0.04em',\n fontWeight: 500,\n color: '#161413',\n marginTop: '16px',\n marginBottom: '0px',\n },\n children: imageSubtitle,\n },\n },\n ],\n },\n },\n {\n type: 'div',\n props: {\n style: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n marginTop: '16px',\n },\n children: [\n {\n type: 'div',\n props: {\n style: {\n display: 'flex',\n alignItems: 'center',\n },\n children: [\n {\n type: 'span',\n props: {\n style: {\n fontSize: '18px',\n letterSpacing: '-0.06em',\n fontWeight: 500,\n color: '#A0AEC0',\n },\n children: link ? 'https://' : '',\n },\n },\n {\n type: 'span',\n props: {\n style: {\n fontSize: '18px',\n letterSpacing: '-0.06em',\n fontWeight: 500,\n color: '#161413',\n },\n children: (link && link.replace('https://', '')) || \"\",\n },\n },\n ],\n },\n },\n ],\n },\n },\n ],\n },\n },\n {\n type: 'div',\n props: {\n style: {\n flex: 1, // This will make the div expand to fill the remaining space\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n paddingTop: '24px',\n paddingBottom: '24px',\n paddingLeft: '24px',\n paddingRight: '12px',\n },\n children: [\n {\n type: 'img',\n props: {\n src: attachment || 'https://interface-experience.org/site/wp-content/uploads/2015/01/IE-Windows-95-1-e1427506564902-1000x340.jpg',\n style: {\n width: width || '100%',\n height: height || '100%',\n objectFit: objectFit || 'cover',\n objectPosition: objectPosition || 'center',\n },\n },\n }\n ],\n },\n },\n ],\n },\n }, {\n width: 1200,\n height: 630,\n fonts: [\n {\n name: \"Inter\",\n data: interRegular,\n weight: 400,\n style: \"normal\",\n },\n {\n name: \"Inter\",\n data: interMedium,\n weight: 500,\n style: \"normal\",\n },\n ],\n });\n\n const pngBuffer = await render(svg);\n\n // Cache the generated image in Deno KV\n try {\n // Check if the pngBuffer size is less than 128KB (Deno KV limit)\n if (pngBuffer.byteLength <= 128 * 1024) {\n await blob.set(cacheKey, pngBuffer);\n c.header(\"X-Cache\", \"MISS\");\n } else {\n console.warn(\"Image too large to cache in Deno KV\");\n c.header(\"X-Cache\", \"SKIP\");\n }\n } catch (error) {\n console.error(\"Error caching image in Deno KV:\", error);\n c.header(\"X-Cache\", \"ERROR\");\n }\n\n c.header(\"Content-Type\", \"image/png\");\n return c.body(pngBuffer);\n});\n\n\napp.get(\"/\", (c) => {\n const html = `\n\n\n\n \n \n OG Image Generator\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n

OG Image Generator

Generate custom Open Graph images for your web pages.

\n \n

\n $\"Generated$ \n \n

\n \n \n

Width

\n 0\n

Height

\n 0\n

Size

\n 0 KB\n

\n Source code\n

\n A labspace.ai experiment\n

\n \n\n\n `;\n\n return c.html(html);\n});\n\n// Export app.fetch for Val Town, otherwise export app — this is only for hono apps\nexport default (typeof Deno !== \"undefined\" && Deno.env.get(\"valtown\"))\n ? app.fetch\n : app;\n\n","import { Hono } from \"https://deno.land/x/hono@v3.11.7/mod.ts\";\nimport satori from \"npm:satori\";\nimport { render } from \"https://deno.land/x/resvg_wasm@0.2.0/mod.ts\";\nimport \"jsr:@std/dotenv/load\";\nimport { blob } from \"https://esm.town/v/std/blob\"; // Import Val Town blob\n\nconst app = new Hono();\n\n// Fetch Inter font from CDN\nasync function fetchFont(url: string) {\n const res = await fetch(url);\n return new Uint8Array(await res.arrayBuffer());\n}\n\nconst interRegular = await fetchFont(\n \"https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-400-normal.ttf\"\n);\nconst interMedium = await fetchFont(\n \"https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-500-normal.ttf\"\n);\n\napp.get(\"/img\", async (c) => {\n const { link, title, subtitle, nocache } = c.req.query();\n\n // Create a cache key based on the input parameters\n const cacheKey = `og:${link}:${title}:${subtitle}`;\n\n // Try to get the cached image from Val Town blob\n if (!nocache) {\n try {\n const cachedImage = await blob.get(cacheKey);\n if (cachedImage) {\n // Check if cachedImage is a Response object\n if (cachedImage instanceof Response) {\n // Ensure the response is OK\n if (cachedImage.ok) {\n const imageBuffer = await cachedImage.arrayBuffer();\n c.header(\"Content-Type\", \"image/png\");\n c.header(\"X-Cache\", \"HIT\");\n console.log(\"Cache hit for\", cacheKey);\n return c.body(new Uint8Array(imageBuffer));\n }\n } else {\n // If it's already a Uint8Array, use it directly\n c.header(\"Content-Type\", \"image/png\");\n c.header(\"X-Cache\", \"HIT\");\n console.log(\"Cache hit for\", cacheKey);\n return c.body(cachedImage);\n }\n } else {\n console.log(\"Cache miss for\", cacheKey);\n }\n } catch (error) {\n console.error(\"Error fetching image from Val Town blob:\", error);\n }\n }\n\n // If we reach here, either there was no cache hit or nocache was true\n // Continue with generating a new image...\n\n // Use provided title and subtitle, or fallback to defaults\n const imageTitle = title || \"\";\n const imageSubtitle = subtitle || \"\";\n\n const svg = await satori({\n type: 'div',\n props: {\n style: {\n height: '100%',\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n justifyContent: 'flex-start',\n backgroundColor: '#F5F4F4', // Light gray background\n padding: '32px',\n },\n children: [\n {\n type: 'div',\n props: {\n style: {\n display: 'flex',\n flexDirection: 'column',\n backgroundColor: '#FDFBF7',\n border: '1px solid #E2DFDF',\n borderRadius: '12px',\n padding: '24px',\n width: '100%',\n height: '100%',\n boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',\n justifyContent: 'flex-start', // Align content to the top\n },\n children: [\n {\n type: 'div',\n props: {\n style: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n justifyContent: 'flex-start', // Align content to the top\n flexGrow: 1, // Allow this div to grow\n paddingTop: '148px', // Add some padding to the top\n },\n children: [\n {\n type: 'h1',\n props: {\n style: {\n fontSize: '52px',\n fontWeight: 500,\n letterSpacing: '-0.04em',\n color: '#161413',\n marginBottom: '0px', // Add margin to separate title and subtitle\n maxWidth: '100%', // Ensure the title doesn't overflow\n overflow: 'hidden', // Hide overflow\n textOverflow: 'ellipsis', // Add ellipsis for overflow\n display: '-webkit-box',\n WebkitLineClamp: 2, // Limit to 2 lines\n WebkitBoxOrient: 'vertical',\n },\n children: imageTitle,\n },\n },\n {\n type: 'p',\n props: {\n style: {\n fontSize: '32px',\n letterSpacing: '-0.04em',\n fontWeight: 500,\n color: '#161413',\n marginTop: '16px', // Add margin to the top instead of bottom\n marginBottom: '0px',\n },\n children: imageSubtitle,\n },\n },\n ],\n },\n },\n ],\n },\n },\n {\n type: 'div',\n props: {\n style: {\n position: 'absolute',\n bottom: '64px',\n left: '64px',\n display: 'flex',\n flexDirection: 'column', // Changed back to column\n alignItems: 'flex-end', // Align items to the right\n },\n children: [\n {\n type: 'div',\n props: {\n style: {\n display: 'flex',\n alignItems: 'center',\n },\n children: [\n {\n type: 'span',\n props: {\n style: {\n fontSize: '18px',\n letterSpacing: '-0.06em',\n fontWeight: 500,\n color: '#A0AEC0', // Lighter gray for \"https://\"\n },\n children: link ? 'https://' : '',\n },\n },\n {\n type: 'span',\n props: {\n style: {\n fontSize: '18px',\n letterSpacing: '-0.06em',\n fontWeight: 500,\n color: '#161413', // Original color for the rest of the URL\n },\n children: (link && link.replace('https://', '')) || \"\",\n },\n },\n ],\n },\n },\n ],\n },\n },\n {\n type: 'div',\n props: {\n style: {\n position: 'absolute',\n bottom: '48px',\n right: '64px',\n display: 'flex',\n flexDirection: 'column', // Changed back to column\n alignItems: 'flex-end', // Align items to the right\n },\n children: [\n {\n type: 'img',\n props: {\n src: 'https://labspace.ai/labspace/labspace-line-2x.png',\n alt: 'Labspace Logo',\n style: {\n width: '48px',\n objectFit: 'contain',\n marginBottom: '0px', // Add space between image and text\n },\n },\n },\n {\n type: 'p',\n props: {\n style: {\n fontSize: '24px',\n letterSpacing: '-0.06em', // Tighter letter spacing\n fontWeight: 500,\n color: '#161413', // Medium gray\n },\n children: 'labspace.ai',\n },\n },\n ],\n },\n },\n ],\n },\n }, {\n width: 1200,\n height: 630,\n fonts: [\n {\n name: \"Inter\",\n data: interRegular,\n weight: 400,\n style: \"normal\",\n },\n {\n name: \"Inter\",\n data: interMedium,\n weight: 500,\n style: \"normal\",\n },\n ],\n });\n\n const pngBuffer = await render(svg);\n\n // Cache the generated image in Val Town blob\n try {\n // Check if the pngBuffer size is less than 128KB (Val Town blob limit)\n if (pngBuffer.byteLength <= 10 * 128 * 1024) {\n await blob.set(cacheKey, pngBuffer);\n c.header(\"X-Cache\", \"MISS\");\n } else {\n console.warn(\"Image too large to cache in Val Town blob\");\n c.header(\"X-Cache\", \"SKIP\");\n }\n } catch (error) {\n console.error(\"Error caching image in Val Town blob:\", error);\n c.header(\"X-Cache\", \"ERROR\");\n }\n\n c.header(\"Content-Type\", \"image/png\");\n return c.body(pngBuffer);\n});\n\napp.get(\"/img2\", async (c) => {\n const { link, title, subtitle, attachment, nocache, objectFit, objectPosition, panelWidth, width, height } = c.req.query();\n\n // Create a cache key based on the input parameters\n const cacheKey = `og:${link}:${title}:${subtitle}:${attachment}:${objectFit}:${objectPosition}:${panelWidth}:${width}:${height}`;\n console.log('cacheKey', cacheKey);\n\n if (!nocache) {\n try {\n const cachedImage = await blob.get(cacheKey);\n if (cachedImage) {\n // Check if cachedImage is a Response object\n if (cachedImage instanceof Response) {\n // Ensure the response is OK\n if (cachedImage.ok) {\n const imageBuffer = await cachedImage.arrayBuffer();\n c.header(\"Content-Type\", \"image/png\");\n c.header(\"X-Cache\", \"HIT\");\n // console.log(\"Cache hit for\", cacheKey);\n return c.body(new Uint8Array(imageBuffer));\n }\n } else {\n // If it's already a Uint8Array, use it directly\n c.header(\"Content-Type\", \"image/png\");\n c.header(\"X-Cache\", \"HIT\");\n // console.log(\"Cache hit for\", cacheKey);\n return c.body(cachedImage);\n }\n }\n } catch (error) {\n console.error(\"Error fetching image from Val Town blob:\", error);\n }\n }\n\n // Use provided title and subtitle, or fallback to defaults\n const imageTitle = title || \"\";\n const imageSubtitle = subtitle || \"\";\n const svg = await satori({\n type: 'div',\n props: {\n style: {\n height: '100%',\n width: '100%',\n display: 'flex',\n flexDirection: 'row',\n backgroundColor: '#F5F4F4',\n padding: '12px',\n },\n children: [\n {\n type: 'div',\n props: {\n style: {\n display: 'flex',\n flexDirection: 'column',\n backgroundColor: '#FDFBF7',\n borderRadius: '12px',\n border: '1px solid #E2DFDF',\n padding: '24px',\n width: panelWidth || '50%',\n height: '100%',\n boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',\n justifyContent: 'space-between',\n },\n children: [\n {\n type: 'div',\n props: {\n style: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n justifyContent: 'flex-start',\n flexGrow: 1,\n paddingTop: '104px',\n maxWidth: '650px',\n },\n children: [\n {\n type: 'img',\n props: {\n src: 'https://labspace.ai/labspace/labspace-line-2x.png',\n alt: 'Labspace Logo',\n style: {\n width: '48px',\n objectFit: 'contain',\n marginBottom: '0px',\n },\n },\n },\n {\n type: 'h1',\n props: {\n style: {\n fontSize: '52px',\n fontWeight: 500,\n letterSpacing: '-0.04em',\n color: '#161413',\n marginBottom: '0px',\n maxWidth: '100%',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n display: '-webkit-box',\n WebkitLineClamp: 2,\n WebkitBoxOrient: 'vertical',\n },\n children: imageTitle,\n },\n },\n {\n type: 'p',\n props: {\n style: {\n fontSize: '32px',\n letterSpacing: '-0.04em',\n fontWeight: 500,\n color: '#161413',\n marginTop: '16px',\n marginBottom: '0px',\n },\n children: imageSubtitle,\n },\n },\n ],\n },\n },\n {\n type: 'div',\n props: {\n style: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n marginTop: '16px',\n },\n children: [\n {\n type: 'div',\n props: {\n style: {\n display: 'flex',\n alignItems: 'center',\n },\n children: [\n {\n type: 'span',\n props: {\n style: {\n fontSize: '18px',\n letterSpacing: '-0.06em',\n fontWeight: 500,\n color: '#A0AEC0',\n },\n children: link ? 'https://' : '',\n },\n },\n {\n type: 'span',\n props: {\n style: {\n fontSize: '18px',\n letterSpacing: '-0.06em',\n fontWeight: 500,\n color: '#161413',\n },\n children: (link && link.replace('https://', '')) || \"\",\n },\n },\n ],\n },\n },\n ],\n },\n },\n ],\n },\n },\n {\n type: 'div',\n props: {\n style: {\n flex: 1, // This will make the div expand to fill the remaining space\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n paddingTop: '24px',\n paddingBottom: '24px',\n paddingLeft: '24px',\n paddingRight: '12px',\n },\n children: [\n {\n type: 'img',\n props: {\n src: attachment || 'https://interface-experience.org/site/wp-content/uploads/2015/01/IE-Windows-95-1-e1427506564902-1000x340.jpg',\n style: {\n width: width || '100%',\n height: height || '100%',\n objectFit: objectFit || 'cover',\n objectPosition: objectPosition || 'center',\n },\n },\n }\n ],\n },\n },\n ],\n },\n }, {\n width: 1200,\n height: 630,\n fonts: [\n {\n name: \"Inter\",\n data: interRegular,\n weight: 400,\n style: \"normal\",\n },\n {\n name: \"Inter\",\n data: interMedium,\n weight: 500,\n style: \"normal\",\n },\n ],\n });\n\n const pngBuffer = await render(svg);\n\n // Cache the generated image in Deno KV\n try {\n // Check if the pngBuffer size is less than 128KB (Deno KV limit)\n if (pngBuffer.byteLength <= 10 * 128 * 1024) {\n await blob.set(cacheKey, pngBuffer);\n c.header(\"X-Cache\", \"MISS\");\n } else {\n console.warn(`${cacheKey}: Image too large to cache in Deno KV: ${pngBuffer.byteLength}`);\n c.header(\"X-Cache\", \"SKIP\");\n }\n } catch (error) {\n console.error(\"Error caching image in Deno KV:\", error);\n c.header(\"X-Cache\", \"ERROR\");\n }\n\n c.header(\"Content-Type\", \"image/png\");\n return c.body(pngBuffer);\n});\n\n\napp.get(\"/\", (c) => {\n const html = `\n\n\n\n \n \n OG Image Generator\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n

OG Image Generator

Generate custom Open Graph images for your web pages.

\n \n

\n $\"Generated$ \n \n

\n \n \n

Width

\n 0\n

Height

\n 0\n

Size

\n 0 KB\n

\n Source code\n

\n A labspace.ai experiment\n

\n \n\n\n `;\n\n return c.html(html);\n});\n\n// Export app.fetch for Val Town, otherwise export app — this is only for hono apps\nexport default (typeof Deno !== \"undefined\" && Deno.env.get(\"valtown\") && Deno.env.get(\"mode\") !== \"local\")\n ? app.fetch\n : app;\n\n","createdAt",["D",1729628919780],"branchVersion","branchId","9708055a-2792-11f0-9d52-569c3dd06744","id","9707b0a0-2792-11f0-9d52-569c3dd06744","og",["D",1746217100103],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","a8270e74-6479-475a-8025-9b69544ee0e7","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","8319defa-6e1a-46d4-ba66-2114ffd3360b","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":55,"_99":100,"_101":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"isOwned",34,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","yawnxyz","handle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2NnaHhpxNuH1xWRIRjQNoo16TVc.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":161,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_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":162,"_79":163,"_81":164,"_83":25},"tree",[152,153],"files",[152,153],"counts",{"_142":61,"_143":138,"_144":61,"_145":146,"_147":148},"contents",[126,127],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{"_31":125},"og.labspace.ai",{"_43":135,"_32":136,"_30":137,"_129":-5,"_41":42,"_40":138,"_130":49,"_38":139,"_13":61,"_33":20,"_35":140,"_24":25,"_133":-5,"_27":141},{"_43":128,"_32":28,"_30":31,"_129":-5,"_41":42,"_40":14,"_130":25,"_38":131,"_13":132,"_33":34,"_35":37,"_24":25,"_133":-5,"_27":134},"976a24a6-2792-11f0-9d52-569c3dd06744","parentId","latest",["D",1729628919780],17,"label",[28],"970a0be8-2792-11f0-9d52-569c3dd06744","README.md","970a0c7e-2792-11f0-9d52-569c3dd06744",1,["D",1729611541700],"Ever wonder how GitHub generates their images when you share a repo on social media?\n\nIn this example we're using satori and a Deno-friendly SVG WASM creating an OpenGraph image dynamically. E.g. this image can be used when sharing a website, and it'll show up in iMessage or Twitter / other socials.\n\nGenerated images are cached in Valtown's Blob system.\n\nTo check metatags, you can use https://metatags.io/?url=https://yawnxyz-og.web.val.run\n\nMigrated from folder: labspace/og",[136],"pulls","branches","forks","envVars",{"_149":61,"_151":61},"connections",{"_149":61,"_150":61},"count","unfilledCount","emptyCount",{"_43":135,"_32":136,"_30":137,"_129":-5,"_41":42,"_40":138,"_130":49,"_38":158,"_13":61,"_33":20,"_35":140,"_24":25,"_133":-5,"_155":159,"_27":160},{"_43":128,"_32":28,"_30":31,"_129":-5,"_41":42,"_40":14,"_130":25,"_38":154,"_13":132,"_33":34,"_35":37,"_24":25,"_133":-5,"_155":156,"_27":157},["D",1729628919780],"children",[],[28],["D",1729611541700],[],[136],["D",1746217100103],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":55,"_99":100,"_101":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"ctx",{"_77":-5,"_122":198,"_199":200,"_201":202,"_203":25,"_204":25,"_205":25,"_206":49,"_207":-5,"_208":-7,"_209":-7,"_210":61,"_211":25,"_212":25,"_213":-5,"_214":25,"_215":25,"_216":25,"_217":-5},"ENV",{"_169":170,"_171":172,"_173":85,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197},"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"]

Diff · v18