Update image source for script logos to use basePath for consistent paths across all components

This commit is contained in:
Bram Suurd 2024-11-13 15:09:01 +01:00
parent a401cd77a6
commit ca7deabd4d
4 changed files with 14 additions and 11 deletions

View File

@ -12,6 +12,7 @@ import { cn } from "@/lib/utils";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useState } from "react"; import { useState } from "react";
import { basePath } from "@/config/siteConfig";
export default function ScriptAccordion({ export default function ScriptAccordion({
items, items,
@ -104,13 +105,13 @@ export default function ScriptAccordion({
> >
<div className="flex items-center"> <div className="flex items-center">
<Image <Image
src={script.logo || "/ProxmoxVE/logo.png"} src={script.logo || `${basePath}/logo.png`}
height={16} height={16}
width={16} width={16}
unoptimized unoptimized
onError={(e) => onError={(e) =>
((e.currentTarget as HTMLImageElement).src = ((e.currentTarget as HTMLImageElement).src =
"/ProxmoxVE/logo.png") `${basePath}/logo.png`)
} }
alt={script.name} alt={script.name}
className="mr-1 w-4 h-4 rounded-full" className="mr-1 w-4 h-4 rounded-full"

View File

@ -7,7 +7,7 @@ import {
CardHeader, CardHeader,
CardTitle, CardTitle,
} from "@/components/ui/card"; } from "@/components/ui/card";
import { mostPopularScripts } from "@/config/siteConfig"; import { basePath, mostPopularScripts } from "@/config/siteConfig";
import { extractDate } from "@/lib/time"; import { extractDate } from "@/lib/time";
import { Category, Script } from "@/lib/types"; import { Category, Script } from "@/lib/types";
import { CalendarPlus } from "lucide-react"; import { CalendarPlus } from "lucide-react";
@ -92,14 +92,14 @@ export function LatestScripts({ items }: { items: Category[] }) {
<CardTitle className="flex items-center gap-3"> <CardTitle className="flex items-center gap-3">
<div className="flex h-16 w-16 items-center justify-center rounded-lg bg-accent p-1"> <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-accent p-1">
<Image <Image
src={script.logo || "/ProxmoxVE/logo.png"} src={script.logo || `${basePath}/logo.png`}
unoptimized unoptimized
height={64} height={64}
width={64} width={64}
alt="" alt=""
onError={(e) => onError={(e) =>
((e.currentTarget as HTMLImageElement).src = ((e.currentTarget as HTMLImageElement).src =
"/ProxmoxVE/logo.png") `${basePath}/logo.png`)
} }
className="h-11 w-11 object-contain" className="h-11 w-11 object-contain"
/> />
@ -165,13 +165,13 @@ export function MostViewedScripts({ items }: { items: Category[] }) {
<div className="flex max-h-16 min-h-16 min-w-16 max-w-16 items-center justify-center rounded-lg bg-accent p-1"> <div className="flex max-h-16 min-h-16 min-w-16 max-w-16 items-center justify-center rounded-lg bg-accent p-1">
<Image <Image
unoptimized unoptimized
src={script.logo || "/ProxmoxVE/logo.png"} src={script.logo || `${basePath}/logo.png`}
height={64} height={64}
width={64} width={64}
alt="" alt=""
onError={(e) => onError={(e) =>
((e.currentTarget as HTMLImageElement).src = ((e.currentTarget as HTMLImageElement).src =
"/ProxmoxVE/logo.png") `${basePath}/logo.png`)
} }
className="h-11 w-11 object-contain" className="h-11 w-11 object-contain"
/> />

View File

@ -14,6 +14,7 @@ import Description from "./ScriptItems/Description";
import InstallCommand from "./ScriptItems/InstallCommand"; import InstallCommand from "./ScriptItems/InstallCommand";
import InterFaces from "./ScriptItems/InterFaces"; import InterFaces from "./ScriptItems/InterFaces";
import Tooltips from "./ScriptItems/Tooltips"; import Tooltips from "./ScriptItems/Tooltips";
import { basePath } from "@/config/siteConfig";
function ScriptItem({ function ScriptItem({
item, item,
@ -40,11 +41,11 @@ function ScriptItem({
<div className="flex"> <div className="flex">
<Image <Image
className="h-32 w-32 rounded-lg bg-accent/60 object-contain p-3 shadow-md" className="h-32 w-32 rounded-lg bg-accent/60 object-contain p-3 shadow-md"
src={item.logo || "/ProxmoxVE/logo.png"} src={item.logo || `${basePath}/logo.png`}
width={400} width={400}
onError={(e) => onError={(e) =>
((e.currentTarget as HTMLImageElement).src = ((e.currentTarget as HTMLImageElement).src =
"/ProxmoxVE/logo.png") `${basePath}/logo.png`)
} }
height={400} height={400}
alt={item.name} alt={item.name}

View File

@ -15,6 +15,7 @@ import React from "react";
import { Badge } from "./ui/badge"; import { Badge } from "./ui/badge";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { DialogTitle } from "./ui/dialog"; import { DialogTitle } from "./ui/dialog";
import { basePath } from "@/config/siteConfig";
export const formattedBadge = (type: string) => { export const formattedBadge = (type: string) => {
switch (type) { switch (type) {
@ -102,10 +103,10 @@ export default function CommandMenu() {
> >
<div className="flex gap-2" onClick={() => setOpen(false)}> <div className="flex gap-2" onClick={() => setOpen(false)}>
<Image <Image
src={script.logo || "/ProxmoxVE/logo.png"} src={script.logo || `${basePath}/logo.png`}
onError={(e) => onError={(e) =>
((e.currentTarget as HTMLImageElement).src = ((e.currentTarget as HTMLImageElement).src =
"/ProxmoxVE/logo.png") `${basePath}/logo.png`)
} }
unoptimized unoptimized
width={16} width={16}