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>

README.md

@@ -55,7 +55,7 @@ To install the Proxmox Helper Scripts, simply follow these steps:
 2. Search for the desired script, e.g. **"Home Assistant OS VM"**.
 3. In the **"How To Install"** section, copy the provided **Bash command**.
 4. Open the Proxmox shell on your **main node**.
-5. Paste the command into the console and let's start! 🚀
+5. Paste the command into the console, hit enter, and you are away! 🚀
 
 For detailed instructions, check out our [official guides](https://github.com/community-scripts/ProxmoxVE/blob/main/USER_SUBMITTED_GUIDES.md).
 
@@ -63,16 +63,14 @@ For detailed instructions, check out our [official guides](https://github.com/co
 
 ## ❤️  Community and Contributions
 
-The Proxmox Helper Scripts project is community-driven, and we highly appreciate any contributions—whether it's through reporting bugs, suggesting features, improving documentation, or spreading the word. We are committed to maintaining transparency and sustainability in this open-source effort.
+The Proxmox Helper Scripts project is community-driven, and we highly appreciate any contributions — whether it's through reporting bugs, suggesting features, improving documentation, or spreading the word. We are committed to maintaining transparency and sustainability in this open-source effort.
 
-### 💖  Donate to Support the Project
+### 💖  Donate to Support the Project (DRAFT)
 
 We offer two donation options to help maintain and grow this project:
 
-- **Ko-Fi for tteck**: [Donate to tteck](https://ko-fi.com/proxmoxhelperscripts) - All donations will go directly to support tteck’s legacy and help fund ongoing maintenance of the scripts.
-- **Ko-Fi for Community Edition**: [Donate to Community Edition](https://ko-fi.com/community_scripts) - This is a nonprofit organization. All funds will go towards script maintenance, infrastructure, and server costs. Any remaining funds will be donated annually to 2-4 causes (e.g., cancer research, hospice care, etc.).
-
-Your contributions help keep the project running and support important charitable causes.
+- **Ko-Fi for tteck**: [Donate to tteck](https://ko-fi.com/proxmoxhelperscripts) - All donations will go directly to support tteck, the founder of this project.
+- **Ko-Fi for Community Edition**: [Donate to this project](https://ko-fi.com/community_scripts) -  All funds will go towards script maintenance infrastructure and server costs. **Our most immediate need is funding testing infrastructure**.  Your contributions help keep the project running. To honor tteck's legacy this project will also raise money for charity (cancer research, hospice care). Of the money donated to this project, 30% will be donated to charity. Income, expenditure and charitable donations will be disclosed annually in a transparent manner. 
 
 <hr>
 
@@ -110,3 +108,5 @@ This project is licensed under the terms of the [MIT License](LICENSE).
 ## 📢&nbsp; Acknowledgments
 
 A special thank you to [tteck](https://github.com/tteck) for his foundational work, which has allowed the Proxmox community to thrive. We’re dedicated to keeping his vision alive and expanding upon it with the continued support of this vibrant community.
+
+Proxmox® is a registered trademark of [Proxmox Server Solutions GmbH](https://www.proxmox.com/en/about/company).

ct/jellyfin.sh

@@ -59,6 +59,7 @@ if [[ ! -d /usr/lib/jellyfin ]]; then msg_error "No ${APP} Installation Found!";
 msg_info "Updating ${APP} LXC"
 apt-get update &>/dev/null
 apt-get -y upgrade &>/dev/null
+apt-get --with-new-pkgs upgrade jellyfin jellyfin-server &>/dev/null
 msg_ok "Updated ${APP} LXC"
 exit
 }

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>

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"

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>

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}

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}