From 5a4e75238f1f9efd25ddcf2a784beae9206a0c9c Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Sun, 16 Mar 2025 12:49:59 -0500
Subject: [PATCH] Try to fix fonts, unsure

---
 bskyogcard/src/components/Post/index.tsx |  2 +-
 bskyogcard/src/components/Text.tsx       |  4 ++++
 bskyogcard/src/context.ts                | 22 +++------------------
 bskyogcard/src/routes/post.tsx           |  5 +++++
 bskyogcard/src/util/fonts.ts             | 25 ++++++++++++++++++++++++
 5 files changed, 38 insertions(+), 20 deletions(-)
 create mode 100644 bskyogcard/src/util/fonts.ts

diff --git a/bskyogcard/src/components/Post/index.tsx b/bskyogcard/src/components/Post/index.tsx
index c26d3d546d..61c5e7f18a 100644
--- a/bskyogcard/src/components/Post/index.tsx
+++ b/bskyogcard/src/components/Post/index.tsx
@@ -81,7 +81,7 @@ export function Post({
               moderatorData={moderatorData}
             />
             <Box cx={[a.flex_col]}>
-              <Text cx={[a.text_md, a.font_bold, a.pb_2xs]}>
+              <Text cx={[a.text_md, a.font_heavy, a.pb_2xs]}>
                 {post.author.displayName || post.author.handle}
               </Text>
               <Text cx={[a.text_sm, t.atoms.text_contrast_medium]}>
diff --git a/bskyogcard/src/components/Text.tsx b/bskyogcard/src/components/Text.tsx
index 28b4b3ad74..752a6da4a5 100644
--- a/bskyogcard/src/components/Text.tsx
+++ b/bskyogcard/src/components/Text.tsx
@@ -21,6 +21,10 @@ export function Text({
     a.leading_tight,
     a.tracking_wide,
     t.atoms.text,
+    {
+      fontFamily: 'Inter',
+      fontWeight: 400,
+    },
     ...(cx ?? []),
   ])
   styles.fontSize = (styles.fontSize || a.text_md.fontSize) * SCALE_MULTIPLIER
diff --git a/bskyogcard/src/context.ts b/bskyogcard/src/context.ts
index 8d6f2e976e..325b2d3690 100644
--- a/bskyogcard/src/context.ts
+++ b/bskyogcard/src/context.ts
@@ -1,12 +1,7 @@
-import {readdirSync, readFileSync} from 'node:fs'
-import * as path from 'node:path'
-import {fileURLToPath} from 'node:url'
-
 import {AtpAgent} from '@atproto/api'
 
 import {Config} from './config.js'
-
-const __DIRNAME = path.dirname(fileURLToPath(import.meta.url))
+import {getFontFiles,readFonts} from './util/fonts.js'
 
 export type AppContextOptions = {
   cfg: Config
@@ -28,19 +23,8 @@ export class AppContext {
 
   static async fromConfig(cfg: Config, overrides?: Partial<AppContextOptions>) {
     const appviewAgent = new AtpAgent({service: cfg.service.appviewUrl})
-    const fontDirectory = path.join(__DIRNAME, 'assets', 'fonts')
-    const fontFiles = readdirSync(fontDirectory)
-    const fonts = fontFiles.map(file => {
-      const basename = path.basename(file, path.extname(file))
-      const italic = basename.includes('Italic')
-      const [weight, name] = basename.split('-')
-      return {
-        name,
-        data: readFileSync(path.join(fontDirectory, file)),
-        weight: parseInt(weight),
-        style: italic ? 'italic' : 'normal',
-      }
-    })
+    const fontFiles = getFontFiles()
+    const fonts = readFonts(fontFiles)
     return new AppContext({
       cfg,
       appviewAgent,
diff --git a/bskyogcard/src/routes/post.tsx b/bskyogcard/src/routes/post.tsx
index d5d329669c..5f8ca73d71 100644
--- a/bskyogcard/src/routes/post.tsx
+++ b/bskyogcard/src/routes/post.tsx
@@ -10,6 +10,7 @@ import {getPost} from '../data/getPost.js'
 import {getPostData} from '../data/getPostData.js'
 import {httpLogger} from '../logger.js'
 import {loadEmojiAsSvg} from '../util.js'
+import {getFontFiles} from '../util/fonts.js'
 import {
   getRenderOptions,
   parseDisplayOptionsFromQuery,
@@ -65,6 +66,10 @@ export default function (ctx: AppContext, app: Express) {
           },
         )
         const output = await resvg.renderAsync(svg, {
+          font: {
+            fontFiles: getFontFiles(),
+            defaultFontFamily: 'Inter',
+          },
           fitTo: {
             mode: 'width',
             value: width * 2,
diff --git a/bskyogcard/src/util/fonts.ts b/bskyogcard/src/util/fonts.ts
new file mode 100644
index 0000000000..2670f4a7f7
--- /dev/null
+++ b/bskyogcard/src/util/fonts.ts
@@ -0,0 +1,25 @@
+import {readdirSync, readFileSync} from 'node:fs'
+import * as path from 'node:path'
+
+const __DIRNAME = path.join(process.cwd(), 'src')
+
+export function getFontFiles() {
+  const fontDirectory = path.join(__DIRNAME, 'assets', 'fonts')
+  return readdirSync(fontDirectory)
+    .filter(file => file.endsWith('.ttf'))
+    .map(file => path.join(fontDirectory, file))
+}
+
+export function readFonts(fontFiles: string[]) {
+  return fontFiles.map(file => {
+    const basename = path.basename(file, path.extname(file))
+    const italic = basename.includes('Italic')
+    const [weight, name] = basename.split('-')
+    return {
+      name,
+      data: readFileSync(file),
+      weight: parseInt(weight),
+      style: italic ? 'italic' : 'normal',
+    }
+  })
+}