metadata for u/username page

personas-open-source/src/app/u/[username]/layout.tsx

@@ -0,0 +1,89 @@
+import { Metadata, ResolvingMetadata } from 'next';
+import { collection, query, where, getDocs } from 'firebase/firestore';
+import { db } from '@/lib/firebase';
+
+type Props = {
+  params: Promise<{ username: string }>
+  children: React.ReactNode
+}
+
+export async function generateMetadata(
+  { params }: Props,
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  const { username } = await params;
+
+  try {
+    const q = query(
+      collection(db, 'plugins_data'),
+      where('username', '==', username.toLowerCase())
+    );
+    const querySnapshot = await getDocs(q);
+
+    if (!querySnapshot.empty) {
+      const botDoc = querySnapshot.docs[0];
+      const botData = botDoc.data();
+
+      return {
+        metadataBase: new URL('https://personas.omi.me'),
+        title: `${botData.name} | Ask me anything`,
+        description: botData.profile || 'Ask me anything on Omi',
+        openGraph: {
+          title: `${botData.name} | Ask me anything`,
+          description: botData.profile || 'Ask me anything on Omi',
+          type: 'website',
+          images: [
+            {
+              url: botData.image || '/omidevice.webp',
+              width: 400,
+              height: 400,
+              alt: `${botData.name}'s profile picture`,
+            }
+          ],
+        },
+        twitter: {
+          card: 'summary',
+          title: `${botData.name} | Ask me anything`,
+          description: botData.profile || 'Ask me anything on Omi',
+          images: [botData.image || '/omidevice.webp'],
+          creator: '@omiai',
+          site: '@omiai'
+        }
+      };
+    }
+  } catch (error) {
+    console.error('Error fetching bot metadata:', error);
+  }
+
+  // Default metadata for not found/private/error cases
+  return {
+    metadataBase: new URL('https://personas.omi.me'),
+    title: 'Ask me anything on Omi',
+    description: 'Ask me anything on Omi',
+    openGraph: {
+      title: 'Ask me anything on Omi',
+      description: 'Ask me anything on Omi',
+      type: 'website',
+      images: [
+        {
+          url: '/omidevice.webp',
+          width: 400,
+          height: 400,
+          alt: 'Omi Profile Picture',
+        }
+      ],
+    },
+    twitter: {
+      card: 'summary',
+      title: 'Ask me anything on Omi',
+      description: 'Ask me anything on Omi',
+      images: ['/omidevice.webp'],
+      creator: '@omiai',
+      site: '@omiai'
+    }
+  };
+}
+
+export default function Layout({ children }: Props) {
+  return children;
+} 

personas-open-source/src/app/u/[username]/page.tsx

@@ -1,19 +1,22 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { collection, query, where, getDocs } from 'firebase/firestore';
 import { db } from '@/lib/firebase';
 import { Button } from '@/components/ui/button';
 import { ArrowLeft } from 'lucide-react';
 import Link from 'next/link';
-import { use } from 'react';
+import { use, useEffect, useState } from 'react';
 
-export default function UsernamePage({ params }: { params: Promise<{ username: string }> }) {
+type Props = {
+  params: Promise<{ username: string }>
+}
+
+export default function UsernamePage({ params }: Props) {
   const { username } = use(params);
   const router = useRouter();
   const [error, setError] = useState<'not_found' | 'private' | null>(null);
-
+  
   useEffect(() => {
     const fetchBotByUsername = async () => {
       try {
@@ -35,16 +38,18 @@ export default function UsernamePage({ params }: { params: Promise<{ username: s
         } else {
           setError('not_found');
         }
-      } catch (error) {
-        console.error('Error fetching bot by username:', error);
+      } catch (e) {
+        console.error('Error fetching bot:', e);
         setError('not_found');
       }
     };
 
     fetchBotByUsername();
   }, [username, router]);
 
-  if (!error) return null;
+  if (!error) {
+    return null;
+  }
 
   return (
     <div className="min-h-screen bg-black text-white flex flex-col items-center justify-center p-4">
@@ -69,7 +74,6 @@ export default function UsernamePage({ params }: { params: Promise<{ username: s
             <p className="text-sm text-gray-500">You don't have access to view this persona.</p>
           </>
         )}
-
         <Link href="/">
           <Button 
             className="mt-8 w-full max-w-sm rounded-full bg-white text-black hover:bg-gray-200"