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 <[email protected]> * Update frontend/src/app/api/categories/route.ts Co-authored-by: Håvard Gjøby Thom <[email protected]> * Update frontend/src/app/api/categories/route.ts Co-authored-by: Håvard Gjøby Thom <[email protected]> * Update frontend/src/components/CommandMenu.tsx Co-authored-by: Håvard Gjøby Thom <[email protected]> * Update frontend/src/components/ui/theme-toggle.tsx Co-authored-by: Håvard Gjøby Thom <[email protected]> * Update frontend/src/components/CommandMenu.tsx Co-authored-by: Håvard Gjøby Thom <[email protected]> * Update frontend/src/app/api/categories/route.ts Co-authored-by: Håvard Gjøby Thom <[email protected]> * Update frontend/src/app/api/categories/route.ts Co-authored-by: Håvard Gjøby Thom <[email protected]> * Update frontend/src/app/scripts/_components/ScriptItems/DefaultPassword.tsx Co-authored-by: Håvard Gjøby Thom <[email protected]> * Update frontend/src/app/scripts/_components/ScriptItems/DefaultSettings.tsx Co-authored-by: Håvard Gjøby Thom <[email protected]> * Update src/lib/data.ts with necessary changes. Co-authored-by: Håvard Gjøby Thom <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * Update frontend/src/app/scripts/_components/ScriptItems/DefaultSettings.tsx Co-authored-by: Håvard Gjøby Thom <[email protected]> * 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 <[email protected]> * Update DefaultSettings.tsx Co-authored-by: Håvard Gjøby Thom <[email protected]> * Update DefaultSettings.tsx Co-authored-by: Håvard Gjøby Thom <[email protected]> * 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 <[email protected]>
community-scripts · Nov 6, 2024 · 93fd495 · 93fd495
1 parent 97008d0
commit 93fd495
Show file tree

Hide file tree

Showing 37 changed files with 474 additions and 453 deletions.
diff --git a/.github/workflows/deploy-pages.yml b/.github/workflows/deploy-pages.yml
@@ -9,6 +9,7 @@ on:
     branches: ["main"]
     paths:
       - frontend/**
+      - json/**
 
   workflow_dispatch:
 
@@ -57,14 +58,6 @@ jobs:
         uses: actions/configure-pages@v5
         with:
           static_site_generator: next
-      - name: Restore cache
-        uses: actions/cache@v4
-        with:
-          path: |
-            frontend/.next/cache
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('frontend/**/package-lock.json', 'frontend/**/yarn.lock') }}-${{ hashFiles('frontend/**.[jt]s', 'frontend/**.[jt]sx') }}
-          restore-keys: |
-            ${{ runner.os }}-nextjs-${{ hashFiles('frontend/**/package-lock.json', 'frontend/**/yarn.lock') }}-
       - name: Install dependencies
         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }} --legacy-peer-deps
       - name: Build with Next.js

diff --git a/frontend/.env.local b/frontend/.env.local
diff --git a/frontend/example.env b/frontend/example.env
diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs
@@ -15,11 +15,11 @@ const nextConfig = {
   },
 
   env: {
-    NEXT_PUBLIC_BUILD_TIME: `${Date.now()}`,
+    BASE_PATH: "ProxmoxVE",
   },
 
   output: "export",
-  basePath: "/ProxmoxVE",
+  basePath: `/${process.env.BASE_PATH}`,
 };
 
 export default nextConfig;
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -22,6 +22,7 @@
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-icons": "^1.3.1",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
@@ -31,7 +32,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
-    "framer-motion": "^11.11.10",
+    "framer-motion": "^11.11.11",
     "fuse.js": "^7.0.0",
     "lucide-react": "^0.453.0",
     "mini-svg-data-uri": "^1.4.4",

diff --git a/frontend/public/metadata/docker.json b/frontend/public/metadata/docker.json
diff --git a/frontend/public/metadata/nginxproxymanager.json b/frontend/public/metadata/nginxproxymanager.json
diff --git a/frontend/src/app/api/categories/route.ts b/frontend/src/app/api/categories/route.ts
@@ -1,23 +1,45 @@
-import { pb } from "@/lib/pocketbase";
-import { Category } from "@/lib/types";
+import { basePath } from "@/config/siteConfig";
+import { Category, Script } from "@/lib/types";
 import { NextResponse } from "next/server";
 
 export const dynamic = "force-static";
 
+const fetchCategories = async (): Promise<Category[]> => {
+  const response = await fetch(
+    `https://raw.githubusercontent.com/community-scripts/${basePath}/refs/heads/main/json/metadata.json`,
+  );
+  const data = await response.json();
+  return data.categories;
+};
+
+const fetchScripts = async (): Promise<Script[]> => {
+  const response = await fetch(
+    `https://api.github.com/repos/community-scripts/${basePath}/contents/json`,
+  );
+  const files: { download_url: string }[] = await response.json();
+  const scripts = await Promise.all(
+    files.map(async (file) : Promise<Script> => {
+      const response = await fetch(file.download_url);
+      const script = await response.json();
+      return script;
+    }),
+  );
+  return scripts;
+};
+
 export async function GET() {
   try {
-    const response = await pb.collection("categories").getFullList<Category>({
-      expand: "items.alerts,items.alpine_script,items.default_login",
-      sort: "order",
-    });
-
-    return NextResponse.json(response);
+    const categories = await fetchCategories();
+    const scripts = await fetchScripts();
+    for (const category of categories) {
+      category.scripts = scripts.filter((script) => script.categories.includes(category.id));
+    }
+    return NextResponse.json(categories);
   } catch (error) {
-    console.error("Error fetching categories:", error);
+    console.error(error as Error);
     return NextResponse.json(
       { error: "Failed to fetch categories" },
       { status: 500 },
     );
   }
 }
-
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -6,6 +6,7 @@ import "@/styles/globals.css";
 import { Inter } from "next/font/google";
 import React from "react";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
+import { analytics, basePath } from "@/config/siteConfig";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -34,15 +35,15 @@ export const metadata = {
     address: false,
     telephone: false,
   },
-  metadataBase: new URL("https://community-scripts.github.io/Proxmox/"),
+  metadataBase: new URL(`https://community-scripts.github.io/${basePath}/`),
   openGraph: {
     title: "Proxmox VE Helper-Scripts",
     description:
       "A Front-end for the Proxmox VE Helper-Scripts (Community) Repository. Featuring over 200+ scripts to help you manage your Proxmox VE environment.",
     url: "/defaultimg.png",
     images: [
       {
-        url: "https://community-scripts.github.io/Proxmox/defaultimg.png",
+        url: `https://community-scripts.github.io/${basePath}/defaultimg.png`,
       },
     ],
     locale: "en_US",
@@ -60,15 +61,20 @@ export default function RootLayout({
       <head>
         <script
           defer
-          src={`https://${process.env.NEXT_PUBLIC_ANALYTICS_URL}/script.js`}
-          data-website-id={process.env.NEXT_PUBLIC_ANALYTICS_TOKEN}
+          src={`https://${analytics.url}/script.js`}
+          data-website-id={analytics.token}
         ></script>
         <link rel="manifest" href="manifest.webmanifest" />
         <link rel="preconnect" href={process.env.NEXT_PUBLIC_POCKETBASE_URL} />
         <link rel="preconnect" href="https://api.github.com" />
       </head>
       <body className={inter.className}>
-        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="dark"
+          enableSystem
+          disableTransitionOnChange
+        >
           <div className="flex w-full flex-col justify-center">
             <Navbar />
             <div className="flex min-h-screen flex-col justify-center">

diff --git a/frontend/src/app/manifest.ts b/frontend/src/app/manifest.ts
@@ -1,3 +1,4 @@
+import { basePath } from "@/config/siteConfig";
 import type { MetadataRoute } from "next";
 
 export const generateStaticParams = () => {
@@ -9,13 +10,13 @@ export default function manifest(): MetadataRoute.Manifest {
     name: "Proxmox VE Helper-Scripts",
     short_name: "Proxmox VE Helper-Scripts",
     description:
-      "A Re-designed Front-end for the Proxmox VE Helper-Scripts Repository. Featuring over 150+ scripts to help you manage your Proxmox VE environment.",
+      "A Re-designed Front-end for the Proxmox VE Helper-Scripts Repository. Featuring over 200+ scripts to help you manage your Proxmox VE environment.",
     theme_color: "#030712",
     background_color: "#030712",
     display: "standalone",
     orientation: "portrait",
-    scope: "/Proxmox/",
-    start_url: "/Proxmox/",
+    scope: `${basePath}`,
+    start_url: `${basePath}`,
     icons: [
       {
         src: "logo.png",

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -11,6 +11,7 @@ import { useEffect, useState } from "react";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { CardFooter } from "@/components/ui/card";
 import { FaGithub } from "react-icons/fa";
+import { basePath } from "@/config/siteConfig";
 
 function CustomArrowRightIcon() {
   return <ArrowRightIcon className="h-4 w-4" width={1} />;
@@ -80,7 +81,7 @@ export default function Page() {
                 </Button>
                 <Button className="w-full" asChild>
                   <a
-                    href="https://github.com/community-scripts/ProxmoxVE"
+                    href={`https://github.com/community-scripts/${basePath}`}
                     target="_blank"
                     rel="noopener noreferrer"
                     className="flex items-center justify-center"

diff --git a/frontend/src/app/robots.ts b/frontend/src/app/robots.ts
@@ -1,3 +1,4 @@
+import { basePath } from "@/config/siteConfig";
 import type { MetadataRoute } from "next";
 
 export const dynamic = "force-static";
@@ -8,6 +9,6 @@ export default function robots(): MetadataRoute.Robots {
       userAgent: "*",
       allow: "/",
     },
-    sitemap: "https://community-scripts.github.io/Proxmox/sitemap.xml",
+    sitemap: `https://community-scripts.github.io/${basePath}/sitemap.xml`,
   };
 }