feat(og): use generated OG image on docs pages

Author: AlemTuzlak

src/routes/$libraryId/$version.docs.$.tsx

@@ -1,4 +1,5 @@
 import { seo } from '~/utils/seo'
+import { ogImageUrl } from '~/utils/og'
 import { Doc } from '~/components/Doc'
 import { loadDocsPage, resolveDocsRedirect } from '~/utils/docs'
 import { findLibrary, getBranch, getLibrary } from '~/libraries'
@@ -72,6 +73,10 @@ export const Route = createFileRoute('/$libraryId/$version/docs/$')({
       meta: seo({
         title: `${loaderData?.title} | ${library.name} Docs`,
         description: loaderData?.description,
+        image: ogImageUrl(library.id, {
+          title: loaderData?.title,
+          description: loaderData?.description,
+        }),
         noindex: library.visible === false,
       }),
     }

src/routes/$libraryId/$version.docs.community-resources.tsx

@@ -4,6 +4,7 @@ import { DocContainer } from '~/components/DocContainer'
 import { DocTitle } from '~/components/DocTitle'
 import { findLibrary, getBranch, getLibrary } from '~/libraries'
 import { seo } from '~/utils/seo'
+import { ogImageUrl } from '~/utils/og'
 import { loadDocs } from '~/utils/docs'
 
 export const Route = createFileRoute(
@@ -37,6 +38,9 @@ export const Route = createFileRoute(
       meta: seo({
         title: `${library.name} Community Resources`,
         description: `A collection of community resources for ${library.name}.`,
+        image: ogImageUrl(library.id, {
+          title: `${library.name} · Community Resources`,
+        }),
         noindex: library.visible === false,
       }),
     }

src/routes/$libraryId/$version.docs.framework.$framework.$.tsx

@@ -6,6 +6,7 @@ import {
   createFileRoute,
 } from '@tanstack/react-router'
 import { seo } from '~/utils/seo'
+import { ogImageUrl } from '~/utils/og'
 import { Doc } from '~/components/Doc'
 import { loadDocsPage, resolveDocsRedirect } from '~/utils/docs'
 import { getBranch, getLibrary } from '~/libraries'
@@ -75,6 +76,10 @@ export const Route = createFileRoute(
           ? `${ctx.loaderData.title} | ${tail}`
           : tail,
         description: ctx.loaderData?.description,
+        image: ogImageUrl(library.id, {
+          title: ctx.loaderData?.title,
+          description: ctx.loaderData?.description,
+        }),
         noindex: library.visible === false,
       }),
     }

src/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx

@@ -13,6 +13,7 @@ import {
   getExampleStartingPath,
 } from '~/utils/sandbox'
 import { seo } from '~/utils/seo'
+import { ogImageUrl } from '~/utils/og'
 import { capitalize, slugToTitle } from '~/utils/utils'
 import * as v from 'valibot'
 import { CodeExplorer } from '~/components/CodeExplorer'
@@ -127,6 +128,10 @@ export const Route = createFileRoute(
         description: `An example showing how to implement ${slugToTitle(
           params._splat || '',
         )} in ${capitalize(params.framework)} using ${library.name}.`,
+        image: ogImageUrl(library.id, {
+          title: `${capitalize(params.framework)} ${library.name} ${slugToTitle(params._splat || '')} Example`,
+          description: `An example showing how to implement ${slugToTitle(params._splat || '')} in ${capitalize(params.framework)} using ${library.name}.`,
+        }),
         noindex: library.visible === false,
       }),
     }

src/routes/$libraryId/$version.index.tsx

@@ -7,6 +7,7 @@ import {
 import { DocsLayout } from '~/components/DocsLayout'
 import { findLibrary } from '~/libraries'
 import { seo } from '~/utils/seo'
+import { ogImageUrl } from '~/utils/og'
 
 import { Button } from '~/ui'
 
@@ -25,6 +26,7 @@ export const Route = createFileRoute('/$libraryId/$version/')({
       meta: seo({
         title: library.name,
         description: library.description,
+        image: ogImageUrl(library.id),
         noindex: library.visible === false,
       }),
     }