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",1731718654501],"version",33,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount",1,"commentCount","prCount","mergedPr",{"_132":133,"_134":135},"handle","yawnxyz","profileImageUrl","https://images.clerk.dev/oauth_github/img_2NnaHhpxNuH1xWRIRjQNoo16TVc.jpeg","forkedVal","interval","slug","yawnxyz/og","description","Ever wonder how GitHub generates their images when you share a repo on social media? In 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. Generated images are cached in Valtown's Blob system. To check metatags, you can use https://metatags.io/?url=https://yawnxyz-og.web.val.run","versions",[144,147,151,155,159,163,167,171,175,179,183,187,191,195,199,203,207,211,215,219,223,227,231,235,239,243,247,251,255,259,263,267,270,273],{"_120":121,"_145":-5,"_118":146,"_115":113},"prId",["D",1731718654501],{"_120":148,"_145":-5,"_118":149,"_115":150},32,["D",1731718435258],"415b2ad0-a3b5-11ef-bb70-e6cdfca9ef9f",{"_120":152,"_145":-5,"_118":153,"_115":154},31,["D",1731718301485],"f19eafda-a3b4-11ef-a036-e6cdfca9ef9f",{"_120":156,"_145":-5,"_118":157,"_115":158},30,["D",1730826626239],"d9c2f58e-9b98-11ef-a1c2-de64eea55b61",{"_120":160,"_145":-5,"_118":161,"_115":162},29,["D",1730775051544],"c4d887ce-9b20-11ef-a23e-de64eea55b61",{"_120":164,"_145":-5,"_118":165,"_115":166},28,["D",1730414087461],"557e6ee8-97d8-11ef-b4ef-de64eea55b61",{"_120":168,"_145":-5,"_118":169,"_115":170},27,["D",1730412930988],"a42d22da-97d5-11ef-aaa6-de64eea55b61",{"_120":172,"_145":-5,"_118":173,"_115":174},26,["D",1730412847619],"727d66e6-97d5-11ef-8abd-de64eea55b61",{"_120":176,"_145":-5,"_118":177,"_115":178},25,["D",1730410145414],"27d8689e-97cf-11ef-883a-de64eea55b61",{"_120":180,"_145":-5,"_118":181,"_115":182},24,["D",1730409327153],"401f3da8-97cd-11ef-bf87-de64eea55b61",{"_120":184,"_145":-5,"_118":185,"_115":186},23,["D",1730407914460],"f6179852-97c9-11ef-8666-de64eea55b61",{"_120":188,"_145":-5,"_118":189,"_115":190},22,["D",1730061295642],"ed2ba8fc-94a2-11ef-8f2b-de64eea55b61",{"_120":192,"_145":-5,"_118":193,"_115":194},21,["D",1730056013695],"a0e279a0-9496-11ef-9e1a-de64eea55b61",{"_120":196,"_145":-5,"_118":197,"_115":198},20,["D",1729631098322],"4b95f0e8-90b9-11ef-a347-de64eea55b61",{"_120":200,"_145":-5,"_118":201,"_115":202},19,["D",1729631037267],"2731c86c-90b9-11ef-98ff-de64eea55b61",{"_120":204,"_145":-5,"_118":205,"_115":206},18,["D",1729629247708],"fc88b0ac-90b4-11ef-bcf1-de64eea55b61",{"_120":208,"_145":-5,"_118":209,"_115":210},17,["D",1729628919780],"3912d4b8-90b4-11ef-a70b-de64eea55b61",{"_120":212,"_145":-5,"_118":213,"_115":214},16,["D",1729628051921],"33ca1f18-90b2-11ef-94c8-de64eea55b61",{"_120":216,"_145":-5,"_118":217,"_115":218},15,["D",1729624599233],"29d3b8f0-90aa-11ef-83b4-de64eea55b61",{"_120":220,"_145":-5,"_118":221,"_115":222},14,["D",1729613876065],"3252333a-9091-11ef-96d2-de64eea55b61",{"_120":224,"_145":-5,"_118":225,"_115":226},13,["D",1729613843213],"1ebd5c1e-9091-11ef-84c6-de64eea55b61",{"_120":228,"_145":-5,"_118":229,"_115":230},12,["D",1729612805056],"b3f30886-908e-11ef-9c08-de64eea55b61",{"_120":232,"_145":-5,"_118":233,"_115":234},11,["D",1729612694574],"7218e714-908e-11ef-8b86-de64eea55b61",{"_120":236,"_145":-5,"_118":237,"_115":238},10,["D",1729612580666],"2e33defa-908e-11ef-8695-de64eea55b61",{"_120":240,"_145":-5,"_118":241,"_115":242},9,["D",1729612556304],"1faec5b6-908e-11ef-8cbb-de64eea55b61",{"_120":244,"_145":-5,"_118":245,"_115":246},8,["D",1729612475624],"ef97c404-908d-11ef-b449-de64eea55b61",{"_120":248,"_145":-5,"_118":249,"_115":250},7,["D",1729612472388],"edaa1d04-908d-11ef-bcf4-de64eea55b61",{"_120":252,"_145":-5,"_118":253,"_115":254},6,["D",1729612204988],"4e480686-908d-11ef-b3e1-de64eea55b61",{"_120":256,"_145":-5,"_118":257,"_115":258},5,["D",1729611671771],"10758ad2-908c-11ef-924c-de64eea55b61",{"_120":260,"_145":-5,"_118":261,"_115":262},4,["D",1729611577197],"d816c71e-908b-11ef-a418-de64eea55b61",{"_120":264,"_145":-5,"_118":265,"_115":266},3,["D",1729611576798],"d7d9c440-908b-11ef-affd-de64eea55b61",{"_120":91,"_145":-5,"_118":268,"_115":269},["D",1729611562639],"cf6950b4-908b-11ef-b1ca-de64eea55b61",{"_120":127,"_145":-5,"_118":271,"_115":272},["D",1729611545831],"c564b3ba-908b-11ef-8a59-de64eea55b61",{"_120":32,"_145":-5,"_118":274,"_115":275},["D",1729611541700],"c2ee4e70-908b-11ef-8042-de64eea55b61","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_94":283,"_284":285,"_95":286},"single","redirect","/v/yawnxyz/og/versions",{"_115":154,"_116":287,"_120":152,"_118":288,"_289":100,"_101":102,"_110":111,"_132":133,"_11":97,"_290":-5,"_291":-5,"_292":-5,"_280":26,"_138":139},"/* \n\n testers:\n - https://og.localhost/?link=https://list.labspace.ai&title=Labspace%20List&subtitle=A%20list%20of%20small%20labspace.ai%20web%20apps\n - https://yawnxyz-og.web.val.run/?link=https://list.labspace.ai&title=Labspace%20List&subtitle=A%20list%20of%20small%20labspace.ai%20web%20apps\n\n\n https://og.localhost/img?link=https%3A%2F%2Flist.labspace.ai&title=Put+all+your+research+data+and+assets+in+one+place&subtitle=An%20all-in-one%20reference%20manager,%20electronic%20lab%20notebook,%20and%20LIMS&nocache=true\n\n\n \n\n - https://og.localhost/img?link=https%3A%2F%2Flist.labspace.ai&title=Put+all+your+research+data+and+assets+in+one+place&subtitle=An%20all-in-one%20reference%20manager,%20electronic%20lab%20notebook,%20and%20LIMS&nocache=true\n\n Green:\n - https://og.localhost/img?link=https%3A%2F%2Flist.labspace.ai&title=Put+all+your+research+data+and+assets+in+one+place&subtitle=An%20all-in-one%20reference%20manager,%20electronic%20lab%20notebook,%20and%20LIMS&textColor=256F43&gradientStart=246B43&gradientEnd=FFFAE8&nocache=true\n\n\n Img 3 examples\n - https://og.localhost/img2?link=https%3A%2F%2Flist.labspace.ai&title=Put+all+your+research+data+and+assets+in+one+place&subtitle=An%20all-in-one%20reference%20manager,%20electronic%20lab%20notebook,%20and%20LIMS&textColor=256F43&gradientStart=94DBB3&gradientEnd=FFFAE8&attachment=https://f2.phage.directory/blogalog/counter.png&nocache=true\n - https://og.localhost/img2?link=https%3A%2F%2Flist.labspace.ai&title=Put+all+your+research+data+and+assets+in+one+place&subtitle=An%20all-in-one%20reference%20manager,%20electronic%20lab%20notebook,%20and%20LIMS&attachment=https://f2.phage.directory/blogalog/counter.png&nocache=true\n */\n\nimport { 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\nconst tailwindColors = {\n arng: {\n DEFAULT: '#f9f2e6',\n light: '#f9f2e6',\n },\n\n 'accent': '#FFFBEB',\n 'background': '#F5F4F4',\n 'page-bg': '#EBF4FF',\n 'app-bg': '#FFFFFF',\n\n white: {\n DEFAULT: '#ffffff',\n 100: '#fffaf1',\n },\n paper: {\n DEFAULT: '#f9f2e6',\n 50: '#FFFFFF',\n 100: '#FDFBF7',\n 125: '#faf8f4',\n 140: '#fdfaf4',\n 145: '#F9F2E6',\n 150: '#F7EEDE',\n 200: '#F3E5CE',\n 250: '#EFDCBD',\n 300: '#EBD3AD',\n 350: '#E7CB9C',\n 400: '#E3C28C',\n 450: '#DFB97C',\n 500: '#DBB06B',\n 550: '#D7A85B',\n 600: '#D39F4A',\n 650: '#CF963A',\n 700: '#C58C30',\n 750: '#B5802C',\n 800: '#A47528',\n 850: '#946924',\n 900: '#835D20',\n 950: '#73521C',\n 975: '#634618',\n 980: '#523A14',\n 985: '#422F10',\n 990: '#31230C',\n 995: '#211708',\n 1000: '#100C04',\n },\n gold: {\n DEFAULT: '#FFD747',\n 50: '#FFFFFF',\n 100: '#FFFBEB',\n 150: '#FFF6D6',\n 200: '#FFF2C2',\n 250: '#FFEDAD',\n 300: '#FFE999',\n 350: '#FFE485',\n 400: '#FFE070',\n 450: '#FFDC5C',\n 500: '#FFD747',\n 550: '#FFD333',\n 600: '#FFCC1A',\n 650: '#FFCA0A',\n 700: '#F5C000',\n 750: '#E0B000',\n 800: '#CCA000',\n 850: '#B89000',\n 900: '#A38000',\n 950: '#8F7000',\n 975: '#7A6000',\n 980: '#665000',\n 985: '#524000',\n 990: '#3D3000',\n 995: '#292000',\n 1000: '#141000',\n },\n\n stone: {\n DEFAULT: '#CFCAC9',\n 50: '#FFFFFF',\n 100: '#F5F4F4',\n 150: '#ECEAE9',\n 200: '#E2DFDF',\n 250: '#D9D5D4',\n 300: '#CFCAC9',\n 350: '#C5C0BE',\n 400: '#BCB5B3',\n 450: '#B2ABA9',\n 500: '#A9A09E',\n 550: '#9F9693',\n 600: '#968B88',\n 650: '#8C817D',\n 700: '#827773',\n 750: '#776D69',\n 800: '#6C6360',\n 850: '#615956',\n 900: '#564F4D',\n 950: '#4C4543',\n 975: '#413B3A',\n 980: '#363130',\n 985: '#2B2826',\n 990: '#201E1D',\n 995: '#161413',\n 1000: '#0B0A0A',\n },\n\n chili: {\n DEFAULT: '#e37564',\n 50: '#FFFFFF',\n 100: '#FCF0EE',\n 150: '#F9E0DD',\n 200: '#F6D1CB',\n 250: '#F2C2BA',\n 300: '#EFB2A9',\n 350: '#ECA398',\n 400: '#E99386',\n 450: '#E68475',\n 500: '#E37564',\n 550: '#DF6553',\n 600: '#DC5641',\n 650: '#D94730',\n 700: '#CF3C26',\n 750: '#BE3723',\n 800: '#AC3220',\n 850: '#9B2D1C',\n 900: '#8A2819',\n 950: '#792316',\n 975: '#671E13',\n 980: '#561910',\n 985: '#45140D',\n 990: '#340F09',\n 995: '#220A06',\n 1000: '#110503',\n },\n\n azure: {\n DEFAULT: '#47A0FF',\n 50: '#FFFFFF',\n 100: '#EBF4FF',\n 150: '#D6EAFF',\n 200: '#C2DFFF',\n 250: '#ADD5FF',\n 300: '#99CAFF',\n 350: '#85C0FF',\n 400: '#70B5FF',\n 450: '#5CABFF',\n 500: '#47A0FF',\n 550: '#3396FF',\n 600: '#1F8BFF',\n 650: '#0A81FF',\n 700: '#0076F5',\n 750: '#006CE0',\n 800: '#0063CC',\n 850: '#0059B8',\n 900: '#004699',\n 950: '#00458F',\n 975: '#003B7A',\n 980: '#003166',\n 985: '#002752',\n 990: '#001E3D',\n 995: '#001429',\n 1000: '#000A14',\n },\n\n ice: {\n DEFAULT: '#88A2BF',\n 50: '#FFFFFF',\n 100: '#F2F5F8',\n 150: '#E4EAF1',\n 200: '#D7E0EA',\n 250: '#CAD6E2',\n 300: '#BDCBDB',\n 350: '#AFC1D4',\n 400: '#A2B7CD',\n 450: '#95ADC6',\n 500: '#88A2BF',\n 550: '#7A98B8',\n 600: '#6D8EB0',\n 650: '#6083A9',\n 700: '#56799F',\n 750: '#4F6F92',\n 800: '#476585',\n 850: '#405B77',\n 900: '#39516A',\n 950: '#32475D',\n 975: '#2B3D50',\n 980: '#243242',\n 985: '#1D2835',\n 990: '#151E28',\n 995: '#0E141B',\n 1000: '#070A0D',\n },\n\n lilac: {\n DEFAULT: '#BF88AA',\n 50: '#FFFFFF',\n 100: '#F8F2F6',\n 150: '#F1E4EC',\n 200: '#EAD7E3',\n 250: '#E2CAD9',\n 300: '#DBBDD0',\n 350: '#D4AFC6',\n 400: '#CDA2BD',\n 450: '#C695B3',\n 500: '#BF88AA',\n 550: '#B87AA0',\n 600: '#B06D97',\n 650: '#A9608D',\n 700: '#9F5683',\n 750: '#924F78',\n 800: '#85476D',\n 850: '#774062',\n 900: '#6A3957',\n 950: '#5D324C',\n 975: '#502B41',\n 980: '#422437',\n 985: '#351D2C',\n 990: '#281521',\n 995: '#1B0E16',\n 1000: '#0D070B',\n },\n\n mint: {\n DEFAULT: '#75D19D',\n 50: '#FFFFFF',\n 100: '#F0FAF4',\n 150: '#E0F5E9',\n 200: '#D1F0DE',\n 250: '#C2EBD3',\n 300: '#B3E6C9',\n 350: '#A3E0BE',\n 400: '#94DBB3',\n 450: '#85D6A8',\n 500: '#75D19D',\n 550: '#66CC92',\n 600: '#57C787',\n 650: '#47C27C',\n 700: '#3DB872',\n 750: '#38A869',\n 800: '#32965D',\n 850: '#2E8A56',\n 900: '#297A4C',\n 950: '#246B43',\n 975: '#1F5C39',\n 980: '#194D30',\n 985: '#143D26',\n 990: '#0F2E1D',\n 995: '#0A1F13',\n 1000: '#050F0A',\n },\n\n aquamarine: {\n DEFAULT: '#70ffaf',\n 50: '#FFFFFF',\n 100: '#EBFFF3',\n 150: '#D6FFE8',\n 200: '#C2FFDC',\n 250: '#ADFFD1',\n 300: '#99FFC5',\n 350: '#85FFBA',\n 400: '#70FFAF',\n 450: '#5CFFA3',\n 500: '#47FF97',\n 550: '#33FF8B',\n 600: '#1FFF80',\n 650: '#0AFF74',\n 700: '#00F56A',\n 750: '#00E061',\n 800: '#00CC58',\n 850: '#00B850',\n 900: '#00A347',\n 950: '#008F3E',\n 975: '#007A35',\n 980: '#00662C',\n 985: '#005223',\n 990: '#003D1B',\n 995: '#002912',\n 1000: '#001409'\n },\n lapis_lazuli: {\n DEFAULT: '#006494',\n 50: '#FFFFFF',\n 100: '#EBF9FF',\n 150: '#D6F2FF',\n 200: '#C2ECFF',\n 250: '#ADE5FF',\n 300: '#99DFFF',\n 350: '#85D8FF',\n 400: '#70D2FF',\n 450: '#5CCBFF',\n 500: '#47C5FF',\n 550: '#33BEFF',\n 600: '#1FB8FF',\n 650: '#0AB1FF',\n 700: '#00A7F5',\n 750: '#0099E0',\n 800: '#008BCC',\n 850: '#007DB8',\n 900: '#006494',\n 950: '#00628F',\n 975: '#00547A',\n 980: '#004666',\n 985: '#003852',\n 990: '#002A3D',\n 995: '#001C29',\n 1000: '#000E14'\n },\n\n prussian_blue: {\n DEFAULT: '#132a3e',\n 50: '#FFFFFF',\n 100: '#EFF5FA',\n 150: '#E0EBF5',\n 200: '#D0E1F1',\n 250: '#C1D8EC',\n 300: '#B1CEE7',\n 350: '#A1C4E2',\n 400: '#92BADD',\n 450: '#82B0D9',\n 500: '#73A6D4',\n 550: '#639DCF',\n 600: '#5393CA',\n 650: '#4489C5',\n 700: '#3A7FBB',\n 750: '#3574AC',\n 800: '#306A9C',\n 850: '#2B5F8C',\n 900: '#26547D',\n 950: '#224A6D',\n 975: '#1D3F5E',\n 980: '#18354E',\n 985: '#132A3E',\n 990: '#0E202F',\n 995: '#0A151F',\n 1000: '#050B10'\n },\n\n saffron: {\n DEFAULT: '#e3b505',\n 50: '#FFFFFF',\n 100: '#FFFBEB',\n 150: '#FEF6D7',\n 200: '#FEF2C3',\n 250: '#FDEEAF',\n 300: '#FDE99B',\n 350: '#FDE587',\n 400: '#FCE173',\n 450: '#FCDC5F',\n 500: '#FBD84B',\n 550: '#FBD437',\n 600: '#FBCF23',\n 650: '#FACB0F',\n 700: '#E3B505',\n 750: '#DCB104',\n 800: '#C8A104',\n 850: '#B49104',\n 900: '#A08103',\n 950: '#8C7103',\n 975: '#786002',\n 980: '#645002',\n 985: '#504002',\n 990: '#3C3001',\n 995: '#282001',\n 1000: '#141000'\n },\n\n penn_red: {\n DEFAULT: '#95190c',\n 50: '#FFFFFF',\n 100: '#FDEEEC',\n 150: '#FCDDD9',\n 200: '#FACCC6',\n 250: '#F9BAB4',\n 300: '#F7A9A1',\n 350: '#F6988E',\n 400: '#F4877B',\n 450: '#F37668',\n 500: '#F16555',\n 550: '#F05442',\n 600: '#EE432F',\n 650: '#ED311D',\n 700: '#E22712',\n 750: '#D02411',\n 800: '#BD210F',\n 850: '#AA1D0E',\n 900: '#95190C',\n 950: '#84170B',\n 975: '#711409',\n 980: '#5E1008',\n 985: '#4B0D06',\n 990: '#390A05',\n 995: '#260703',\n 1000: '#130302'\n },\n\n black_bean: {\n DEFAULT: '#3c1518',\n 50: '#FFFFFF',\n 100: '#FAF0F1',\n 150: '#F4E1E2',\n 200: '#EFD2D4',\n 250: '#EAC3C6',\n 300: '#E4B4B8',\n 350: '#DFA4A9',\n 400: '#DA959B',\n 450: '#D5868D',\n 500: '#CF777E',\n 550: '#CA6870',\n 600: '#C55962',\n 650: '#BF4A54',\n 700: '#B54049',\n 750: '#A63A43',\n 800: '#97353D',\n 850: '#883037',\n 900: '#792A31',\n 950: '#6A252B',\n 975: '#5B2025',\n 980: '#4B1B1F',\n 985: '#3C1518',\n 990: '#2D1012',\n 995: '#1E0B0C',\n 1000: '#0F0506'\n },\n\n blood_red: {\n DEFAULT: '#69140e',\n 50: '#FFFFFF',\n 100: '#FDEEED',\n 150: '#FADDDB',\n 200: '#F8CCC9',\n 250: '#F5BBB7',\n 300: '#F3AAA5',\n 350: '#F09993',\n 400: '#EE8981',\n 450: '#EB786F',\n 500: '#E9675D',\n 550: '#E7564B',\n 600: '#E4453A',\n 650: '#E23428',\n 700: '#D72A1D',\n 750: '#C5261B',\n 800: '#B42318',\n 850: '#A21F16',\n 900: '#901C14',\n 950: '#7E1811',\n 975: '#69140E',\n 980: '#5A110C',\n 985: '#480E0A',\n 990: '#360A07',\n 995: '#240705',\n 1000: '#120302'\n },\n\n brown: {\n DEFAULT: '#a44200',\n 50: '#FFFFFF',\n 100: '#FFF3EB',\n 150: '#FFE7D6',\n 200: '#FFDAC2',\n 250: '#FFCEAD',\n 300: '#FFC299',\n 350: '#FFB685',\n 400: '#FFA970',\n 450: '#FF9D5C',\n 500: '#FF9147',\n 550: '#FF8533',\n 600: '#FF781F',\n 650: '#FF6C0A',\n 700: '#F56200',\n 750: '#E05A00',\n 800: '#CC5200',\n 850: '#B84900',\n 900: '#A44200',\n 950: '#8F3900',\n 975: '#7A3100',\n 980: '#662900',\n 985: '#522100',\n 990: '#3D1800',\n 995: '#291000',\n 1000: '#140800'\n },\n\n bronze: {\n DEFAULT: '#d58936',\n 50: '#FFFFFF',\n 100: '#FBF5EE',\n 150: '#F8EBDD',\n 200: '#F4E1CD',\n 250: '#F1D7BC',\n 300: '#EDCDAB',\n 350: '#EAC39A',\n 400: '#E6B989',\n 450: '#E2AF78',\n 500: '#DFA568',\n 550: '#DB9B57',\n 600: '#D89146',\n 650: '#D58936',\n 700: '#CA7D2B',\n 750: '#B97327',\n 800: '#A86824',\n 850: '#975E20',\n 900: '#87531D',\n 950: '#764919',\n 975: '#653F15',\n 980: '#543412',\n 985: '#432A0E',\n 990: '#321F0B',\n 995: '#221507',\n 1000: '#110A04'\n },\n\n oxford_blue: {\n DEFAULT: '#0d2149',\n 50: '#FFFFFF',\n 100: '#EEF2FC',\n 150: '#DCE6F9',\n 200: '#CBD9F6',\n 250: '#BACDF3',\n 300: '#A8C0F0',\n 350: '#97B4ED',\n 400: '#86A7EA',\n 450: '#749AE7',\n 500: '#638EE3',\n 550: '#5281E0',\n 600: '#4075DD',\n 650: '#2F68DA',\n 700: '#255ED0',\n 750: '#2256BF',\n 800: '#1F4EAD',\n 850: '#1C469C',\n 900: '#183F8B',\n 950: '#153779',\n 975: '#122F68',\n 980: '#0D2149',\n 985: '#0C1F45',\n 990: '#091734',\n 995: '#061023',\n 1000: '#030811'\n },\n\n jasmine: {\n DEFAULT: '#fcd581',\n 50: '#FFFFFF',\n 100: '#FEF8EB',\n 150: '#FEF2D7',\n 200: '#FDEBC3',\n 250: '#FDE4AF',\n 300: '#FCDE9C',\n 350: '#FCD581',\n 400: '#FBD074',\n 450: '#FBCA60',\n 500: '#FAC34C',\n 550: '#FABD38',\n 600: '#F9B624',\n 650: '#F9AF10',\n 700: '#EFA506',\n 750: '#DB9706',\n 800: '#C78A05',\n 850: '#B37C05',\n 900: '#9F6E04',\n 950: '#8B6004',\n 975: '#775303',\n 980: '#634503',\n 985: '#503702',\n 990: '#3C2902',\n 995: '#281C01',\n 1000: '#140E01'\n },\n\n rusty_red: {\n DEFAULT: '#d52941',\n 50: '#FFFFFF',\n 100: '#FCEEF0',\n 150: '#F8DDE0',\n 200: '#F5CCD1',\n 250: '#F2BAC2',\n 300: '#EFA9B3',\n 350: '#EB98A3',\n 400: '#E88794',\n 450: '#E57685',\n 500: '#E26575',\n 550: '#DE5466',\n 600: '#DB4357',\n 650: '#D52941',\n 700: '#CE273D',\n 750: '#BC2438',\n 800: '#AB2133',\n 850: '#9A1D2E',\n 900: '#891A29',\n 950: '#781724',\n 975: '#67141F',\n 980: '#56101A',\n 985: '#450D14',\n 990: '#330A0F',\n 995: '#22070A',\n 1000: '#110305'\n },\n\n claret: {\n DEFAULT: '#990d35',\n 50: '#FFFFFF',\n 100: '#FDECF1',\n 150: '#FCD9E3',\n 200: '#FAC7D5',\n 250: '#F8B4C7',\n 300: '#F7A1B9',\n 350: '#F58EAC',\n 400: '#F47C9E',\n 450: '#F26990',\n 500: '#F05682',\n 550: '#EF4374',\n 600: '#ED3166',\n 650: '#EB1E58',\n 700: '#E1144E',\n 750: '#CE1247',\n 800: '#BC1041',\n 850: '#990D35',\n 900: '#960D34',\n 950: '#830B2D',\n 975: '#710A27',\n 980: '#5E0820',\n 985: '#4B071A',\n 990: '#380513',\n 995: '#26030D',\n 1000: '#130206'\n },\n\n /* semantic colors */\n text: {\n DEFAULT: 'var(--text)',\n },\n base: {\n DEFAULT: 'var(--color-base)',\n },\n bg: {\n DEFAULT: 'var(--bg)',\n },\n\n link: {\n DEFAULT: 'var(--color-link)',\n },\n linkhover: {\n DEFAULT: 'var(--color-link-hover)',\n },\n\n\n border: {\n DEFAULT: 'var(--border)',\n },\n cta: {\n DEFAULT: 'var(--cta)',\n hover: 'var(--cta-hover)',\n loud: 'var(--cta-loud)',\n text: 'var(--cta-text)',\n },\n} as const;\n\nfunction getTailwindColor(colorName: string): string {\n // Handle empty or invalid input\n if (!colorName) return '';\n \n // Remove 'text-' prefix if present\n const cleanName = colorName.replace('text-', '');\n \n // Split into color and shade (e.g., \"blue-500\" -> [\"blue\", \"500\"])\n const [color, shade] = cleanName.split('-');\n \n // Return hex color if found, otherwise return original input\n return tailwindColors[color as keyof typeof tailwindColors]?.[shade as keyof (typeof tailwindColors)[keyof typeof tailwindColors]] || colorName;\n}\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\n\n\nconst dmMonoLight = await fetchFont(\n \"https://cdn.jsdelivr.net/fontsource/fonts/dm-mono@latest/latin-300-normal.ttf\"\n);\nconst dmMonoRegular = await fetchFont(\n \"https://cdn.jsdelivr.net/fontsource/fonts/dm-mono@latest/latin-400-normal.ttf\"\n);\nconst dmMonoMedium = await fetchFont(\n \"https://cdn.jsdelivr.net/fontsource/fonts/dm-mono@latest/latin-500-normal.ttf\"\n);\nconst interLight = await fetchFont(\n \"https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-300-normal.ttf\"\n);\nconst interRegular = await fetchFont(\n \"https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-400-normal.ttf\"\n);\nconst interSemiBold = await fetchFont(\n \"https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-600-normal.ttf\"\n);\nconst interMedium = await fetchFont(\n \"https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-500-normal.ttf\"\n);\nconst ebGaramondMediumItalic = await fetchFont(\n \"https://cdn.jsdelivr.net/fontsource/fonts/eb-garamond@latest/latin-500-italic.ttf\"\n);\n\napp.get(\"/img\", async (c) => {\n let { \n link, \n title, \n subtitle, \n nocache, \n gradientStart, \n gradientEnd, \n logoImageSrc, \n textColor,\n logoColor,\n titleFontSize = '54px',\n subtitleFontSize = '32px', \n urlFontSize = '24px',\n showLogoName = true\n } = c.req.query();\n\n if (!textColor) { textColor = 'azure-900'; }\n if (!logoColor) { logoColor = textColor; }\n if(!gradientStart) { gradientStart = 'saffron-100'; }\n if(!gradientEnd) { gradientEnd = 'jasmine-200'; }\n\n\n // Convert Tailwind colors to hex\n textColor = getTailwindColor(textColor);\n logoColor = getTailwindColor(logoColor);\n gradientStart = getTailwindColor(gradientStart);\n gradientEnd = getTailwindColor(gradientEnd);\n // textColor = \"#FF0000\";\n\n // Create a cache key based on the input parameters\n const cacheKey = `og:${link}:${title}:${subtitle}:${gradientStart}:${gradientEnd}:${logoImageSrc}:${textColor}:${logoColor}:${titleFontSize}:${subtitleFontSize}:${urlFontSize}:${showLogoName}`;\n\n // Try to get the cached image from Val Town blob\n if (typeof nocache == 'undefined' || nocache !== 'true') {\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 // 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 // Define colors\n // gray: 161413\n // blue: 004699\n // green: 1F5C39\n\n // Then ensure # prefix\n if (gradientStart && !gradientStart.startsWith('#')) {\n gradientStart = '#' + gradientStart;\n }\n if (gradientEnd && !gradientEnd.startsWith('#')) {\n gradientEnd = '#' + gradientEnd;\n }\n if (textColor && !textColor.startsWith('#')) {\n textColor = '#' + textColor;\n }\n if (logoColor && !logoColor.startsWith('#')) {\n logoColor = '#' + logoColor;\n }\n\n // gradientStart = \"#ff0000\";\n // gradientEnd = \"orange\";\n // textColor = \"purple\";\n // logoColor = textColor;\n\n \n // const logoImageSrc = 'https://labspace.ai/ls2-circle-md4x.png';\n logoImageSrc = logoImageSrc || 'https://labspace.ai/lsc-blue-transparent4x.png';\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: 'center',\n background: `radial-gradient(circle at 0% -5%, ${gradientStart}, ${gradientEnd})`,\n padding: '32px',\n },\n children: [\n {\n // background / full card\n type: 'div',\n props: {\n style: {\n display: 'flex',\n flexDirection: 'column',\n padding: '24px',\n width: '100%',\n height: '100%',\n justifyContent: 'flex-start', // Align content to the top\n },\n children: [\n {\n // vertical divider\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 height: '100%',\n paddingTop: '20%', // Start content 40% from the top\n },\n children: [\n {\n // title\n type: 'h1',\n props: {\n style: {\n fontSize: titleFontSize,\n fontWeight: 600,\n letterSpacing: '-0.02em',\n lineHeight: '1.1',\n color: textColor,\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 // subtitle\n type: 'h2',\n props: {\n style: {\n fontSize: subtitleFontSize,\n letterSpacing: '-0.04em',\n fontWeight: 400,\n color: textColor,\n marginTop: '24px', // 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: '56px',\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: urlFontSize,\n letterSpacing: '-0.04em',\n fontWeight: 300,\n color: textColor, // Lighter gray for \"https://\"\n fontFamily: 'DM Mono',\n },\n children: link ? 'https://' : '',\n },\n },\n {\n type: 'span',\n props: {\n style: {\n fontSize: '24px',\n letterSpacing: '-0.04em',\n fontWeight: 300,\n color: textColor, // Original color for the rest of the URL\n fontFamily: 'DM Mono',\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 top: '48px',\n left: '52px',\n display: 'flex',\n flexDirection: 'row', // Changed back to column\n alignItems: 'flex-start', // Align items to the right\n gap: '24px',\n },\n children: [\n // {\n // type: 'img',\n // props: {\n // src: logoImageSrc,\n // alt: 'Labspace Logo',\n // style: {\n // width: '72px',\n // objectFit: 'contain',\n // marginBottom: '0px', // Add space between image and text\n // marginRight: '0px',\n // },\n // },\n // },\n\n {\n type: 'svg',\n props: {\n width: '72',\n height: '72',\n viewBox: '0 0 42 42',\n fill: 'none',\n xmlns: 'http://www.w3.org/2000/svg',\n style: {\n marginBottom: '0px',\n marginRight: '0px',\n },\n children: [\n {\n type: 'g',\n props: {\n clipPath: 'url(#clip0_135_31)',\n children: [\n {\n type: 'path',\n props: {\n fillRule: 'evenodd',\n clipRule: 'evenodd',\n d: 'M45 25V11.5V-2H31H17V11.5C17 18.9558 23.268 25 31 25H45ZM22 13C25.866 13 29 9.86599 29 6C29 9.86599 32.134 13 36 13C32.134 13 29 16.134 29 20C29 16.134 25.866 13 22 13Z',\n fill: logoColor\n }\n },\n {\n type: 'circle',\n props: {\n cx: '2.5',\n cy: '39.5',\n r: '13.5',\n fill: logoColor\n }\n },\n {\n type: 'path',\n props: {\n d: 'M45 39.5C45 46.9558 38.732 53 31 53C23.268 53 17 46.9558 17 39.5C17 32.0442 23.268 26 31 26H45V39.5Z',\n fill: logoColor\n }\n },\n {\n type: 'path',\n props: {\n d: 'M16 11.5C16 18.9558 9.95584 25 2.5 25C-4.95584 25 -11 18.9558 -11 11.5C-11 4.04416 -4.95584 -2 2.5 -2H16V11.5Z',\n fill: logoColor\n }\n }\n ]\n }\n },\n {\n type: 'path',\n props: {\n d: 'M21 41C9.95431 41 1 32.0457 1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41Z',\n stroke: logoColor,\n strokeWidth: '2'\n }\n },\n {\n type: 'defs',\n props: {\n children: [\n {\n type: 'clipPath',\n props: {\n id: 'clip0_135_31',\n children: [\n {\n type: 'path',\n props: {\n d: 'M0 21C0 9.40202 9.40202 0 21 0V0C32.598 0 42 9.40202 42 21V21C42 32.598 32.598 42 21 42V42C9.40202 42 0 32.598 0 21V21Z',\n fill: 'white'\n }\n }\n ]\n }\n }\n ]\n }\n }\n ]\n }\n },\n showLogoName && {\n type: 'h3',\n props: {\n style: {\n fontSize: '32px',\n letterSpacing: '-0.00em', // Tighter letter spacing\n fontWeight: 600,\n color: textColor,\n },\n children: 'labspace.ai ',\n },\n },\n ],\n },\n },\n ],\n },\n }, {\n width: 1200,\n height: 627,\n // width: 600,\n // height: 313,\n fonts: [\n {\n name: \"Inter\",\n data: interLight,\n weight: 300,\n style: \"normal\",\n },\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 name: \"Inter\",\n data: interSemiBold,\n weight: 600,\n style: \"normal\",\n },\n {\n name: \"EB Garamond\",\n data: ebGaramondMediumItalic,\n weight: 500,\n style: \"italic\",\n },\n {\n name: \"DM Mono\",\n data: dmMonoRegular,\n weight: 400,\n style: \"normal\",\n },\n {\n name: \"DM Mono\",\n data: dmMonoLight,\n weight: 300,\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\n\napp.get(\"/img2\", async (c) => {\n let { \n link, \n title, \n subtitle, \n nocache, \n gradientStart = '#FFFFFF', \n gradientEnd = '#ADD5FF', \n logoImageSrc, \n textColor = 'blue-500',\n logoColor = textColor,\n titleFontSize = '36px',\n subtitleFontSize = '24px', \n urlFontSize = '24px',\n showLogoName = true,\n attachment, \n panelWidth = '50%',\n objectFit, \n objectPosition, \n width, \n height,\n paddingLeft = 32,\n } = c.req.query();\n\n // Convert Tailwind colors to hex\n textColor = getTailwindColor(textColor);\n\n // Create a cache key based on the input parameters\n const cacheKey = `og:${link}:${title}:${subtitle}:${attachment}:${objectFit}:${objectPosition}:${panelWidth}:${width}:${height}:${gradientStart}:${gradientEnd}:${logoImageSrc}:${textColor}:${logoColor}:${titleFontSize}:${subtitleFontSize}:${urlFontSize}:${showLogoName}`;\n\n // Try to get the cached image from Val Town blob\n // if (typeof nocache == 'undefined' || nocache !== 'true') {\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 // 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 // Define colors\n // gray: 161413\n // blue: 004699\n // green: 1F5C39\n // Ensure textColor starts with #\n if (gradientStart && !gradientStart.startsWith('#')) {\n gradientStart = '#' + gradientStart;\n }\n if (gradientEnd && !gradientEnd.startsWith('#')) {\n gradientEnd = '#' + gradientEnd;\n }\n if (textColor && !textColor.startsWith('#')) {\n textColor = '#' + textColor;\n }\n if (logoColor && !logoColor.startsWith('#')) {\n logoColor = '#' + logoColor;\n }\n \n // const logoImageSrc = 'https://labspace.ai/ls2-circle-md4x.png';\n logoImageSrc = logoImageSrc || 'https://labspace.ai/lsc-blue-transparent4x.png';\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: 'center',\n background: `radial-gradient(circle at 0% -5%, ${gradientStart}, ${gradientEnd})`,\n },\n children: [\n {\n type: 'div',\n props: {\n style: {\n display: 'flex',\n flexDirection: 'row',\n height: '100%',\n width: '100%',\n justifyContent: 'space-between',\n // background: 'red', // for debugging\n },\n children: [\n {\n // Left panel with text\n type: 'div',\n props: {\n style: {\n display: 'flex',\n flexDirection: 'column',\n maxWidth: panelWidth, // panelWidth, // Control width of text section\n paddingRight: '48px', // Space between text and image\n\n paddingTop: '14px',\n paddingBottom: '148px', // Increased bottom padding\n paddingLeft: paddingLeft + 'px',\n height: '100%', // Ensure full height\n justifyContent: 'flex-end', // Align content to bottom\n },\n children: [\n {\n // Content container\n type: 'div',\n props: {\n style: {\n display: 'flex',\n flexDirection: 'column',\n // Remove marginTop since we're aligning from bottom\n },\n children: [\n {\n // title\n type: 'h1',\n props: {\n style: {\n fontSize: titleFontSize,\n fontWeight: 600,\n letterSpacing: '-0.02em',\n lineHeight: '1.1',\n color: textColor,\n marginBottom: '0px',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n display: '-webkit-box',\n WebkitLineClamp: 2,\n WebkitBoxOrient: 'vertical',\n },\n children: imageTitle,\n },\n },\n {\n // subtitle\n type: 'h2',\n props: {\n style: {\n fontSize: subtitleFontSize,\n letterSpacing: '-0.04em',\n fontWeight: 400,\n color: textColor,\n marginTop: '24px',\n marginBottom: '0px',\n },\n children: imageSubtitle,\n },\n },\n ],\n },\n },\n ],\n },\n },\n attachment && {\n // Right panel with image\n type: 'div',\n props: {\n style: {\n flex: '1', // Take remaining space\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: '100%',\n width: '100%',\n padding: '12px',\n background: 'white', // for debugging\n },\n children: [\n {\n type: 'img',\n props: {\n src: attachment,\n style: {\n width: width || '100%',\n height: height || '100%',\n objectFit: objectFit || 'contain',\n objectPosition: objectPosition || 'center',\n },\n },\n }\n ],\n },\n },\n ]\n }\n },\n // URL\n {\n type: 'div',\n props: {\n style: {\n position: 'absolute',\n bottom: '64px',\n left: paddingLeft + 'px',\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: urlFontSize,\n letterSpacing: '-0.04em',\n fontWeight: 300,\n color: textColor, // Lighter gray for \"https://\"\n fontFamily: 'DM Mono',\n },\n children: link ? 'https://' : '',\n },\n },\n {\n type: 'span',\n props: {\n style: {\n fontSize: '24px',\n letterSpacing: '-0.04em',\n fontWeight: 300,\n color: textColor, // Original color for the rest of the URL\n fontFamily: 'DM Mono',\n },\n children: (link && link.replace('https://', '')) || \"\",\n },\n },\n ],\n },\n },\n ],\n },\n },\n // Logo\n {\n type: 'div',\n props: {\n style: {\n position: 'absolute',\n top: '48px',\n left: (paddingLeft - 3) + \"px\",\n display: 'flex',\n flexDirection: 'row', // Changed back to column\n alignItems: 'flex-start', // Align items to the right\n gap: '24px',\n },\n children: [\n // {\n // type: 'img',\n // props: {\n // src: logoImageSrc,\n // alt: 'Labspace Logo',\n // style: {\n // width: '72px',\n // objectFit: 'contain',\n // marginBottom: '0px', // Add space between image and text\n // marginRight: '0px',\n // },\n // },\n // },\n\n {\n type: 'svg',\n props: {\n width: '72',\n height: '72',\n viewBox: '0 0 42 42',\n fill: 'none',\n xmlns: 'http://www.w3.org/2000/svg',\n style: {\n marginBottom: '0px',\n marginRight: '0px',\n },\n children: [\n {\n type: 'g',\n props: {\n clipPath: 'url(#clip0_135_31)',\n children: [\n {\n type: 'path',\n props: {\n fillRule: 'evenodd',\n clipRule: 'evenodd',\n d: 'M45 25V11.5V-2H31H17V11.5C17 18.9558 23.268 25 31 25H45ZM22 13C25.866 13 29 9.86599 29 6C29 9.86599 32.134 13 36 13C32.134 13 29 16.134 29 20C29 16.134 25.866 13 22 13Z',\n fill: logoColor\n }\n },\n {\n type: 'circle',\n props: {\n cx: '2.5',\n cy: '39.5',\n r: '13.5',\n fill: logoColor\n }\n },\n {\n type: 'path',\n props: {\n d: 'M45 39.5C45 46.9558 38.732 53 31 53C23.268 53 17 46.9558 17 39.5C17 32.0442 23.268 26 31 26H45V39.5Z',\n fill: logoColor\n }\n },\n {\n type: 'path',\n props: {\n d: 'M16 11.5C16 18.9558 9.95584 25 2.5 25C-4.95584 25 -11 18.9558 -11 11.5C-11 4.04416 -4.95584 -2 2.5 -2H16V11.5Z',\n fill: logoColor\n }\n }\n ]\n }\n },\n {\n type: 'path',\n props: {\n d: 'M21 41C9.95431 41 1 32.0457 1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41Z',\n stroke: logoColor,\n strokeWidth: '2'\n }\n },\n {\n type: 'defs',\n props: {\n children: [\n {\n type: 'clipPath',\n props: {\n id: 'clip0_135_31',\n children: [\n {\n type: 'path',\n props: {\n d: 'M0 21C0 9.40202 9.40202 0 21 0V0C32.598 0 42 9.40202 42 21V21C42 32.598 32.598 42 21 42V42C9.40202 42 0 32.598 0 21V21Z',\n fill: 'white'\n }\n }\n ]\n }\n }\n ]\n }\n }\n ]\n }\n },\n showLogoName && {\n type: 'h3',\n props: {\n style: {\n fontSize: '32px',\n letterSpacing: '-0.00em', // Tighter letter spacing\n fontWeight: 600,\n color: textColor,\n },\n children: 'labspace.ai ',\n },\n },\n ],\n },\n },\n ],\n },\n }, {\n width: 1200,\n height: 627,\n // width: 600,\n // height: 313,\n fonts: [\n {\n name: \"Inter\",\n data: interLight,\n weight: 300,\n style: \"normal\",\n },\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 name: \"Inter\",\n data: interSemiBold,\n weight: 600,\n style: \"normal\",\n },\n {\n name: \"EB Garamond\",\n data: ebGaramondMediumItalic,\n weight: 500,\n style: \"italic\",\n },\n {\n name: \"DM Mono\",\n data: dmMonoRegular,\n weight: 400,\n style: \"normal\",\n },\n {\n name: \"DM Mono\",\n data: dmMonoLight,\n weight: 300,\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\n\n\n\napp.get(\"/\", (c) => {\n\n const { link=\"\", title=\"\", subtitle=\"\", attachment=\"\" } = c.req.query();\n \n const html = `\n\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

og

Version 31