diff --git a/frontend/src/app/scripts/_components/ScriptInfoBlocks.tsx b/frontend/src/app/scripts/_components/ScriptInfoBlocks.tsx
index 772c40b0..458a5a72 100644
--- a/frontend/src/app/scripts/_components/ScriptInfoBlocks.tsx
+++ b/frontend/src/app/scripts/_components/ScriptInfoBlocks.tsx
@@ -7,8 +7,9 @@ import {
CardHeader,
CardTitle,
} from "@/components/ui/card";
+import { mostPopularScripts } from "@/config/siteConfig";
import { extractDate } from "@/lib/time";
-import { Category } from "@/lib/types";
+import { Category, Script } from "@/lib/types";
import { CalendarPlus } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
@@ -16,6 +17,19 @@ import { useMemo, useState } from "react";
const ITEMS_PER_PAGE = 3;
+export const getCorrectTypeNaming = (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);
@@ -23,7 +37,8 @@ export function LatestScripts({ items }: { items: Category[] }) {
if (!items) return [];
const scripts = items.flatMap((category) => category.scripts || []);
return scripts.sort(
- (a, b) => new Date(b.date_created).getTime() - new Date(a.date_created).getTime(),
+ (a, b) =>
+ new Date(b.date_created).getTime() - new Date(a.date_created).getTime(),
);
}, [items]);
@@ -68,16 +83,16 @@ export function LatestScripts({ items }: { items: Category[] }) {
)}
- {latestScripts.slice(startIndex, endIndex).map((item) => (
+ {latestScripts.slice(startIndex, endIndex).map((script) => (
- {item.name} {item.type}
+ {script.name} {getCorrectTypeNaming(script.type)}
- {extractDate(item.date_created)}
+ {extractDate(script.date_created)}
- {item.description}
+ {script.description}
@@ -106,7 +121,7 @@ export function LatestScripts({ items }: { items: Category[] }) {
View Script
@@ -120,102 +135,72 @@ export function LatestScripts({ items }: { items: Category[] }) {
);
}
-// TODO: find way to determine what the most popular scripts are
+export function MostViewedScripts({ items }: { items: Category[] }) {
+ const mostViewedScripts = items.reduce((acc, category) => {
+ const foundScripts = category.scripts.filter((script) =>
+ mostPopularScripts.includes(script.name),
+ );
+ acc.push(...foundScripts);
+ return acc;
+ }, [] as Script[]);
-// export function MostViewedScripts({ items }: { items: Category[] }) {
-// const [page, setPage] = useState(1);
-
-// const mostViewedScripts = useMemo(() => {
-// if (!items) return [];
-// const scripts = items.flatMap((category) => category.scripts || []);
-// const mostViewedScripts = scripts
-// .filter((script) => script.isMostViewed)
-// .map((script) => ({
-// ...script,
-// }));
-// return mostViewedScripts;
-// }, [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;
-
-// return (
-//
-// {mostViewedScripts.length > 0 && (
-// <>
-//
Most Viewed Scripts
-// >
-// )}
-//
-// {mostViewedScripts.slice(startIndex, endIndex).map((item) => (
-//
-//
-//
-//
-//
-//
-//
-//
-// {item.title} {item.item_type}
-//
-//
-//
-// {extractDate(item.created)}
-//
-//
-//
-//
-//
-//
-// {item.description}
-//
-//
-//
-//
-//
-//
-// ))}
-//
-//
-// {page > 1 && (
-//
-// )}
-// {endIndex < mostViewedScripts.length && (
-//
-// )}
-//
-//
-// );
-// }
+ return (
+
+ {mostViewedScripts.length > 0 && (
+ <>
+
Most Viewed Scripts
+ >
+ )}
+
+ {mostViewedScripts.map((script) => (
+
+
+
+
+
+
+
+
+ {script.name} {getCorrectTypeNaming(script.type)}
+
+
+
+ {extractDate(script.date_created)}
+
+
+
+
+
+
+ {script.description}
+
+
+
+
+
+
+ ))}
+
+
+ );
+}
diff --git a/frontend/src/app/scripts/page.tsx b/frontend/src/app/scripts/page.tsx
index fb64d0cd..5aa8391c 100644
--- a/frontend/src/app/scripts/page.tsx
+++ b/frontend/src/app/scripts/page.tsx
@@ -10,7 +10,7 @@ import Sidebar from "./_components/Sidebar";
import { useQueryState } from "nuqs";
import {
LatestScripts,
- // MostViewedScripts,
+ MostViewedScripts,
} from "./_components/ScriptInfoBlocks";
import { fetchCategories } from "@/lib/pocketbase";
@@ -53,7 +53,7 @@ function ScriptContent() {
) : (
- {/* */}
+
)}
diff --git a/frontend/src/config/siteConfig.tsx b/frontend/src/config/siteConfig.tsx
index cd87e0e4..8dc5cdcf 100644
--- a/frontend/src/config/siteConfig.tsx
+++ b/frontend/src/config/siteConfig.tsx
@@ -21,3 +21,9 @@ export const navbarLinks = [
text: "Discussions",
},
];
+
+export const mostPopularScripts = [
+ "Proxmox VE Post Install",
+ "Docker",
+ "Home Assistant OS",
+];
\ No newline at end of file