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