diff --git a/frontend/apps/erd-web/app/erd/p/[...slug]/page.tsx b/frontend/apps/erd-web/app/erd/p/[...slug]/page.tsx index 77e00905..076ebbef 100644 --- a/frontend/apps/erd-web/app/erd/p/[...slug]/page.tsx +++ b/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 { + 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( + //, + ) + const htmlTitleMatch = html.match(/([^<]+)<\/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, diff --git a/frontend/apps/erd-web/app/layout.tsx b/frontend/apps/erd-web/app/layout.tsx index f829c099..4f8f2093 100644 --- a/frontend/apps/erd-web/app/layout.tsx +++ b/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({