mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-20 11:11:16 -05:00
86 lines
3.4 KiB
TypeScript
86 lines
3.4 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { useLocation } from 'react-router-dom';
|
|
import { getBannerUrls } from '@/lib/cloudflareImageUtils';
|
|
|
|
interface OpenGraphOptions {
|
|
title: string;
|
|
description?: string;
|
|
imageUrl?: string;
|
|
imageId?: string;
|
|
type?: 'website' | 'article' | 'profile';
|
|
enabled?: boolean;
|
|
}
|
|
|
|
export function useOpenGraph({
|
|
title,
|
|
description,
|
|
imageUrl,
|
|
imageId,
|
|
type = 'website',
|
|
enabled = true
|
|
}: OpenGraphOptions) {
|
|
const location = useLocation();
|
|
const currentUrl = window.location.origin + location.pathname;
|
|
|
|
useEffect(() => {
|
|
if (!enabled || !title) return;
|
|
|
|
// Determine the image to use
|
|
let finalImageUrl = 'https://cdn.thrillwiki.com/images/4af6a0c6-4450-497d-772f-08da62274100/original';
|
|
|
|
if (imageId) {
|
|
const bannerUrls = getBannerUrls(imageId);
|
|
finalImageUrl = bannerUrls.desktop || imageUrl || 'https://cdn.thrillwiki.com/images/4af6a0c6-4450-497d-772f-08da62274100/original';
|
|
} else if (imageUrl) {
|
|
finalImageUrl = imageUrl;
|
|
}
|
|
|
|
// Convert relative URL to absolute for social media
|
|
if (finalImageUrl.startsWith('/')) {
|
|
finalImageUrl = window.location.origin + finalImageUrl;
|
|
}
|
|
|
|
// Update document title
|
|
document.title = title.includes('ThrillWiki') ? title : `${title} | ThrillWiki`;
|
|
|
|
// Update or create meta tags
|
|
updateMetaTag('og:title', title);
|
|
updateMetaTag('og:description', description || 'Explore theme parks and roller coasters worldwide with ThrillWiki');
|
|
updateMetaTag('og:image', finalImageUrl);
|
|
updateMetaTag('og:type', type);
|
|
updateMetaTag('og:url', currentUrl);
|
|
|
|
// Twitter tags
|
|
updateMetaTag('twitter:title', title, 'name');
|
|
updateMetaTag('twitter:description', description || 'Explore theme parks and roller coasters worldwide with ThrillWiki', 'name');
|
|
updateMetaTag('twitter:image', finalImageUrl, 'name');
|
|
updateMetaTag('twitter:url', currentUrl, 'name');
|
|
|
|
return () => {
|
|
document.title = 'ThrillWiki - Theme Park & Roller Coaster Database';
|
|
updateMetaTag('og:title', 'ThrillWiki - Theme Park & Roller Coaster Database');
|
|
updateMetaTag('og:description', 'Explore theme parks and roller coasters worldwide with ThrillWiki - the comprehensive database for enthusiasts');
|
|
updateMetaTag('og:image', 'https://cdn.thrillwiki.com/images/4af6a0c6-4450-497d-772f-08da62274100/original');
|
|
updateMetaTag('og:type', 'website');
|
|
updateMetaTag('og:url', 'https://www.thrillwiki.com/');
|
|
|
|
updateMetaTag('twitter:title', 'ThrillWiki - Theme Park & Roller Coaster Database', 'name');
|
|
updateMetaTag('twitter:description', 'Explore theme parks and roller coasters worldwide with ThrillWiki - the comprehensive database for enthusiasts', 'name');
|
|
updateMetaTag('twitter:image', 'https://cdn.thrillwiki.com/images/4af6a0c6-4450-497d-772f-08da62274100/original', 'name');
|
|
updateMetaTag('twitter:url', 'https://www.thrillwiki.com/', 'name');
|
|
};
|
|
}, [title, description, imageUrl, imageId, type, currentUrl, enabled]);
|
|
}
|
|
|
|
function updateMetaTag(property: string, content: string, attributeName: 'property' | 'name' = 'property') {
|
|
let meta = document.querySelector(`meta[${attributeName}="${property}"]`);
|
|
|
|
if (!meta) {
|
|
meta = document.createElement('meta');
|
|
meta.setAttribute(attributeName, property);
|
|
document.head.appendChild(meta);
|
|
}
|
|
|
|
meta.setAttribute('content', content);
|
|
}
|