Merge branch 'main' of github.com:community-scripts/proxmox-helper-scripts

Author: BramSuurdje

README.md

@@ -2,28 +2,9 @@
   <a href="https://proxmoxve-scripts.com" target="_blank"><img src="https://proxmoxve-scripts.com/defaultimg.png" alt="Proxmox Helper Scripts" width="800"></a>
 </h1>
 
-<p align="center">
-    <a href="https://proxmoxve-scripts.com/"><img alt="User count" src="https://img.shields.io/badge/Weekly_Users-6000-blue?style=for-the-badge&color=1A91FF"/></a>
-    <a href="https://github.com/BramSuurdje/proxmox-helper-scripts/blob/main/LICENSE"><img alt="License" src="https://img.shields.io/github/license/BramSuurdje/proxmox-helper-scripts?style=for-the-badge&logo=github&color=1A91FF"/></a>
-    <a href="https://github.com/BramSuurdje/proxmox-helper-scripts/graphs/contributors"><img alt="Contributors" src="https://img.shields.io/github/contributors/BramSuurdje/proxmox-helper-scripts?style=for-the-badge&color=1A91FF" /></a>
-  </p>
-
-  <p align="center">Redesign of the Proxmox VE Helper Scripts website. optimized for readablity and security</p>
-
 > [!WARNING]
 > always check the source code of the scripts before running them. Copying random scripts without understanding what they do can lead to data loss or other security issues.
 
-## 👀 Why even use the Re-design?
-
-### Overview
-
-This repository contains a collection of helper scripts for Proxmox VE, designed to enhance and simplify the user experience. The scripts include various functionalities such as easier access to source code for improved security and a redesigned website for better script viewing.
-
-### Features
-
-- **Script Source Access**: Easily access the source code of each script to review and enhance security.
-- **Redesigned Website**: Improved layout for easier script viewing.
-
 ### Tech Stack
 - [Next.js](https://nextjs.org/) with Typescript for the frontend
 - [Tailwind CSS](https://tailwindcss.com/) for styling

package.json

@@ -5,7 +5,7 @@
   "private": true,
   "author": {
     "name": "Bram Suurd",
-    "url": "https://github.com/BramSuurdje"
+    "url": "https://github.com/community-scripts"
   },
   "type": "module",
   "scripts": {

src/app/page.tsx

@@ -80,7 +80,7 @@ export default function Page() {
                 </Button>
                 <Button className="w-full" asChild>
                   <a
-                    href="https://github.com/tteck/Proxmox"
+                    href="https://github.com/community-scripts/ProxmoxVE"
                     target="_blank"
                     rel="noopener noreferrer"
                     className="flex items-center justify-center"

src/app/scripts/_components/ScriptBrowser.tsx

@@ -115,59 +115,63 @@ const ScriptBrowser = ({
                 }
                 className="pt-0"
               >
-              {category.expand.items
-                .slice()
-                .sort((a, b) => a.title.localeCompare(b.title))
-                .map((script, index) => (
-                  <div key={index}>
-                    <Link
-                      href={{
-                        pathname: "/scripts",
-                        query: { id: script.title },
-                      }}
-                      prefetch={false}
-                      className={`flex cursor-pointer items-center justify-between gap-1 px-1 py-1 text-muted-foreground hover:rounded-lg hover:bg-accent/60 hover:dark:bg-accent/20 ${
-                        selectedScript === script.title
-                          ? "rounded-lg bg-accent font-semibold dark:bg-accent/30 dark:text-white"
-                          : ""
-                      }`}
-                      onClick={() => handleSelected(script.title)}
-                      ref={(el) => {
-                        linkRefs.current[script.title] = el;
-                      }}
-                    >
-                      <Image
-                        src={script.logo}
-                        height={16}
-                        width={16}
-                        unoptimized
-                        alt={script.title}
-                        className="mr-1 w-4 h-4 rounded-full"
-                      />
-                      <span className="flex items-center gap-2">
-                        {script.title}
-                        {script.isMostViewed && (
-                          <Star className="h-3 w-3 text-yellow-500"></Star>
-                        )}
-                      </span>
-                      <Badge
-                        className={classNames(
-                          "ml-auto w-[37.69px] justify-center text-center",
-                          {
-                            "text-primary/75": script.item_type === "VM",
-                            "text-yellow-500/75": script.item_type === "LXC",
-                            "border-none": script.item_type === "",
-                            hidden: !["VM", "LXC", ""].includes(
-                              script.item_type,
-                            ),
-                          },
-                        )}
+                {category.expand.items
+                  .slice()
+                  .sort((a, b) => a.title.localeCompare(b.title))
+                  .map((script, index) => (
+                    <div key={index}>
+                      <Link
+                        href={{
+                          pathname: "/scripts",
+                          query: { id: script.title },
+                        }}
+                        prefetch={false}
+                        className={`flex cursor-pointer items-center justify-between gap-1 px-1 py-1 text-muted-foreground hover:rounded-lg hover:bg-accent/60 hover:dark:bg-accent/20 ${
+                          selectedScript === script.title
+                            ? "rounded-lg bg-accent font-semibold dark:bg-accent/30 dark:text-white"
+                            : ""
+                        }`}
+                        onClick={() => handleSelected(script.title)}
+                        ref={(el) => {
+                          linkRefs.current[script.title] = el;
+                        }}
                       >
-                        {script.item_type}
-                      </Badge>
-                    </Link>
-                  </div>
-              ))}
+                        <Image
+                          src={script.logo}
+                          height={16}
+                          width={16}
+                          unoptimized
+                          onError={(e) =>
+                            ((e.currentTarget as HTMLImageElement).src =
+                              "/logo.png")
+                          }
+                          alt={script.title}
+                          className="mr-1 w-4 h-4 rounded-full"
+                        />
+                        <span className="flex items-center gap-2">
+                          {script.title}
+                          {script.isMostViewed && (
+                            <Star className="h-3 w-3 text-yellow-500"></Star>
+                          )}
+                        </span>
+                        <Badge
+                          className={classNames(
+                            "ml-auto w-[37.69px] justify-center text-center",
+                            {
+                              "text-primary/75": script.item_type === "VM",
+                              "text-yellow-500/75": script.item_type === "LXC",
+                              "border-none": script.item_type === "",
+                              hidden: !["VM", "LXC", ""].includes(
+                                script.item_type,
+                              ),
+                            },
+                          )}
+                        >
+                          {script.item_type}
+                        </Badge>
+                      </Link>
+                    </div>
+                  ))}
               </AccordionContent>
             </AccordionItem>
           ))}

src/app/scripts/_components/ScriptItem.tsx

@@ -66,6 +66,10 @@ function ScriptItem({
                       className="h-32 w-32 rounded-lg bg-accent/60 object-contain p-3 shadow-md"
                       src={item.logo}
                       width={400}
+                      onError={(e) =>
+                        ((e.currentTarget as HTMLImageElement).src =
+                          "/logo.png")
+                      }
                       height={400}
                       alt={item.title}
                       unoptimized

src/app/scripts/_components/ScriptItems/InterFaces.tsx

@@ -1,5 +1,7 @@
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import handleCopy from "@/lib/handleCopy";
+import { cn } from "@/lib/utils";
+import { ClipboardIcon } from "lucide-react";
 
 interface Item {
   interface?: string;
@@ -13,13 +15,13 @@ const CopyButton = ({
   label: string;
   value: string | number;
 }) => (
-  <Button
-    variant="secondary"
-    size="sm"
-    onClick={() => handleCopy(label, String(value))}
-  >
+  <span className={cn(buttonVariants({size: "sm", variant: "secondary"}), "flex items-center gap-2")}>
     {value}
-  </Button>
+    <ClipboardIcon
+      onClick={() => handleCopy(label, String(value))}
+      className="size-4 cursor-pointer"
+    />
+  </span>
 );
 
 export default function InterFaces({ item }: { item: Item }) {

src/components/CommandMenu.tsx

@@ -12,6 +12,7 @@ import Image from "next/image";
 import { useRouter } from "next/navigation";
 import React from "react";
 import { Button } from "./ui/button";
+import { DialogTitle } from "./ui/dialog";
 
 const sortCategories = (categories: Category[]): Category[] => {
   return categories.sort((a: Category, b: Category) => {
@@ -84,17 +85,18 @@ export default function CommandMenu() {
         </kbd>
       </Button>
       <CommandDialog open={open} onOpenChange={setOpen}>
+          <DialogTitle className="sr-only">Search scripts</DialogTitle>
         <CommandInput placeholder="search for a script..." />
         <CommandList>
           <CommandEmpty>No scripts found.</CommandEmpty>
           {links.map((category) => (
             <CommandGroup
-              key={"category:" + category.categoryId}
+              key={"category:" + category.catagoryName}
               heading={category.catagoryName}
             >
               {category.expand.items.map((script) => (
                 <CommandItem
-                  key={"script:"+script.id}
+                  key={"script:" + script.id}
                   value={script.title}
                   onSelect={() => {
                     setOpen(false);
@@ -106,6 +108,10 @@ export default function CommandMenu() {
                       src={script.logo}
                       unoptimized
                       height={16}
+                      onError={(e) =>
+                        ((e.currentTarget as HTMLImageElement).src =
+                          "/logo.png")
+                      }
                       width={16}
                       alt=""
                       className="h-5 w-5"

src/components/Footer.tsx

@@ -2,9 +2,9 @@ import Link from "next/link";
 
 export default function Footer() {
   return (
-    <div className="supports-backdrop-blur:bg-background/90 justify-betw mt-auto flex border-t border-border bg-background/40 py-6 backdrop-blur-lg">
+    <div className="supports-backdrop-blur:bg-background/90 mt-auto flex border-t border-border bg-background/40 py-6 backdrop-blur-lg">
       <div className="flex w-full justify-between">
-        <div className="mx-6 w-full max-w-7xl text-sm">
+        <div className="mx-6 w-full max-w-7xl text-sm text-muted-foreground">
           Website build by{" "}
           <Link
             href="https://github.com/BramSuurdje"

src/components/ui/codeblock.tsx

@@ -67,7 +67,7 @@ const handleCopy = (type: string, value: string) => {
             <div>
               <Button className="text-white">
                 <Link
-                  href="https://github.com/tteck/Proxmox"
+                  href="https://github.com/community-scripts/ProxmoxVE"
                   data-umami-event="Star on Github"
                   target="_blank"
                 >

src/components/ui/star-on-github-button.tsx

@@ -6,12 +6,12 @@ import NumberTicker from "../magicui/number-ticker";
 import { buttonVariants } from "./button";
 
 export default function StarOnGithubButton() {
-  const [stars, setStars] = useState(13000);
+  const [stars, setStars] = useState(0);
 
   useEffect(() => {
     const fetchStars = async () => {
       try {
-        const res = await fetch("https://api.github.com/repos/tteck/Proxmox", {
+        const res = await fetch("https://api.github.com/repos/community-scripts/ProxmoxVE", {
           next: { revalidate: 60 * 60 * 24 },
         });
 
@@ -34,7 +34,7 @@ export default function StarOnGithubButton() {
         "group relative justify-center gap-2 rounded-md transition-all duration-300 ease-out hover:ring-2 hover:ring-primary hover:ring-offset-2",
       )}
       target="_blank"
-      href="https://github.com/tteck/Proxmox"
+      href="https://github.com/community-scripts/ProxmoxVE"
     >
       <span className="absolute right-0 -mt-12 h-32 translate-x-12 rotate-12 bg-white opacity-10 transition-all duration-1000 ease-out group-hover:-translate-x-40" />
       <div className="flex items-center">

src/config/siteConfig.tsx

@@ -3,19 +3,19 @@ import { FaGithub } from "react-icons/fa";
 
 export const navbarLinks = [
   {
-    href: "https://github.com/tteck/Proxmox",
+    href: "https://github.com/community-scripts/ProxmoxVE",
     event: "Github",
     icon: <FaGithub className="h-4 w-4" />,
     text: "Github",
   },
   {
-    href: "https://github.com/tteck/Proxmox/blob/main/CHANGELOG.md",
+    href: "https://github.com/community-scripts/ProxmoxVE/blob/main/CHANGELOG.md",
     event: "Change Log",
     icon: <Scroll className="h-4 w-4" />,
     text: "Change Log",
   },
   {
-    href: "https://github.com/tteck/Proxmox/discussions",
+    href: "https://github.com/community-scripts/ProxmoxVE/discussions",
     event: "Discussions",
     icon: <MessagesSquare className="h-4 w-4" />,
     text: "Discussions",

src/lib/TextCopyBlock.tsx

@@ -1,6 +1,6 @@
 import { Button } from "@/components/ui/button";
 import handleCopy from "./handleCopy";
-import { Copy } from "lucide-react";
+import { ClipboardIcon, Copy } from "lucide-react";
 
 export default function TextCopyBlock(description: string) {
   const pattern = /`([^`]*)`/g;
@@ -14,7 +14,7 @@ export default function TextCopyBlock(description: string) {
           className="bg-secondary py-1 px-2 rounded-lg inline-flex items-center gap-2"
         >
           {part}
-          <Copy
+          <ClipboardIcon
             className="size-3 cursor-pointer"
             onClick={() => handleCopy("command", part)}
           />