Update image sources to use environment variables for dynamic image hosting

Updates image URLs across various components and pages to dynamically fetch images using Cloudflare's image hosting service, configured via environment variables. Also updates the theme provider import for Sonner toasts and modifies the Supabase upload function to use a configurable Supabase URL.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: f1469493-0a69-4efc-91bd-478d1879573a
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7cdf4e95-3f41-4180-b8e3-8ef56d032c0e/f1469493-0a69-4efc-91bd-478d1879573a/HYhVkSk
This commit is contained in:
pac7
2025-10-07 14:10:00 +00:00
parent 16b40f3d4e
commit bf7dd93d9e
14 changed files with 15 additions and 14 deletions

View File

@@ -42,7 +42,7 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
<div className="aspect-video relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
{(company.card_image_url || company.card_image_id) ? (
<img
src={company.card_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${company.card_image_id}/public`}
src={company.card_image_url || `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${company.card_image_id}/public`}
alt={company.name}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
/>

View File

@@ -29,7 +29,7 @@ const OperatorCard = ({ company }: OperatorCardProps) => {
<div className="aspect-video relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
{(company.card_image_url || company.card_image_id) ? (
<img
src={company.card_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${company.card_image_id}/public`}
src={company.card_image_url || `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${company.card_image_id}/public`}
alt={company.name}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
/>

View File

@@ -29,7 +29,7 @@ const ParkOwnerCard = ({ company }: ParkOwnerCardProps) => {
<div className="aspect-video relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
{(company.card_image_url || company.card_image_id) ? (
<img
src={company.card_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${company.card_image_id}/public`}
src={company.card_image_url || `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${company.card_image_id}/public`}
alt={company.name}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
/>

View File

@@ -48,7 +48,7 @@ export function ParkCard({ park }: ParkCardProps) {
<div className="aspect-[4/3] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
{(park.card_image_url || park.card_image_id) ? (
<img
src={park.card_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${park.card_image_id}/public`}
src={park.card_image_url || `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${park.card_image_id}/public`}
alt={park.name}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
/>

View File

@@ -57,7 +57,7 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
<div className="aspect-[4/3] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
{(ride.card_image_url || ride.card_image_id || ride.image_url) ? (
<img
src={ride.card_image_url || (ride.card_image_id ? `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${ride.card_image_id}/public` : ride.image_url)}
src={ride.card_image_url || (ride.card_image_id ? `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${ride.card_image_id}/public` : ride.image_url)}
alt={ride.name}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
/>

View File

@@ -34,7 +34,7 @@ export function RideModelCard({ model, manufacturerSlug }: RideModelCardProps) {
>
{((model as any).card_image_url || (model as any).card_image_id) ? (
<img
src={(model as any).card_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${(model as any).card_image_id}/public`}
src={(model as any).card_image_url || `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${(model as any).card_image_id}/public`}
alt={model.name}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
/>

View File

@@ -1,4 +1,4 @@
import { useTheme } from "next-themes";
import { useTheme } from "@/components/theme/ThemeProvider";
import { Toaster as Sonner, toast } from "sonner";
type ToasterProps = React.ComponentProps<typeof Sonner>;

View File

@@ -121,7 +121,8 @@ export function PhotoUpload({
while (attempts < maxAttempts) {
try {
// Use direct fetch with URL parameters instead of supabase.functions.invoke with body
const response = await fetch(`https://ydvtmnrszybqnbcqbdcy.supabase.co/functions/v1/upload-image?id=${encodeURIComponent(id)}`, {
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL || 'https://ydvtmnrszybqnbcqbdcy.supabase.co';
const response = await fetch(`${supabaseUrl}/functions/v1/upload-image?id=${encodeURIComponent(id)}`, {
method: 'GET',
headers: {
'Authorization': `Bearer ${(await supabase.auth.getSession()).data.session?.access_token}`,

View File

@@ -137,7 +137,7 @@ export default function DesignerDetail() {
<div className="aspect-[21/9] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 rounded-lg overflow-hidden relative">
{(designer.banner_image_url || designer.banner_image_id) ? (
<img
src={designer.banner_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${designer.banner_image_id}/public`}
src={designer.banner_image_url || `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${designer.banner_image_id}/public`}
alt={designer.name}
className="w-full h-full object-cover"
/>

View File

@@ -139,7 +139,7 @@ export default function ManufacturerDetail() {
<div className="aspect-[16/9] md:aspect-[21/9] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 rounded-lg overflow-hidden relative">
{(manufacturer.banner_image_url || manufacturer.banner_image_id) ? (
<img
src={manufacturer.banner_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${manufacturer.banner_image_id}/public`}
src={manufacturer.banner_image_url || `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${manufacturer.banner_image_id}/public`}
alt={manufacturer.name}
className="w-full h-full object-cover"
/>

View File

@@ -166,7 +166,7 @@ export default function OperatorDetail() {
<div className="aspect-[21/9] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 rounded-lg overflow-hidden relative">
{(operator.banner_image_url || operator.banner_image_id) ? (
<img
src={operator.banner_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${operator.banner_image_id}/public`}
src={operator.banner_image_url || `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${operator.banner_image_id}/public`}
alt={operator.name}
className="w-full h-full object-cover"
/>

View File

@@ -224,7 +224,7 @@ export default function ParkDetail() {
<div className="aspect-[21/9] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 rounded-lg overflow-hidden relative">
{(park.banner_image_url || park.banner_image_id) ? (
<img
src={park.banner_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${park.banner_image_id}/public`}
src={park.banner_image_url || `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${park.banner_image_id}/public`}
alt={park.name}
className="w-full h-full object-cover"
/>

View File

@@ -166,7 +166,7 @@ export default function PropertyOwnerDetail() {
<div className="aspect-[21/9] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 rounded-lg overflow-hidden relative">
{(owner.banner_image_url || owner.banner_image_id) ? (
<img
src={owner.banner_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${owner.banner_image_id}/public`}
src={owner.banner_image_url || `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${owner.banner_image_id}/public`}
alt={owner.name}
className="w-full h-full object-cover"
/>

View File

@@ -221,7 +221,7 @@ export default function RideDetail() {
<div className="aspect-[21/9] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 rounded-lg overflow-hidden relative">
{(ride.banner_image_url || ride.banner_image_id) ? (
<img
src={ride.banner_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${ride.banner_image_id}/public`}
src={ride.banner_image_url || `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${ride.banner_image_id}/public`}
alt={ride.name}
className="w-full h-full object-cover"
/>