feat(ogImage): enhance user-defined OG image path handling with absolute URL support

This commit is contained in:
Karim H 2025-03-21 18:40:47 -04:00
parent b861740214
commit 0805e9a3ec
2 changed files with 14 additions and 12 deletions

View File

@ -1,14 +1,7 @@
import { QuartzEmitterPlugin } from "../types" import { QuartzEmitterPlugin } from "../types"
import { i18n } from "../../i18n" import { i18n } from "../../i18n"
import { unescapeHTML } from "../../util/escape" import { unescapeHTML } from "../../util/escape"
import { import { FullSlug, getFileExtension, isAbsoluteURL, joinSegments, QUARTZ } from "../../util/path"
FullSlug,
getFileExtension,
isFullUrl,
isRelativeURL,
joinSegments,
QUARTZ,
} from "../../util/path"
import { ImageOptions, SocialImageOptions, defaultImage, getSatoriFonts } from "../../util/og" import { ImageOptions, SocialImageOptions, defaultImage, getSatoriFonts } from "../../util/og"
import sharp from "sharp" import sharp from "sharp"
import satori, { SatoriOptions } from "satori" import satori, { SatoriOptions } from "satori"
@ -154,9 +147,9 @@ export const CustomOgImages: QuartzEmitterPlugin<Partial<SocialImageOptions>> =
let userDefinedOgImagePath = pageData.frontmatter?.socialImage let userDefinedOgImagePath = pageData.frontmatter?.socialImage
if (userDefinedOgImagePath) { if (userDefinedOgImagePath) {
userDefinedOgImagePath = isRelativeURL(userDefinedOgImagePath) userDefinedOgImagePath = isAbsoluteURL(userDefinedOgImagePath)
? `https://${baseUrl}/static/${userDefinedOgImagePath}` ? userDefinedOgImagePath
: userDefinedOgImagePath : `https://${baseUrl}/static/${userDefinedOgImagePath}`
} }
const generatedOgImagePath = isRealFile const generatedOgImagePath = isRealFile
@ -164,7 +157,7 @@ export const CustomOgImages: QuartzEmitterPlugin<Partial<SocialImageOptions>> =
: undefined : undefined
const defaultOgImagePath = `https://${baseUrl}/static/og-image.png` const defaultOgImagePath = `https://${baseUrl}/static/og-image.png`
const ogImagePath = userDefinedOgImagePath ?? generatedOgImagePath ?? defaultOgImagePath const ogImagePath = userDefinedOgImagePath ?? generatedOgImagePath ?? defaultOgImagePath
console.log("ogImagePath", ogImagePath)
const ogImageMimeType = `image/${getFileExtension(ogImagePath) ?? "png"}` const ogImageMimeType = `image/${getFileExtension(ogImagePath) ?? "png"}`
return ( return (
<> <>

View File

@ -40,6 +40,15 @@ export function isRelativeURL(s: string): s is RelativeURL {
return validStart && validEnding && ![".md", ".html"].includes(getFileExtension(s) ?? "") return validStart && validEnding && ![".md", ".html"].includes(getFileExtension(s) ?? "")
} }
export function isAbsoluteURL(s: string): boolean {
try {
new URL(s)
return true
} catch {
return false
}
}
export function getFullSlug(window: Window): FullSlug { export function getFullSlug(window: Window): FullSlug {
const res = window.document.body.dataset.slug! as FullSlug const res = window.document.body.dataset.slug! as FullSlug
return res return res