export interface OgImage {
url: string;
alt?: string;
width?: number;
height?: number;
}
export interface OgVideo {
url: string;
mimeType?: string;
width?: number;
height?: number;
isGif?: boolean;
}
export interface OgData {
url: string;
title: string;
description: string;
image?: string;
imageAlt?: string;
images?: OgImage[];
video?: OgVideo;
siteName?: string;
type?: 'website' | 'article' | 'profile' | 'video.other';
}
export function renderOgHtml(data: OgData): string {
const siteName = data.siteName ?? 'Foxsky';
const type = data.type ?? 'website';
const allImages: OgImage[] = data.images?.length
? data.images
: data.image
? [{ url: data.image, alt: data.imageAlt }]
: [];
const imageMeta = allImages
.map((img) => {
let tag = ` `;
if (img.alt) tag += `\n `;
if (img.width) tag += `\n `;
if (img.height) tag += `\n `;
return tag;
})
.join('\n');
const twitterImage = allImages[0]
? `\n \n `
: '';
const twitterDomain = extractDomain(data.url);
const videoMeta = data.video
? ` \n \n ${
data.video.width ? `\n ` : ''
}${data.video.height ? `\n ` : ''}${
data.video.isGif ? `\n ` : ''
}\n \n \n `
: '';
let twitterCard = 'summary';
if (data.video?.isGif) twitterCard = 'summary_large_image';
else if (data.video) twitterCard = 'player';
else if (allImages.length > 0) twitterCard = 'summary_large_image';
return `
${esc(data.title)}
${imageMeta}${twitterImage ? '\n' + twitterImage : ''}${videoMeta ? '\n' + videoMeta : ''}
`;
}
function esc(s: string): string {
return s
.replace(/&/g, '&')
.replace(//g, '>')
.replace(/"/g, '"');
}
function extractDomain(url: string): string {
try {
return new URL(url).hostname;
} catch {
return url;
}
}