diff --git a/src/pages/BlogIndex.tsx b/src/pages/BlogIndex.tsx index 25e1c391..59731e6e 100644 --- a/src/pages/BlogIndex.tsx +++ b/src/pages/BlogIndex.tsx @@ -9,6 +9,7 @@ import { Skeleton } from '@/components/ui/skeleton'; import { Header } from '@/components/layout/Header'; import { Footer } from '@/components/layout/Footer'; import { useDocumentTitle } from '@/hooks/useDocumentTitle'; +import { useOpenGraph } from '@/hooks/useOpenGraph'; const POSTS_PER_PAGE = 9; @@ -39,6 +40,17 @@ export default function BlogIndex() { const totalPages = Math.ceil((data?.totalCount || 0) / POSTS_PER_PAGE); + useOpenGraph({ + title: 'Blog - ThrillWiki', + description: searchQuery + ? `Search results for "${searchQuery}" in ThrillWiki Blog` + : 'News, updates, and stories from the world of theme parks and roller coasters', + imageUrl: data?.posts?.[0]?.featured_image_url, + imageId: data?.posts?.[0]?.featured_image_id, + type: 'website', + enabled: !isLoading + }); + return (
diff --git a/src/pages/DesignerRides.tsx b/src/pages/DesignerRides.tsx index 13215e3a..ff674bf4 100644 --- a/src/pages/DesignerRides.tsx +++ b/src/pages/DesignerRides.tsx @@ -16,6 +16,7 @@ import { useAuth } from '@/hooks/useAuth'; import { toast } from '@/hooks/use-toast'; import { useAuthModal } from '@/hooks/useAuthModal'; import { useDocumentTitle } from '@/hooks/useDocumentTitle'; +import { useOpenGraph } from '@/hooks/useOpenGraph'; export default function DesignerRides() { const { designerSlug } = useParams<{ designerSlug: string }>(); @@ -104,6 +105,17 @@ export default function DesignerRides() { ride.park?.name?.toLowerCase().includes(searchQuery.toLowerCase()) ); + useOpenGraph({ + title: designer ? `${designer.name} - Rides` : 'Designer Rides', + description: designer + ? `Explore ${filteredRides.length} rides designed by ${designer.name}` + : undefined, + imageUrl: designer?.banner_image_url || filteredRides[0]?.banner_image_url, + imageId: designer?.banner_image_id || filteredRides[0]?.banner_image_id, + type: 'website', + enabled: !!designer && !loading + }); + const handleCreateSubmit = async (data: any) => { try { if (!designer) { diff --git a/src/pages/Designers.tsx b/src/pages/Designers.tsx index 9ee1c1b0..8ac36aea 100644 --- a/src/pages/Designers.tsx +++ b/src/pages/Designers.tsx @@ -24,6 +24,7 @@ import { submitCompanyCreation } from '@/lib/companyHelpers'; import { useAuthModal } from '@/hooks/useAuthModal'; import { getErrorMessage } from '@/lib/errorHandler'; import { useDocumentTitle } from '@/hooks/useDocumentTitle'; +import { useOpenGraph } from '@/hooks/useOpenGraph'; export default function Designers() { useDocumentTitle('Designers'); @@ -164,6 +165,15 @@ export default function Designers() { }); }, [companies, searchQuery, filters]); + useOpenGraph({ + title: 'Ride Designers - ThrillWiki', + description: `Browse ${filteredCompanies.length} ride designers worldwide`, + imageUrl: filteredCompanies[0]?.banner_image_url, + imageId: filteredCompanies[0]?.banner_image_id, + type: 'website', + enabled: !loading + }); + if (loading) { return (
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx index 3c207938..fe59e100 100644 --- a/src/pages/Index.tsx +++ b/src/pages/Index.tsx @@ -2,10 +2,17 @@ import { Header } from '@/components/layout/Header'; import { SimpleHeroSearch } from '@/components/homepage/SimpleHeroSearch'; import { ContentTabs } from '@/components/homepage/ContentTabs'; import { useDocumentTitle } from '@/hooks/useDocumentTitle'; +import { useOpenGraph } from '@/hooks/useOpenGraph'; const Index = () => { useDocumentTitle('Home'); + useOpenGraph({ + title: 'ThrillWiki - Theme Park & Roller Coaster Database', + description: 'Explore theme parks and roller coasters worldwide with ThrillWiki - the comprehensive database for enthusiasts', + type: 'website' + }); + return (
diff --git a/src/pages/ManufacturerModels.tsx b/src/pages/ManufacturerModels.tsx index bdafa48e..fbb74ad6 100644 --- a/src/pages/ManufacturerModels.tsx +++ b/src/pages/ManufacturerModels.tsx @@ -16,6 +16,7 @@ import { useAuth } from '@/hooks/useAuth'; import { toast } from '@/hooks/use-toast'; import { useAuthModal } from '@/hooks/useAuthModal'; import { useDocumentTitle } from '@/hooks/useDocumentTitle'; +import { useOpenGraph } from '@/hooks/useOpenGraph'; interface RideModelWithCount extends RideModel { ride_count: number; @@ -101,6 +102,17 @@ export default function ManufacturerModels() { model.description?.toLowerCase().includes(searchQuery.toLowerCase()) ); + useOpenGraph({ + title: manufacturer ? `${manufacturer.name} - Ride Models` : 'Manufacturer Models', + description: manufacturer + ? `Browse ${filteredModels.length} ride models by ${manufacturer.name}` + : undefined, + imageUrl: manufacturer?.banner_image_url || filteredModels[0]?.banner_image_url, + imageId: manufacturer?.banner_image_id || filteredModels[0]?.banner_image_id, + type: 'website', + enabled: !!manufacturer && !loading + }); + const handleCreateSubmit = async (data: any) => { try { if (!manufacturer) { diff --git a/src/pages/ManufacturerRides.tsx b/src/pages/ManufacturerRides.tsx index be1a8d3a..bbe6ee37 100644 --- a/src/pages/ManufacturerRides.tsx +++ b/src/pages/ManufacturerRides.tsx @@ -16,6 +16,7 @@ import { useAuth } from '@/hooks/useAuth'; import { toast } from '@/hooks/use-toast'; import { useAuthModal } from '@/hooks/useAuthModal'; import { useDocumentTitle } from '@/hooks/useDocumentTitle'; +import { useOpenGraph } from '@/hooks/useOpenGraph'; export default function ManufacturerRides() { const { manufacturerSlug } = useParams<{ manufacturerSlug: string }>(); @@ -104,6 +105,17 @@ export default function ManufacturerRides() { ride.park?.name?.toLowerCase().includes(searchQuery.toLowerCase()) ); + useOpenGraph({ + title: manufacturer ? `${manufacturer.name} - Rides` : 'Manufacturer Rides', + description: manufacturer + ? `Explore ${filteredRides.length} rides manufactured by ${manufacturer.name}` + : undefined, + imageUrl: manufacturer?.banner_image_url || filteredRides[0]?.banner_image_url, + imageId: manufacturer?.banner_image_id || filteredRides[0]?.banner_image_id, + type: 'website', + enabled: !!manufacturer && !loading + }); + const handleCreateSubmit = async (data: any) => { try { if (!manufacturer) { diff --git a/src/pages/Manufacturers.tsx b/src/pages/Manufacturers.tsx index b81a1ed8..39a8ea35 100644 --- a/src/pages/Manufacturers.tsx +++ b/src/pages/Manufacturers.tsx @@ -24,6 +24,7 @@ import { submitCompanyCreation } from '@/lib/companyHelpers'; import { useAuthModal } from '@/hooks/useAuthModal'; import { getErrorMessage } from '@/lib/errorHandler'; import { useDocumentTitle } from '@/hooks/useDocumentTitle'; +import { useOpenGraph } from '@/hooks/useOpenGraph'; export default function Manufacturers() { useDocumentTitle('Manufacturers'); @@ -151,6 +152,15 @@ export default function Manufacturers() { }); }, [companies, searchQuery, filters]); + useOpenGraph({ + title: 'Ride Manufacturers - ThrillWiki', + description: `Browse ${filteredCompanies.length} ride manufacturers worldwide`, + imageUrl: filteredCompanies[0]?.banner_image_url, + imageId: filteredCompanies[0]?.banner_image_id, + type: 'website', + enabled: !loading + }); + const handleCreateSubmit = async (data: any) => { try { await submitCompanyCreation( diff --git a/src/pages/OperatorParks.tsx b/src/pages/OperatorParks.tsx index 6b76f911..0a79fd09 100644 --- a/src/pages/OperatorParks.tsx +++ b/src/pages/OperatorParks.tsx @@ -16,6 +16,7 @@ import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Grid3X3, List } from 'lucide-react'; import { FilterState, SortState } from './Parks'; import { useDocumentTitle } from '@/hooks/useDocumentTitle'; +import { useOpenGraph } from '@/hooks/useOpenGraph'; const initialFilters: FilterState = { search: '', @@ -145,6 +146,17 @@ export default function OperatorParks() { return filtered; }, [parks, filters, sort]); + useOpenGraph({ + title: operator ? `Parks by ${operator.name} - ThrillWiki` : 'Operator Parks', + description: operator + ? `Explore ${filteredAndSortedParks.length} theme parks operated by ${operator.name}` + : undefined, + imageUrl: operator?.banner_image_url || filteredAndSortedParks[0]?.banner_image_url, + imageId: operator?.banner_image_id || filteredAndSortedParks[0]?.banner_image_id, + type: 'website', + enabled: !!operator && !loading + }); + if (loading) { return (
diff --git a/src/pages/Operators.tsx b/src/pages/Operators.tsx index e6972deb..b2744b38 100644 --- a/src/pages/Operators.tsx +++ b/src/pages/Operators.tsx @@ -25,6 +25,7 @@ import { submitCompanyCreation } from '@/lib/companyHelpers'; import { useAuthModal } from '@/hooks/useAuthModal'; import { getErrorMessage } from '@/lib/errorHandler'; import { useDocumentTitle } from '@/hooks/useDocumentTitle'; +import { useOpenGraph } from '@/hooks/useOpenGraph'; const Operators = () => { useDocumentTitle('Operators'); @@ -182,6 +183,15 @@ const Operators = () => { return filtered; }, [operators, searchTerm, sortBy, filters]); + useOpenGraph({ + title: 'Park Operators - ThrillWiki', + description: `Browse ${filteredAndSortedOperators.length} theme park operators worldwide`, + imageUrl: filteredAndSortedOperators[0]?.banner_image_url, + imageId: filteredAndSortedOperators[0]?.banner_image_id, + type: 'website', + enabled: !isLoading + }); + return (
diff --git a/src/pages/OwnerParks.tsx b/src/pages/OwnerParks.tsx index 3dc1f237..b62cae80 100644 --- a/src/pages/OwnerParks.tsx +++ b/src/pages/OwnerParks.tsx @@ -16,6 +16,7 @@ import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Grid3X3, List } from 'lucide-react'; import { FilterState, SortState } from './Parks'; import { useDocumentTitle } from '@/hooks/useDocumentTitle'; +import { useOpenGraph } from '@/hooks/useOpenGraph'; const initialFilters: FilterState = { search: '', @@ -145,6 +146,17 @@ export default function OwnerParks() { return filtered; }, [parks, filters, sort]); + useOpenGraph({ + title: owner ? `Parks by ${owner.name} - ThrillWiki` : 'Owner Parks', + description: owner + ? `Explore ${filteredAndSortedParks.length} theme parks owned by ${owner.name}` + : undefined, + imageUrl: owner?.banner_image_url || filteredAndSortedParks[0]?.banner_image_url, + imageId: owner?.banner_image_id || filteredAndSortedParks[0]?.banner_image_id, + type: 'website', + enabled: !!owner && !loading + }); + if (loading) { return (
diff --git a/src/pages/ParkOwners.tsx b/src/pages/ParkOwners.tsx index 4e4e3048..e62d6e0f 100644 --- a/src/pages/ParkOwners.tsx +++ b/src/pages/ParkOwners.tsx @@ -19,6 +19,7 @@ import { submitCompanyCreation } from '@/lib/companyHelpers'; import { useAuthModal } from '@/hooks/useAuthModal'; import { getErrorMessage } from '@/lib/errorHandler'; import { useDocumentTitle } from '@/hooks/useDocumentTitle'; +import { useOpenGraph } from '@/hooks/useOpenGraph'; const ParkOwners = () => { useDocumentTitle('Property Owners'); @@ -119,6 +120,15 @@ const ParkOwners = () => { return filtered; }, [parkOwners, searchTerm, sortBy, filterBy]); + useOpenGraph({ + title: 'Property Owners - ThrillWiki', + description: `Browse ${filteredAndSortedOwners.length} theme park property owners worldwide`, + imageUrl: filteredAndSortedOwners[0]?.banner_image_url, + imageId: filteredAndSortedOwners[0]?.banner_image_id, + type: 'website', + enabled: !isLoading + }); + return (
diff --git a/src/pages/ParkRides.tsx b/src/pages/ParkRides.tsx index 6bd725b4..792d559a 100644 --- a/src/pages/ParkRides.tsx +++ b/src/pages/ParkRides.tsx @@ -17,6 +17,7 @@ import { toast } from '@/hooks/use-toast'; import { getErrorMessage } from '@/lib/errorHandler'; import { useAuthModal } from '@/hooks/useAuthModal'; import { useDocumentTitle } from '@/hooks/useDocumentTitle'; +import { useOpenGraph } from '@/hooks/useOpenGraph'; export default function ParkRides() { const { parkSlug } = useParams<{ parkSlug: string }>(); @@ -150,6 +151,17 @@ export default function ParkRides() { ride.manufacturer?.name?.toLowerCase().includes(searchQuery.toLowerCase()) ); + useOpenGraph({ + title: park ? `${park.name} - Rides & Attractions` : 'Park Rides', + description: park + ? `Explore ${filteredRides.length} rides and attractions at ${park.name}` + : undefined, + imageUrl: park?.banner_image_url || filteredRides[0]?.banner_image_url, + imageId: park?.banner_image_id || filteredRides[0]?.banner_image_id, + type: 'website', + enabled: !!park && !loading + }); + const categories = [ { value: 'all', label: 'All Categories' }, { value: 'roller_coaster', label: 'Roller Coasters' }, diff --git a/src/pages/Parks.tsx b/src/pages/Parks.tsx index 282e949b..dc2783f9 100644 --- a/src/pages/Parks.tsx +++ b/src/pages/Parks.tsx @@ -36,6 +36,7 @@ import { ParkForm } from '@/components/admin/ParkForm'; import { useAuth } from '@/hooks/useAuth'; import { useUserRole } from '@/hooks/useUserRole'; import { useAuthModal } from '@/hooks/useAuthModal'; +import { useOpenGraph } from '@/hooks/useOpenGraph'; export interface FilterState { search: string; @@ -288,6 +289,30 @@ export default function Parks() { return filtered; }, [parks, filters, sort]); + const generateDescription = () => { + if (!parks.length) return 'Browse theme parks worldwide on ThrillWiki'; + + const activeFilters = []; + if (filters.country.length === 1) activeFilters.push(`in ${filters.country[0]}`); + if (filters.parkType.length > 0) activeFilters.push(filters.parkType.join(', ')); + if (filters.status.length > 0) activeFilters.push(filters.status.join(', ')); + + if (activeFilters.length > 0) { + return `Browse ${filteredAndSortedParks.length} ${activeFilters.join(' ')} theme parks`; + } + + return `Browse ${parks.length} theme parks worldwide`; + }; + + useOpenGraph({ + title: 'Theme Parks - ThrillWiki', + description: generateDescription(), + imageUrl: filteredAndSortedParks[0]?.banner_image_url, + imageId: filteredAndSortedParks[0]?.banner_image_id, + type: 'website', + enabled: !loading + }); + const activeFilterCount = useMemo(() => { let count = 0; if (filters.search) count++; diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx index 06c497bf..118d7495 100644 --- a/src/pages/Profile.tsx +++ b/src/pages/Profile.tsx @@ -31,6 +31,7 @@ import { UserBlockButton } from '@/components/profile/UserBlockButton'; import { PersonalLocationDisplay } from '@/components/profile/PersonalLocationDisplay'; import { useUserRole } from '@/hooks/useUserRole'; import { useDocumentTitle } from '@/hooks/useDocumentTitle'; +import { useOpenGraph } from '@/hooks/useOpenGraph'; // Activity type definitions interface SubmissionActivity { @@ -160,6 +161,15 @@ export default function Profile() { // Update document title when profile changes useDocumentTitle(profile?.username ? `${profile.username}'s Profile` : 'Profile'); + useOpenGraph({ + title: profile ? `${profile.display_name || profile.username} - ThrillWiki` : 'User Profile', + description: profile?.bio || (profile ? `${profile.display_name || profile.username}'s profile on ThrillWiki` : undefined), + imageUrl: profile?.avatar_url, + imageId: profile?.avatar_image_id, + type: 'profile', + enabled: !!profile + }); + // Username validation const usernameValidation = useUsernameValidation(editForm.username, profile?.username); useEffect(() => { diff --git a/src/pages/Rides.tsx b/src/pages/Rides.tsx index ac5b400e..0c220cb5 100644 --- a/src/pages/Rides.tsx +++ b/src/pages/Rides.tsx @@ -23,6 +23,7 @@ import { toast } from '@/hooks/use-toast'; import { getErrorMessage } from '@/lib/errorHandler'; import { useAuthModal } from '@/hooks/useAuthModal'; import { useDocumentTitle } from '@/hooks/useDocumentTitle'; +import { useOpenGraph } from '@/hooks/useOpenGraph'; export default function Rides() { useDocumentTitle('Rides & Attractions'); @@ -266,6 +267,28 @@ export default function Rides() { return filtered; }, [rides, searchQuery, sortBy, filters]); + const generateDescription = () => { + if (!filteredAndSortedRides.length) return 'Discover thrilling rides and roller coasters worldwide'; + + const activeFilters = []; + if (filters.categories.length > 0) activeFilters.push(filters.categories.join(', ')); + if (filters.status !== 'all') activeFilters.push(filters.status); + + if (activeFilters.length > 0) { + return `Explore ${filteredAndSortedRides.length} ${activeFilters.join(' ')} rides and attractions`; + } + + return `Explore ${filteredAndSortedRides.length} rides and roller coasters worldwide`; + }; + + useOpenGraph({ + title: 'Rides & Attractions - ThrillWiki', + description: generateDescription(), + imageUrl: filteredAndSortedRides[0]?.banner_image_url, + imageId: filteredAndSortedRides[0]?.banner_image_id, + type: 'website', + enabled: !loading + }); const categories = [ { value: 'all', label: 'All Categories' }, diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx index 45deca27..de7e87e9 100644 --- a/src/pages/Search.tsx +++ b/src/pages/Search.tsx @@ -9,6 +9,7 @@ import { SearchFiltersComponent, SearchFilters } from '@/components/search/Searc import { SearchSortOptions, SortOption } from '@/components/search/SearchSortOptions'; import { EnhancedSearchResults } from '@/components/search/EnhancedSearchResults'; import { useSearch, SearchResult } from '@/hooks/useSearch'; +import { useOpenGraph } from '@/hooks/useOpenGraph'; export default function SearchPage() { const [searchParams] = useSearchParams(); @@ -121,6 +122,15 @@ export default function SearchPage() { company: results.filter(r => r.type === 'company').length }; + useOpenGraph({ + title: query ? `Search: "${query}" - ThrillWiki` : 'Search - ThrillWiki', + description: query + ? `Found ${filteredAndSortedResults.length} results for "${query}"` + : 'Search theme parks, rides, and more on ThrillWiki', + type: 'website', + enabled: !loading + }); + return (