fix(opengraph): find by headers from file url

docs/.vitepress/hooks/opengraph.ts

@@ -6,6 +6,7 @@ import type { ContentData, SiteConfig } from 'vitepress'
 import { type SatoriOptions, satoriVue } from 'x-satori/vue'
 import { renderAsync } from '@resvg/resvg-js'
 import consola from 'consola'
+import { headers } from '../transformer'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
 const __fonts = resolve(__dirname, '../fonts')
@@ -67,19 +68,29 @@ async function generateImage({
 }: GenerateImagesOptions): Promise<void> {
   const { frontmatter, url } = page
 
+  const _page = getPage(url)
+  const title =
+    frontmatter.layout === 'home'
+      ? frontmatter.hero.name ?? frontmatter.title
+      : frontmatter.title
+        ? frontmatter.title
+        : _page?.title
+
+  const description =
+    frontmatter.layout === 'home'
+      ? frontmatter.hero.tagline ?? frontmatter.description
+      : frontmatter.description
+        ? frontmatter.description
+        : _page?.description
+
+  consola.info(url, title, description)
   const options: SatoriOptions = {
     width: 1200,
     height: 628,
     fonts,
     props: {
-      title:
-        frontmatter.layout === 'home'
-          ? (frontmatter.hero.name ?? frontmatter.title)
-          : frontmatter.title,
-      description:
-        frontmatter.layout === 'home'
-          ? (frontmatter.hero.tagline ?? frontmatter.description)
-          : frontmatter.description
+      title,
+      description
     }
   }
 
@@ -94,3 +105,20 @@ async function generateImage({
 
   await writeFile(outputFile, render.asPng())
 }
+
+function getPage(page: string) {
+  // Get the page name
+  const pageName = `${page}.md`.slice(1).split('/').at(-1)
+
+  // Find the header
+  // TODO: This is a hacky way to find the header
+  const header = Object.entries(headers).find(([key]) => key === pageName)
+  if (!header) return
+
+  const { title, description } = header[1]
+
+  return {
+    title,
+    description
+  }
+}