feat: brand Open Graph social cards and extend page coverage (#623)

- Replace the placeholder emoji and indigo gradient with the LibreChat logo
- Map card colors to the neutral shadcn theme tokens from global.css
- Bundle Geist (Regular + SemiBold) read from disk instead of fetched at
  render time, eliminating cold-start render failures
- Add branded cards to the authors and about pages, which previously fell
  back to the generic default image

Author: berry-13

app/about/page.tsx

@@ -20,12 +20,19 @@ import { baseOptions } from '@/app/layout.config'
 import FooterMenu from '@/components/FooterMenu'
 import Discord from '@/components/icons/discord'
 import X from '@/components/icons/x'
+import { ogImageUrl } from '@/lib/og'
 import type { Metadata } from 'next'
 
 export const metadata: Metadata = {
   title: 'About LibreChat',
   description:
     'LibreChat is a free, open-source AI platform that brings together all your AI conversations in one unified, customizable interface.',
+  openGraph: {
+    title: 'About LibreChat',
+    description:
+      'LibreChat is a free, open-source AI platform that brings together all your AI conversations in one unified, customizable interface.',
+    images: [ogImageUrl({ title: 'About LibreChat' })],
+  },
 }
 
 async function getGitHubData(): Promise<{

app/api/og/route.tsx

@@ -1,12 +1,30 @@
 import { ImageResponse } from 'next/og'
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
 
 /**
  * On-demand Open Graph image generator. Renders a 1200x630 branded social card
  * with the page title and section, so every shared link gets a unique preview.
  * Called via lib/og.ts `ogImageUrl()` from page metadata; CDN-cached by URL.
+ *
+ * Brand assets (Geist fonts + the LibreChat logo) are read from disk once at
+ * module load — no network fetch at render time, so cold starts can't fail.
+ * Colors mirror the neutral shadcn theme tokens in app/global.css (.dark).
  */
 export const runtime = 'nodejs'
 
+const FONTS_DIR = join(process.cwd(), 'lib/fonts')
+const geistRegular = readFileSync(join(FONTS_DIR, 'Geist-Regular.ttf'))
+const geistSemiBold = readFileSync(join(FONTS_DIR, 'Geist-SemiBold.ttf'))
+const logoSrc = `data:image/png;base64,${readFileSync(
+  join(process.cwd(), 'public/librechat.png'),
+).toString('base64')}`
+
+// app/global.css .dark tokens (hsl 0 0% L → hex), the site's neutral palette.
+const BACKGROUND = '#0a0a0a' // --background
+const FOREGROUND = '#fafafa' // --foreground
+const MUTED_FOREGROUND = '#8c8c8c' // --muted-foreground
+
 const TYPE_LABELS: Record<string, string> = {
   docs: 'Documentation',
   blog: 'Blog',
@@ -34,38 +52,24 @@ export function GET(request: Request) {
         flexDirection: 'column',
         justifyContent: 'space-between',
         padding: '80px',
-        backgroundColor: '#0a0a0a',
-        backgroundImage:
-          'radial-gradient(circle at 18% 0%, rgba(99,102,241,0.22), transparent 45%), radial-gradient(circle at 100% 100%, rgba(56,189,248,0.16), transparent 45%)',
-        color: '#fafafa',
-        fontFamily: 'sans-serif',
+        backgroundColor: BACKGROUND,
+        color: FOREGROUND,
+        fontFamily: 'Geist',
       }}
     >
       {/* Brand */}
       <div style={{ display: 'flex', alignItems: 'center', gap: '20px' }}>
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: '64px',
-            height: '64px',
-            borderRadius: '16px',
-            background: 'linear-gradient(135deg, #6366f1, #38bdf8)',
-            fontSize: '40px',
-          }}
-        >
-          🪶
-        </div>
-        <div style={{ fontSize: '34px', fontWeight: 700, letterSpacing: '-0.02em' }}>LibreChat</div>
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src={logoSrc} width={64} height={64} alt="" />
+        <div style={{ fontSize: '34px', fontWeight: 600, letterSpacing: '-0.02em' }}>LibreChat</div>
       </div>
 
       {/* Title */}
       <div
         style={{
           display: 'flex',
           fontSize,
-          fontWeight: 700,
+          fontWeight: 600,
           lineHeight: 1.1,
           letterSpacing: '-0.03em',
           maxWidth: '1000px',
@@ -81,22 +85,29 @@ export function GET(request: Request) {
           alignItems: 'center',
           justifyContent: 'space-between',
           fontSize: '26px',
-          color: '#a1a1aa',
+          color: MUTED_FOREGROUND,
         }}
       >
         <div
           style={{
             display: 'flex',
             textTransform: 'uppercase',
             letterSpacing: '0.12em',
-            fontWeight: 600,
+            fontWeight: 400,
           }}
         >
           {label}
         </div>
         <div style={{ display: 'flex' }}>www.librechat.ai</div>
       </div>
     </div>,
-    { width: 1200, height: 630 },
+    {
+      width: 1200,
+      height: 630,
+      fonts: [
+        { name: 'Geist', data: geistRegular, weight: 400, style: 'normal' },
+        { name: 'Geist', data: geistSemiBold, weight: 600, style: 'normal' },
+      ],
+    },
   )
 }

app/authors/page.tsx

@@ -1,6 +1,7 @@
 import Image from 'next/image'
 import Link from 'next/link'
 import { authors } from '@/lib/authors'
+import { ogImageUrl } from '@/lib/og'
 import type { Metadata } from 'next'
 
 export const metadata: Metadata = {
@@ -9,6 +10,7 @@ export const metadata: Metadata = {
   openGraph: {
     title: 'Authors | LibreChat',
     description: 'Get to know the talented people behind LibreChat.',
+    images: [ogImageUrl({ title: 'Authors' })],
   },
 }