better opengraph images

Author: hry-gh

.github/workflows/deploy.yml

@@ -44,6 +44,7 @@ jobs:
       - name: Prepare assets
         run: |
             wget https://raw.githubusercontent.com/adrienverge/copr-some-nice-fonts/590400b0e1426d7b10bdda48ab565d3d2b144f5e/Verdana.ttf -O quartz/redistless/Verdana.ttf
+            wget https://raw.githubusercontent.com/ueaner/fonts/8c1bccdc1622a2538c35abbd004ce367a949f642/Menlo-Regular.ttf -O quartz/redistless/Menlo.ttf
 
       - name: Build Quartz
         run: npx quartz build

Menlo-Regular.ttf

@@ -147,6 +147,7 @@ declare module "vfile" {
         cssclasses: string[]
         socialImage: string
         comments: boolean | string
+        headers: {[title: string]: string[]}
       }>
   }
 }

quartz/plugins/transformers/frontmatter.ts

@@ -36,7 +36,7 @@ export async function getSatoriFonts(headerFont: FontSpecification, bodyFont: Fo
       name: headerFontName,
       data,
       weight,
-      style: "normal" as const,
+      style: "normal",
     }
   })
 
@@ -47,10 +47,17 @@ export async function getSatoriFonts(headerFont: FontSpecification, bodyFont: Fo
       name: bodyFontName,
       data,
       weight,
-      style: "normal" as const,
+      style: "normal",
     }
   })
 
+  const data = await fetchTtf("Menlo", 600)
+  if(data) {
+    bodyFontPromises.push(new Promise((resolve) => {
+      resolve({name: "Menlo", data: data, weight: 600, style: "monospace"})
+    }))
+  }
+
   const [headerFonts, bodyFonts] = await Promise.all([
     Promise.all(headerFontPromises),
     Promise.all(bodyFontPromises),
@@ -78,6 +85,9 @@ export async function fetchTtf(
   if(rawFontName === "Verdana") {
     return await fs.readFile(path.join("quartz", "redistless", "Verdana.ttf"))
   }
+  if(rawFontName === "Menlo") {
+    return await fs.readFile(path.join("quartz", "redistless", "Menlo.ttf"))
+  }
 
   const fontName = rawFontName.replaceAll(" ", "+")
   const cacheKey = `${fontName}-${weight}`
@@ -201,6 +211,14 @@ export const defaultImage: SocialImageOptions["imageStructure"] = ({
   const bodyFont = getFontSpecificationName(cfg.theme.typography.body)
   const headerFont = getFontSpecificationName(cfg.theme.typography.header)
 
+  let hasRichBody = false;
+
+  if(fileData.frontmatter?.headers) {
+    const keys = Object.keys(fileData.frontmatter.headers)
+    if(keys.length > 0) hasRichBody = true;
+  }
+
+
   return (
     <div
       style={{
@@ -267,7 +285,7 @@ export const defaultImage: SocialImageOptions["imageStructure"] = ({
             textOverflow: "ellipsis",
           }}
         >
-          {title}
+          {fileData.frontmatter?.title} | DM Ref
         </h1>
       </div>
 
@@ -291,7 +309,27 @@ export const defaultImage: SocialImageOptions["imageStructure"] = ({
             textOverflow: "ellipsis",
           }}
         >
-          {description}
+          <div style={{
+            display: "flex",
+            flexDirection: "column",
+          }}>
+          {hasRichBody ? Object.keys(fileData.frontmatter?.headers!).slice(0, 3).map((header) => (
+            <div key={header} style={{
+              display: "flex",
+              flexDirection: "row",
+              flex: 1
+            }}>
+              <p style={{textDecoration: "underline", fontWeight: "bold"}}>
+              {header}:
+              </p>
+                {fileData.frontmatter?.headers ? (
+                  <p style={{marginLeft: "10px", fontFamily: header === "Format" ? "Menlo" : bodyFont}}>
+                  {fileData.frontmatter.headers[header][0]?.slice(0, 55)}{fileData.frontmatter.headers[header][0]?.length > 55 ? "..." : ""}{fileData.frontmatter?.headers[header].length > 1 ? " +" : "" }
+                  </p>
+                ) : ""}
+            </div>
+          )) : description}
+          </div>
         </p>
       </div>