Add Version Tag to frontend

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

@@ -0,0 +1,48 @@
+import { AppVersion } 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 versionsFileName = "versions.json";
+const encoding = "utf-8";
+
+const getVersions = async () => {
+  const filePath = path.resolve(jsonDir, versionsFileName);
+  console.log("TEST");
+  console.log("FilePath: ", filePath);
+  const fileContent = await fs.readFile(filePath, encoding);
+  const versions: AppVersion = JSON.parse(fileContent);
+  return versions;
+};
+
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const slug = searchParams.get("slug");
+
+    if (!slug) {
+      return NextResponse.json({ error: "Missing slug parameter" }, { status: 400 });
+    }
+    console.log("Slug: ", slug);
+    const versions = await getVersions();
+
+    const cleanedSlug = slug.toLowerCase().replace(/[^a-z0-9]/g, '');
+
+    const matchedVersion = Object.values(versions).find(
+      (version: AppVersion) => {
+        const versionNameParts = version.name.split('/');
+        const cleanedVersionName = versionNameParts[1]?.toLowerCase().replace(/[^a-z0-9]/g, '');
+        return cleanedVersionName === cleanedSlug;
+      }
+    );
+
+    return NextResponse.json(matchedVersion);
+  } catch (error) {
+    console.error(error);
+    return NextResponse.json({name: "name", version: "No version found"});
+  }
+}

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

@@ -1,7 +1,9 @@
 "use client";
 import { Separator } from "@/components/ui/separator";
 import { extractDate } from "@/lib/time";
-import { Script } from "@/lib/types";
+import { Script, AppVersion } from "@/lib/types";
+import { fetchVersions } from "@/lib/data";
+
 import { X } from "lucide-react";
 import Image from "next/image";
 
@@ -15,22 +17,48 @@ import InstallCommand from "./ScriptItems/InstallCommand";
 import InterFaces from "./ScriptItems/InterFaces";
 import Tooltips from "./ScriptItems/Tooltips";
 import { basePath } from "@/config/siteConfig";
+import { useEffect, useState } from "react";
+
+interface ScriptItemProps {
+  item: Script;
+  setSelectedScript: (script: string | null) => void;
+}
 
 function ScriptItem({
   item,
   setSelectedScript,
-}: {
+}: ScriptItemProps) {
-  item: Script;
+
-  setSelectedScript: (script: string | null) => void;
+
-}) {
   const closeScript = () => {
     window.history.pushState({}, document.title, window.location.pathname);
     setSelectedScript(null);
-  };
+};
+
+ const [versions, setVersions] = useState<AppVersion[]>([]);
+
+
+useEffect(() => {
+  fetchVersions(item.slug)
+    .then((fetchedVersions) => {
+      console.log("Fetched Versions: ", fetchedVersions);
+
+      // Ensure fetchedVersions is always an array
+      if (Array.isArray(fetchedVersions)) {
+        setVersions(fetchedVersions);
+      } else if (fetchedVersions && typeof fetchedVersions === "object") {
+        setVersions([fetchedVersions]); // Wrap object in an array
+      } else {
+        setVersions([]); // Fallback to empty array
+      }
+    })
+    .catch((error) => console.error("Error fetching versions:", error));
+}, [item.name]);
+
+const defaultInstallMethod = item.install_methods?.[0];
+const os = defaultInstallMethod?.resources?.os || "Proxmox Node";
+const version = defaultInstallMethod?.resources?.version || "";
 
-  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">
@@ -71,6 +99,16 @@ function ScriptItem({
                     <div className="flex gap-5">
                       <DefaultSettings item={item} />
                     </div>
+                    <div>
+
+
+                             {versions.length === 0 ? (
+      <p>Loading versions...</p>
+    ) : (
+      <p>Version: {versions[0].version}</p>
+    )}
+
+                    </div>
                   </div>
                 </div>
               </div>

frontend/src/lib/data.ts

@@ -8,3 +8,11 @@ export const fetchCategories = async () => {
   const categories: Category[] = await response.json();
   return categories;
 };
+
+export const fetchVersions = async (slug: string) => {
+    const response = await fetch(`api/versions?slug=${slug}`);
+    if (!response.ok) {
+        throw new Error(`Failed to fetch versions: ${response.statusText}`);
+    }
+    return response.json();
+};

frontend/src/lib/types.ts

@@ -13,6 +13,7 @@ export type Script = {
   website: string | null;
   logo: string | null;
   description: string;
+  version: string;
   install_methods: {
     type: "default" | "alpine";
     script: string;
@@ -47,6 +48,11 @@ export type Metadata = {
   categories: Category[];
 };
 
+export interface AppVersion {
+    name: string;
+    version: string;
+}
+
 export interface Version {
   name: string;
   slug: string;
@@ -55,4 +61,4 @@ export interface Version {
 export interface OperatingSystem {
   name: string;
   versions: Version[];
-}
+}