- 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}.
{["username", "password"].map((type) => (
{type.charAt(0).toUpperCase() + type.slice(1)}:{" "}
-
diff --git a/frontend/src/app/scripts/_components/ScriptItems/DefaultSettings.tsx b/frontend/src/app/scripts/_components/ScriptItems/DefaultSettings.tsx
index bfa6175..33ae0b8 100644
--- a/frontend/src/app/scripts/_components/ScriptItems/DefaultSettings.tsx
+++ b/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 (
{title}
CPU: {cpu}vCPU
-
- RAM: {getDisplayValueFromRAM(ram ?? 0)}
-
+
RAM: {getDisplayValueFromRAM(ram ?? 0)}
HDD: {hdd}GB
);
};
- 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 && (
-
- )}
- {defaultAlpineSettings && (
-
- )}
-
+
+ {hasDefaultSettings && }
+ {defaultAlpineSettings && }
+
);
}
diff --git a/frontend/src/app/scripts/_components/ScriptItems/Description.tsx b/frontend/src/app/scripts/_components/ScriptItems/Description.tsx
index d87277d..6a09f0a 100644
--- a/frontend/src/app/scripts/_components/ScriptItems/Description.tsx
+++ b/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 (
Description
-
-
- Only use for testing, not in production!
-
-
+
{TextCopyBlock(item.description)}
diff --git a/frontend/src/app/scripts/_components/ScriptItems/InstallCommand.tsx b/frontend/src/app/scripts/_components/ScriptItems/InstallCommand.tsx
index 48b5a2a..ff95097 100644
--- a/frontend/src/app/scripts/_components/ScriptItems/InstallCommand.tsx
+++ b/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) => (
+ <>
+
+ {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.
+
+ )}
+
+ {isAlpine && (
+
+ To create a new Proxmox VE Alpine-{item.name} {getDisplayValueFromType(item.type)}, run the command below in
+ the Proxmox VE Shell.
+
+ )}
+
+ );
+
+ return (
+
+ {alpineScript ? (
+
+
+ Default
+ Alpine Linux
+
+
+ {renderInstructions()}
+ {getInstallCommand(defaultScript?.script)}
+
+
+ {renderInstructions(true)}
+ {getInstallCommand(alpineScript.script, true)}
+
+
+ ) : defaultScript?.script ? (
<>
-
- {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.
-
- )}
-
- {isAlpine && (
-
- To create a new Proxmox VE Alpine-{item.name}{" "}
- {getDisplayValueFromType(item.type)}, run the command below in the
- Proxmox VE Shell
-
- )}
+ {renderInstructions()}
+
{getInstallCommand(defaultScript.script)}
- );
-
- return (
-
- {alpineScript ? (
-
-
- Default
- Alpine Linux
-
-
- {renderInstructions()}
-
- {getInstallCommand(defaultScript?.script)}
-
-
-
- {renderInstructions(true)}
-
- {getInstallCommand(alpineScript.script, true)}
-
-
-
- ) : defaultScript?.script ? (
- <>
- {renderInstructions()}
-
- {getInstallCommand(defaultScript.script)}
-
-
- ) : null}
-
- );
+ ) : null}
+
+ );
}
diff --git a/frontend/src/app/scripts/_components/ScriptItems/InterFaces.tsx b/frontend/src/app/scripts/_components/ScriptItems/InterFaces.tsx
index ea4e6c0..d7ea148 100644
--- a/frontend/src/app/scripts/_components/ScriptItems/InterFaces.tsx
+++ b/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;
-}) => (
-
- {value}
- handleCopy(label, String(value))}
- className="size-4 cursor-pointer"
- />
-
-);
-
export default function InterFaces({ item }: { item: Script }) {
- return (
-
- {item.interface_port !== null ? (
-
-
- {"Default Interface:"}
-
{" "}
-
-
-
- ) : null}
+ return (
+
+ {item.interface_port !== null ? (
+
+
Default Interface:
+
+ {item.interface_port}
+ handleCopy("default interface", String(item.interface_port))} className="size-4 cursor-pointer" />
+
- );
+ ) : null}
+
+ );
}
diff --git a/frontend/src/app/scripts/_components/VersionBadge.tsx b/frontend/src/app/scripts/_components/VersionBadge.tsx
new file mode 100644
index 0000000..712893d
--- /dev/null
+++ b/frontend/src/app/scripts/_components/VersionBadge.tsx
@@ -0,0 +1,13 @@
+import { AppVersion } from "@/lib/types";
+
+interface VersionBadgeProps {
+ version: AppVersion;
+}
+
+export function VersionBadge({ version }: VersionBadgeProps) {
+ return (
+
+ {version.version}
+
+ );
+}
diff --git a/frontend/src/app/scripts/page.tsx b/frontend/src/app/scripts/page.tsx
index a02f80b..590b673 100644
--- a/frontend/src/app/scripts/page.tsx
+++ b/frontend/src/app/scripts/page.tsx
@@ -2,7 +2,7 @@
export const dynamic = "force-static";
-import ScriptItem from "@/app/scripts/_components/ScriptItem";
+import { ScriptItem } from "@/app/scripts/_components/ScriptItem";
import { fetchCategories } from "@/lib/data";
import { Category, Script } from "@/lib/types";
import { Loader2 } from "lucide-react";
diff --git a/frontend/src/lib/utils/resource-utils.ts b/frontend/src/lib/utils/resource-utils.ts
new file mode 100644
index 0000000..25e0966
--- /dev/null
+++ b/frontend/src/lib/utils/resource-utils.ts
@@ -0,0 +1,7 @@
+export function getDisplayValueFromRAM(ram: number): string {
+ return ram >= 1024 ? `${Math.floor(ram / 1024)}GB` : `${ram}MB`;
+}
+
+export function cleanSlug(slug: string): string {
+ return slug.replace(/[^a-z0-9]/gi, "").toLowerCase();
+}