Initial commit

quartz/plugins/emitters/ogImage.tsx

@@ -0,0 +1,182 @@
+import { QuartzEmitterPlugin } from "../types"
+import { i18n } from "../../i18n"
+import { unescapeHTML } from "../../util/escape"
+import { FullSlug, getFileExtension, isAbsoluteURL, joinSegments, QUARTZ } from "../../util/path"
+import { ImageOptions, SocialImageOptions, defaultImage, getSatoriFonts } from "../../util/og"
+import sharp from "sharp"
+import satori, { SatoriOptions } from "satori"
+import { loadEmoji, getIconCode } from "../../util/emoji"
+import { Readable } from "stream"
+import { write } from "./helpers"
+import { BuildCtx } from "../../util/ctx"
+import { QuartzPluginData } from "../vfile"
+import fs from "node:fs/promises"
+import { styleText } from "util"
+
+const defaultOptions: SocialImageOptions = {
+  colorScheme: "lightMode",
+  width: 1200,
+  height: 630,
+  imageStructure: defaultImage,
+  excludeRoot: false,
+}
+
+/**
+ * Generates social image (OG/twitter standard) and saves it as `.webp` inside the public folder
+ * @param opts options for generating image
+ */
+async function generateSocialImage(
+  { cfg, description, fonts, title, fileData }: ImageOptions,
+  userOpts: SocialImageOptions,
+): Promise<Readable> {
+  const { width, height } = userOpts
+  const iconPath = joinSegments(QUARTZ, "static", "icon.png")
+  let iconBase64: string | undefined = undefined
+  try {
+    const iconData = await fs.readFile(iconPath)
+    iconBase64 = `data:image/png;base64,${iconData.toString("base64")}`
+  } catch (err) {
+    console.warn(styleText("yellow", `Warning: Could not find icon at ${iconPath}`))
+  }
+
+  const imageComponent = userOpts.imageStructure({
+    cfg,
+    userOpts,
+    title,
+    description,
+    fonts,
+    fileData,
+    iconBase64,
+  })
+
+  const svg = await satori(imageComponent, {
+    width,
+    height,
+    fonts,
+    loadAdditionalAsset: async (languageCode: string, segment: string) => {
+      if (languageCode === "emoji") {
+        return await loadEmoji(getIconCode(segment))
+      }
+
+      return languageCode
+    },
+  })
+
+  return sharp(Buffer.from(svg)).webp({ quality: 40 })
+}
+
+async function processOgImage(
+  ctx: BuildCtx,
+  fileData: QuartzPluginData,
+  fonts: SatoriOptions["fonts"],
+  fullOptions: SocialImageOptions,
+) {
+  const cfg = ctx.cfg.configuration
+  const slug = fileData.slug!
+  const titleSuffix = cfg.pageTitleSuffix ?? ""
+  const title =
+    (fileData.frontmatter?.title ?? i18n(cfg.locale).propertyDefaults.title) + titleSuffix
+  const description =
+    fileData.frontmatter?.socialDescription ??
+    fileData.frontmatter?.description ??
+    unescapeHTML(fileData.description?.trim() ?? i18n(cfg.locale).propertyDefaults.description)
+
+  const stream = await generateSocialImage(
+    {
+      title,
+      description,
+      fonts,
+      cfg,
+      fileData,
+    },
+    fullOptions,
+  )
+
+  return write({
+    ctx,
+    content: stream,
+    slug: `${slug}-og-image` as FullSlug,
+    ext: ".webp",
+  })
+}
+
+export const CustomOgImagesEmitterName = "CustomOgImages"
+export const CustomOgImages: QuartzEmitterPlugin<Partial<SocialImageOptions>> = (userOpts) => {
+  const fullOptions = { ...defaultOptions, ...userOpts }
+
+  return {
+    name: CustomOgImagesEmitterName,
+    getQuartzComponents() {
+      return []
+    },
+    async *emit(ctx, content, _resources) {
+      const cfg = ctx.cfg.configuration
+      const headerFont = cfg.theme.typography.header
+      const bodyFont = cfg.theme.typography.body
+      const fonts = await getSatoriFonts(headerFont, bodyFont)
+
+      for (const [_tree, vfile] of content) {
+        if (vfile.data.frontmatter?.socialImage !== undefined) continue
+        yield processOgImage(ctx, vfile.data, fonts, fullOptions)
+      }
+    },
+    async *partialEmit(ctx, _content, _resources, changeEvents) {
+      const cfg = ctx.cfg.configuration
+      const headerFont = cfg.theme.typography.header
+      const bodyFont = cfg.theme.typography.body
+      const fonts = await getSatoriFonts(headerFont, bodyFont)
+
+      // find all slugs that changed or were added
+      for (const changeEvent of changeEvents) {
+        if (!changeEvent.file) continue
+        if (changeEvent.file.data.frontmatter?.socialImage !== undefined) continue
+        if (changeEvent.type === "add" || changeEvent.type === "change") {
+          yield processOgImage(ctx, changeEvent.file.data, fonts, fullOptions)
+        }
+      }
+    },
+    externalResources: (ctx) => {
+      if (!ctx.cfg.configuration.baseUrl) {
+        return {}
+      }
+
+      const baseUrl = ctx.cfg.configuration.baseUrl
+      return {
+        additionalHead: [
+          (pageData) => {
+            const isRealFile = pageData.filePath !== undefined
+            let userDefinedOgImagePath = pageData.frontmatter?.socialImage
+
+            if (userDefinedOgImagePath) {
+              userDefinedOgImagePath = isAbsoluteURL(userDefinedOgImagePath)
+                ? userDefinedOgImagePath
+                : `https://${baseUrl}/static/${userDefinedOgImagePath}`
+            }
+
+            const generatedOgImagePath = isRealFile
+              ? `https://${baseUrl}/${pageData.slug!}-og-image.webp`
+              : undefined
+            const defaultOgImagePath = `https://${baseUrl}/static/og-image.png`
+            const ogImagePath = userDefinedOgImagePath ?? generatedOgImagePath ?? defaultOgImagePath
+            const ogImageMimeType = `image/${getFileExtension(ogImagePath) ?? "png"}`
+            return (
+              <>
+                {!userDefinedOgImagePath && (
+                  <>
+                    <meta property="og:image:width" content={fullOptions.width.toString()} />
+                    <meta property="og:image:height" content={fullOptions.height.toString()} />
+                  </>
+                )}
+
+                <meta property="og:image" content={ogImagePath} />
+                <meta property="og:image:url" content={ogImagePath} />
+                <meta name="twitter:image" content={ogImagePath} />
+                <meta property="og:image:type" content={ogImageMimeType} />
+              </>
+            )
+          },
+        ],
+      }
+    },
+  }
+}