|
| 1 | +import type { OgImageRenderEventContext } from '../../../types' |
| 2 | +import { parseHTML } from 'linkedom' |
| 3 | +import { htmlDecodeQuotes } from '../../util/encoding' |
| 4 | +import { fetchIsland } from '../../util/kit' |
| 5 | +import { applyEmojis } from '../satori/transforms/emojis' |
| 6 | +import { applyInlineCss } from '../satori/transforms/inlineCss' |
| 7 | + |
| 8 | +export interface TakumiNode { |
| 9 | + children?: TakumiNode[] |
| 10 | + text?: string |
| 11 | + src?: string |
| 12 | + width?: number |
| 13 | + height?: number |
| 14 | + style?: Record<string, any> |
| 15 | + tw?: string |
| 16 | +} |
| 17 | + |
| 18 | +export async function createTakumiNodes(ctx: OgImageRenderEventContext): Promise<TakumiNode> { |
| 19 | + let html = ctx.options.html |
| 20 | + if (!html) { |
| 21 | + const island = await fetchIsland(ctx.e, ctx.options.component!, typeof ctx.options.props !== 'undefined' ? ctx.options.props : ctx.options) |
| 22 | + island.html = htmlDecodeQuotes(island.html) |
| 23 | + await applyInlineCss(ctx, island) |
| 24 | + await applyEmojis(ctx, island) |
| 25 | + html = island.html |
| 26 | + if (html?.includes('<body>')) |
| 27 | + html = html.match(/<body>([\s\S]*)<\/body>/)?.[1] || '' |
| 28 | + } |
| 29 | + |
| 30 | + const template = `<div style="position: relative; display: flex; margin: 0 auto; width: ${ctx.options.width}px; height: ${ctx.options.height}px; overflow: hidden;">${html}</div>` |
| 31 | + const { document } = parseHTML(template) |
| 32 | + const root = document.body.firstElementChild || document.body |
| 33 | + |
| 34 | + return elementToNode(root as Element, ctx) |
| 35 | +} |
| 36 | + |
| 37 | +function elementToNode(el: Element, ctx: OgImageRenderEventContext): TakumiNode { |
| 38 | + const tagName = el.tagName.toLowerCase() |
| 39 | + |
| 40 | + // Handle images |
| 41 | + if (tagName === 'img') { |
| 42 | + return { |
| 43 | + src: resolveImageSrc(el.getAttribute('src') || '', ctx), |
| 44 | + width: Number(el.getAttribute('width')) || undefined, |
| 45 | + height: Number(el.getAttribute('height')) || undefined, |
| 46 | + tw: el.getAttribute('class') || undefined, |
| 47 | + style: parseStyleAttr(el.getAttribute('style')), |
| 48 | + } |
| 49 | + } |
| 50 | + |
| 51 | + // Handle SVG - convert to data URI |
| 52 | + if (tagName === 'svg') { |
| 53 | + const svgString = el.outerHTML |
| 54 | + const dataUri = `data:image/svg+xml;base64,${Buffer.from(svgString).toString('base64')}` |
| 55 | + return { |
| 56 | + src: dataUri, |
| 57 | + width: Number(el.getAttribute('width')) || undefined, |
| 58 | + height: Number(el.getAttribute('height')) || undefined, |
| 59 | + } |
| 60 | + } |
| 61 | + |
| 62 | + // Handle text-only elements |
| 63 | + if (el.childNodes.length === 1 && el.childNodes[0].nodeType === 3) { |
| 64 | + return { |
| 65 | + text: el.textContent || '', |
| 66 | + tw: el.getAttribute('class') || undefined, |
| 67 | + style: parseStyleAttr(el.getAttribute('style')), |
| 68 | + } |
| 69 | + } |
| 70 | + |
| 71 | + // Handle containers |
| 72 | + const children: TakumiNode[] = [] |
| 73 | + for (const child of el.childNodes) { |
| 74 | + if (child.nodeType === 1) |
| 75 | + children.push(elementToNode(child as Element, ctx)) |
| 76 | + else if (child.nodeType === 3 && child.textContent?.trim()) |
| 77 | + children.push({ text: child.textContent.trim() }) |
| 78 | + } |
| 79 | + |
| 80 | + return { |
| 81 | + children: children.length ? children : undefined, |
| 82 | + tw: el.getAttribute('class') || undefined, |
| 83 | + style: parseStyleAttr(el.getAttribute('style')), |
| 84 | + } |
| 85 | +} |
| 86 | + |
| 87 | +function resolveImageSrc(src: string, _ctx: OgImageRenderEventContext): string { |
| 88 | + // Already a data URI or absolute URL |
| 89 | + if (src.startsWith('data:') || src.startsWith('http://') || src.startsWith('https://')) |
| 90 | + return src |
| 91 | + // Relative path - return as-is and let Takumi handle it |
| 92 | + return src |
| 93 | +} |
| 94 | + |
| 95 | +function parseStyleAttr(style: string | null): Record<string, any> | undefined { |
| 96 | + if (!style) |
| 97 | + return undefined |
| 98 | + const result: Record<string, any> = {} |
| 99 | + for (const decl of style.split(';')) { |
| 100 | + const [prop, ...valParts] = decl.split(':') |
| 101 | + const val = valParts.join(':').trim() |
| 102 | + if (prop?.trim() && val) |
| 103 | + result[camelCase(prop.trim())] = val |
| 104 | + } |
| 105 | + return Object.keys(result).length ? result : undefined |
| 106 | +} |
| 107 | + |
| 108 | +function camelCase(str: string): string { |
| 109 | + return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase()) |
| 110 | +} |
0 commit comments