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
+  }
+}

docs/.vitepress/transformer.ts

@@ -2,10 +2,10 @@ import { basename } from 'pathe'
 import type { Plugin } from 'vitepress'
 
 interface Header {
-  [key: string]: { title: string; description: string }
+  [file: string]: { title: string; description: string }
 }
 
-const headers: Header = {
+export const headers: Header = {
   'adblockvpnguide.md': {
     title: 'Adblocking / Privacy',
     description: "Adblocking, Privacy, VPN's, Proxies, Antivirus"
@@ -118,7 +118,7 @@ const headers: Header = {
     title: 'Unsafe Sites',
     description: 'Unsafe/harmful sites to avoid.'
   }
-}
+} as const
 
 const excluded = ['readme.md', 'single-page', 'feedback.md', 'index.md']
 
@@ -374,7 +374,7 @@ function transformLinks(text: string): string {
       /\[GitHub\]\(([^\)]*?)\)/gm,
       '<a target="_blank" href="$1"><div alt="GitHub" class="i-carbon:logo-github mb-1" /></a>'
     )
-    // Fallback
+    // Fallback for GitHub
     .replace(
       /\[Github\]\(([^\)]*?)\)/gm,
       '<a target="_blank" href="$1"><div alt="GitHub" class="i-carbon:logo-github mb-1" /></a>'
@@ -384,7 +384,7 @@ function transformLinks(text: string): string {
       /\[GitLab\]\(([^\)]*?)\)/gm,
       '<a target="_blank" href="$1"><div alt="GitLab" class="i-carbon:logo-gitlab" /></a>'
     )
-    // Fallback
+    // Fallback for GitLab
     .replace(
       /\[Gitlab\]\(([^\)]*?)\)/gm,
       '<a target="_blank" href="$1"><div alt="GitLab" class="i-carbon:logo-gitlab" /></a>'
@@ -397,7 +397,7 @@ function transformLinks(text: string): string {
     // Transform Subreddit links to icons
     .replace(
       /\[Subreddit\]\(([^\)]*?)\)/gm,
-      '<a target="_blank" href="$1"><div alt="Telegram" class="i-mdi:reddit" /></a>'
+      '<a target="_blank" href="$1"><div alt="Reddit" class="i-mdi:reddit" /></a>'
     )
   return _text
 }

docs/posts.md

@@ -1,4 +1,6 @@
 ---
+title: Posts
+description: All our posts, sorted by date.
 sidebar: false
 editLink: false
 outline: false

unocss.config.ts

@@ -23,7 +23,6 @@ export default defineConfig({
       div: 'var(--vp-c-divider)'
     }
   },
-  shortcuts,
   presets: [
     presetUno(),
     presetAttributify(),