35f5216839
* fix(org): serve OG images from CDN for Discord embeds Discord times out on slow dynamic OG generation (~3-5s). Persist generated images to R2, point meta tags at the media CDN, and warm the API endpoint on org-site page loads so crawlers get a fast static PNG URL. Co-authored-by: Rotimi Best <[email protected]> * docs: add org-site Open Graph and favicon guides Document user-facing sharing behavior and contributor architecture for dynamic OG images, favicon fallback, R2/CDN caching, and embed cache invalidation. Co-authored-by: Rotimi Best <[email protected]> * fix(org-site): address PR review on OG CDN fallback and docs - Fall back to API OG URL when CDN object is not yet available (HEAD check) - Cancel warm-fetch response body to avoid connection pool exhaustion - Align tenant-router OG edge cache TTL with one-hour API revalidation - Fix favicon docs navigation and add Custom Domain tab screenshot - Replace Chiberry Artistry example with AI Academy Co-authored-by: Rotimi Best <[email protected]> * fix(org-site): accept docker hostnames for OG warm URL Use isValidHttpUrl for PRIVATE_SERVER_URL so internal values like http://api:3081 work for SSR warm fetches in Docker Compose. Co-authored-by: Rotimi Best <[email protected]> --------- Co-authored-by: Cursor Agent <[email protected]> Co-authored-by: Rotimi Best <[email protected]>
77 lines
2.6 KiB
TypeScript
77 lines
2.6 KiB
TypeScript
import { createHash } from 'crypto';
|
|
|
|
import { AppError, ErrorCodes } from '@api/utils/errors';
|
|
import { getCloudflarePngBuffer } from '@api/utils/cloudflare';
|
|
import { resolveThemeColor } from '@cio/email';
|
|
import { getActiveOrganizationPlan, getOrganizationBySiteName } from '@cio/db/queries/organization';
|
|
import { extractOrgTagline, renderOrgSiteOg } from '@api/utils/org-site-og';
|
|
import { isOrgOnFreePlan } from '@cio/utils/plans';
|
|
import { env } from '@cio/core/config/env';
|
|
import { getCachedOrgSiteOgBuffer, getOrgSiteOgPublicUrl, persistOrgSiteOgImage } from '@api/services/org/og-cache';
|
|
|
|
const DEFAULT_OG_IMAGE = 'https://brand.cdn.clsrio.com/og/classroomio-opengraph.jpg';
|
|
const OG_VIEWPORT = { width: 1200, height: 630, deviceScaleFactor: 2 } as const;
|
|
const isSelfHosted = env.PUBLIC_IS_SELFHOSTED === 'true';
|
|
|
|
export function normalizeOrgOgSiteName(rawSiteName: string): string {
|
|
return rawSiteName.endsWith('.png') ? rawSiteName.slice(0, -4) : rawSiteName;
|
|
}
|
|
|
|
export function getOrgSiteOgFallbackImageUrl(): string {
|
|
return DEFAULT_OG_IMAGE;
|
|
}
|
|
|
|
export { getOrgSiteOgPublicUrl };
|
|
|
|
function buildOrgSiteOgEtag(payload: {
|
|
siteName: string;
|
|
orgName: string;
|
|
logoUrl?: string;
|
|
tagline?: string;
|
|
themeColor: string;
|
|
showWatermark: boolean;
|
|
}): string {
|
|
return createHash('sha256').update(JSON.stringify(payload)).digest('hex').slice(0, 16);
|
|
}
|
|
|
|
export async function generateOrgSiteOgImage(siteName: string): Promise<{ buffer: Buffer; etag: string }> {
|
|
const organization = await getOrganizationBySiteName(siteName);
|
|
if (!organization) {
|
|
throw new AppError('Organization not found', ErrorCodes.ORGANIZATION_NOT_FOUND, 404);
|
|
}
|
|
|
|
const activePlan = await getActiveOrganizationPlan(organization.id);
|
|
const isFreePlan = isOrgOnFreePlan({
|
|
plans: activePlan ? [{ planName: activePlan.planName, isActive: activePlan.isActive }] : [],
|
|
isSelfHosted,
|
|
orgId: organization.id
|
|
});
|
|
|
|
const tagline = isFreePlan ? undefined : extractOrgTagline(organization.landingpage);
|
|
const themeColor = resolveThemeColor(organization.theme) ?? '#1d4ed8';
|
|
const renderInput = {
|
|
orgName: organization.name,
|
|
logoUrl: organization.avatarUrl?.trim() || undefined,
|
|
tagline,
|
|
themeColor,
|
|
showWatermark: isFreePlan
|
|
};
|
|
|
|
const etag = buildOrgSiteOgEtag({
|
|
siteName,
|
|
...renderInput
|
|
});
|
|
|
|
const cachedBuffer = await getCachedOrgSiteOgBuffer(siteName, etag);
|
|
if (cachedBuffer) {
|
|
return { buffer: cachedBuffer, etag };
|
|
}
|
|
|
|
const { html, styles } = renderOrgSiteOg(renderInput);
|
|
const buffer = await getCloudflarePngBuffer(html, styles, OG_VIEWPORT);
|
|
|
|
await persistOrgSiteOgImage(siteName, buffer, etag);
|
|
|
|
return { buffer, etag };
|
|
}
|