fix: og image

app/_w.generator.ts

@@ -1,76 +1,82 @@
-import { promises as fs } from 'fs';
-import path from 'path';
+import { promises as fs } from 'fs'
+import path from 'path'
 
 export interface WritingPost {
-  slug: string;
-  title: string;
-  description: string;
-  date: string;
-  hero?: boolean;
-  tags?: string[];
+  slug: string
+  title: string
+  description: string
+  date: string
+  hero?: boolean
+  tags?: string[]
 }
 
 async function generateWritings() {
-  const writingsDir = path.join(process.cwd(), 'app', 't');
-  const entries = await fs.readdir(writingsDir, { 
-    recursive: true, 
-    withFileTypes: true 
-  });
+  const writingsDir = path.join(process.cwd(), 'app', 't')
+  const entries = await fs.readdir(writingsDir, {
+    recursive: true,
+    withFileTypes: true,
+  })
 
-  const writings: WritingPost[] = [];
+  const writings: WritingPost[] = []
 
   for (const entry of entries) {
-    if (entry.isFile() && entry.name === 'page.mdx') {
-      const filePath = path.join(entry.parentPath, entry.name);
-      const content = await fs.readFile(filePath, 'utf-8');
-
-      const cleanedMetadata = (content.match(/export const metadata = \{([\s\S]*?)\};/)??[])[1];
-
-      if(!cleanedMetadata) {
-        const msg = `Missing metadata in ${filePath}`;
-        console.error(msg);
-        // throw Error(msg);
-        continue;
-      }
-
-      const titleMatch = cleanedMetadata.match(/title: ['"](.+?)['"]/);
-      const descriptionMatch = cleanedMetadata.match(/description: ['"](.+?)['"]/);
-      const dateMatch = cleanedMetadata.match(/date: ['"](.+?)['"]/);
-      const heroMatch = cleanedMetadata.match(/hero: (true|false)/);
-      const tagsMatch = cleanedMetadata.match(/tags: \[(.*?)\]/);
+    if (!(entry.isFile() && entry.name === 'page.mdx')) {
+      continue
+    }
+    const filePath = path.join(entry.parentPath, entry.name)
+    const content = await fs.readFile(filePath, 'utf-8')
+
+    const cleanedMetadata = (content.match(
+      /export const metadata = \{([\s\S]*?)\};/,
+    ) ?? [])[1]
+
+    if (!cleanedMetadata) {
+      const msg = `Missing metadata in ${filePath}`
+      console.error(msg)
+      // throw Error(msg);
+      continue
+    }
+
+    const titleMatch = cleanedMetadata.match(/title: ['"](.+?)['"]/)
+    const descriptionMatch = cleanedMetadata.match(/description: ['"](.+?)['"]/)
+    const dateMatch = cleanedMetadata.match(/date: ['"](.+?)['"]/)
+    const heroMatch = cleanedMetadata.match(/hero: (true|false)/)
+    const tagsMatch = cleanedMetadata.match(/tags: \[(.*?)\]/)
 
-      if (titleMatch && descriptionMatch && dateMatch) {
-        const relativePath = path.relative(writingsDir, entry.path);
-        writings.push({
-          slug: `/t/${relativePath}`.replace(/\\/g, '/'),
-          title: titleMatch[1],
-          description: descriptionMatch[1],
-          date: dateMatch[1],
-          hero: heroMatch ? heroMatch[1] === 'true' : false,
-          tags: tagsMatch ? tagsMatch[1].split(',').map(tag => tag.trim().replace(/['"]/g, '')) : undefined
-        });
-      }
+    if (titleMatch && descriptionMatch && dateMatch) {
+      const relativePath = path.relative(writingsDir, entry.path)
+      writings.push({
+        slug: `/t/${relativePath}`.replace(/\\/g, '/'),
+        title: titleMatch[1],
+        description: descriptionMatch[1],
+        date: dateMatch[1],
+        hero: heroMatch ? heroMatch[1] === 'true' : false,
+        tags: tagsMatch
+          ? tagsMatch[1]
+              .split(',')
+              .map((tag) => tag.trim().replace(/['"]/g, ''))
+          : undefined,
+      })
     }
   }
 
   // Sort writings by date (newest first)
-  writings.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+  writings.sort(
+    (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime(),
+  )
 
   // If no hero is set, set the first element as hero
-  if (!writings.some(w => w.hero)) {
-    console.log("writings", writings)
-    writings[0].hero = true;
+  if (!writings.some((w) => w.hero)) {
+    writings[0].hero = true
   }
 
   const fileContent = `// This file is auto-generated. Do not edit it manually.
 export const ALL_WRITINGS = ${JSON.stringify(writings, null, 2)} as const;
-`;
+`
 
-  await fs.writeFile(
-    path.join(process.cwd(), 'app', '_w.ts'),
-    fileContent
-  );
+  await fs.writeFile(path.join(process.cwd(), 'app', '_w.ts'), fileContent)
 }
 
 // Run the generator
-generateWritings().catch(console.error);
+generateWritings().catch(console.error)
+

app/footer.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { AnimatedBackground } from '@/components/ui/animated-background'
-import { MonitorIcon, MoonIcon, SunIcon } from 'lucide-react'
+import { MoonIcon, SunIcon } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { useEffect, useState } from 'react'
 

app/layout.tsx

@@ -29,6 +29,19 @@ export const metadata: Metadata = {
     template: "%s | Victor A.",
   },
   description: "Software engineer. Builder.",
+  openGraph: {
+    type: 'website',
+    url: WEBSITE_URL,
+    title: "Victor A.",
+    description: "Software engineer. Builder.",
+    siteName: 'Victor A.',
+    locale: 'en_US',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: "Victor A.",
+    description: "Software engineer. Builder.",
+  },
 }
 
 const geistSans = Geist({

app/opengraph-image.tsx

@@ -0,0 +1,42 @@
+import { ImageResponse } from 'next/server'
+import { NAME } from '@/lib/constants'
+
+export const runtime = 'edge'
+export const alt = `${NAME} - Software Engineer`
+export const size = {
+  width: 1200,
+  height: 630,
+}
+export const contentType = 'image/png'
+
+export default async function Image() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#ffffff',
+          fontSize: 48,
+          fontWeight: 600,
+        }}
+      >
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+          <div style={{ color: '#000000', marginBottom: 20 }}>
+            {NAME}
+          </div>
+          <div style={{ color: '#666666', fontSize: 24 }}>
+            Software Engineer
+          </div>
+        </div>
+      </div>
+    ),
+    {
+      ...size,
+    }
+  )
+}

app/page.tsx

@@ -247,7 +247,7 @@ function AnimatedTabsHover() {
         >
           <div className="flex flex-col space-y-0">
             <p className='max-w-9/12 mb-6 mx-auto text-foreground/70'>
-              <q>If you're thinking without writing, you only think you're thinking.</q>
+              <q>If you&apos;re thinking without writing, you only think you&apos;re thinking.</q>
               <br />
               - <cite>Leslie Lamport</cite>
             </p>

app/t/[slug]/opengraph-image.tsx

@@ -0,0 +1,111 @@
+import { ImageResponse } from 'next/server'
+import { NAME } from '@/lib/constants'
+
+export const runtime = 'edge'
+export const size = {
+  width: 1200,
+  height: 630,
+}
+export const contentType = 'image/png'
+
+type Props = {
+  params: Promise<{ slug: string }>
+}
+
+// Known posts metadata - hardcoded for edge runtime compatibility
+const POSTS_METADATA: Record<string, { title: string; description: string; date?: string }> = {
+  'rust-python-js-sdk': {
+    title: 'Cross-Language Harmony: Building Python & TypeScript SDKs with Rust.',
+    description: 'Creating a python and a javascript sdk using rust in one repository and some advantages of a using a lower level language as your core.',
+    date: '03/2024'
+  },
+  'to-think': {
+    title: 'Struggling to Think.',
+    description: 'A personal reflection on the importance of writing for clear thinking.',
+    date: '04/2025'
+  }
+}
+
+export async function generateStaticParams() {
+  return Object.keys(POSTS_METADATA).map((slug) => ({
+    slug,
+  }))
+}
+
+export async function generateImageMetadata({ params: _params }: Props) {
+  const params = await _params
+  const metadata = POSTS_METADATA[params.slug]
+  const title = metadata?.title || 'Blog Post'
+
+  return [
+    {
+      id: 'default',
+      alt: title,
+    },
+  ]
+}
+
+export default async function Image({ params: _params }: Props) {
+  const params = await _params
+  const metadata = POSTS_METADATA[params.slug]
+
+  const title = metadata?.title || 'Blog Post'
+  const description = metadata?.description || 'A blog post by Victor A.'
+  const date = metadata?.date || ''
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'flex-start',
+          justifyContent: 'space-between',
+          backgroundColor: '#ffffff',
+          padding: '60px',
+          fontFamily: 'system-ui, -apple-system, sans-serif',
+        }}
+      >
+        <div style={{ display: 'flex', flexDirection: 'column', maxWidth: '80%' }}>
+          <div 
+            style={{ 
+              color: '#000000', 
+              fontSize: 52, 
+              fontWeight: 700,
+              lineHeight: 1.1,
+              marginBottom: 20,
+            }}
+          >
+            {title}
+          </div>
+          <div 
+            style={{ 
+              color: '#666666', 
+              fontSize: 24,
+              lineHeight: 1.4,
+              maxWidth: '100%',
+            }}
+          >
+            {description}
+          </div>
+        </div>
+
+        <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', alignItems: 'center' }}>
+          <div style={{ color: '#000000', fontSize: 28, fontWeight: 600 }}>
+            {NAME}
+          </div>
+          {date && (
+            <div style={{ color: '#888888', fontSize: 20 }}>
+              {date}
+            </div>
+          )}
+        </div>
+      </div>
+    ),
+    {
+      ...size,
+    }
+  )
+}