From dac521c6a36d7f940cb44e2434e1e6779c2ba987 Mon Sep 17 00:00:00 2001
From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com>
Date: Wed, 13 Nov 2024 15:45:39 +0100
Subject: [PATCH] Fixing Front end issues related to image loading and SEO
 (#219)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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>
---
 frontend/src/app/layout.tsx                        |  1 +
 .../app/scripts/_components/ScriptAccordion.tsx    |  5 +++--
 .../app/scripts/_components/ScriptInfoBlocks.tsx   | 14 +++++++++++---
 .../src/app/scripts/_components/ScriptItem.tsx     |  6 ++++--
 frontend/src/components/CommandMenu.tsx            |  5 +++--
 5 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index b5422c861..423c7ad1e 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -64,6 +64,7 @@ export default function RootLayout({
           src={`https://${analytics.url}/script.js`}
           data-website-id={analytics.token}
         ></script>
+        <link rel="canonical" href={metadata.metadataBase.href} />
         <link rel="manifest" href="manifest.webmanifest" />
         <link rel="preconnect" href="https://api.github.com" />
       </head>
diff --git a/frontend/src/app/scripts/_components/ScriptAccordion.tsx b/frontend/src/app/scripts/_components/ScriptAccordion.tsx
index 4a39c40e9..96be28da2 100644
--- a/frontend/src/app/scripts/_components/ScriptAccordion.tsx
+++ b/frontend/src/app/scripts/_components/ScriptAccordion.tsx
@@ -12,6 +12,7 @@ import { cn } from "@/lib/utils";
 import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
+import { basePath } from "@/config/siteConfig";
 
 export default function ScriptAccordion({
   items,
@@ -104,13 +105,13 @@ export default function ScriptAccordion({
                   >
                     <div className="flex items-center">
                       <Image
-                        src={script.logo || "/logo.png"}
+                        src={script.logo || `/${basePath}/logo.png`}
                         height={16}
                         width={16}
                         unoptimized
                         onError={(e) =>
                           ((e.currentTarget as HTMLImageElement).src =
-                            "/logo.png")
+                            `/${basePath}/logo.png`)
                         }
                         alt={script.name}
                         className="mr-1 w-4 h-4 rounded-full"
diff --git a/frontend/src/app/scripts/_components/ScriptInfoBlocks.tsx b/frontend/src/app/scripts/_components/ScriptInfoBlocks.tsx
index 962e516f8..1c418c94c 100644
--- a/frontend/src/app/scripts/_components/ScriptInfoBlocks.tsx
+++ b/frontend/src/app/scripts/_components/ScriptInfoBlocks.tsx
@@ -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>
diff --git a/frontend/src/app/scripts/_components/ScriptItem.tsx b/frontend/src/app/scripts/_components/ScriptItem.tsx
index 2d9848dbd..835fce576 100644
--- a/frontend/src/app/scripts/_components/ScriptItem.tsx
+++ b/frontend/src/app/scripts/_components/ScriptItem.tsx
@@ -14,6 +14,7 @@ import Description from "./ScriptItems/Description";
 import InstallCommand from "./ScriptItems/InstallCommand";
 import InterFaces from "./ScriptItems/InterFaces";
 import Tooltips from "./ScriptItems/Tooltips";
+import { basePath } from "@/config/siteConfig";
 
 function ScriptItem({
   item,
@@ -40,10 +41,11 @@ function ScriptItem({
               <div className="flex">
                 <Image
                   className="h-32 w-32 rounded-lg bg-accent/60 object-contain p-3 shadow-md"
-                  src={item.logo || "/logo.png"}
+                  src={item.logo || `/${basePath}/logo.png`}
                   width={400}
                   onError={(e) =>
-                    ((e.currentTarget as HTMLImageElement).src = "/logo.png")
+                    ((e.currentTarget as HTMLImageElement).src =
+                      `/${basePath}/logo.png`)
                   }
                   height={400}
                   alt={item.name}
diff --git a/frontend/src/components/CommandMenu.tsx b/frontend/src/components/CommandMenu.tsx
index 140897e5a..b1c8e1267 100644
--- a/frontend/src/components/CommandMenu.tsx
+++ b/frontend/src/components/CommandMenu.tsx
@@ -15,6 +15,7 @@ import React from "react";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
 import { DialogTitle } from "./ui/dialog";
+import { basePath } from "@/config/siteConfig";
 
 export const formattedBadge = (type: string) => {
   switch (type) {
@@ -102,10 +103,10 @@ export default function CommandMenu() {
                 >
                   <div className="flex gap-2" onClick={() => setOpen(false)}>
                     <Image
-                      src={script.logo || "/logo.png"}
+                      src={script.logo || `/${basePath}/logo.png`}
                       onError={(e) =>
                         ((e.currentTarget as HTMLImageElement).src =
-                          "/logo.png")
+                          `/${basePath}/logo.png`)
                       }
                       unoptimized
                       width={16}