feat: add general og image and update metadata pages (#134)

* feat: update general meta data

* feat: update room meta data

* fix: fix package-lock.json typescript version

* fix: og and twitter meta title and desc should be same

* Revert "fix: og and twitter meta title and desc should be same"

This reverts commit 3807ffc.

* revert: revert metadata not-found

* refactor: remove unused metadata

* fix: update title and description copywriting

* feat: use metadatabase

* feat: add metadata for room detail page

* fix: remove origin url

* feat: title for create event page

* feat: add  inlive room section after title

* refactor: default app origin is empty string

* fix: omit url from default open graph in layout.tsx

* fix: remove og url

app/(pages)/(home)/page.tsx

@@ -1,14 +1,8 @@
-import type { Metadata } from 'next';
 import Home from '@/_features/home/home';
 import { headers } from 'next/headers';
 import AppContainer from '@/_shared/components/containers/app-container';
 import type { AuthType } from '@/_shared/types/auth';
 
-export const metadata: Metadata = {
-  title: 'inLive Room',
-  description: 'Conference room for real-time video and audio calls',
-};
-
 export default async function Page() {
   const headersList = headers();
   const userAuthHeader = headersList.get('user-auth');

app/(pages)/event/[eventID]/page.tsx

@@ -7,8 +7,6 @@ import { InternalApiFetcher } from '@/_shared/utils/fetcher';
 import type { AuthType } from '@/_shared/types/auth';
 import type { EventType } from '@/_shared/types/event';
 
-const APP_ORIGIN = process.env.NEXT_PUBLIC_APP_ORIGIN;
-
 type PageProps = {
   params: {
     eventID: string;
@@ -95,18 +93,18 @@ export const generateMetadata = async ({
   )}`;
 
   return {
-    title: `Webinar — ${eventData.name}`,
+    title: `Webinar — ${eventData.name} — inLive Room`,
     description: descriptionSummary,
     openGraph: {
-      title: `Webinar — ${eventData.name}`,
+      title: `Webinar — ${eventData.name} — inLive Room`,
       description: descriptionSummary,
-      url: `${APP_ORIGIN}/event/${eventData.slug}`,
+      url: `/event/${eventData.slug}`,
       images: [imageSrc],
       type: 'website',
     },
     twitter: {
       card: 'summary_large_image',
-      title: `Webinar — ${eventData.name}`,
+      title: `Webinar — ${eventData.name} — inLive Room`,
       description: descriptionSummary,
       images: [imageSrc],
     },

app/(pages)/event/create/page.tsx

@@ -1,9 +1,14 @@
+import type { Metadata } from 'next';
 import { headers } from 'next/headers';
 import AppContainer from '@/_shared/components/containers/app-container';
 import EventForm from '@/_features/event/components/event-form';
 import { AuthType } from '@/_shared/types/auth';
 import HTTPError from '@/_shared/components/errors/http-error';
 
+export const metadata: Metadata = {
+  title: 'Create Your Event — inLive Room',
+};
+
 export default async function Page() {
   const headersList = headers();
   const userAuthHeader = headersList.get('user-auth');

app/(pages)/room/[roomID]/not-found.tsx

@@ -5,7 +5,7 @@ import { headers } from 'next/headers';
 import type { AuthType } from '@/_shared/types/auth';
 
 export const metadata: Metadata = {
-  title: 'Room Not Found',
+  title: 'Room Not Found — inLive Room',
   description: 'There is nothing to see on this page',
 };
 

app/(pages)/room/[roomID]/page.tsx

@@ -10,15 +10,40 @@ import type { ClientType } from '@/_shared/types/client';
 import { serverSDK } from '@/(server)/_shared/utils/sdk';
 
 type PageProps = {
-  params: {
-    roomID: string;
-  };
   searchParams: { debug: string | undefined };
 };
 
-export const generateMetadata = ({ params }: PageProps): Metadata => {
+export const generateMetadata = (): Metadata | null => {
+  const headersList = headers();
+  const roomDataHeader = headersList.get('room-data');
+  const roomData: RoomType.RoomData | null =
+    typeof roomDataHeader === 'string'
+      ? JSON.parse(roomDataHeader)
+      : roomDataHeader;
+
+  if (!roomData || !roomData.id) return null;
+
+  const type = roomData.meta?.type === 'event' ? 'Webinar' : 'Meeting';
+  const description =
+    'Experience real-time messaging, video, and audio for seamless collaboration, all within inLive Room.';
+  const ogImage = '/images/general-og.png';
+
   return {
-    title: `Room - ${params.roomID}`,
+    title: `${type} Room: ${roomData.id} — inLive Room`,
+    description: description,
+    openGraph: {
+      title: `Join the ${type.toLocaleLowerCase()} room — inLive Room`,
+      description: description,
+      url: `/room/${roomData.id}`,
+      images: [ogImage],
+      type: 'website',
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: `Join the ${type.toLocaleLowerCase()} room — inLive Room`,
+      description: description,
+      images: [ogImage],
+    },
   };
 };
 
@@ -97,7 +122,7 @@ export default async function Page({ searchParams }: PageProps) {
     midBitrate: hubRoomResponse?.data?.bitrates.videoMid || 0,
     lowBitrate: hubRoomResponse?.data?.bitrates.videoLow || 0,
   };
-  const roomType = roomData.meta ? roomData.meta.type : 'meeting' || 'meeting';
+  const roomType = roomData.meta ? roomData.meta.type : 'meeting';
 
   return (
     <AppContainer user={userAuth}>

app/layout.tsx

@@ -1,10 +1,34 @@
+import type { Metadata } from 'next';
 import '@/_shared/styles/tailwind.css';
 import { Inter } from 'next/font/google';
 import { MixpanelContainer } from '@/_shared/components/analytics/mixpanel';
 import { Suspense } from 'react';
 
 const inter = Inter({ subsets: ['latin'] });
 
+const APP_ORIGIN = process.env.NEXT_PUBLIC_APP_ORIGIN || '';
+const title = 'Virtual room for your real-time collaboration — inLive Room';
+const description = `Host or join in seconds. It's that simple! Experience real-time messaging, video, and audio for seamless collaboration, all within open-source virtual rooms.`;
+const ogImage = '/images/general-og.png';
+
+export const metadata: Metadata = {
+  metadataBase: new URL(APP_ORIGIN),
+  title: title,
+  description: description,
+  openGraph: {
+    title: title,
+    description: description,
+    images: [ogImage],
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: title,
+    description: description,
+    images: [ogImage],
+  },
+};
+
 export default function RootLayout({
   children,
 }: {

app/not-found.tsx

@@ -5,7 +5,7 @@ import { headers } from 'next/headers';
 import type { AuthType } from '@/_shared/types/auth';
 
 export const metadata: Metadata = {
-  title: 'Page Not Found',
+  title: 'Page Not Found — inLive Room',
   description: 'There is nothing to see on this page',
 };