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

@@ -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: [],

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} />
         ))}