Spaces

Tune in to live audio conversations

\n )\n}\n\nexport async function spaceImage(channel: string) {\n const space = await fetchSpace(channel)\n if (!space) return await homeImage()\n\n const users = await fetchUsersById([space.created_by, ...space.hosts, ...space.speakers].join(','))\n\n const hostFids = [space.created_by, ...space.hosts]\n const speakerFids = [...space.speakers]\n const creator = users?.find((u) => u.fid === space?.created_by)\n const speakers = users?.filter((u) => speakerFids.includes(u.fid))\n\n return await ogImage(\n

Space

{space?.name || channel}

\n\n {creator && (\n

Hosted by

{creator?.username}

\n )}\n\n {speakers?.length > 1 && (\n

Speakers

\n {speakers?.slice(0, 15).map((s) => (\n

\n ))}\n

\n )}\n

\n )\n}\n\nexport async function iconImage(rounded = false) {\n const roundedClass = rounded ? 'rounded-[96px]' : ''\n return await ogImage(\n

,\n {\n width: 512,\n height: 512,\n }\n )\n}\n\n//////////\n\nexport async function ogImage(body, options = {}) {\n const svg = await satori(body, {\n width: 945,\n height: 630,\n ...options,\n fonts: await loadFonts(),\n loadAdditionalAsset: async (code, segment) => {\n console.log('loadAdditionalAsset', code, segment)\n if (code === 'emoji') {\n const unicode = segment.codePointAt(0).toString(16).toUpperCase()\n return `data:image/svg+xml;base64,` + btoa(await loadEmoji(unicode))\n }\n return ''\n },\n })\n return await render(svg)\n}\n\nconst loadFonts = async () => {\n const fontsConfig = [\n { name: 'Inter', weight: 400, fontFile: 'Inter-Regular.otf' },\n // { name: \"Inter\", weight: 500, fontFile: \"Inter-Medium.otf\" },\n { name: 'Inter', weight: 600, fontFile: 'Inter-SemiBold.otf' },\n // { name: \"Inter\", weight: 700, fontFile: \"Inter-Bold.otf\" },\n ]\n const fontPromises = fontsConfig.map(async (font) => {\n const fontUrl = 'https://cdn.jsdelivr.net/npm/@tamagui/font-inter@1.108.3/otf/' + font.fontFile\n const fontArrayBuf = await fetch(fontUrl).then((res) => res.arrayBuffer())\n return { name: font.name, data: fontArrayBuf, weight: font.weight }\n })\n const fonts: any = await Promise.all(fontPromises)\n\n return fonts\n}\n\nconst loadEmoji = (code) => {\n // const api = `https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/${code.toLowerCase()}.svg`\n const api = `https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/${code.toLowerCase()}_color.svg`\n return fetch(api).then((r) => r.text())\n}\n\nconst base64Icon = (svg: any) => {\n if (!svg) return undefined\n svg = svg.replace('stroke=\"currentColor\"', 'stroke=\"white\"')\n const base64 = Buffer.from(svg).toString('base64')\n // console.log('getIconDataUrl', name, svg, base64)\n return `data:image/svg+xml;base64,${base64}`\n}\n","deleted","label",[170,153],"backend","permalink","https://www.val.town/x/arseniy/FarcasterSpaces/code/backend/image.tsx","extension","actionData","errors"]