Fixing Front end issues related to image loading and SEO (#219)

* Update mariadb.json

* Update vaultwarden.json

* Update vaultwarden.json

* Update keycloak.json

* Update json/keycloak.json

Co-authored-by: Håvard Gjøby Thom <34199185+havardthom@users.noreply.github.com>

* Update mariadb.json

Co-authored-by: Håvard Gjøby Thom <34199185+havardthom@users.noreply.github.com>

* Add canonical link to layout for improved SEO and page indexing

* Fix image source fallback for script logos to use a consistent relative path

* Fix image source for script logos across components to consistently use the "/ProxmoxVE/logo.png" path

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

* Fix image source for script logos to ensure leading slash is consistent for all components' paths

---------

Co-authored-by: CanbiZ <47820557+MickLesk@users.noreply.github.com>
Co-authored-by: Håvard Gjøby Thom <34199185+havardthom@users.noreply.github.com>
This commit is contained in:
Bram Suurd
2024-11-13 15:45:39 +01:00
committed by GitHub
parent c162f518e5
commit dac521c6a3
5 changed files with 22 additions and 9 deletions

View File

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