From 44b38555e51643c8b52d5642037e9c3a33758b36 Mon Sep 17 00:00:00 2001
From: Sohum Mendon <smendon@proton.me>
Date: Sun, 13 Oct 2024 18:01:18 -0700
Subject: [PATCH] feat(head): support opengraph customizations

This commit adds the ability to modify attributes of the default
OpenGraph image by changes to the quartz.layout.ts file.

Attributes include the MIME type, dimensions, image path, and alt text.

An example of how this would be configured is present in the existing
layout file.
---
 quartz.layout.ts           | 10 +++++++++-
 quartz/components/Head.tsx | 23 ++++++++++++++++++-----
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/quartz.layout.ts b/quartz.layout.ts
index 81203ec2d..d2a85dc82 100644
--- a/quartz.layout.ts
+++ b/quartz.layout.ts
@@ -6,7 +6,15 @@ export const sharedPageComponents: SharedLayout = {
   head: Component.Head({
     favicons: [
       { path: "static/icon.png", size: "200x200", mime: "image/png" }
-    ]
+    ],
+
+    openGraph: {
+      path: "static/og-image.png",
+      mime: "image/png",
+      width: "1200",
+      height: "675",
+      alt: "Quartz logo"
+    }
   }),
   header: [],
   afterBody: [],
diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index aa0194fe9..2c7414fd1 100644
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -10,8 +10,17 @@ interface Favicon {
   mime?: string
 }
 
+interface OpenGraphImage {
+  path: string
+  alt?: string
+  mime?: string
+  width?: string
+  height?: string
+}
+
 interface Options {
   favicons?: Favicon[]
+  openGraph?: OpenGraphImage
 }
 
 export default ((opts?: Options) => {
@@ -27,8 +36,6 @@ export default ((opts?: Options) => {
     const path = url.pathname as FullSlug
     const baseDir = fileData.slug === "404" ? path : pathToRoot(fileData.slug!)
 
-    const ogImagePath = `https://${cfg.baseUrl}/static/og-image.png`
-
     const icons = opts?.favicons ?? []
 
     return (
@@ -45,9 +52,15 @@ export default ((opts?: Options) => {
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta property="og:title" content={title} />
         <meta property="og:description" content={description} />
-        {cfg.baseUrl && <meta property="og:image" content={ogImagePath} />}
-        <meta property="og:width" content="1200" />
-        <meta property="og:height" content="675" />
+        {cfg.baseUrl && opts?.openGraph && (
+          <>
+            <meta property="og:image" content={`https://${cfg.baseUrl}/${opts.openGraph.path}`} />
+            {opts.openGraph.mime && (<meta property="og:image:type" content={opts.openGraph.mime} />)}
+            {opts.openGraph.width && (<meta property="og:image:width" content={opts.openGraph.path} />)}
+            {opts.openGraph.height && (<meta property="og:image:height" content={opts.openGraph.height} />)}
+            {opts.openGraph.alt && (<meta property="og:image:alt" content={opts.openGraph.alt} />)}
+          </>
+        )}
         {icons.map(({ path, size, mime }) => (
           <link rel="icon" href={joinSegments(baseDir, path)} sizes={size} type={mime} />
         ))}