Initial Release

frontend/src/app/api/categories/route.ts

@@ -0,0 +1,56 @@
+import { Metadata, Script } from "@/lib/types";
+import { promises as fs } from "fs";
+import { NextResponse } from "next/server";
+import path from "path";
+
+export const dynamic = "force-static";
+
+const jsonDir = "public/json";
+const metadataFileName = "metadata.json";
+const encoding = "utf-8";
+
+const getMetadata = async () => {
+  const filePath = path.resolve(jsonDir, metadataFileName);
+  const fileContent = await fs.readFile(filePath, encoding);
+  const metadata: Metadata = JSON.parse(fileContent);
+  return metadata;
+};
+
+const getScripts = async () => {
+  const filePaths = (await fs.readdir(jsonDir))
+    .filter((fileName) => fileName !== metadataFileName)
+    .map((fileName) => path.resolve(jsonDir, fileName));
+
+  const scripts = await Promise.all(
+    filePaths.map(async (filePath) => {
+      const fileContent = await fs.readFile(filePath, encoding);
+      const script: Script = JSON.parse(fileContent);
+      return script;
+    }),
+  );
+  return scripts;
+};
+
+export async function GET() {
+  try {
+    const metadata = await getMetadata();
+    const scripts = await getScripts();
+
+    const categories = metadata.categories
+      .map((category) => {
+        category.scripts = scripts.filter((script) =>
+          script.categories.includes(category.id),
+        );
+        return category;
+      })
+      .sort((a, b) => a.sort_order - b.sort_order);
+
+    return NextResponse.json(categories);
+  } catch (error) {
+    console.error(error as Error);
+    return NextResponse.json(
+      { error: "Failed to fetch categories" },
+      { status: 500 },
+    );
+  }
+}

frontend/src/app/category-view/page.tsx

@@ -0,0 +1,276 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Category } from "@/lib/types";
+
+const defaultLogo = "/default-logo.png"; // Fallback logo path
+const MAX_DESCRIPTION_LENGTH = 100; // Set max length for description
+const MAX_LOGOS = 5; // Max logos to display at once
+
+const formattedBadge = (type: string) => {
+  switch (type) {
+    case "vm":
+      return <Badge className="text-blue-500/75 border-blue-500/75 badge">VM</Badge>;
+    case "ct":
+      return (
+        <Badge className="text-yellow-500/75 border-yellow-500/75 badge">LXC</Badge>
+      );
+    case "misc":
+      return <Badge className="text-green-500/75 border-green-500/75 badge">MISC</Badge>;
+  }
+  return null;
+};
+
+const CategoryView = () => {
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [selectedCategoryIndex, setSelectedCategoryIndex] = useState<number | null>(null);
+  const [currentScripts, setCurrentScripts] = useState<any[]>([]);
+  const [logoIndices, setLogoIndices] = useState<{ [key: string]: number }>({});
+  const router = useRouter();
+
+  useEffect(() => {
+    const fetchCategories = async () => {
+      try {
+        const basePath = process.env.NODE_ENV === "production" ? "/ProxmoxVE" : "";
+        const response = await fetch(`${basePath}/api/categories`);
+        if (!response.ok) {
+          throw new Error("Failed to fetch categories");
+        }
+        const data = await response.json();
+        setCategories(data);
+
+        // Initialize logo indices
+        const initialLogoIndices: { [key: string]: number } = {};
+        data.forEach((category: any) => {
+          initialLogoIndices[category.name] = 0;
+        });
+        setLogoIndices(initialLogoIndices);
+      } catch (error) {
+        console.error("Error fetching categories:", error);
+      }
+    };
+
+    fetchCategories();
+  }, []);
+
+  const handleCategoryClick = (index: number) => {
+    setSelectedCategoryIndex(index);
+    setCurrentScripts(categories[index]?.scripts || []); // Update scripts for the selected category
+  };
+
+  const handleBackClick = () => {
+    setSelectedCategoryIndex(null);
+    setCurrentScripts([]); // Clear scripts when going back
+  };
+
+  const handleScriptClick = (scriptSlug: string) => {
+    router.push(`/scripts?id=${scriptSlug}`);
+  };
+
+  const navigateCategory = (direction: "prev" | "next") => {
+    if (selectedCategoryIndex !== null) {
+      const newIndex =
+        direction === "prev"
+          ? (selectedCategoryIndex - 1 + categories.length) % categories.length
+          : (selectedCategoryIndex + 1) % categories.length;
+      setSelectedCategoryIndex(newIndex);
+      setCurrentScripts(categories[newIndex]?.scripts || []); // Update scripts for the new category
+    }
+  };
+
+  const switchLogos = (categoryName: string, direction: "prev" | "next") => {
+    setLogoIndices((prev) => {
+      const currentIndex = prev[categoryName] || 0;
+      const category = categories.find((cat) => cat.name === categoryName);
+      if (!category || !category.scripts) return prev;
+
+      const totalLogos = category.scripts.length;
+      const newIndex =
+        direction === "prev"
+          ? (currentIndex - MAX_LOGOS + totalLogos) % totalLogos
+          : (currentIndex + MAX_LOGOS) % totalLogos;
+
+      return { ...prev, [categoryName]: newIndex };
+    });
+  };
+
+  const truncateDescription = (text: string) => {
+    return text.length > MAX_DESCRIPTION_LENGTH
+      ? `${text.slice(0, MAX_DESCRIPTION_LENGTH)}...`
+      : text;
+  };
+
+  const renderResources = (script: any) => {
+    const cpu = script.install_methods[0]?.resources.cpu;
+    const ram = script.install_methods[0]?.resources.ram;
+    const hdd = script.install_methods[0]?.resources.hdd;
+
+    const resourceParts = [];
+    if (cpu) resourceParts.push(<span key="cpu"><b>CPU:</b> {cpu}vCPU</span>);
+    if (ram) resourceParts.push(<span key="ram"><b>RAM:</b> {ram}MB</span>);
+    if (hdd) resourceParts.push(<span key="hdd"><b>HDD:</b> {hdd}GB</span>);
+
+    return resourceParts.length > 0 ? (
+      <div className="text-sm text-gray-400">
+        {resourceParts.map((part, index) => (
+          <React.Fragment key={index}>
+            {part}
+            {index < resourceParts.length - 1 && " | "}
+          </React.Fragment>
+        ))}
+      </div>
+    ) : null;
+  };
+
+  return (
+    <div className="p-6 mt-20">
+      {categories.length === 0 && (
+        <p className="text-center text-gray-500">No categories available. Please check the API endpoint.</p>
+      )}
+      {selectedCategoryIndex !== null ? (
+        <div>
+          {/* Header with Navigation */}
+          <div className="flex items-center justify-between mb-6">
+            <Button
+              variant="ghost"
+              onClick={() => navigateCategory("prev")}
+              className="p-2 transition-transform duration-300 hover:scale-105"
+            >
+              <ChevronLeft className="h-6 w-6" />
+            </Button>
+            <h2 className="text-3xl font-semibold transition-opacity duration-300 hover:opacity-90">
+              {categories[selectedCategoryIndex].name}
+            </h2>
+            <Button
+              variant="ghost"
+              onClick={() => navigateCategory("next")}
+              className="p-2 transition-transform duration-300 hover:scale-105"
+            >
+              <ChevronRight className="h-6 w-6" />
+            </Button>
+          </div>
+
+          {/* Scripts Grid */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+            {currentScripts
+              .sort((a, b) => a.name.localeCompare(b.name))
+              .map((script) => (
+                <Card
+                  key={script.name}
+                  className="p-4 cursor-pointer hover:shadow-md transition-shadow duration-300"
+                  onClick={() => handleScriptClick(script.slug)}
+                >
+                  <CardContent className="flex flex-col gap-4">
+                    <h3 className="text-lg font-bold script-text text-center hover:text-blue-600 transition-colors duration-300">
+                      {script.name}
+                    </h3>
+                    <img
+                      src={script.logo || defaultLogo}
+                      alt={script.name || "Script logo"}
+                      className="h-12 w-12 object-contain mx-auto"
+                    />
+                    <p className="text-sm text-gray-500 text-center">
+                      <b>Created at:</b> {script.date_created || "No date available"}
+                    </p>
+                    <p
+                      className="text-sm text-gray-700 hover:text-gray-900 text-center transition-colors duration-300"
+                      title={script.description || "No description available."}
+                    >
+                      {truncateDescription(script.description || "No description available.")}
+                    </p>
+                    {renderResources(script)}
+                  </CardContent>
+                </Card>
+              ))}
+          </div>
+
+          {/* Back to Categories Button */}
+          <div className="mt-8 text-center">
+            <Button
+              variant="default"
+              onClick={handleBackClick}
+              className="px-6 py-2 text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow-md transition-transform duration-300 hover:scale-105"
+            >
+              Back to Categories
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <div>
+          {/* Categories Grid */}
+          <div className="flex justify-between items-center mb-8">
+            <h1 className="text-3xl font-semibold mb-4">Categories</h1>
+            <p className="text-sm text-gray-500">
+              {categories.reduce((total, category) => total + (category.scripts?.length || 0), 0)} Total scripts
+            </p>
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
+            {categories.map((category, index) => (
+              <Card
+                key={category.name}
+                onClick={() => handleCategoryClick(index)}
+                className="cursor-pointer hover:shadow-lg flex flex-col items-center justify-center py-6 transition-shadow duration-300"
+              >
+                <CardContent className="flex flex-col items-center">
+                  <h3 className="text-xl font-bold mb-4 category-title transition-colors duration-300 hover:text-blue-600">
+                    {category.name}
+                  </h3>
+                  <div className="flex justify-center items-center gap-2 mb-4">
+                    <Button
+                      variant="ghost"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        switchLogos(category.name, "prev");
+                      }}
+                      className="p-1 transition-transform duration-300 hover:scale-110"
+                    >
+                      <ChevronLeft className="h-4 w-4" />
+                    </Button>
+                    {category.scripts &&
+                      category.scripts
+                        .slice(logoIndices[category.name] || 0, (logoIndices[category.name] || 0) + MAX_LOGOS)
+                        .map((script, i) => (
+                          <div key={i} className="flex flex-col items-center">
+                            <img
+                              src={script.logo || defaultLogo}
+                              alt={script.name || "Script logo"}
+                              title={script.name}
+                              className="h-8 w-8 object-contain cursor-pointer"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleScriptClick(script.slug);
+                              }}
+                            />
+                            {formattedBadge(script.type)}
+                          </div>
+                        ))}
+                    <Button
+                      variant="ghost"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        switchLogos(category.name, "next");
+                      }}
+                      className="p-1 transition-transform duration-300 hover:scale-110"
+                    >
+                      <ChevronRight className="h-4 w-4" />
+                    </Button>
+                  </div>
+                  <p className="text-sm text-gray-400 text-center">
+                    {(category as any).description || "No description available."}
+                  </p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CategoryView;

frontend/src/app/data/page.tsx

@@ -0,0 +1,198 @@
+"use client";
+
+import React, { JSX, useEffect, useState } from "react";
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import ApplicationChart from "../../components/ApplicationChart";
+
+interface DataModel {
+  id: number;
+  ct_type: number;
+  disk_size: number;
+  core_count: number;
+  ram_size: number;
+  os_type: string;
+  os_version: string;
+  disableip6: string;
+  nsapp: string;
+  created_at: string;
+  method: string;
+  pve_version: string;
+  status: string;
+  error: string;
+  type: string;
+  [key: string]: any;
+}
+
+interface SummaryData {
+  total_entries: number;
+  status_count: Record<string, number>;
+  nsapp_count: Record<string, number>;
+}
+
+const DataFetcher: React.FC = () => {
+  const [data, setData] = useState<DataModel[]>([]);
+  const [summary, setSummary] = useState<SummaryData | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useState(25);
+  const [sortConfig, setSortConfig] = useState<{ key: string; direction: 'ascending' | 'descending' } | null>(null);
+
+  useEffect(() => {
+    const fetchSummary = async () => {
+      try {
+        const response = await fetch("https://api.htl-braunau.at/data/summary");
+        if (!response.ok) throw new Error(`Failed to fetch summary: ${response.statusText}`);
+        const result: SummaryData = await response.json();
+        setSummary(result);
+      } catch (err) {
+        setError((err as Error).message);
+      }
+    };
+
+    fetchSummary();
+  }, []);
+
+  useEffect(() => {
+    const fetchPaginatedData = async () => {
+      setLoading(true);
+      try {
+        const response = await fetch(`https://api.htl-braunau.at/data/paginated?page=${currentPage}&limit=${itemsPerPage === 0 ? '' : itemsPerPage}`);
+        if (!response.ok) throw new Error(`Failed to fetch data: ${response.statusText}`);
+        const result: DataModel[] = await response.json();
+        setData(result);
+      } catch (err) {
+        setError((err as Error).message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchPaginatedData();
+  }, [currentPage, itemsPerPage]);
+
+  const sortedData = React.useMemo(() => {
+    if (!sortConfig) return data;
+    const sorted = [...data].sort((a, b) => {
+      if (a[sortConfig.key] < b[sortConfig.key]) {
+        return sortConfig.direction === 'ascending' ? -1 : 1;
+      }
+      if (a[sortConfig.key] > b[sortConfig.key]) {
+        return sortConfig.direction === 'ascending' ? 1 : -1;
+      }
+      return 0;
+    });
+    return sorted;
+  }, [data, sortConfig]);
+
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error: {error}</p>;
+
+  const requestSort = (key: string) => {
+    let direction: 'ascending' | 'descending' = 'ascending';
+    if (sortConfig && sortConfig.key === key && sortConfig.direction === 'ascending') {
+      direction = 'descending';
+    }
+    setSortConfig({ key, direction });
+  };
+
+  const formatDate = (dateString: string): string => {
+    const date = new Date(dateString);
+    const year = date.getFullYear();
+    const month = date.getMonth() + 1;
+    const day = date.getDate();
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const timezoneOffset = dateString.slice(-6);
+    return `${day}.${month}.${year} ${hours}:${minutes} ${timezoneOffset} GMT`;
+  };
+
+  return (
+    <div className="p-6 mt-20">
+      <h1 className="text-2xl font-bold mb-4 text-center">Created LXCs</h1>
+      <ApplicationChart data={summary} />
+      <p className="text-lg font-bold mt-4"> </p>
+      <div className="mb-4 flex justify-between items-center">
+        <p className="text-lg font-bold">{summary?.total_entries} results found</p>
+        <p className="text-lg font">Status Legend: 🔄 installing {summary?.status_count["installing"] ?? 0} | ✔️ completed {summary?.status_count["done"] ?? 0} | ❌ failed {summary?.status_count["failed"] ?? 0} | ❓ unknown</p>
+      </div>      
+      <div className="overflow-x-auto">
+        <div className="overflow-y-auto lg:overflow-y-visible">
+          <table className="min-w-full table-auto border-collapse">
+            <thead>
+              <tr>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('status')}>Status</th>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('type')}>Type</th>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('nsapp')}>Application</th>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('os_type')}>OS</th>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('os_version')}>OS Version</th>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('disk_size')}>Disk Size</th>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('core_count')}>Core Count</th>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('ram_size')}>RAM Size</th>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('method')}>Method</th>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('pve_version')}>PVE Version</th>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('error')}>Error Message</th>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('created_at')}>Created At</th>
+              </tr>
+            </thead>
+            <tbody>
+              {sortedData.map((item, index) => (
+                <tr key={index}>
+                  <td className="px-4 py-2 border-b">
+                    {item.status === "done" ? (
+                      "✔️"
+                    ) : item.status === "failed" ? (
+                      "❌"
+                    ) : item.status === "installing" ? (
+                      "🔄"
+                    ) : (
+                      item.status
+                    )}
+                  </td>
+                  <td className="px-4 py-2 border-b">{item.type === "lxc" ? (
+                    "📦"
+                  ) : item.type === "vm" ? (
+                    "🖥️"
+                  ) : (
+                    item.type
+                  )}</td>
+                  <td className="px-4 py-2 border-b">{item.nsapp}</td>
+                  <td className="px-4 py-2 border-b">{item.os_type}</td>
+                  <td className="px-4 py-2 border-b">{item.os_version}</td>
+                  <td className="px-4 py-2 border-b">{item.disk_size}</td>
+                  <td className="px-4 py-2 border-b">{item.core_count}</td>
+                  <td className="px-4 py-2 border-b">{item.ram_size}</td>
+                  <td className="px-4 py-2 border-b">{item.method}</td>
+                  <td className="px-4 py-2 border-b">{item.pve_version}</td>
+                  <td className="px-4 py-2 border-b">{item.error}</td>
+                  <td className="px-4 py-2 border-b">{formatDate(item.created_at)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div className="mt-4 flex justify-between items-center">
+        <button onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))} disabled={currentPage === 1} className="p-2 border">Previous</button>
+        <span>Page {currentPage}</span>
+        <button onClick={() => setCurrentPage(prev => prev + 1)} className="p-2 border">Next</button>
+        <select
+          value={itemsPerPage}
+          onChange={(e) => setItemsPerPage(Number(e.target.value))}
+          className="p-2 border"
+        >
+          <option value={10}>10</option>
+          <option value={20}>20</option>
+          <option value={50}>50</option>
+          <option value={100}>100</option>
+          <option value={250}>250</option>
+          <option value={500}>500</option>
+          <option value={5000}>5000</option>
+        </select>
+      </div>
+    </div>
+  );
+};
+
+export default DataFetcher;

frontend/src/app/json-editor/_components/Categories.tsx

@@ -0,0 +1,117 @@
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Category } from "@/lib/types";
+import { cn } from "@/lib/utils";
+import { z } from "zod";
+import { type Script } from "../_schemas/schemas";
+import { memo } from "react";
+
+type CategoryProps = {
+  script: Script;
+  setScript: (script: Script) => void;
+  setIsValid: (isValid: boolean) => void;
+  setZodErrors: (zodErrors: z.ZodError | null) => void;
+  categories: Category[];
+};
+
+const CategoryTag = memo(({ 
+  category, 
+  onRemove 
+}: { 
+  category: Category;
+  onRemove: () => void;
+}) => (
+  <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+    {category.name}
+    <button
+      type="button"
+      className="ml-1 inline-flex text-blue-400 hover:text-blue-600"
+      onClick={onRemove}
+    >
+      <span className="sr-only">Remove</span>
+      <svg
+        className="h-3 w-3"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M6 18L18 6M6 6l12 12"
+        />
+      </svg>
+    </button>
+  </span>
+));
+
+CategoryTag.displayName = 'CategoryTag';
+
+function Categories({
+  script,
+  setScript,
+  categories,
+}: Omit<CategoryProps, "setIsValid" | "setZodErrors">) {
+  const addCategory = (categoryId: number) => {
+    setScript({
+      ...script,
+      categories: [...new Set([...script.categories, categoryId])],
+    });
+  };
+
+  const removeCategory = (categoryId: number) => {
+    setScript({
+      ...script,
+      categories: script.categories.filter((id: number) => id !== categoryId),
+    });
+  };
+
+  const categoryMap = new Map(categories.map(c => [c.id, c]));
+
+  return (
+    <div>
+      <Label>
+        Category <span className="text-red-500">*</span>
+      </Label>
+      <Select onValueChange={(value) => addCategory(Number(value))}>
+        <SelectTrigger>
+          <SelectValue placeholder="Select a category" />
+        </SelectTrigger>
+        <SelectContent>
+          {categories.map((category) => (
+            <SelectItem key={category.id} value={category.id.toString()}>
+              {category.name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <div
+        className={cn(
+          "flex flex-wrap gap-2",
+          script.categories.length !== 0 && "mt-2",
+        )}
+      >
+        {script.categories.map((categoryId) => {
+          const category = categoryMap.get(categoryId);
+          return category ? (
+            <CategoryTag
+              key={categoryId}
+              category={category}
+              onRemove={() => removeCategory(categoryId)}
+            />
+          ) : null;
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default memo(Categories);

frontend/src/app/json-editor/_components/InstallMethod.tsx

@@ -0,0 +1,240 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { OperatingSystems } from "@/config/siteConfig";
+import { PlusCircle, Trash2 } from "lucide-react";
+import { memo, useCallback, useRef } from "react";
+import { z } from "zod";
+import { InstallMethodSchema, ScriptSchema, type Script } from "../_schemas/schemas";
+
+type InstallMethodProps = {
+  script: Script;
+  setScript: (value: Script | ((prevState: Script) => Script)) => void;
+  setIsValid: (isValid: boolean) => void;
+  setZodErrors: (zodErrors: z.ZodError | null) => void;
+};
+
+function InstallMethod({
+  script,
+  setScript,
+  setIsValid,
+  setZodErrors,
+}: InstallMethodProps) {
+  const cpuRefs = useRef<(HTMLInputElement | null)[]>([]);
+  const ramRefs = useRef<(HTMLInputElement | null)[]>([]);
+  const hddRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+  const addInstallMethod = useCallback(() => {
+    setScript((prev) => {
+      const method = InstallMethodSchema.parse({
+        type: "default",
+        script: `${prev.type}/${prev.slug}.sh`,
+        resources: {
+          cpu: null,
+          ram: null,
+          hdd: null,
+          os: null,
+          version: null,
+        },
+      });
+      return {
+        ...prev,
+        install_methods: [...prev.install_methods, method],
+      };
+    });
+  }, [setScript]);
+
+  const updateInstallMethod = useCallback(
+    (
+      index: number,
+      key: keyof Script["install_methods"][number],
+      value: Script["install_methods"][number][keyof Script["install_methods"][number]],
+    ) => {
+      setScript((prev) => {
+        const updatedMethods = prev.install_methods.map((method, i) => {
+          if (i === index) {
+            const updatedMethod = { ...method, [key]: value };
+
+            if (key === "type") {
+              updatedMethod.script =
+                value === "alpine"
+                  ? `${prev.type}/alpine-${prev.slug}.sh`
+                  : `${prev.type}/${prev.slug}.sh`;
+
+              // Set OS to Alpine and reset version if type is alpine
+              if (value === "alpine") {
+                updatedMethod.resources.os = "Alpine";
+                updatedMethod.resources.version = null;
+              }
+            }
+
+            return updatedMethod;
+          }
+          return method;
+        });
+
+        const updated = {
+          ...prev,
+          install_methods: updatedMethods,
+        };
+
+        const result = ScriptSchema.safeParse(updated);
+        setIsValid(result.success);
+        if (!result.success) {
+          setZodErrors(result.error);
+        } else {
+          setZodErrors(null);
+        }
+        return updated;
+      });
+    },
+    [setScript, setIsValid, setZodErrors],
+  );
+
+  const removeInstallMethod = useCallback(
+    (index: number) => {
+      setScript((prev) => ({
+        ...prev,
+        install_methods: prev.install_methods.filter((_, i) => i !== index),
+      }));
+    },
+    [setScript],
+  );
+
+  return (
+    <>
+      <h3 className="text-xl font-semibold">Install Methods</h3>
+      {script.install_methods.map((method, index) => (
+        <div key={index} className="space-y-2 border p-4 rounded">
+          <Select
+            value={method.type}
+            onValueChange={(value) => updateInstallMethod(index, "type", value)}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="Type" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="default">Default</SelectItem>
+              <SelectItem value="alpine">Alpine</SelectItem>
+            </SelectContent>
+          </Select>
+          <div className="flex gap-2">
+            <Input
+              ref={(el) => {
+                cpuRefs.current[index] = el;
+              }}
+              placeholder="CPU in Cores"
+              type="number"
+              value={method.resources.cpu || ""}
+              onChange={(e) =>
+                updateInstallMethod(index, "resources", {
+                  ...method.resources,
+                  cpu: e.target.value ? Number(e.target.value) : null,
+                })
+              }
+            />
+            <Input
+              ref={(el) => {
+                ramRefs.current[index] = el;
+              }}
+              placeholder="RAM in MB"
+              type="number"
+              value={method.resources.ram || ""}
+              onChange={(e) =>
+                updateInstallMethod(index, "resources", {
+                  ...method.resources,
+                  ram: e.target.value ? Number(e.target.value) : null,
+                })
+              }
+            />
+            <Input
+              ref={(el) => {
+                hddRefs.current[index] = el;
+              }}
+              placeholder="HDD in GB"
+              type="number"
+              value={method.resources.hdd || ""}
+              onChange={(e) =>
+                updateInstallMethod(index, "resources", {
+                  ...method.resources,
+                  hdd: e.target.value ? Number(e.target.value) : null,
+                })
+              }
+            />
+          </div>
+          <div className="flex gap-2">
+            <Select
+              value={method.resources.os || undefined}
+              onValueChange={(value) =>
+                updateInstallMethod(index, "resources", {
+                  ...method.resources,
+                  os: value || null,
+                  version: null, // Reset version when OS changes
+                })
+              }
+              disabled={method.type === "alpine"}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="OS" />
+              </SelectTrigger>
+              <SelectContent>
+                {OperatingSystems.map((os) => (
+                  <SelectItem key={os.name} value={os.name}>
+                    {os.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Select
+              value={method.resources.version || undefined}
+              onValueChange={(value) =>
+                updateInstallMethod(index, "resources", {
+                  ...method.resources,
+                  version: value || null,
+                })
+              }
+              disabled={method.type === "alpine"}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Version" />
+              </SelectTrigger>
+              <SelectContent>
+                {OperatingSystems.find(
+                  (os) => os.name === method.resources.os,
+                )?.versions.map((version) => (
+                  <SelectItem key={version.slug} value={version.name}>
+                    {version.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <Button
+            variant="destructive"
+            size="sm"
+            type="button"
+            onClick={() => removeInstallMethod(index)}
+          >
+            <Trash2 className="mr-2 h-4 w-4" /> Remove Install Method
+          </Button>
+        </div>
+      ))}
+      <Button
+        type="button"
+        size="sm"
+        disabled={script.install_methods.length >= 2}
+        onClick={addInstallMethod}
+      >
+        <PlusCircle className="mr-2 h-4 w-4" /> Add Install Method
+      </Button>
+    </>
+  );
+}
+
+export default memo(InstallMethod);

frontend/src/app/json-editor/_components/Note.tsx

@@ -0,0 +1,130 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { AlertColors } from "@/config/siteConfig";
+import { cn } from "@/lib/utils";
+import { PlusCircle, Trash2 } from "lucide-react";
+import { z } from "zod";
+import { ScriptSchema, type Script } from "../_schemas/schemas";
+import { memo, useCallback, useRef } from "react";
+
+type NoteProps = {
+  script: Script;
+  setScript: (script: Script) => void;
+  setIsValid: (isValid: boolean) => void;
+  setZodErrors: (zodErrors: z.ZodError | null) => void;
+};
+
+function Note({
+  script,
+  setScript,
+  setIsValid,
+  setZodErrors,
+}: NoteProps) {
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+  const addNote = useCallback(() => {
+    setScript({
+      ...script,
+      notes: [...script.notes, { text: "", type: "" }],
+    });
+  }, [script, setScript]);
+
+  const updateNote = useCallback((
+    index: number,
+    key: keyof Script["notes"][number],
+    value: string,
+  ) => {
+    const updated: Script = {
+      ...script,
+      notes: script.notes.map((note, i) =>
+        i === index ? { ...note, [key]: value } : note,
+      ),
+    };
+    const result = ScriptSchema.safeParse(updated);
+    setIsValid(result.success);
+    setZodErrors(result.success ? null : result.error);
+    setScript(updated);
+    // Restore focus after state update
+    if (key === "text") {
+      setTimeout(() => {
+        inputRefs.current[index]?.focus();
+      }, 0);
+    }
+  }, [script, setScript, setIsValid, setZodErrors]);
+
+  const removeNote = useCallback((index: number) => {
+    setScript({
+      ...script,
+      notes: script.notes.filter((_, i) => i !== index),
+    });
+  }, [script, setScript]);
+
+  const NoteItem = memo(
+    ({ note, index }: { note: Script["notes"][number]; index: number }) => (
+      <div className="space-y-2 border p-4 rounded">
+        <Input
+          placeholder="Note Text"
+          value={note.text}
+          onChange={(e) => updateNote(index, "text", e.target.value)}
+          ref={(el) => {
+            inputRefs.current[index] = el;
+          }}
+        />
+        <Select
+          value={note.type}
+          onValueChange={(value) => updateNote(index, "type", value)}
+        >
+          <SelectTrigger className="flex-1">
+            <SelectValue placeholder="Type" />
+          </SelectTrigger>
+          <SelectContent>
+            {Object.keys(AlertColors).map((type) => (
+              <SelectItem key={type} value={type}>
+                <span className="flex items-center gap-2">
+                  {type.charAt(0).toUpperCase() + type.slice(1)}{" "}
+                  <div
+                    className={cn(
+                      "size-4 rounded-full border",
+                      AlertColors[type as keyof typeof AlertColors],
+                    )}
+                  />
+                </span>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Button
+          size="sm"
+          variant="destructive"
+          type="button"
+          onClick={() => removeNote(index)}
+        >
+          <Trash2 className="mr-2 h-4 w-4" /> Remove Note
+        </Button>
+      </div>
+    ),
+  );
+
+  NoteItem.displayName = 'NoteItem';
+
+  return (
+    <>
+      <h3 className="text-xl font-semibold">Notes</h3>
+      {script.notes.map((note, index) => (
+        <NoteItem key={index} note={note} index={index} />
+      ))}
+      <Button type="button" size="sm" onClick={addNote}>
+        <PlusCircle className="mr-2 h-4 w-4" /> Add Note
+      </Button>
+    </>
+  );
+}
+
+export default memo(Note);

frontend/src/app/json-editor/_schemas/schemas.ts

@@ -0,0 +1,45 @@
+import { z } from "zod";
+
+export const InstallMethodSchema = z.object({
+  type: z.enum(["default", "alpine"], {
+    errorMap: () => ({ message: "Type must be either 'default' or 'alpine'" })
+  }),
+  script: z.string().min(1, "Script content cannot be empty"),
+  resources: z.object({
+    cpu: z.number().nullable(),
+    ram: z.number().nullable(),
+    hdd: z.number().nullable(),
+    os: z.string().nullable(),
+    version: z.string().nullable(),
+  }),
+});
+
+const NoteSchema = z.object({
+  text: z.string().min(1, "Note text cannot be empty"),
+  type: z.string().min(1, "Note type cannot be empty"),
+});
+
+export const ScriptSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  slug: z.string().min(1, "Slug is required"),
+  categories: z.array(z.number()),
+  date_created: z.string().regex(/^\d{4}-\d{2}-\d{2}$/, "Date must be in YYYY-MM-DD format").min(1, "Date is required"),
+  type: z.enum(["vm", "ct", "misc", "turnkey"], {
+    errorMap: () => ({ message: "Type must be either 'vm', 'ct', 'misc' or 'turnkey'" })
+  }),
+  updateable: z.boolean(),
+  privileged: z.boolean(),
+  interface_port: z.number().nullable(),
+  documentation: z.string().nullable(),
+  website: z.string().url().nullable(),
+  logo: z.string().url().nullable(),
+  description: z.string().min(1, "Description is required"),
+  install_methods: z.array(InstallMethodSchema).min(1, "At least one install method is required"),
+  default_credentials: z.object({
+    username: z.string().nullable(),
+    password: z.string().nullable(),
+  }),
+  notes: z.array(NoteSchema),
+});
+
+export type Script = z.infer<typeof ScriptSchema>;

frontend/src/app/json-editor/page.tsx

@@ -0,0 +1,355 @@
+"use client";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { fetchCategories } from "@/lib/data";
+import { Category } from "@/lib/types";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import { CalendarIcon, Check, Clipboard, Download } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { z } from "zod";
+import Categories from "./_components/Categories";
+import InstallMethod from "./_components/InstallMethod";
+import Note from "./_components/Note";
+import { ScriptSchema, type Script } from "./_schemas/schemas";
+
+const initialScript: Script = {
+  name: "",
+  slug: "",
+  categories: [],
+  date_created: "",
+  type: "ct",
+  updateable: false,
+  privileged: false,
+  interface_port: null,
+  documentation: null,
+  website: null,
+  logo: null,
+  description: "",
+  install_methods: [],
+  default_credentials: {
+    username: null,
+    password: null,
+  },
+  notes: [],
+};
+
+export default function JSONGenerator() {
+  const [script, setScript] = useState<Script>(initialScript);
+  const [isCopied, setIsCopied] = useState(false);
+  const [isValid, setIsValid] = useState(false);
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [zodErrors, setZodErrors] = useState<z.ZodError | null>(null);
+
+  useEffect(() => {
+    fetchCategories()
+      .then(setCategories)
+      .catch((error) => console.error("Error fetching categories:", error));
+  }, []);
+
+  const updateScript = useCallback(
+    (key: keyof Script, value: Script[keyof Script]) => {
+      setScript((prev) => {
+        const updated = { ...prev, [key]: value };
+
+        if (key === "type" || key === "slug") {
+          updated.install_methods = updated.install_methods.map((method) => ({
+            ...method,
+            script:
+              method.type === "alpine"
+                ? `${updated.type}/alpine-${updated.slug}.sh`
+                : `${updated.type}/${updated.slug}.sh`,
+          }));
+        }
+
+        const result = ScriptSchema.safeParse(updated);
+        setIsValid(result.success);
+        setZodErrors(result.success ? null : result.error);
+        return updated;
+      });
+    },
+    [],
+  );
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(JSON.stringify(script, null, 2));
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), 2000);
+    toast.success("Copied metadata to clipboard");
+  }, [script]);
+
+  const handleDownload = useCallback(() => {
+    const jsonString = JSON.stringify(script, null, 2);
+    const blob = new Blob([jsonString], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+  
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${script.slug || "script"}.json`;
+    document.body.appendChild(a);
+    a.click();
+  
+    URL.revokeObjectURL(url);
+    document.body.removeChild(a);
+  }, [script]);
+
+  const handleDateSelect = useCallback(
+    (date: Date | undefined) => {
+      updateScript("date_created", format(date || new Date(), "yyyy-MM-dd"));
+    },
+    [updateScript],
+  );
+
+  const formattedDate = useMemo(
+    () =>
+      script.date_created ? format(script.date_created, "PPP") : undefined,
+    [script.date_created],
+  );
+
+  const validationAlert = useMemo(
+    () => (
+      <Alert
+        className={cn("text-black", isValid ? "bg-green-100" : "bg-red-100")}
+      >
+        <AlertTitle>{isValid ? "Valid JSON" : "Invalid JSON"}</AlertTitle>
+        <AlertDescription>
+          {isValid
+            ? "The current JSON is valid according to the schema."
+            : "The current JSON does not match the required schema."}
+        </AlertDescription>
+        {zodErrors && (
+          <div className="mt-2 space-y-1">
+            {zodErrors.errors.map((error, index) => (
+              <AlertDescription key={index} className="p-1 text-red-500">
+                {error.path.join(".")} - {error.message}
+              </AlertDescription>
+            ))}
+          </div>
+        )}
+      </Alert>
+    ),
+    [isValid, zodErrors],
+  );
+
+  return (
+    <div className="flex h-screen mt-20">
+      <div className="w-1/2 p-4 overflow-y-auto">
+        <h2 className="text-2xl font-bold mb-4">JSON Generator</h2>
+        <form className="space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label>
+                Name <span className="text-red-500">*</span>
+              </Label>
+              <Input
+                placeholder="Example"
+                value={script.name}
+                onChange={(e) => updateScript("name", e.target.value)}
+              />
+            </div>
+            <div>
+              <Label>
+                Slug <span className="text-red-500">*</span>
+              </Label>
+              <Input
+                placeholder="example"
+                value={script.slug}
+                onChange={(e) => updateScript("slug", e.target.value)}
+              />
+            </div>
+          </div>
+          <div>
+            <Label>
+              Logo <span className="text-red-500">*</span>
+            </Label>
+            <Input
+              placeholder="Full logo URL"
+              value={script.logo || ""}
+              onChange={(e) => updateScript("logo", e.target.value || null)}
+            />
+          </div>
+          <div>
+            <Label>
+              Description <span className="text-red-500">*</span>
+            </Label>
+            <Textarea
+              placeholder="Example"
+              value={script.description}
+              onChange={(e) => updateScript("description", e.target.value)}
+            />
+          </div>
+          <Categories
+            script={script}
+            setScript={setScript}
+            categories={categories}
+          />
+          <div className="flex gap-2">
+            <div className="flex flex-col gap-2 w-full">
+              <Label>Date Created</Label>
+              <Popover>
+                <PopoverTrigger asChild className="flex-1">
+                  <Button
+                    variant={"outline"}
+                    className={cn(
+                      "pl-3 text-left font-normal w-full",
+                      !script.date_created && "text-muted-foreground",
+                    )}
+                  >
+                    {formattedDate || <span>Pick a date</span>}
+                    <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="start">
+                  <Calendar
+                    mode="single"
+                    selected={new Date(script.date_created)}
+                    onSelect={handleDateSelect}
+                    initialFocus
+                  />
+                </PopoverContent>
+              </Popover>
+            </div>
+            <div className="flex flex-col gap-2 w-full">
+              <Label>Type</Label>
+              <Select
+                value={script.type}
+                onValueChange={(value) => updateScript("type", value)}
+              >
+                <SelectTrigger className="flex-1">
+                  <SelectValue placeholder="Type" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="ct">LXC Container</SelectItem>
+                  <SelectItem value="vm">Virtual Machine</SelectItem>
+                  <SelectItem value="misc">Miscellaneous</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div className="w-full flex gap-5">
+            <div className="flex items-center space-x-2">
+              <Switch
+                checked={script.updateable}
+                onCheckedChange={(checked) =>
+                  updateScript("updateable", checked)
+                }
+              />
+              <label>Updateable</label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Switch
+                checked={script.privileged}
+                onCheckedChange={(checked) =>
+                  updateScript("privileged", checked)
+                }
+              />
+              <label>Privileged</label>
+            </div>
+          </div>
+          <Input
+            placeholder="Interface Port"
+            type="number"
+            value={script.interface_port || ""}
+            onChange={(e) =>
+              updateScript(
+                "interface_port",
+                e.target.value ? Number(e.target.value) : null,
+              )
+            }
+          />
+          <div className="flex gap-2">
+            <Input
+              placeholder="Website URL"
+              value={script.website || ""}
+              onChange={(e) => updateScript("website", e.target.value || null)}
+            />
+            <Input
+              placeholder="Documentation URL"
+              value={script.documentation || ""}
+              onChange={(e) =>
+                updateScript("documentation", e.target.value || null)
+              }
+            />
+          </div>
+          <InstallMethod
+            script={script}
+            setScript={setScript}
+            setIsValid={setIsValid}
+            setZodErrors={setZodErrors}
+          />
+          <h3 className="text-xl font-semibold">Default Credentials</h3>
+          <Input
+            placeholder="Username"
+            value={script.default_credentials.username || ""}
+            onChange={(e) =>
+              updateScript("default_credentials", {
+                ...script.default_credentials,
+                username: e.target.value || null,
+              })
+            }
+          />
+          <Input
+            placeholder="Password"
+            value={script.default_credentials.password || ""}
+            onChange={(e) =>
+              updateScript("default_credentials", {
+                ...script.default_credentials,
+                password: e.target.value || null,
+              })
+            }
+          />
+          <Note
+            script={script}
+            setScript={setScript}
+            setIsValid={setIsValid}
+            setZodErrors={setZodErrors}
+          />
+        </form>
+      </div>
+      <div className="w-1/2 p-4 bg-background overflow-y-auto">
+        {validationAlert}
+        <div className="relative">
+          <div className="absolute right-2 top-2 flex gap-1">
+            <Button
+              size="icon"
+              variant="outline"
+              onClick={handleCopy}
+            >
+              {isCopied ? <Check className="h-4 w-4" /> : <Clipboard className="h-4 w-4" />}
+            </Button>
+            <Button
+              size="icon"
+              variant="outline"
+              onClick={handleDownload}
+            >
+              <Download className="h-4 w-4" />
+            </Button>
+          </div>
+        
+          <pre className="mt-4 p-4 bg-secondary rounded shadow overflow-x-scroll">
+            {JSON.stringify(script, null, 2)}
+          </pre>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/layout.tsx

@@ -0,0 +1,94 @@
+import Footer from "@/components/Footer";
+import Navbar from "@/components/Navbar";
+import { ThemeProvider } from "@/components/theme-provider";
+import { Toaster } from "@/components/ui/sonner";
+import { analytics, basePath } from "@/config/siteConfig";
+import "@/styles/globals.css";
+import { Inter } from "next/font/google";
+import { NuqsAdapter } from "nuqs/adapters/next/app";
+import React from "react";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+  title: "Proxmox VE Helper-Scripts",
+  generator: "Next.js",
+  applicationName: "Proxmox VE Helper-Scripts",
+  referrer: "origin-when-cross-origin",
+  keywords: [
+    "Proxmox VE",
+    "Helper-Scripts",
+    "tteck",
+    "helper",
+    "scripts",
+    "proxmox",
+    "VE",
+  ],
+  authors: { name: "Bram Suurd" },
+  creator: "Bram Suurd",
+  publisher: "Bram Suurd",
+  description:
+    "A Front-end for the Proxmox VE Helper-Scripts (Community) Repository. Featuring over 200+ scripts to help you manage your Proxmox VE environment.",
+  favicon: "/app/favicon.ico",
+  formatDetection: {
+    email: false,
+    address: false,
+    telephone: false,
+  },
+  metadataBase: new URL(`https://community-scripts.github.io/${basePath}/`),
+  openGraph: {
+    title: "Proxmox VE Helper-Scripts",
+    description:
+      "A Front-end for the Proxmox VE Helper-Scripts (Community) Repository. Featuring over 200+ scripts to help you manage your Proxmox VE environment.",
+    url: "/defaultimg.png",
+    images: [
+      {
+        url: `https://community-scripts.github.io/${basePath}/defaultimg.png`,
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script
+          defer
+          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>
+      <body className={inter.className}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="dark"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <div className="flex w-full flex-col justify-center">
+            <Navbar />
+            <div className="flex min-h-screen flex-col justify-center">
+              <div className="flex w-full justify-center">
+                <div className="w-full max-w-7xl ">
+                  <NuqsAdapter>{children}</NuqsAdapter>
+                  <Toaster richColors />
+                </div>
+              </div>
+              <Footer />
+            </div>
+          </div>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

frontend/src/app/manifest.ts

@@ -0,0 +1,28 @@
+import { basePath } from "@/config/siteConfig";
+import type { MetadataRoute } from "next";
+
+export const generateStaticParams = () => {
+  return [];
+};
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: "Proxmox VE Helper-Scripts",
+    short_name: "Proxmox VE Helper-Scripts",
+    description:
+      "A Re-designed Front-end for the Proxmox VE Helper-Scripts Repository. Featuring over 200+ scripts to help you manage your Proxmox VE environment.",
+    theme_color: "#030712",
+    background_color: "#030712",
+    display: "standalone",
+    orientation: "portrait",
+    scope: `${basePath}`,
+    start_url: `${basePath}`,
+    icons: [
+      {
+        src: "logo.png",
+        sizes: "512x512",
+        type: "image/png",
+      },
+    ],
+  };
+}

frontend/src/app/not-found.tsx

@@ -0,0 +1,20 @@
+"use client";
+import { Button } from "@/components/ui/button";
+
+export default function NotFoundPage() {
+  return (
+    <div className="flex h-screen w-full flex-col items-center justify-center gap-5 bg-background px-4 md:px-6">
+      <div className="space-y-2 text-center">
+        <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl">
+          404
+        </h1>
+        <p className="text-muted-foreground md:text-xl">
+          Oops, the page you are looking for could not be found.
+        </p>
+      </div>
+      <Button onClick={() => window.history.back()} variant="secondary">
+        Go Back
+      </Button>
+    </div>
+  );
+}

frontend/src/app/page.tsx

@@ -0,0 +1,137 @@
+"use client";
+import AnimatedGradientText from "@/components/ui/animated-gradient-text";
+import { Button } from "@/components/ui/button";
+import { CardFooter } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import Particles from "@/components/ui/particles";
+import { Separator } from "@/components/ui/separator";
+import { basePath } from "@/config/siteConfig";
+import { cn } from "@/lib/utils";
+import { ArrowRightIcon, ExternalLink } from "lucide-react";
+import { useTheme } from "next-themes";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { FaGithub } from "react-icons/fa";
+
+function CustomArrowRightIcon() {
+  return <ArrowRightIcon className="h-4 w-4" width={1} />;
+}
+
+export default function Page() {
+  const { theme } = useTheme();
+
+  const [color, setColor] = useState("#000000");
+
+  useEffect(() => {
+    setColor(theme === "dark" ? "#ffffff" : "#000000");
+  }, [theme]);
+
+  return (
+			<div className="w-full mt-16">
+				<Particles
+					className="absolute inset-0 -z-40"
+					quantity={100}
+					ease={80}
+					color={color}
+					refresh
+				/>
+				<div className="container mx-auto">
+					<div className="flex h-[80vh] flex-col items-center justify-center gap-4 py-20 lg:py-40">
+						<Dialog>
+							<DialogTrigger>
+								<div>
+									<AnimatedGradientText>
+										<div
+											className={cn(
+												`absolute inset-0 block size-full animate-gradient bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:var(--bg-size)_100%] [border-radius:inherit] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]`,
+												`p-px ![mask-composite:subtract]`,
+											)}
+										/>
+										❤️ <Separator className="mx-2 h-4" orientation="vertical" />
+										<span
+											className={cn(
+												`animate-gradient bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,
+												`inline`,
+											)}
+										>
+											Scripts by tteck
+										</span>
+									</AnimatedGradientText>
+								</div>
+							</DialogTrigger>
+							<DialogContent>
+								<DialogHeader>
+									<DialogTitle>Thank You!</DialogTitle>
+									<DialogDescription>
+										A big thank you to tteck and the many contributors who have
+										made this project possible. Your hard work is truly
+										appreciated by the entire Proxmox community!
+									</DialogDescription>
+								</DialogHeader>
+								<CardFooter className="flex flex-col gap-2">
+									<Button className="w-full" variant="outline" asChild>
+										<a
+											href="https://github.com/tteck"
+											target="_blank"
+											rel="noopener noreferrer"
+											className="flex items-center justify-center"
+										>
+											<FaGithub className="mr-2 h-4 w-4" /> Tteck&apos;s GitHub
+										</a>
+									</Button>
+									<Button className="w-full" asChild>
+										<a
+											href={`https://github.com/community-scripts/${basePath}`}
+											target="_blank"
+											rel="noopener noreferrer"
+											className="flex items-center justify-center"
+										>
+											<ExternalLink className="mr-2 h-4 w-4" /> Proxmox Helper
+											Scripts
+										</a>
+									</Button>
+								</CardFooter>
+							</DialogContent>
+						</Dialog>
+
+						<div className="flex flex-col gap-4">
+							<h1 className="max-w-2xl text-center text-3xl font-semibold tracking-tighter md:text-7xl">
+								Make managing your Homelab a breeze
+							</h1>
+							<div className="max-w-2xl gap-2 flex flex-col text-center sm:text-lg text-sm leading-relaxed tracking-tight text-muted-foreground md:text-xl">
+								<p>
+									We are a community-driven initiative that simplifies the setup
+									of Proxmox Virtual Environment (VE).
+								</p>
+								<p>
+									With 300+ scripts to help you manage your{" "}
+									<b>Proxmox VE environment</b>. Whether you&#39;re a seasoned
+									user or a newcomer, we&#39;ve got you covered.
+								</p>
+							</div>
+						</div>
+						<div className="flex flex-row gap-3">
+							<Link href="/scripts">
+								<Button
+									size="lg"
+									variant="expandIcon"
+									Icon={CustomArrowRightIcon}
+									iconPlacement="right"
+									className="hover:"
+								>
+									View Scripts
+								</Button>
+							</Link>
+						</div>
+					</div>
+				</div>
+			</div>
+		);
+}

frontend/src/app/robots.ts

@@ -0,0 +1,14 @@
+import { basePath } from "@/config/siteConfig";
+import type { MetadataRoute } from "next";
+
+export const dynamic = "force-static";
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: "*",
+      allow: "/",
+    },
+    sitemap: `https://community-scripts.github.io/${basePath}/sitemap.xml`,
+  };
+}

frontend/src/app/scripts/_components/ScriptAccordion.tsx

@@ -0,0 +1,132 @@
+import { useCallback, useEffect, useRef } from "react";
+
+import { formattedBadge } from "@/components/CommandMenu";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Category } from "@/lib/types";
+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,
+  selectedScript,
+  setSelectedScript,
+}: {
+  items: Category[];
+  selectedScript: string | null;
+  setSelectedScript: (script: string | null) => void;
+}) {
+  const [expandedItem, setExpandedItem] = useState<string | undefined>(
+    undefined,
+  );
+  const linkRefs = useRef<{ [key: string]: HTMLAnchorElement | null }>({});
+
+  const handleAccordionChange = (value: string | undefined) => {
+    setExpandedItem(value);
+  };
+
+  const handleSelected = useCallback(
+    (slug: string) => {
+      setSelectedScript(slug);
+    },
+    [setSelectedScript],
+  );
+
+  useEffect(() => {
+    if (selectedScript) {
+      const category = items.find((category) =>
+        category.scripts.some((script) => script.slug === selectedScript),
+      );
+      if (category) {
+        setExpandedItem(category.name);
+        handleSelected(selectedScript);
+      }
+    }
+  }, [selectedScript, items, handleSelected]);
+  return (
+    <Accordion
+      type="single"
+      value={expandedItem}
+      onValueChange={handleAccordionChange}
+      collapsible
+      className="overflow-y-scroll max-h-[calc(100vh-220px)] overflow-x-hidden mt-3 p-2"
+    >
+      {items.map((category) => (
+        <AccordionItem
+          key={category.id + ":category"}
+          value={category.name}
+          className={cn("sm:text-md flex flex-col border-none", {
+            "rounded-lg bg-accent/30": expandedItem === category.name,
+          })}
+        >
+          <AccordionTrigger
+            className={cn(
+              "duration-250 rounded-lg transition ease-in-out hover:-translate-y-1 hover:scale-105 hover:bg-accent",
+            )}
+          >
+            <div className="mr-2 flex w-full items-center justify-between">
+              <span className="pl-2 text-left">{category.name} </span>
+              <span className="rounded-full bg-gray-200 px-2 py-1 text-xs text-muted-foreground hover:no-underline dark:bg-blue-800/20">
+                {category.scripts.length}
+              </span>
+            </div>{" "}
+          </AccordionTrigger>
+          <AccordionContent
+            data-state={expandedItem === category.name ? "open" : "closed"}
+            className="pt-0"
+          >
+            {category.scripts
+              .slice()
+              .sort((a, b) => a.name.localeCompare(b.name))
+              .map((script, index) => (
+                <div key={index}>
+                  <Link
+                    href={{
+                      pathname: "/scripts",
+                      query: { id: script.slug },
+                    }}
+                    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.slug
+                        ? "rounded-lg bg-accent font-semibold dark:bg-accent/30 dark:text-white"
+                        : ""
+                    }`}
+                    onClick={() => handleSelected(script.slug)}
+                    ref={(el) => {
+                      linkRefs.current[script.slug] = el;
+                    }}
+                  >
+                    <div className="flex items-center">
+                      <Image
+                        src={script.logo || `/${basePath}/logo.png`}
+                        height={16}
+                        width={16}
+                        unoptimized
+                        onError={(e) =>
+                          ((e.currentTarget as HTMLImageElement).src =
+                            `/${basePath}/logo.png`)
+                        }
+                        alt={script.name}
+                        className="mr-1 w-4 h-4 rounded-full"
+                      />
+                      <span className="flex items-center gap-2">
+                        {script.name}
+                      </span>
+                    </div>
+                    {formattedBadge(script.type)}
+                  </Link>
+                </div>
+              ))}
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
+}

frontend/src/app/scripts/_components/ScriptInfoBlocks.tsx

@@ -0,0 +1,223 @@
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { basePath, mostPopularScripts } from "@/config/siteConfig";
+import { extractDate } from "@/lib/time";
+import { Category, Script } from "@/lib/types";
+import { CalendarPlus } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useMemo, useState } from "react";
+
+const ITEMS_PER_PAGE = 3;
+
+export const getDisplayValueFromType = (type: string) => {
+  switch (type) {
+    case "ct":
+      return "LXC";
+    case "vm":
+      return "VM";
+    case "misc":
+      return "";
+    default:
+      return "";
+  }
+};
+
+export function LatestScripts({ items }: { items: Category[] }) {
+  const [page, setPage] = useState(1);
+
+  const latestScripts = useMemo(() => {
+    if (!items) return [];
+    
+    const scripts = items.flatMap((category) => category.scripts || []);
+
+    // Filter out duplicates by slug
+    const uniqueScriptsMap = new Map<string, Script>();
+    scripts.forEach((script) => {
+      if (!uniqueScriptsMap.has(script.slug)) {
+        uniqueScriptsMap.set(script.slug, script);
+      }
+    });
+
+    return Array.from(uniqueScriptsMap.values()).sort(
+      (a, b) =>
+        new Date(b.date_created).getTime() - new Date(a.date_created).getTime(),
+    );
+  }, [items]);
+
+  const goToNextPage = () => {
+    setPage((prevPage) => prevPage + 1);
+  };
+
+  const goToPreviousPage = () => {
+    setPage((prevPage) => prevPage - 1);
+  };
+  
+  const startIndex = (page - 1) * ITEMS_PER_PAGE;
+  const endIndex = page * ITEMS_PER_PAGE;
+
+  if (!items) {
+    return null;
+  }
+
+  return (
+    <div className="">
+      {latestScripts.length > 0 && (
+        <div className="flex w-full items-center justify-between">
+          <h2 className="text-lg font-semibold">Newest Scripts</h2>
+          <div className="flex items-center justify-end gap-1">
+            {page > 1 && (
+              <div
+                className="cursor-pointer select-none p-2 text-sm font-semibold"
+                onClick={goToPreviousPage}
+              >
+                Previous
+              </div>
+            )}
+            {endIndex < latestScripts.length && (
+              <div
+                onClick={goToNextPage}
+                className="cursor-pointer select-none p-2 text-sm font-semibold"
+              >
+                {page === 1 ? "More.." : "Next"}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+      <div className="min-w flex w-full flex-row flex-wrap gap-4">
+        {latestScripts.slice(startIndex, endIndex).map((script) => (
+          <Card
+            key={script.slug}
+            className="min-w-[250px] flex-1 flex-grow bg-accent/30"
+          >
+            <CardHeader>
+              <CardTitle className="flex items-center gap-3">
+                <div className="flex h-16 w-16 min-w-16 items-center justify-center rounded-lg bg-accent p-1">
+                  <Image
+                    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>
+                <div className="flex flex-col">
+                  <p className="text-lg line-clamp-1">
+                    {script.name} {getDisplayValueFromType(script.type)}
+                  </p>
+                  <p className="text-sm text-muted-foreground flex items-center gap-1">
+                    <CalendarPlus className="h-4 w-4" />
+                    {extractDate(script.date_created)}
+                  </p>
+                </div>
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <CardDescription className="line-clamp-3 text-card-foreground">
+                {script.description}
+              </CardDescription>
+            </CardContent>
+            <CardFooter className="">
+              <Button asChild variant="outline">
+                <Link
+                  href={{
+                    pathname: "/scripts",
+                    query: { id: script.slug },
+                  }}
+                >
+                  View Script
+                </Link>
+              </Button>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function MostViewedScripts({ items }: { items: Category[] }) {
+  const mostViewedScripts = items.reduce((acc: Script[], category) => {
+    const foundScripts = category.scripts.filter((script) =>
+      mostPopularScripts.includes(script.slug),
+    );
+    return acc.concat(foundScripts);
+  }, []);
+
+  return (
+    <div className="">
+      {mostViewedScripts.length > 0 && (
+        <>
+          <h2 className="text-lg font-semibold">Most Viewed Scripts</h2>
+        </>
+      )}
+      <div className="min-w flex w-full flex-row flex-wrap gap-4">
+        {mostViewedScripts.map((script) => (
+          <Card
+            key={script.slug}
+            className="min-w-[250px] flex-1 flex-grow bg-accent/30"
+          >
+            <CardHeader>
+              <CardTitle className="flex items-center gap-3">
+                <div className="flex size-16 min-w-16 items-center justify-center rounded-lg bg-accent p-1">
+                  <Image
+                    unoptimized
+                    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>
+                <div className="flex flex-col">
+                  <p className="line-clamp-1 text-lg">
+                    {script.name} {getDisplayValueFromType(script.type)}
+                  </p>
+                  <p className="flex items-center gap-1 text-sm text-muted-foreground">
+                    <CalendarPlus className="h-4 w-4" />
+                    {extractDate(script.date_created)}
+                  </p>
+                </div>
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <CardDescription className="line-clamp-3 text-card-foreground break-words">
+                {script.description}
+              </CardDescription>
+            </CardContent>
+            <CardFooter className="">
+              <Button asChild variant="outline">
+                <Link
+                  href={{
+                    pathname: "/scripts",
+                    query: { id: script.slug },
+                  }}
+                  prefetch={false}
+                >
+                  View Script
+                </Link>
+              </Button>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/src/app/scripts/_components/ScriptItem.tsx

@@ -0,0 +1,107 @@
+"use client";
+import { Separator } from "@/components/ui/separator";
+import { extractDate } from "@/lib/time";
+import { Script } from "@/lib/types";
+import { X } from "lucide-react";
+import Image from "next/image";
+
+import { getDisplayValueFromType } from "./ScriptInfoBlocks";
+import Alerts from "./ScriptItems/Alerts";
+import Buttons from "./ScriptItems/Buttons";
+import DefaultPassword from "./ScriptItems/DefaultPassword";
+import DefaultSettings from "./ScriptItems/DefaultSettings";
+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,
+  setSelectedScript,
+}: {
+  item: Script;
+  setSelectedScript: (script: string | null) => void;
+}) {
+  const closeScript = () => {
+    window.history.pushState({}, document.title, window.location.pathname);
+    setSelectedScript(null);
+  };
+
+  const defaultInstallMethod = item.install_methods?.[0];
+  const os = defaultInstallMethod?.resources?.os || "Proxmox Node";
+  const version = defaultInstallMethod?.resources?.version || "";
+
+  return (
+    <div className="mr-7 mt-0 flex w-full min-w-fit">
+      <div className="flex w-full min-w-fit">
+        <div className="flex w-full flex-col">
+          <div className="flex h-[36px] min-w-max items-center justify-between">
+            <h2 className="text-lg font-semibold">Selected Script</h2>
+            <X onClick={closeScript} className="cursor-pointer" />
+          </div>
+          <div className="rounded-lg border bg-accent/20 p-4">
+            <div className="flex justify-between">
+              <div className="flex">
+                <Image
+                  className="h-32 w-32 rounded-lg bg-accent/60 object-contain p-3 shadow-md"
+                  src={item.logo || `/${basePath}/logo.png`}
+                  width={400}
+                  onError={(e) =>
+                    ((e.currentTarget as HTMLImageElement).src =
+                      `/${basePath}/logo.png`)
+                  }
+                  height={400}
+                  alt={item.name}
+                  unoptimized
+                />
+                <div className="ml-4 flex flex-col justify-between">
+                  <div className="flex h-full w-full flex-col justify-between">
+                    <div>
+                      <h1 className="text-lg font-semibold">
+                        {item.name} {getDisplayValueFromType(item.type)}
+                      </h1>
+                      <p className="w-full text-sm text-muted-foreground">
+                        Date added: {extractDate(item.date_created)}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        Default OS: {os} {version}
+                      </p>
+                    </div>
+                    <div className="flex gap-5">
+                      <DefaultSettings item={item} />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="hidden flex-col justify-between gap-2 sm:flex">
+                <InterFaces item={item} />
+                <Buttons item={item} />
+              </div>
+            </div>
+            <Separator className="mt-4" />
+            <div>
+              <div className="mt-4">
+                <Description item={item} />
+                <Alerts item={item} />
+              </div>
+              <div className="mt-4 rounded-lg border bg-accent/50">
+                <div className="flex gap-3 px-4 py-2">
+                  <h2 className="text-lg font-semibold">
+                    How to {item.type == "misc" ? "use" : "install"}
+                  </h2>
+                  <Tooltips item={item} />
+                </div>
+                <Separator className="w-full"></Separator>
+                <InstallCommand item={item} />
+              </div>
+            </div>
+            <DefaultPassword item={item} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ScriptItem;

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

@@ -0,0 +1,35 @@
+import TextCopyBlock from "@/components/TextCopyBlock";
+import { AlertColors } from "@/config/siteConfig";
+import { Script } from "@/lib/types";
+import { cn } from "@/lib/utils";
+import { AlertCircle, NotepadText } from "lucide-react";
+
+type NoteProps = {
+  text: string;
+  type: keyof typeof AlertColors;
+}
+
+export default function Alerts({ item }: { item: Script }) {
+  return (
+    <>
+      {item?.notes?.length > 0 &&
+        item.notes.map((note: NoteProps, index: number) => (
+          <div key={index} className="mt-4 flex flex-col gap-2">
+            <p
+              className={cn(
+                "inline-flex items-center gap-2 rounded-lg border p-2 pl-4 text-sm",
+                AlertColors[note.type],
+              )}
+            >
+              {note.type == "info" ? (
+                <NotepadText className="h-4 min-h-4 w-4 min-w-4" />
+              ) : (
+                <AlertCircle className="h-4 min-h-4 w-4 min-w-4" />
+              )}
+              <span>{TextCopyBlock(note.text)}</span>
+            </p>
+          </div>
+        ))}
+    </>
+  );
+}

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

@@ -0,0 +1,81 @@
+import { Button } from "@/components/ui/button";
+import { basePath } from "@/config/siteConfig";
+import { Script } from "@/lib/types";
+import { BookOpenText, Code, Globe, RefreshCcw } from "lucide-react";
+import Link from "next/link";
+
+const generateInstallSourceUrl = (slug: string) => {
+  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 generateUpdateUrl = (slug: string) => {
+  const baseUrl = `https://raw.githubusercontent.com/community-scripts/${basePath}/main`;
+  return `${baseUrl}/ct/${slug}.sh`;
+};
+
+interface ButtonLinkProps {
+  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) : 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[];
+
+  return (
+    <div className="flex flex-wrap justify-end gap-2">
+      {buttons.map((props, index) => (
+        <ButtonLink key={index} {...props} />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,42 @@
+import handleCopy from "@/components/handleCopy";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { Script } from "@/lib/types";
+
+export default function DefaultPassword({ item }: { item: Script }) {
+  const { username, password } = item.default_credentials;
+  const hasDefaultLogin = username && password;
+
+  if (!hasDefaultLogin) return null;
+
+  const copyCredential = (type: "username" | "password") => {
+    handleCopy(type, item.default_credentials[type] ?? "");
+  };
+
+  return (
+    <div className="mt-4 rounded-lg border bg-accent/50">
+      <div className="flex gap-3 px-4 py-2">
+        <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}.
+        </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")}
+            >
+              {item.default_credentials[type as "username" | "password"]}
+            </Button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,51 @@
+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 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">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 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"
+        />
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,13 @@
+import TextCopyBlock from "@/components/TextCopyBlock";
+import { Script } from "@/lib/types";
+
+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="text-sm text-muted-foreground">
+        {TextCopyBlock(item.description)}
+      </p>
+    </div>
+  );
+}

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

@@ -0,0 +1,85 @@
+import CodeCopyButton from "@/components/ui/code-copy-button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { basePath } from "@/config/siteConfig";
+import { Script } from "@/lib/types";
+import { getDisplayValueFromType } from "../ScriptInfoBlocks";
+
+const getInstallCommand = (scriptPath?: string, isAlpine = false) => {
+  return `bash -c "$(wget -q${isAlpine ? "" : "L"}O - https://github.com/community-scripts/${basePath}/raw/main/${scriptPath})"`;
+};
+
+export default function InstallCommand({ item }: { item: Script }) {
+  const alpineScript = item.install_methods.find(
+    (method) => method.type === "alpine",
+  );
+
+  const defaultScript = item.install_methods.find(
+    (method) => method.type === "default",
+  );
+
+  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 == "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>
+      )}
+    </>
+  );
+
+  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>
+  );
+}

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

@@ -0,0 +1,41 @@
+import handleCopy from "@/components/handleCopy";
+import { buttonVariants } from "@/components/ui/button";
+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-lg font-semibold">
+            {"Default Interface:"}
+          </h2>{" "}
+          <CopyButton label="default interface" value={item.interface_port} />
+        </div>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,52 @@
+import { Badge } from "@/components/ui/badge";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Script } from "@/lib/types";
+import { CircleHelp } from "lucide-react";
+import React from "react";
+
+interface TooltipProps {
+  variant: "warning" | "success";
+  label: string;
+  content: string;
+}
+
+const TooltipBadge: React.FC<TooltipProps> = ({ variant, label, content }) => (
+  <TooltipProvider>
+    <Tooltip delayDuration={100}>
+      <TooltipTrigger className="flex items-center">
+        <Badge variant={variant} className="flex items-center gap-1">
+          {label} <CircleHelp className="size-3" />
+        </Badge>
+      </TooltipTrigger>
+      <TooltipContent side="bottom" className="text-sm max-w-64">
+        {content}
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+);
+
+export default function Tooltips({ item }: { item: Script }) {
+  return (
+    <div className="flex items-center gap-2">
+      {item.privileged && (
+        <TooltipBadge
+          variant="warning"
+          label="Privileged"
+          content="This script will be run in a privileged LXC"
+        />
+      )}
+      {item.updateable && (
+        <TooltipBadge
+          variant="success"
+          label="Updateable"
+          content={`To Update ${item.name}, run the command below (or type update) in the LXC Console.`}
+        />
+      )}
+    </div>
+  );
+}

frontend/src/app/scripts/_components/Sidebar.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import type { Category, Script } from "@/lib/types";
+import ScriptAccordion from "./ScriptAccordion";
+
+const Sidebar = ({
+	items,
+	selectedScript,
+	setSelectedScript,
+}: {
+	items: Category[];
+	selectedScript: string | null;
+	setSelectedScript: (script: string | null) => void;
+}) => {
+	const uniqueScripts = items.reduce((acc, category) => {
+		for (const script of category.scripts) {
+			if (!acc.some((s) => s.name === script.name)) {
+				acc.push(script);
+			}
+		}
+		return acc;
+	}, [] as Script[]);
+
+	return (
+		<div className="flex min-w-72 flex-col sm:max-w-72">
+			<div className="flex items-end justify-between pb-4">
+				<h1 className="text-xl font-bold">Categories</h1>
+				<p className="text-xs italic text-muted-foreground">
+					{uniqueScripts.length} Total scripts
+				</p>
+			</div>
+			<div className="rounded-lg">
+				<ScriptAccordion
+					items={items}
+					selectedScript={selectedScript}
+					setSelectedScript={setSelectedScript}
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default Sidebar;

frontend/src/app/scripts/page.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+export const dynamic = "force-static";
+
+import ScriptItem from "@/app/scripts/_components/ScriptItem";
+import { fetchCategories } from "@/lib/data";
+import { Category, Script } from "@/lib/types";
+import { Loader2 } from "lucide-react";
+import { useQueryState } from "nuqs";
+import { Suspense, useEffect, useState } from "react";
+import {
+  LatestScripts,
+  MostViewedScripts,
+} from "./_components/ScriptInfoBlocks";
+import Sidebar from "./_components/Sidebar";
+
+function ScriptContent() {
+  const [selectedScript, setSelectedScript] = useQueryState("id");
+  const [links, setLinks] = useState<Category[]>([]);
+  const [item, setItem] = useState<Script>();
+
+  useEffect(() => {
+    if (selectedScript && links.length > 0) {
+      const script = links
+        .map((category) => category.scripts)
+        .flat()
+        .find((script) => script.slug === selectedScript);
+      setItem(script);
+    }
+  }, [selectedScript, links]);
+
+  useEffect(() => {
+    fetchCategories()
+      .then((categories) => {
+        setLinks(categories);
+      })
+      .catch((error) => console.error(error));
+  }, []);
+
+  return (
+    <div className="mb-3">
+      <div className="mt-20 flex sm:px-4 xl:px-0">
+        <div className="hidden sm:flex">
+          <Sidebar
+            items={links}
+            selectedScript={selectedScript}
+            setSelectedScript={setSelectedScript}
+          />
+        </div>
+        <div className="mx-7 w-full sm:mx-0 sm:ml-7">
+          {selectedScript && item ? (
+            <ScriptItem item={item} setSelectedScript={setSelectedScript} />
+          ) : (
+            <div className="flex w-full flex-col gap-5">
+              <LatestScripts items={links} />
+              <MostViewedScripts items={links} />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function Page() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex h-screen w-full flex-col items-center justify-center gap-5 bg-background px-4 md:px-6">
+          <div className="space-y-2 text-center">
+            <Loader2 className="h-10 w-10 animate-spin" />
+          </div>
+        </div>
+      }
+    >
+      <ScriptContent />
+    </Suspense>
+  );
+}

frontend/src/app/sitemap.ts

@@ -0,0 +1,23 @@
+import { basePath } from "@/config/siteConfig";
+import type { MetadataRoute } from "next";
+
+export const dynamic = "force-static";
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  let domain = "community-scripts.github.io";
+  let protocol = "https";
+  return [
+    {
+      url: `${protocol}://${domain}/${basePath}`,
+      lastModified: new Date(),
+    },
+    {
+      url: `${protocol}://${domain}/${basePath}/scripts`,
+      lastModified: new Date(),
+    },
+    {
+      url: `${protocol}://${domain}/${basePath}/json-editor`,
+      lastModified: new Date(),
+    }
+  ];
+}