website

frontend/src/app/scripts/_components/ScriptItems/Alerts.tsx

@@ -14,7 +14,7 @@ export default function Alerts({ item }: { item: Script }) {
     <>
       {item?.notes?.length > 0 &&
         item.notes.map((note: NoteProps, index: number) => (
-          <div key={index} className="mt-4 flex flex-col gap-2">
+          <div key={index} className="mt-4 flex flex-col shadow-sm gap-2">
             <p
               className={cn(
                 "inline-flex items-center gap-2 rounded-lg border p-2 pl-4 text-sm",

frontend/src/app/scripts/_components/ScriptItems/Buttons.tsx

@@ -1,82 +1,99 @@
 import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { basePath } from "@/config/siteConfig";
 import { Script } from "@/lib/types";
-import { BookOpenText, Code, Globe, RefreshCcw } from "lucide-react";
-import Link from "next/link";
+import { BookOpenText, Code, Globe, LinkIcon, RefreshCcw } from "lucide-react";
 
 const generateInstallSourceUrl = (slug: string) => {
-    const baseUrl = `https://raw.githubusercontent.com/community-scripts/${basePath}/main`;
-    return `${baseUrl}/install/${slug}-install.sh`;
+  const baseUrl = `https://raw.githubusercontent.com/community-scripts/${basePath}/main`;
+  return `${baseUrl}/install/${slug}-install.sh`;
 };
 
 const generateSourceUrl = (slug: string, type: string) => {
-    const baseUrl = `https://raw.githubusercontent.com/community-scripts/${basePath}/main`;
-    return type === "vm" ? `${baseUrl}/vm/${slug}.sh` : `${baseUrl}/misc/${slug}.sh`;
-    return `${baseUrl}/misc/${slug}.sh`;
+  const baseUrl = `https://raw.githubusercontent.com/community-scripts/${basePath}/main`;
+
+  switch (type) {
+    case "vm":
+      return `${baseUrl}/vm/${slug}.sh`;
+    case "pve":
+      return `${baseUrl}/tools/pve/${slug}.sh`;
+    case "addon":
+      return `${baseUrl}/tools/addon/${slug}.sh`;
+    default:
+      return `${baseUrl}/ct/${slug}.sh`; // fallback for "ct"
+  }
 };
 
 const generateUpdateUrl = (slug: string) => {
-    const baseUrl = `https://raw.githubusercontent.com/community-scripts/${basePath}/main`;
-    return `${baseUrl}/ct/${slug}.sh`;
+  const baseUrl = `https://raw.githubusercontent.com/community-scripts/${basePath}/main`;
+  return `${baseUrl}/ct/${slug}.sh`;
 };
 
-interface ButtonLinkProps {
-    href: string;
-    icon: React.ReactNode;
-    text: string;
+interface LinkItem {
+  href: string;
+  icon: React.ReactNode;
+  text: string;
 }
 
-const ButtonLink = ({ href, icon, text }: ButtonLinkProps) => (
-    <Button variant="secondary" asChild>
-        <Link target="_blank" href={href}>
-            <span className="flex items-center gap-2">
-                {icon}
-                {text}
-            </span>
-        </Link>
-    </Button>
-);
-
 export default function Buttons({ item }: { item: Script }) {
-    const isCtOrDefault = ["ct"].includes(item.type);
-    const installSourceUrl = isCtOrDefault ? generateInstallSourceUrl(item.slug) : null;
-    const updateSourceUrl = isCtOrDefault ? generateUpdateUrl(item.slug) : null;
-    const sourceUrl = !isCtOrDefault ? generateSourceUrl(item.slug, item.type) : null;
+  const isCtOrDefault = ["ct"].includes(item.type);
+  const installSourceUrl = isCtOrDefault ? generateInstallSourceUrl(item.slug) : null;
+  const updateSourceUrl = isCtOrDefault ? generateUpdateUrl(item.slug) : null;
+  const sourceUrl = !isCtOrDefault ? generateSourceUrl(item.slug, item.type) : null;
 
-    const buttons = [
-        item.website && {
-            href: item.website,
-            icon: <Globe className="h-4 w-4" />,
-            text: "Website",
-        },
-        item.documentation && {
-            href: item.documentation,
-            icon: <BookOpenText className="h-4 w-4" />,
-            text: "Documentation",
-        },
-        installSourceUrl && {
-            href: installSourceUrl,
-            icon: <Code className="h-4 w-4" />,
-            text: "Install-Source",
-        },
-        updateSourceUrl && {
-            href: updateSourceUrl,
-            icon: <RefreshCcw className="h-4 w-4" />,
-            text: "Update-Source",
-        },
-        sourceUrl && {
-            href: sourceUrl,
-            icon: <Code className="h-4 w-4" />,
-            text: "Source Code",
-        },
-    ].filter(Boolean) as ButtonLinkProps[];
+  const links = [
+    item.website && {
+      href: item.website,
+      icon: <Globe className="h-4 w-4" />,
+      text: "Website",
+    },
+    item.documentation && {
+      href: item.documentation,
+      icon: <BookOpenText className="h-4 w-4" />,
+      text: "Documentation",
+    },
+    installSourceUrl && {
+      href: installSourceUrl,
+      icon: <Code className="h-4 w-4" />,
+      text: "Install Source",
+    },
+    updateSourceUrl && {
+      href: updateSourceUrl,
+      icon: <RefreshCcw className="h-4 w-4" />,
+      text: "Update Source",
+    },
+    sourceUrl && {
+      href: sourceUrl,
+      icon: <Code className="h-4 w-4" />,
+      text: "Source Code",
+    },
+  ].filter(Boolean) as LinkItem[];
 
-    return (
+  if (links.length === 0) return null;
 
-        <div className="flex flex-wrap justify-end gap-2">
-            {buttons.map((props, index) => (
-                <ButtonLink key={index} {...props} />
-            ))}
-        </div>
-    );
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="flex items-center gap-2">
+          <LinkIcon className="size-4" />
+          Links
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {links.map((link, index) => (
+          <DropdownMenuItem key={index} asChild>
+            <a href={link.href} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2">
+              <span className="text-muted-foreground size-4">{link.icon}</span>
+              <span>{link.text}</span>
+            </a>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
 }

frontend/src/app/scripts/_components/ScriptItems/DefaultPassword.tsx

@@ -14,24 +14,19 @@ export default function DefaultPassword({ item }: { item: Script }) {
   };
 
   return (
-    <div className="mt-4 rounded-lg border bg-accent/50">
-      <div className="flex gap-3 px-4 py-2">
+    <div className="mt-4 rounded-lg border shadow-sm">
+      <div className="flex gap-3 px-4 py-2 bg-accent/25">
         <h2 className="text-lg font-semibold">Default Login Credentials</h2>
       </div>
       <Separator className="w-full" />
       <div className="flex flex-col gap-2 p-4">
         <p className="mb-2 text-sm">
-          You can use the following credentials to login to the {item.name}{" "}
-          {item.type}.
+          You can use the following credentials to login to the {item.name} {item.type}.
         </p>
         {["username", "password"].map((type) => (
           <div key={type} className="text-sm">
             {type.charAt(0).toUpperCase() + type.slice(1)}:{" "}
-            <Button
-              variant="secondary"
-              size="null"
-              onClick={() => copyCredential(type as "username" | "password")}
-            >
+            <Button variant="secondary" size="null" onClick={() => copyCredential(type as "username" | "password")}>
               {item.default_credentials[type as "username" | "password"]}
             </Button>
           </div>

frontend/src/app/scripts/_components/ScriptItems/DefaultSettings.tsx

@@ -1,51 +1,29 @@
 import { Script } from "@/lib/types";
 
 export default function DefaultSettings({ item }: { item: Script }) {
-  const getDisplayValueFromRAM = (ram: number) =>
-    ram >= 1024 ? `${Math.floor(ram / 1024)}GB` : `${ram}MB`;
+  const getDisplayValueFromRAM = (ram: number) => (ram >= 1024 ? `${Math.floor(ram / 1024)}GB` : `${ram}MB`);
 
-  const ResourceDisplay = ({
-    settings,
-    title,
-  }: {
-    settings: (typeof item.install_methods)[0];
-    title: string;
-  }) => {
+  const ResourceDisplay = ({ settings, title }: { settings: (typeof item.install_methods)[0]; title: string }) => {
     const { cpu, ram, hdd } = settings.resources;
     return (
       <div>
         <h2 className="text-md font-semibold">{title}</h2>
         <p className="text-sm text-muted-foreground">CPU: {cpu}vCPU</p>
-        <p className="text-sm text-muted-foreground">
-          RAM: {getDisplayValueFromRAM(ram ?? 0)}
-        </p>
+        <p className="text-sm text-muted-foreground">RAM: {getDisplayValueFromRAM(ram ?? 0)}</p>
         <p className="text-sm text-muted-foreground">HDD: {hdd}GB</p>
       </div>
     );
   };
 
-  const defaultSettings = item.install_methods.find(
-    (method) => method.type === "default",
-  );
-  const defaultAlpineSettings = item.install_methods.find(
-    (method) => method.type === "alpine",
-  );
+  const defaultSettings = item.install_methods.find((method) => method.type === "default");
+  const defaultAlpineSettings = item.install_methods.find((method) => method.type === "alpine");
 
-  const hasDefaultSettings =
-    defaultSettings?.resources &&
-    Object.values(defaultSettings.resources).some(Boolean);
+  const hasDefaultSettings = defaultSettings?.resources && Object.values(defaultSettings.resources).some(Boolean);
 
   return (
-    <>
-      {hasDefaultSettings && (
-        <ResourceDisplay settings={defaultSettings} title="Default settings" />
-      )}
-      {defaultAlpineSettings && (
-        <ResourceDisplay
-          settings={defaultAlpineSettings}
-          title="Default Alpine settings"
-        />
-      )}
-    </>
+    <div className="space-y-4 flex-col flex">
+      {hasDefaultSettings && <ResourceDisplay settings={defaultSettings} title="Default settings" />}
+      {defaultAlpineSettings && <ResourceDisplay settings={defaultAlpineSettings} title="Default Alpine settings" />}
+    </div>
   );
 }

frontend/src/app/scripts/_components/ScriptItems/Description.tsx

@@ -1,21 +1,11 @@
 import TextCopyBlock from "@/components/TextCopyBlock";
 import { Script } from "@/lib/types";
-import { AlertColors } from "@/config/siteConfig";
-import { AlertCircle, NotepadText } from "lucide-react";
-import { cn } from "@/lib/utils";
 
 export default function Description({ item }: { item: Script }) {
   return (
     <div className="p-2">
       <h2 className="mb-2 max-w-prose text-lg font-semibold">Description</h2>
-      <p className={cn(
-                "inline-flex items-center gap-2 rounded-lg border p-2 pl-4 text-lg pr-4",
-                AlertColors["warning"],
-              )} >
-        <AlertCircle className="h-4 min-h-4 w-4 min-w-4" />
-              <span>Only use for testing, not in production!</span>
-      </p>
-      <p className="text-sm text-muted-foreground pt-4">
+      <p className="text-sm text-muted-foreground">
         {TextCopyBlock(item.description)}
       </p>
     </div>

frontend/src/app/scripts/_components/ScriptItems/InstallCommand.tsx

@@ -5,85 +5,73 @@ import { Script } from "@/lib/types";
 import { getDisplayValueFromType } from "../ScriptInfoBlocks";
 
 const getInstallCommand = (scriptPath = "", isAlpine = false) => {
-    const url = `https://github.com/community-scripts/${basePath}/raw/main/${scriptPath}`;
-    return isAlpine
-        ? `bash -c "$(curl -fsSL ${url})"`
-        : `bash -c "$(curl -fsSL ${url})"`;
+  const url = `https://raw.githubusercontent.com/community-scripts/${basePath}/main/${scriptPath}`;
+  return isAlpine ? `bash -c "$(curl -fsSL ${url})"` : `bash -c "$(curl -fsSL ${url})"`;
 };
 
-
 export default function InstallCommand({ item }: { item: Script }) {
-    const alpineScript = item.install_methods.find(
-        (method) => method.type === "alpine",
-    );
+  const alpineScript = item.install_methods.find((method) => method.type === "alpine");
 
-    const defaultScript = item.install_methods.find(
-        (method) => method.type === "default",
-    );
+  const defaultScript = item.install_methods.find((method) => method.type === "default");
 
-    const renderInstructions = (isAlpine = false) => (
+  const renderInstructions = (isAlpine = false) => (
+    <>
+      <p className="text-sm mt-2">
+        {isAlpine ? (
+          <>
+            As an alternative option, you can use Alpine Linux and the {item.name} package to create a {item.name}{" "}
+            {getDisplayValueFromType(item.type)} container with faster creation time and minimal system resource usage.
+            You are also obliged to adhere to updates provided by the package maintainer.
+          </>
+        ) : item.type === "pve" ? (
+          <>
+            To use the {item.name} script, run the command below **only** in the Proxmox VE Shell. This script is
+            intended for managing or enhancing the host system directly.
+          </>
+        ) : item.type === "addon" ? (
+          <>
+            This script enhances an existing setup. You can use it inside a running LXC container or directly on the
+            Proxmox VE host to extend functionality with {item.name}.
+          </>
+        ) : (
+          <>
+            To create a new Proxmox VE {item.name} {getDisplayValueFromType(item.type)}, run the command below in the
+            Proxmox VE Shell.
+          </>
+        )}
+      </p>
+      {isAlpine && (
+        <p className="mt-2 text-sm">
+          To create a new Proxmox VE Alpine-{item.name} {getDisplayValueFromType(item.type)}, run the command below in
+          the Proxmox VE Shell.
+        </p>
+      )}
+    </>
+  );
+
+  return (
+    <div className="p-4">
+      {alpineScript ? (
+        <Tabs defaultValue="default" className="mt-2 w-full max-w-4xl">
+          <TabsList>
+            <TabsTrigger value="default">Default</TabsTrigger>
+            <TabsTrigger value="alpine">Alpine Linux</TabsTrigger>
+          </TabsList>
+          <TabsContent value="default">
+            {renderInstructions()}
+            <CodeCopyButton>{getInstallCommand(defaultScript?.script)}</CodeCopyButton>
+          </TabsContent>
+          <TabsContent value="alpine">
+            {renderInstructions(true)}
+            <CodeCopyButton>{getInstallCommand(alpineScript.script, true)}</CodeCopyButton>
+          </TabsContent>
+        </Tabs>
+      ) : defaultScript?.script ? (
         <>
-            <p className="text-sm mt-2">
-                {isAlpine ? (
-                    <>
-                        As an alternative option, you can use Alpine Linux and the{" "}
-                        {item.name} package to create a {item.name}{" "}
-                        {getDisplayValueFromType(item.type)} container with faster creation
-                        time and minimal system resource usage. You are also obliged to
-                        adhere to updates provided by the package maintainer.
-                    </>
-                ) : item.type == "misc" ? (
-                    <>
-                        To use the {item.name} script, run the command below in the shell.
-                    </>
-                ) : (
-                    <>
-                        {" "}
-                        To create a new Proxmox VE {item.name}{" "}
-                        {getDisplayValueFromType(item.type)}, run the command below in the
-                        Proxmox VE Shell.
-                    </>
-                )}
-            </p>
-            {isAlpine && (
-                <p className="mt-2 text-sm">
-                    To create a new Proxmox VE Alpine-{item.name}{" "}
-                    {getDisplayValueFromType(item.type)}, run the command below in the
-                    Proxmox VE Shell
-                </p>
-            )}
+          {renderInstructions()}
+          <CodeCopyButton>{getInstallCommand(defaultScript.script)}</CodeCopyButton>
         </>
-    );
-
-    return (
-        <div className="p-4">
-            {alpineScript ? (
-                <Tabs defaultValue="default" className="mt-2 w-full max-w-4xl">
-                    <TabsList>
-                        <TabsTrigger value="default">Default</TabsTrigger>
-                        <TabsTrigger value="alpine">Alpine Linux</TabsTrigger>
-                    </TabsList>
-                    <TabsContent value="default">
-                        {renderInstructions()}
-                        <CodeCopyButton>
-                            {getInstallCommand(defaultScript?.script)}
-                        </CodeCopyButton>
-                    </TabsContent>
-                    <TabsContent value="alpine">
-                        {renderInstructions(true)}
-                        <CodeCopyButton>
-                            {getInstallCommand(alpineScript.script, true)}
-                        </CodeCopyButton>
-                    </TabsContent>
-                </Tabs>
-            ) : defaultScript?.script ? (
-                <>
-                    {renderInstructions()}
-                    <CodeCopyButton>
-                        {getInstallCommand(defaultScript.script)}
-                    </CodeCopyButton>
-                </>
-            ) : null}
-        </div>
-    );
+      ) : null}
+    </div>
+  );
 }

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

@@ -4,39 +4,18 @@ import { Script } from "@/lib/types";
 import { cn } from "@/lib/utils";
 import { ClipboardIcon } from "lucide-react";
 
-const CopyButton = ({
-    label,
-    value,
-}: {
-    label: string;
-    value: string | number;
-}) => (
-    <span
-        className={cn(
-            buttonVariants({ size: "sm", variant: "secondary" }),
-            "flex items-center gap-2",
-        )}
-    >
-        {value}
-        <ClipboardIcon
-            onClick={() => handleCopy(label, String(value))}
-            className="size-4 cursor-pointer"
-        />
-    </span>
-);
-
 export default function InterFaces({ item }: { item: Script }) {
-    return (
-        <div className="flex flex-col gap-2">
-            {item.interface_port !== null ? (
-                <div className="flex items-center justify-end">
-                    <h2 className="mr-2 text-end text-l font-semibold">
-                        {"Default Interface:"}
-                    </h2>{" "}
-
-                    <CopyButton label="default interface" value={item.interface_port} />
-                </div>
-            ) : null}
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      {item.interface_port !== null ? (
+        <div className="flex items-center justify-end">
+          <h2 className="mr-2 text-end text-lg font-semibold">Default Interface:</h2>
+          <span className={cn(buttonVariants({ size: "sm", variant: "outline" }), "flex items-center gap-2")}>
+            {item.interface_port}
+            <ClipboardIcon onClick={() => handleCopy("default interface", String(item.interface_port))} className="size-4 cursor-pointer" />
+          </span>
         </div>
-    );
+      ) : null}
+    </div>
+  );
 }