diff --git a/app/brand/page.tsx b/app/brand/page.tsx index 49ad3ec..71bc331 100644 --- a/app/brand/page.tsx +++ b/app/brand/page.tsx @@ -143,10 +143,10 @@ export default function BrandPage() {

Need a different format?{" "} - Contact us + Open a Issue {" "} for SVG or other formats.

diff --git a/app/docs-og/[...slug]/route.tsx b/app/docs-og/[...slug]/route.tsx index 0bec07b..ebe0f7f 100644 --- a/app/docs-og/[...slug]/route.tsx +++ b/app/docs-og/[...slug]/route.tsx @@ -1,16 +1,146 @@ import { metadataImage } from "@/lib/docs/metadata"; -import { generateOGImage } from "fumadocs-ui/og"; +import { ImageResponse } from "next/og"; +import React from "react"; +import fs from "node:fs"; +import path from "node:path"; export const dynamic = "force-dynamic"; -export const GET = metadataImage.createAPI((page) => { - return generateOGImage({ - title: page.data.title, - description: page.data.description, - site: "FixFX", - primaryColor: "#3b82f6", - primaryTextColor: "#f8fafc", - }); +export const GET = metadataImage.createAPI(async (page: any) => { + // Truncate description to prevent overflow + const maxDescLength = 150; + const description = page.data.description + ? page.data.description.length > maxDescLength + ? page.data.description.substring(0, maxDescLength).trim() + "..." + : page.data.description + : ""; + + // Read the logo from the filesystem + const logoPath = path.join(process.cwd(), "public", "logo.png"); + const logoBuffer = fs.readFileSync(logoPath); + const logoData = logoBuffer.buffer.slice(logoBuffer.byteOffset, logoBuffer.byteOffset + logoBuffer.byteLength); + + return new ImageResponse( + ( +
+ {/* Background gradient orbs */} +
+
+ + {/* Header with logo and site name */} +
+ Logo + + FixFX + +
+ + {/* Main content */} +
+

+ {page.data.title} +

+ {description && ( +

+ {description} +

+ )} +
+ + +
+ ), + { + width: 1200, + height: 630, + } + ); }); export function generateStaticParams() { diff --git a/app/hosting/opengraph-image.tsx b/app/hosting/opengraph-image.tsx index 414f517..747afab 100644 --- a/app/hosting/opengraph-image.tsx +++ b/app/hosting/opengraph-image.tsx @@ -1,4 +1,7 @@ import { ImageResponse } from "next/og"; +import React from "react"; +import fs from "node:fs"; +import path from "node:path"; export const runtime = "nodejs"; export const alt = "FixFX Hosting Partners - Trusted Game Server Hosting"; @@ -10,169 +13,168 @@ export const size = { export const contentType = "image/png"; export default function Image() { - return new ImageResponse( -
- {/* Background gradient orbs */} -
-
-
- - {/* Badge */} -
-
🤝
- - Official Partners - -
+ // Read the logo from the filesystem + const logoPath = path.join(process.cwd(), "public", "logo.png"); + const logoBuffer = fs.readFileSync(logoPath); + const logoData = logoBuffer.buffer.slice( + logoBuffer.byteOffset, + logoBuffer.byteOffset + logoBuffer.byteLength + ); - {/* Main title */} + return new ImageResponse( + (
- +
+
- Hosting Partners - -
- - {/* Subtitle */} -

- Trusted hosting providers for your{" "} - FiveM and{" "} - RedM{" "} - servers -

- - {/* Bottom indicators */} -
-
-
- - Exclusive Discounts - -
-
-
- - High Performance + > + FixFX
-
-
- - 24/7 Support + + {/* Badge */} +
+ 🤝 + + Official Partners
+ + {/* Main title */} +

+ Hosting Partners +

+ + {/* Subtitle with fixed spacing */} +

+ Trusted hosting providers for your + FiveM + and + RedM + servers +

+ + {/* Bottom indicators */} +
+
+
+ Exclusive Discounts +
+
+
+ High Performance +
+
+
+ 24/7 Support +
+
-
, + ), { ...size, - }, + } ); } diff --git a/app/layout.tsx b/app/layout.tsx index 8e81c35..6deeb70 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,4 +1,5 @@ import { RootProvider } from "fumadocs-ui/provider"; +import { QueryProvider } from "@/components/providers/query-provider"; import { Analytics } from "@vercel/analytics/react"; import Script from "next/script"; import { inter, jetbrains } from "@/lib/fonts"; @@ -272,7 +273,9 @@ export default function Layout({ - {children} + + {children} +