From 7a0a37568a0c5726d25ebf807d8d05c0e4faa74c Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Mon, 30 Jun 2025 23:14:14 -0700 Subject: add opengraph middleware --- middleware/src/app/[gameName]/page.tsx | 110 +++++++++++++++++++++++++++++++++ middleware/src/app/globals.css | 72 +++++++++++++++++++++ middleware/src/app/layout.tsx | 10 +++ middleware/src/middleware.ts | 42 +++++++++++++ 4 files changed, 234 insertions(+) create mode 100644 middleware/src/app/[gameName]/page.tsx create mode 100644 middleware/src/app/globals.css create mode 100644 middleware/src/app/layout.tsx create mode 100644 middleware/src/middleware.ts (limited to 'middleware/src') diff --git a/middleware/src/app/[gameName]/page.tsx b/middleware/src/app/[gameName]/page.tsx new file mode 100644 index 0000000..42045f2 --- /dev/null +++ b/middleware/src/app/[gameName]/page.tsx @@ -0,0 +1,110 @@ +import { Metadata } from "next"; +import { headers } from "next/headers"; +import { userAgent } from "next/server"; +import { redirect } from "next/navigation"; + +export async function generateMetadata({ + params, + searchParams, +}: { + params: Promise<{ gameName?: string }>; + searchParams: Promise<{ [key: string]: string | string[] | undefined }>; +}): Promise { + const resolvedParams = await params; + const resolvedSearchParams = await searchParams; + let gameName = resolvedParams.gameName || "news"; + const postId = resolvedSearchParams.post as string | undefined; + const apiUrlBase = process.env.NEXT_PUBLIC_API_URL; + const mainNewsUrl = process.env.NEXT_PUBLIC_MAIN_NEWS_URL; + + if (!postId) { + return { + title: `${gameName} News`, + description: `Browse the latest updates for ${gameName}`, + }; + } + + try { + let fetchUrl = `${apiUrlBase}/${gameName}_news.json`; + if (gameName === "news") { + fetchUrl = `${apiUrlBase}/news.json`; + } + const res = await fetch(fetchUrl); + if (!res.ok) throw new Error("Failed to fetch"); + const data = await res.json(); + const newsPosts = data.news_posts; + const matchingPost = newsPosts.find((news: any) => { + const contentHash = + news.content.split("").reduce((hash: number, char: string) => { + return (hash << 5) + hash + char.charCodeAt(0); + }, 5381) >>> 0; + + const newsId = `${news.identifier}-${news.timestamp}-${contentHash.toString(16)}-${news.headline}`; + return newsId === postId; + }); + if (!matchingPost) { + return { title: "Post not found" }; + } + return { + title: matchingPost.headline, + description: matchingPost.content.slice(0, 100), + openGraph: { + title: matchingPost.headline, + description: matchingPost.content.slice(0, 100), + images: matchingPost.images?.[0]?.image + ? [matchingPost.images[0].image] + : [], + }, + }; + } catch (err) { + console.error(err); + return { + title: "Error loading post", + description: "There was a problem loading this news post.", + }; + } +} + +export default async function GamePage({ + params, + searchParams, +}: { + params: Promise<{ gameName?: string }>; + searchParams: Promise<{ [key: string]: string | string[] | undefined }>; +}) { + const resolvedParams = await params; + const resolvedSearchParams = await searchParams; + const gameName = resolvedParams.gameName || "news"; + const postId = resolvedSearchParams.post as string | undefined; + const mainNewsUrl = process.env.NEXT_PUBLIC_MAIN_NEWS_URL; + const { headers } = await import("next/headers"); + const { userAgent } = await import("next/server"); + const headersList = await headers(); + const ua = userAgent({ headers: headersList }); + + if (postId && mainNewsUrl && !ua.isBot) { + const { redirect } = await import("next/navigation"); + redirect(`${mainNewsUrl}/game/${gameName}#${postId}`); + } + + const redirectUrl = + postId && mainNewsUrl ? `${mainNewsUrl}/game/${gameName}#${postId}` : null; + + return ( +

573 UPDATES

+ $Updates image$ + {redirectUrl && ( + + click here if not redirected + + )} +

+ ); +} diff --git a/middleware/src/app/globals.css b/middleware/src/app/globals.css new file mode 100644 index 0000000..86fc27f --- /dev/null +++ b/middleware/src/app/globals.css @@ -0,0 +1,72 @@ +:root { + --dark-bg: #000000; + --text-primary: #ffffff; + --text-secondary: #888888; + --accent: #666666; +} + +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +html, +body { + height: 100%; + overflow: hidden; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} + +body { + background: var(--dark-bg); + color: var(--text-primary); + display: flex; + align-items: center; + justify-content: center; +} + +/* Main container */ +.main { + width: 100%; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} + +.content-wrapper { + text-align: center; +} + +.title { + font-size: 3rem; + font-weight: 300; + letter-spacing: 0.5rem; + margin-bottom: 3rem; + color: var(--text-primary); +} + +.redirect-link { + color: var(--text-secondary); + font-size: 0.875rem; + text-decoration: none; + transition: color 0.3s ease; + letter-spacing: 0.1rem; +} + +.redirect-link:hover { + color: var(--text-primary); +} + +/* Responsive */ +@media (max-width: 768px) { + .title { + font-size: 2rem; + letter-spacing: 0.3rem; + } + + .redirect-link { + font-size: 0.75rem; + } +} \ No newline at end of file diff --git a/middleware/src/app/layout.tsx b/middleware/src/app/layout.tsx new file mode 100644 index 0000000..a9eb425 --- /dev/null +++ b/middleware/src/app/layout.tsx @@ -0,0 +1,10 @@ +import type { ReactNode } from 'react' +import './globals.css'; + +export default function RootLayout({ children }: { children: ReactNode }) { + return ( + + {children} + + ) +} diff --git a/middleware/src/middleware.ts b/middleware/src/middleware.ts new file mode 100644 index 0000000..78aa3f4 --- /dev/null +++ b/middleware/src/middleware.ts @@ -0,0 +1,42 @@ +import { NextRequest, NextResponse } from 'next/server' + +export async function middleware(request: NextRequest) { + const url = request.nextUrl + const pathname = url.pathname + if(pathname.startsWith("/_") || pathname.startsWith("/favicon")){ + return; + } + const searchParams = url.searchParams + const gameName = pathname.split('/')[1] || 'news' + const postId = searchParams.get('post') + const apiUrlBase = process.env.NEXT_PUBLIC_API_URL + if (postId) { + try { + console.log(`Game: ${gameName}, Post ID: ${postId}`) + const newsDataUrl = apiUrlBase+"/"+gameName+"_news.json"; + const res = await fetch(newsDataUrl) + if (res.ok) { + const data = await res.json() + const newsPosts = data["news_posts"]; + const matchingPost = newsPosts.find((news: any) => { + const contentHash = news.content.split('').reduce((hash: number, char: string) => ((hash << 5) + hash) + char.charCodeAt(0), 5381) >>> 0; + const newsId = `${news.identifier}-${news.timestamp}-${contentHash.toString(16)}-${news.headline}`; + return newsId === postId; + }); + const response = NextResponse.next() + if(matchingPost.headline){ + response.headers.set('x-post-headline', encodeURIComponent(matchingPost.headline)); + } + if(matchingPost.images && matchingPost.images.length >= 1 ){ + response.headers.set('x-post-heroImage', matchingPost.images[0].image); + } + response.headers.set('x-post-content', encodeURIComponent(matchingPost.content)); + response.headers.set('x-post-timestamp', matchingPost.timestamp); + return response + } + } catch (e) { + console.warn('Failed to fetch post metadata:', e) + } + } + return NextResponse.next() +} -- cgit v1.2.3