scapegoat/Docs2.git

			@@ -4,6 +4,7 @@
			import { googleFontHref } from "../util/theme"
			import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
			import satori, { SatoriOptions } from "satori"
			import { loadEmoji, getIconCode } from "../util/emoji"
			import fs from "fs"
			import sharp from "sharp"
			import { ImageOptions, SocialImageOptions, getSatoriFont, defaultImage } from "../util/og"
			@@ -24,7 +25,18 @@
			// JSX that will be used to generate satori svg
			const imageComponent = userOpts.imageStructure(cfg, userOpts, title, description, fonts, fileData)

			const svg = await satori(imageComponent, { width, height, fonts })
			const svg = await satori(imageComponent, {
			width,
			height,
			fonts,
			loadAdditionalAsset: async (languageCode: string, segment: string) => {
			if (languageCode === "emoji") {
			return `data:image/svg+xml;base64,${btoa(await loadEmoji(getIconCode(segment)))}`
			}

			return languageCode
			},
			})

			// Convert svg directly to webp (with additional compression)
			const compressed = await sharp(Buffer.from(svg)).webp({ quality: 40 }).toBuffer()
			@@ -98,7 +110,7 @@

			if (fileName) {
			// Generate social image (happens async)
			generateSocialImage(
			void generateSocialImage(
			{
			title,
			description,
			@@ -115,7 +127,7 @@
			}
			}

			const { css, js } = externalResources
			const { css, js, additionalHead } = externalResources

			const url = new URL(`https://${cfg.baseUrl ?? "example.com"}`)
			const path = url.pathname as FullSlug
			@@ -165,7 +177,7 @@
			<link rel="stylesheet" href={googleFontHref(cfg.theme)} />
			</>
			)}
			<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossOrigin={"anonymous"} />
			<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossOrigin="anonymous" />
			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
			{/* OG/Twitter meta tags */}
			<meta name="og:site_name" content={cfg.pageTitle}></meta>
			@@ -201,6 +213,13 @@
			{js
			.filter((resource) => resource.loadTime === "beforeDOMReady")
			.map((res) => JSResourceToScriptElement(res, true))}
			{additionalHead.map((resource) => {
			if (typeof resource === "function") {
			return resource(fileData)
			} else {
			return resource
			}
			})}
			</head>
			)
			}