Switch from Pocketbase data retrieval to JSON (#100)

* 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>
2025-11-06 03:12:50 +00:00 · 2024-11-06 23:47:04 +01:00
parent 97008d0273
commit 93fd495f65
37 changed files with 474 additions and 453 deletions
--- a/frontend/src/components/CommandMenu.tsx
+++ b/frontend/src/components/CommandMenu.tsx
@@ -6,30 +6,28 @@ import {
  CommandItem,
  CommandList,
 } from "@/components/ui/command";
+import { fetchCategories } from "@/lib/data";
 import { Category } from "@/lib/types";
 import { cn } from "@/lib/utils";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
-import React, { useEffect } from "react";
+import React from "react";
+import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
 import { DialogTitle } from "./ui/dialog";

-const sortCategories = (categories: Category[]): Category[] => {
-  return categories.sort((a: Category, b: Category) => {
-    if (
-      a.catagoryName === "Proxmox VE Tools" &&
-      b.catagoryName !== "Proxmox VE Tools"
-    ) {
-      return -1;
-    } else if (
-      a.catagoryName !== "Proxmox VE Tools" &&
-      b.catagoryName === "Proxmox VE Tools"
-    ) {
-      return 1;
-    } else {
-      return a.catagoryName.localeCompare(b.catagoryName);
-    }
-  });
+export const formattedBadge = (type: string) => {
+  switch (type) {
+    case "vm":
+      return <Badge className="text-blue-500/75 border-blue-500/75">VM</Badge>;
+    case "ct":
+      return (
+        <Badge className="text-yellow-500/75 border-yellow-500/75">LXC</Badge>
+      );
+    case "misc":
+      return <Badge className="text-red-500/75 border-red-500/75">MISC</Badge>;
+  }
+  return null;
 };

 export default function CommandMenu() {
@@ -50,21 +48,17 @@ export default function CommandMenu() {
    return () => document.removeEventListener("keydown", down);
  }, []);

-  const fetchCategories = async () => {
+  const fetchSortedCategories = () => {
    setIsLoading(true);
-      fetch(
-        `api/categories?_=${process.env.NEXT_PUBLIC_BUILD_TIME || Date.now()}`,
-      )
-        .then((response) => response.json())
-        .then((categories) => {
-          const sortedCategories = sortCategories(categories);
-          setLinks(sortedCategories);
-          setIsLoading(false);
-        })
-        .catch((error) => {
-          setIsLoading(false);
-          console.error(error);
-        });
+    fetchCategories()
+      .then((categories) => {
+        setLinks(categories);
+        setIsLoading(false);
+      })
+      .catch((error) => {
+        setIsLoading(false);
+        console.error(error);
+      });
  };

  return (
@@ -75,8 +69,8 @@ export default function CommandMenu() {
          "relative h-9 w-full justify-start rounded-[0.5rem] bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64",
        )}
        onClick={() => {
-          fetchCategories();
-          setOpen(true)
+          fetchSortedCategories();
+          setOpen(true);
        }}
      >
        <span className="inline-flex">Search scripts...</span>
@@ -85,41 +79,40 @@ export default function CommandMenu() {
        </kbd>
      </Button>
      <CommandDialog open={open} onOpenChange={setOpen}>
-          <DialogTitle className="sr-only">Search scripts</DialogTitle>
-        <CommandInput placeholder="search for a script..." />
+        <DialogTitle className="sr-only">Search scripts</DialogTitle>
+        <CommandInput placeholder="Search for a script..." />
        <CommandList>
-          <CommandEmpty>{isLoading ? "Loading..." : "No scripts found."}</CommandEmpty>
+          <CommandEmpty>
+            {isLoading ? "Loading..." : "No scripts found."}
+          </CommandEmpty>
          {links.map((category) => (
            <CommandGroup
-              key={"category:" + category.catagoryName}
-              heading={category.catagoryName}
+              key={`category:${category.name}`}
+              heading={category.name}
            >
-              {category.expand.items.map((script) => (
+              {category.scripts.map((script) => (
                <CommandItem
-                  key={"script:" + script.id}
-                  value={script.title}
+                  key={`script:${script.name}`}
+                  value={script.name}
                  onSelect={() => {
                    setOpen(false);
-                    router.push(`/scripts?id=${script.title}`);
+                    router.push(`/scripts?id=${script.name}`);
                  }}
                >
                  <div className="flex gap-2" onClick={() => setOpen(false)}>
                    <Image
-                      src={script.logo}
-                      unoptimized
-                      height={16}
+                      src={script.logo || "/logo.png"}
                      onError={(e) =>
                        ((e.currentTarget as HTMLImageElement).src =
                          "/logo.png")
                      }
                      width={16}
+                      height={16}
                      alt=""
                      className="h-5 w-5"
                    />
-                    <span>{script.title}</span>
-                    <span className="text-sm text-muted-foreground">
-                      {script.item_type}
-                    </span>
+                    <span>{script.name}</span>
+                    <span>{formattedBadge(script.type)}</span>
                  </div>
                </CommandItem>
              ))}
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -1,3 +1,4 @@
+import { basePath } from "@/config/siteConfig";
 import Link from "next/link";

 export default function Footer() {
@@ -7,7 +8,7 @@ export default function Footer() {
        <div className="mx-6 w-full max-w-7xl text-sm text-muted-foreground">
          Website build by the community. The source code is avaliable on{" "}
          <Link
-            href="https://github.com/community-scripts/Proxmox"
+            href={`https://github.com/community-scripts/${basePath}`}
            target="_blank"
            rel="noreferrer"
            className="font-semibold underline-offset-2 duration-300 hover:underline"
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -6,11 +6,9 @@ import { useEffect, useState } from "react";

 import { navbarLinks } from "@/config/siteConfig";

-import { cn } from "@/lib/utils";
-import { MoonIcon, SunIcon } from "lucide-react";
-import { useTheme } from "next-themes";
 import CommandMenu from "./CommandMenu";
 import StarOnGithubButton from "./ui/star-on-github-button";
+import { ThemeToggle } from "./ui/theme-toggle";
 import {
  Tooltip,
  TooltipContent,
@@ -22,7 +20,6 @@ export const dynamic = "force-dynamic";

 function Navbar() {
  const [isScrolled, setIsScrolled] = useState(false);
-  const { theme, setTheme } = useTheme();

  useEffect(() => {
    const handleScroll = () => {
@@ -56,7 +53,6 @@ function Navbar() {
            />
            <span className="hidden lg:block">Proxmox VE Helper-Scripts</span>
          </Link>
-          {/* <MobileNav /> */}
          <div className="flex gap-2">
            <CommandMenu />
            <StarOnGithubButton />
@@ -81,28 +77,7 @@ function Navbar() {
                </Tooltip>
              </TooltipProvider>
            ))}
-            <TooltipProvider>
-              <Tooltip delayDuration={100}>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    type="button"
-                    size="icon"
-                    className={cn("px-2")}
-                    aria-label="Toggle theme"
-                    onClick={() =>
-                      setTheme(theme === "dark" ? "light" : "dark")
-                    }
-                  >
-                    <SunIcon className="size-[1.2rem] text-neutral-800 dark:hidden dark:text-neutral-200" />
-                    <MoonIcon className="hidden size-[1.2rem] text-neutral-800 dark:block dark:text-neutral-200" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent side="bottom" className="text-xs">
-                  Theme Toggle
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
+            <ThemeToggle />
          </div>
        </div>
      </div>
--- a/frontend/src/components/ui/codeblock.tsx
+++ b/frontend/src/components/ui/codeblock.tsx
@@ -8,6 +8,7 @@ import * as React from "react";
 import { toast } from "sonner";
 import { Button } from "./button";
 import { Separator } from "./separator";
+import { basePath } from "@/config/siteConfig";

 const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
@@ -67,7 +68,7 @@ const handleCopy = (type: string, value: string) => {
            <div>
              <Button className="text-white">
                <Link
-                  href="https://github.com/community-scripts/ProxmoxVE"
+                  href={`https://github.com/community-scripts/${basePath}`}
                  data-umami-event="Star on Github"
                  target="_blank"
                >
--- a/frontend/src/components/ui/star-on-github-button.tsx
+++ b/frontend/src/components/ui/star-on-github-button.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { FaGithub, FaStar } from "react-icons/fa";
 import NumberTicker from "./number-ticker";
 import { buttonVariants } from "./button";
+import { basePath } from "@/config/siteConfig";

 export default function StarOnGithubButton() {
  const [stars, setStars] = useState(0);
@@ -11,7 +12,7 @@ export default function StarOnGithubButton() {
  useEffect(() => {
    const fetchStars = async () => {
      try {
-        const res = await fetch("https://api.github.com/repos/community-scripts/ProxmoxVE", {
+        const res = await fetch(`https://api.github.com/repos/community-scripts/${basePath}`, {
          next: { revalidate: 60 * 60 * 24 },
        });

@@ -34,7 +35,7 @@ export default function StarOnGithubButton() {
        "group relative justify-center gap-2 rounded-md transition-all duration-300 ease-out hover:ring-2 hover:ring-primary hover:ring-offset-2",
      )}
      target="_blank"
-      href="https://github.com/community-scripts/ProxmoxVE"
+      href={`https://github.com/community-scripts/${basePath}`}
    >
      <span className="absolute right-0 -mt-12 h-32 translate-x-12 rotate-12 bg-white opacity-10 transition-all duration-1000 ease-out group-hover:-translate-x-40" />
      <div className="flex items-center">
--- a/frontend/src/components/ui/theme-toggle.tsx
+++ b/frontend/src/components/ui/theme-toggle.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
+import { Button } from "./button";
+import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
+
+export function ThemeToggle() {
+  const { setTheme, theme: currentTheme } = useTheme();
+
+  const handleChangeTheme = (theme: "light" | "dark") => {
+    if (theme === currentTheme) return;
+
+    if (!document.startViewTransition) return setTheme(theme);
+    document.startViewTransition(() => setTheme(theme));
+  };
+
+  return (
+    <TooltipProvider>
+      <Tooltip delayDuration={100}>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            type="button"
+            size="icon"
+            className="px-2"
+            aria-label="Toggle theme"
+            onClick={() =>
+              handleChangeTheme(currentTheme === "dark" ? "light" : "dark")
+            }
+          >
+            <SunIcon className="size-[1.2rem] text-neutral-800 dark:hidden dark:text-neutral-200" />
+            <MoonIcon className="hidden size-[1.2rem] text-neutral-800 dark:block dark:text-neutral-200" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom" className="text-xs">
+          Theme Toggle
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}