From d6439917d867931ede0c55033c45cc9a95d54f3f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 11 Jan 2026 19:27:47 +0000
Subject: [PATCH 1/2] feat: add author avatar and username to post OG image

Display the post author's GitHub avatar and username at the bottom
of the Open Graph image for better attribution when sharing posts.
---
 app/api/og/post/route.tsx | 118 +++++++++++++++++++++++++-------------
 1 file changed, 79 insertions(+), 39 deletions(-)

diff --git a/app/api/og/post/route.tsx b/app/api/og/post/route.tsx
index 48bcbf0..f7e36fb 100644
--- a/app/api/og/post/route.tsx
+++ b/app/api/og/post/route.tsx
@@ -3,6 +3,7 @@ import { readFile } from "fs/promises"
 import { ImageResponse } from "next/og"
 import type { NextRequest } from "next/server"
 import { join } from "path"
+import { gitHubUserLoader } from "@/lib/auth"
 import { getRootCommentText } from "@/lib/data/posts"
 import { db } from "@/lib/db/client"
 import { posts } from "@/lib/db/schema"
@@ -48,6 +49,7 @@ export async function GET(request: NextRequest) {
         title: posts.title,
         number: posts.number,
         rootCommentId: posts.rootCommentId,
+        authorId: posts.authorId,
       })
       .from(posts)
       .where(
@@ -63,6 +65,10 @@ export async function GET(request: NextRequest) {
     geistMonoBold,
   ])
 
+  const author = post?.authorId
+    ? await gitHubUserLoader.load(post.authorId)
+    : null
+
   const title = post?.title || `Post #${postNumber}`
   const body = post?.rootCommentId
     ? await getRootCommentText(post.rootCommentId)
@@ -76,69 +82,103 @@ export async function GET(request: NextRequest) {
         display: "flex",
         flexDirection: "column",
         alignItems: "flex-start",
-        justifyContent: "flex-start",
+        justifyContent: "space-between",
         backgroundColor: "#fafafa",
         padding: 60,
-        gap: 32,
         fontFamily: "Geist Mono",
       }}
     >
       <div
         style={{
           display: "flex",
-          alignItems: "center",
-          gap: 12,
+          flexDirection: "column",
+          gap: 32,
         }}
       >
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img
-          alt="Forums"
-          height={40}
-          src={`${getSiteOrigin()}/icon.svg`}
-          width={40}
-        />
-        <span
+        <div
           style={{
-            fontSize: 36,
-            color: "#71717a",
+            display: "flex",
+            alignItems: "center",
+            gap: 12,
           }}
         >
-          {`${owner}/${repo}`}
-        </span>
-      </div>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: 24,
-        }}
-      >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            alt="Forums"
+            height={40}
+            src={`${getSiteOrigin()}/icon.svg`}
+            width={40}
+          />
+          <span
+            style={{
+              fontSize: 36,
+              color: "#71717a",
+            }}
+          >
+            {`${owner}/${repo}`}
+          </span>
+        </div>
         <div
           style={{
-            fontSize: 64,
-            fontWeight: 600,
-            color: "#09090b",
-            lineHeight: 1.2,
-            maxWidth: 1080,
+            display: "flex",
+            flexDirection: "column",
+            gap: 24,
           }}
         >
-          {title}
-        </div>
-        {body && (
           <div
             style={{
-              fontSize: 36,
-              color: "#52525b",
-              lineHeight: 1.5,
+              fontSize: 64,
+              fontWeight: 600,
+              color: "#09090b",
+              lineHeight: 1.2,
               maxWidth: 1080,
-              display: "block",
-              lineClamp: 3,
             }}
           >
-            {body}
+            {title}
           </div>
-        )}
+          {body && (
+            <div
+              style={{
+                fontSize: 36,
+                color: "#52525b",
+                lineHeight: 1.5,
+                maxWidth: 1080,
+                display: "block",
+                lineClamp: 2,
+              }}
+            >
+              {body}
+            </div>
+          )}
+        </div>
       </div>
+      {author && (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 16,
+          }}
+        >
+          {author.image && (
+            <img
+              alt={author.name || post.authorId}
+              height={48}
+              src={author.image}
+              style={{ borderRadius: 24 }}
+              width={48}
+            />
+          )}
+          <span
+            style={{
+              fontSize: 28,
+              color: "#71717a",
+            }}
+          >
+            {`@${post.authorId}`}
+          </span>
+        </div>
+      )}
     </div>,
     {
       ...size,

From 6add6905105e9ff8781383bdde98861f7ba41091 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 13 Jan 2026 14:42:15 +0000
Subject: [PATCH 2/2] fix: inline GitHub user fetch in post OG route

---
 app/api/og/post/route.tsx | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/app/api/og/post/route.tsx b/app/api/og/post/route.tsx
index f7e36fb..1a8ba59 100644
--- a/app/api/og/post/route.tsx
+++ b/app/api/og/post/route.tsx
@@ -3,12 +3,29 @@ import { readFile } from "fs/promises"
 import { ImageResponse } from "next/og"
 import type { NextRequest } from "next/server"
 import { join } from "path"
-import { gitHubUserLoader } from "@/lib/auth"
 import { getRootCommentText } from "@/lib/data/posts"
 import { db } from "@/lib/db/client"
 import { posts } from "@/lib/db/schema"
 import { getSiteOrigin } from "@/lib/utils"
 
+async function fetchGitHubUser(username: string) {
+  const res = await fetch(`https://api.github.com/users/${username}`, {
+    headers: {
+      Accept: "application/vnd.github.v3+json",
+      ...(process.env.GITHUB_TOKEN && {
+        Authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
+      }),
+    },
+  })
+  if (!res.ok) return null
+  const data = (await res.json()) as {
+    login: string
+    name: string | null
+    avatar_url: string
+  }
+  return { login: data.login, name: data.name || data.login, image: data.avatar_url }
+}
+
 const size = {
   width: 1200,
   height: 630,
@@ -65,9 +82,7 @@ export async function GET(request: NextRequest) {
     geistMonoBold,
   ])
 
-  const author = post?.authorId
-    ? await gitHubUserLoader.load(post.authorId)
-    : null
+  const author = post?.authorId ? await fetchGitHubUser(post.authorId) : null
 
   const title = post?.title || `Post #${postNumber}`
   const body = post?.rootCommentId