asset_backups/ProxmoxVE
1
0
Fork 0
mirror of https://github.com/community-scripts/ProxmoxVE.git synced 2025-11-08 20:32:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Switch from Pocketbase data retrieval to JSON (#100)

Browse Source 
* Add new animation for switching themes.

* Remove unused metadata files from testing

* increase duration on theme switch

* Reduce animation duration for view transition effect to improve responsiveness

* Fetch categories and scripts from external sources, updating `GET` endpoint to aggregate data. Adjust type definitions for Script and Category

* Refactor all components to use data from new API

* Refactor `InterFaces` component to use updated `Script` type and streamline interface/port handling for better clarity

* Refactor `CommandMenu` component to utilize updated `Category` and `Script` types, simplifying the sorting logic and enhancing clarity

* Fix animation duration in `globals.css` to ensure proper view transition functionality across the application

* Remove unnecessary console log for file name in `fetchAllMetaDataFiles` to clean up code

* Refactor category fetching in `ScriptContent` and `CommandMenu` to utilize centralized `fetchCategories` for improved maintainability

* Use `formattedBadge` in `ScriptAccordion` and `CommandMenu` for consistent badge rendering across script types

* Refactor source URL generation in `Buttons` component to enhance clarity and streamline the installation script logic

* Check default settings availability in `DefaultSettings` component and handle undefined values more gracefully in rendering

* Fix install command generation to handle optional script parameter and update copy button logic for improved functionality

* Add most popular scripts feature and update script rendering logic in `ScriptInfoBlocks` component

* Enhance `ScriptItem` component to display correct type naming alongside script name for better clarity in the UI

* Add conversion utility to display RAM in GB for better readability in `DefaultSettings` component

* Refactor Next.js config to use dynamic basePath and update sitemap URLs for improved adaptability and host configuration

* Refactor site configuration to utilize centralized settings for analytics and base path; replace PocketBase imports with new data module

* Refactor sitemap generation to use centralized basePath from config, enhancing adaptability for URL management

* Refactor to replace PocketBase with a new data module across components

* Refactor layout to use centralized analytics configuration

* Update deployment workflow to include JSON files for GitHub Pages publishing

* Remove caching step from GitHub Pages deploy workflow to avoid caching

* Remove basePath from Next.js config to simplify configuration and avoid potential issues with path resolution

* Add category sorting and fetching logic in data.ts

* Add analytics configuration and basePath to siteConfig

* Remove obsolete environment files for analytics and PocketBase

* Update sitemap to use a fixed domain for the generated sitemap instead of deriving from headers

* Refactor layout to utilize basePath for metadata base URL and image links for better configurability

* use cleaner `basePath` variable around codebase for easier management

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

Co-authored-by: Håvard Gjøby Thom <34199185+havardthom@users.noreply.github.com>

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

Co-authored-by: Håvard Gjøby Thom <34199185+havardthom@users.noreply.github.com>

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

Co-authored-by: Håvard Gjøby Thom <34199185+havardthom@users.noreply.github.com>

* Update frontend/src/components/CommandMenu.tsx

Co-authored-by: Håvard Gjøby Thom <34199185+havardthom@users.noreply.github.com>

* Update frontend/src/components/ui/theme-toggle.tsx

Co-authored-by: Håvard Gjøby Thom <34199185+havardthom@users.noreply.github.com>

* Update frontend/src/components/CommandMenu.tsx

Co-authored-by: Håvard Gjøby Thom <34199185+havardthom@users.noreply.github.com>

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

Co-authored-by: Håvard Gjøby Thom <34199185+havardthom@users.noreply.github.com>

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

Co-authored-by: Håvard Gjøby Thom <34199185+havardthom@users.noreply.github.com>

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

Co-authored-by: Håvard Gjøby Thom <34199185+havardthom@users.noreply.github.com>

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

Co-authored-by: Håvard Gjøby Thom <34199185+havardthom@users.noreply.github.com>

* Update src/lib/data.ts with necessary changes.

Co-authored-by: Håvard Gjøby Thom <34199185+havardthom@users.noreply.github.com>

* Update src/app/api/categories/route.ts with necessary modifications

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

Co-authored-by: Håvard Gjøby Thom <34199185+havardthom@users.noreply.github.com>

* Update src/components/CommandMenu.tsx with necessary improvements

* Add renamed themetoggle

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

Co-authored-by: Håvard Gjøby Thom <34199185+havardthom@users.noreply.github.com>

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

Co-authored-by: Håvard Gjøby Thom <34199185+havardthom@users.noreply.github.com>

* Update frontend/src/app/scripts/_components/ScriptItems/DefaultSettings.tsx with new settings configuration

* Update src/app/scripts/_components/ScriptInfoBlocks.tsx with enhancements and fixes

* Update src/app/scripts/_components/ScriptItems/InstallCommand.tsx

* Update src/app/scripts/_components/ScriptItem.tsx

* Update src/app/scripts/_components/ScriptAccordion.tsx with necessary adjustments and improvements

* Update Interfaces to use strict check

* updated interfaces to use normal string label instead of jsx

* Update configuration to use environment variable for BASE_PATH and reflect changes in siteConfig

* force static base path

* Update CommandMenu.tsx

Co-authored-by: Håvard Gjøby Thom <34199185+havardthom@users.noreply.github.com>

* Update DefaultSettings.tsx

Co-authored-by: Håvard Gjøby Thom <34199185+havardthom@users.noreply.github.com>

* Update DefaultSettings.tsx

Co-authored-by: Håvard Gjøby Thom <34199185+havardthom@users.noreply.github.com>

* Ensure fetchScripts returns a typed Script array by specifying return type in map function

* Remove commented-out import for unused Category type in CommandMenu component

* Fix fetch URLs by removing unnecessary slashes and ensure proper return type in fetchScripts map function

* Refactor MostViewedScripts to ensure proper type annotations and improve array concatenation method for better readability

* Update BASE_PATH handling in next.config and fix fetch URLs to ensure correct path structure in API routes

---------

Co-authored-by: Håvard Gjøby Thom <34199185+havardthom@users.noreply.github.com>
This commit is contained in:
Bram Suurd
2024-11-06 23:47:04 +01:00
committed by GitHub
parent 97008d0273
commit 93fd495f65
37 changed files with 474 additions and 453 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
frontend/src/app/scripts/_components/ScriptInfoBlocks.tsx
View File

@@ -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,14 +17,28 @@ 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.expand.items || []);
const scripts = items.flatMap((category) => category.scripts || []);
return scripts.sort(
(a, b) => new Date(b.created).getTime() - new Date(a.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[] }) {
</div>
)}
<div className="min-w flex w-full flex-row flex-wrap gap-4">
{latestScripts.slice(startIndex, endIndex).map((item) => (
{latestScripts.slice(startIndex, endIndex).map((script) => (
<Card
key={item.id}
key={script.name}
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 items-center justify-center rounded-lg bg-accent p-1">
<Image
src={item.logo}
src={script.logo || "/logo.png"}
unoptimized
height={64}
width={64}
@@ -87,18 +102,18 @@ export function LatestScripts({ items }: { items: Category[] }) {
</div>
<div className="flex flex-col">
<p className="text-lg line-clamp-1">
{item.title} {item.item_type}
{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(item.created)}
{extractDate(script.date_created)}
</p>
</div>
</CardTitle>
</CardHeader>
<CardContent>
<CardDescription className="line-clamp-3 text-card-foreground">
{item.description}
{script.description}
</CardDescription>
</CardContent>
<CardFooter className="">
@@ -106,7 +121,7 @@ export function LatestScripts({ items }: { items: Category[] }) {
<Link
href={{
pathname: "/scripts",
query: { id: item.title },
query: { id: script.name },
}}
>
View Script
@@ -121,29 +136,12 @@ export function LatestScripts({ items }: { items: Category[] }) {
}
export function MostViewedScripts({ items }: { items: Category[] }) {
const [page, setPage] = useState(1);
const mostViewedScripts = useMemo(() => {
if (!items) return [];
const scripts = items.flatMap((category) => category.expand.items || []);
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;
const mostViewedScripts = items.reduce((acc: Script[], category) => {
const foundScripts = category.scripts.filter((script) =>
mostPopularScripts.includes(script.name),
);
return acc.concat(foundScripts);
}, []);
return (
<div className="">
@@ -153,9 +151,9 @@ export function MostViewedScripts({ items }: { items: Category[] }) {
</>
)}
<div className="min-w flex w-full flex-row flex-wrap gap-4">
{mostViewedScripts.slice(startIndex, endIndex).map((item) => (
{mostViewedScripts.map((script) => (
<Card
key={item.id}
key={script.name}
className="min-w-[250px] flex-1 flex-grow bg-accent/30"
>
<CardHeader>
@@ -163,7 +161,7 @@ export function MostViewedScripts({ items }: { items: Category[] }) {
<div className="flex max-h-16 min-h-16 min-w-16 max-w-16 items-center justify-center rounded-lg bg-accent p-1">
<Image
unoptimized
src={item.logo}
src={script.logo || "/logo.png"}
height={64}
width={64}
alt=""
@@ -172,18 +170,18 @@ export function MostViewedScripts({ items }: { items: Category[] }) {
</div>
<div className="flex flex-col">
<p className="line-clamp-1 text-lg">
{item.title} {item.item_type}
{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(item.created)}
{extractDate(script.date_created)}
</p>
</div>
</CardTitle>
</CardHeader>
<CardContent>
<CardDescription className="line-clamp-3 text-card-foreground break-words">
{item.description}
{script.description}
</CardDescription>
</CardContent>
<CardFooter className="">
@@ -191,7 +189,7 @@ export function MostViewedScripts({ items }: { items: Category[] }) {
<Link
href={{
pathname: "/scripts",
query: { id: item.title },
query: { id: script.name },
}}
prefetch={false}
>
@@ -202,18 +200,6 @@ export function MostViewedScripts({ items }: { items: Category[] }) {
</Card>
))}
</div>
<div className="flex justify-end gap-1 p-2">
{page > 1 && (
<Button onClick={goToPreviousPage} variant="outline">
Previous
</Button>
)}
{endIndex < mostViewedScripts.length && (
<Button onClick={goToNextPage} variant="outline">
{page === 1 ? "More.." : "Next"}
</Button>
)}
</div>
</div>
);
}