Merge pull request #427 from liam-hq/add_erd_web_title_and_favicon

💄 Add Title, Favicon, OGP for ERD Web

frontend/apps/erd-web/app/erd/p/[...slug]/page.tsx

@@ -9,6 +9,7 @@ import {
   supportedFormatSchema,
 } from '@liam-hq/db-structure/parser'
 import * as Sentry from '@sentry/nextjs'
+import type { Metadata } from 'next'
 import { cookies } from 'next/headers'
 import { notFound } from 'next/navigation'
 import * as v from 'valibot'
@@ -37,6 +38,44 @@ const resolveContentUrl = (url: string): string | undefined => {
   }
 }
 
+export async function generateMetadata({
+  params,
+}: PageProps): Promise<Metadata> {
+  const parsedParams = v.safeParse(paramsSchema, await params)
+  if (!parsedParams.success) return notFound()
+
+  const joinedPath = parsedParams.output.slug.join('/')
+  if (!joinedPath) notFound()
+
+  const projectUrl = `https://${joinedPath}`
+
+  const res = await fetch(projectUrl).catch(() => null)
+
+  const projectName = await (async () => {
+    if (res?.ok) {
+      const html = await res.text()
+      const ogTitleMatch = html.match(
+        /<meta property="og:title" content="([^"]+)" \/>/,
+      )
+      const htmlTitleMatch = html.match(/<title>([^<]+)<\/title>/)
+      return ogTitleMatch?.[1] ?? htmlTitleMatch?.[1] ?? joinedPath
+    }
+    return joinedPath
+  })()
+
+  const metaTitle = `${projectName} - Liam ERD`
+  const metaDescription =
+    'Generate ER diagrams effortlessly by entering a schema file URL. Ideal for visualizing, reviewing, and documenting database structures.'
+
+  return {
+    title: metaTitle,
+    description: metaDescription,
+    openGraph: {
+      url: `https://liambx.com/erd/p/${joinedPath}`,
+    },
+  }
+}
+
 export default async function Page({
   params,
   searchParams: _searchParams,

frontend/apps/erd-web/app/layout.tsx

@@ -14,8 +14,15 @@ const geistMono = Geist_Mono({
 })
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'Liam ERD',
+  description:
+    'Automatically generates beautiful and easy-to-read ER diagrams from your database.',
+  openGraph: {
+    siteName: 'Liam',
+    type: 'website',
+    locale: 'en_US',
+  },
+  twitter: {},
 }
 
 export default function RootLayout({