fix: Fix the og-image on UI library pages (supabase#37439)

* Remove the og-image from the docs pages to see if they're pulled from the main layout.

* Merge the doc metadata with the metadata from the main layout.

Author: ivasilov

apps/ui-library/app/(app)/docs/[[...slug]]/page.tsx

@@ -1,8 +1,8 @@
+import { metadata as mainMetadata } from '@/app/layout'
 import { FrameworkSelector } from '@/components/framework-selector'
 import { Mdx } from '@/components/mdx-components'
 import { SourcePanel } from '@/components/source-panel'
 import { DashboardTableOfContents } from '@/components/toc'
-import { siteConfig } from '@/config/site'
 import { getTableOfContents } from '@/lib/toc'
 import { absoluteUrl, cn } from '@/lib/utils'
 import '@/styles/code-block-variables.css'
@@ -12,7 +12,7 @@ import { ChevronRight } from 'lucide-react'
 import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 import Balancer from 'react-wrap-balancer'
-import { ScrollArea, Separator } from 'ui'
+import { ScrollArea } from 'ui'
 
 interface DocPageProps {
   params: Promise<{
@@ -39,31 +39,19 @@ export async function generateMetadata(props: DocPageProps): Promise<Metadata> {
     return {}
   }
 
-  return {
+  const metadata: Metadata = {
+    ...mainMetadata,
     title: doc.title,
     description: doc.description,
     openGraph: {
+      ...mainMetadata.openGraph,
       title: doc.title,
       description: doc.description,
       type: 'article',
       url: absoluteUrl(doc.slug),
-      images: [
-        {
-          url: siteConfig.ogImage,
-          width: 1200,
-          height: 630,
-          alt: siteConfig.name,
-        },
-      ],
-    },
-    twitter: {
-      card: 'summary_large_image',
-      title: doc.title,
-      description: doc.description,
-      images: [siteConfig.ogImage],
-      creator: '@shadcn',
     },
   }
+  return metadata
 }
 
 export async function generateStaticParams(): Promise<{ slug: string[] }[]> {

apps/ui-library/components/site-footer.tsx

@@ -1,13 +1,11 @@
-import { siteConfig } from '@/config/site'
-
 export function SiteFooter() {
   return (
     <footer className="py-6 px-4 md:px-8 md:py-0 mx-auto w-full max-w-site">
       <div className="flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
         <p className="text-balance text-center text-sm leading-loose text-foreground-muted md:text-left">
           Built by{' '}
           <a
-            href={siteConfig.links.twitter}
+            href="https://twitter.com/supabase"
             target="_blank"
             rel="noreferrer"
             className="font-medium underline underline-offset-4 hover:text-foreground-lighter"
@@ -16,7 +14,7 @@ export function SiteFooter() {
           </a>
           . The source code is available on{' '}
           <a
-            href={siteConfig.links.github}
+            href="https://github.com/supabase/supabase/tree/master/apps/ui-library"
             target="_blank"
             rel="noreferrer"
             className="font-medium underline underline-offset-4 hover:text-foreground-lighter"
@@ -28,7 +26,7 @@ export function SiteFooter() {
         <p className="text-balance text-center text-sm leading-loose text-foreground-muted">
           Site inspired by{' '}
           <a
-            href={siteConfig.links.credits.radix}
+            href="https://www.radix-ui.com/themes/docs/overview/getting-started"
             target="_blank"
             rel="noreferrer"
             className="font-medium underline underline-offset-4 hover:text-foreground-lighter"
@@ -37,7 +35,7 @@ export function SiteFooter() {
           </a>
           ,{' '}
           <a
-            href={siteConfig.links.credits.shadcn}
+            href="https://ui.shadcn.com"
             target="_blank"
             rel="noreferrer"
             className="font-medium underline underline-offset-4 hover:text-foreground-lighter"