Use static assets instead of fetching from github (#156)

2025-09-14 11:19:42 +00:00 · 2024-11-09 20:06:54 +01:00 · 2024-11-09 20:06:54 +01:00 · d199762427
commit d199762427
parent 2af11d145f
18 changed files with 136 additions and 107 deletions
--- a/frontend/src/app/api/categories/route.ts
+++ b/frontend/src/app/api/categories/route.ts
@ -1,26 +1,30 @@
-import { basePath } from "@/config/siteConfig";
-import { Category, Script } from "@/lib/types";
+import { Metadata, Script } from "@/lib/types";
+import { promises as fs } from "fs";
 import { NextResponse } from "next/server";
+import path from "path";

 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 jsonDir = "public/json";
+const metadataFileName = "metadata.json";
+const encoding = "utf-8";
+
+const getMetadata = async () => {
+  const filePath = path.resolve(jsonDir, metadataFileName);
+  const fileContent = await fs.readFile(filePath, encoding);
+  const metadata: Metadata = JSON.parse(fileContent);
+  return metadata;
 };

-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 getScripts = async () => {
+  const filePaths = (await fs.readdir(jsonDir))
+    .filter((fileName) => fileName !== metadataFileName)
+    .map((fileName) => path.resolve(jsonDir, fileName));
+
  const scripts = await Promise.all(
-    files.map(async (file) : Promise<Script> => {
-      const response = await fetch(file.download_url);
-      const script = await response.json();
+    filePaths.map(async (filePath) => {
+      const fileContent = await fs.readFile(filePath, encoding);
+      const script: Script = JSON.parse(fileContent);
      return script;
    }),
  );
@ -29,11 +33,18 @@ const fetchScripts = async (): Promise<Script[]> => {

 export async function GET() {
  try {
-    const categories = await fetchCategories();
-    const scripts = await fetchScripts();
-    for (const category of categories) {
-      category.scripts = scripts.filter((script) => script.categories.includes(category.id));
-    }
+    const metadata = await getMetadata();
+    const scripts = await getScripts();
+
+    const categories = metadata.categories
+      .map((category) => {
+        category.scripts = scripts.filter((script) =>
+          script.categories.includes(category.id),
+        );
+        return category;
+      })
+      .sort((a, b) => a.sort_order - b.sort_order);
+
    return NextResponse.json(categories);
  } catch (error) {
    console.error(error as Error);
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@ -2,11 +2,11 @@ import Footer from "@/components/Footer";
 import Navbar from "@/components/Navbar";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
+import { analytics, basePath } from "@/config/siteConfig";
 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";
+import React from "react";

 const inter = Inter({ subsets: ["latin"] });

@ -65,7 +65,6 @@ export default function RootLayout({
          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}>
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@ -1,17 +1,24 @@
 "use client";
 import AnimatedGradientText from "@/components/ui/animated-gradient-text";
-import Particles from "@/components/ui/particles";
 import { Button } from "@/components/ui/button";
+import { CardFooter } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import Particles from "@/components/ui/particles";
 import { Separator } from "@/components/ui/separator";
+import { basePath } from "@/config/siteConfig";
 import { cn } from "@/lib/utils";
 import { ArrowRightIcon, ExternalLink } from "lucide-react";
 import { useTheme } from "next-themes";
 import Link from "next/link";
 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} />;
--- a/frontend/src/app/scripts/_components/ScriptItem.tsx
+++ b/frontend/src/app/scripts/_components/ScriptItem.tsx
@ -52,7 +52,9 @@ function ScriptItem({
                <div className="ml-4 flex flex-col justify-between">
                  <div className="flex h-full w-full flex-col justify-between">
                    <div>
-                      <h1 className="text-lg font-semibold">{item.name} {getDisplayValueFromType(item.type)}</h1>
+                      <h1 className="text-lg font-semibold">
+                        {item.name} {getDisplayValueFromType(item.type)}
+                      </h1>
                      <p className="w-full text-sm text-muted-foreground">
                        Date added: {extractDate(item.date_created)}
                      </p>
--- a/frontend/src/app/scripts/_components/ScriptItems/DefaultPassword.tsx
+++ b/frontend/src/app/scripts/_components/ScriptItems/DefaultPassword.tsx
@ -1,10 +1,11 @@
+import handleCopy from "@/components/handleCopy";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
-import handleCopy from "@/components/handleCopy";
 import { Script } from "@/lib/types";

 export default function DefaultPassword({ item }: { item: Script }) {
-  const hasDefaultLogin = item.default_credentials.username && item.default_credentials.password;
+  const hasDefaultLogin =
+    item.default_credentials.username && item.default_credentials.password;

  return (
    <div>
@ -25,7 +26,10 @@ export default function DefaultPassword({ item }: { item: Script }) {
                variant={"secondary"}
                size={"null"}
                onClick={() =>
-                  handleCopy("username", item.default_credentials.username ?? "")
+                  handleCopy(
+                    "username",
+                    item.default_credentials.username ?? "",
+                  )
                }
              >
                {item.default_credentials.username}
@ -37,7 +41,10 @@ export default function DefaultPassword({ item }: { item: Script }) {
                variant={"secondary"}
                size={"null"}
                onClick={() =>
-                  handleCopy("password", item.default_credentials.password ?? "")
+                  handleCopy(
+                    "password",
+                    item.default_credentials.password ?? "",
+                  )
                }
              >
                {item.default_credentials.password}
--- a/frontend/src/app/scripts/_components/ScriptItems/DefaultSettings.tsx
+++ b/frontend/src/app/scripts/_components/ScriptItems/DefaultSettings.tsx
@ -44,7 +44,8 @@ export default function DefaultSettings({ item }: { item: Script }) {
            CPU: {defaultAlpineSettings?.resources.cpu}vCPU
          </p>
          <p className="text-sm text-muted-foreground">
-            RAM: {getDisplayValueFromRAM(defaultAlpineSettings?.resources.ram ?? 0)}
+            RAM:{" "}
+            {getDisplayValueFromRAM(defaultAlpineSettings?.resources.ram ?? 0)}
          </p>
          <p className="text-sm text-muted-foreground">
            HDD: {defaultAlpineSettings?.resources.hdd}GB
--- a/frontend/src/app/scripts/_components/ScriptItems/InstallCommand.tsx
+++ b/frontend/src/app/scripts/_components/ScriptItems/InstallCommand.tsx
@ -6,7 +6,7 @@ import { getDisplayValueFromType } from "../ScriptInfoBlocks";

 const getInstallCommand = (scriptPath?: string) => {
  return `bash -c "$(wget -qLO - https://github.com/community-scripts/${basePath}/raw/main/${scriptPath})"`;
-}
+};

 export default function InstallCommand({ item }: { item: Script }) {
  const alpineScript = item.install_methods.find(
@ -14,7 +14,7 @@ export default function InstallCommand({ item }: { item: Script }) {
  );

  const defaultScript = item.install_methods.find(
-    (method) => method.type === "default"
+    (method) => method.type === "default",
  );

  const renderInstructions = (isAlpine = false) => (
@ -60,7 +60,9 @@ export default function InstallCommand({ item }: { item: Script }) {
          </TabsList>
          <TabsContent value="default">
            {renderInstructions()}
-            <CodeCopyButton>{getInstallCommand(defaultScript?.script)}</CodeCopyButton>
+            <CodeCopyButton>
+              {getInstallCommand(defaultScript?.script)}
+            </CodeCopyButton>
          </TabsContent>
          <TabsContent value="alpine">
            {renderInstructions(true)}
--- a/frontend/src/app/scripts/_components/ScriptItems/InterFaces.tsx
+++ b/frontend/src/app/scripts/_components/ScriptItems/InterFaces.tsx
@ -1,8 +1,8 @@
-import { Button, buttonVariants } from "@/components/ui/button";
 import handleCopy from "@/components/handleCopy";
+import { buttonVariants } from "@/components/ui/button";
+import { Script } from "@/lib/types";
 import { cn } from "@/lib/utils";
 import { ClipboardIcon } from "lucide-react";
-import { Script } from "@/lib/types";

 const CopyButton = ({
  label,
@ -11,7 +11,12 @@ const CopyButton = ({
  label: string;
  value: string | number;
 }) => (
-  <span className={cn(buttonVariants({size: "sm", variant: "secondary"}), "flex items-center gap-2")}>
+  <span
+    className={cn(
+      buttonVariants({ size: "sm", variant: "secondary" }),
+      "flex items-center gap-2",
+    )}
+  >
    {value}
    <ClipboardIcon
      onClick={() => handleCopy(label, String(value))}
@ -20,8 +25,7 @@ const CopyButton = ({
  </span>
 );

-export default function InterFaces({item} : {item : Script}) {
-
+export default function InterFaces({ item }: { item: Script }) {
  return (
    <div className="flex flex-col gap-2">
      {item.interface_port !== null ? (
@ -29,10 +33,7 @@ export default function InterFaces({item} : {item : Script}) {
          <h2 className="mr-2 text-end text-lg font-semibold">
            {"Default Interface:"}
          </h2>{" "}
-          <CopyButton
-            label="default interface"
-            value={item.interface_port}
-          />
+          <CopyButton label="default interface" value={item.interface_port} />
        </div>
      ) : null}
    </div>
--- a/frontend/src/app/scripts/_components/Sidebar.tsx
+++ b/frontend/src/app/scripts/_components/Sidebar.tsx
@ -17,15 +17,16 @@ const Sidebar = ({
      <div className="flex items-end justify-between pb-4">
        <h1 className="text-xl font-bold">Categories</h1>
        <p className="text-xs italic text-muted-foreground">
-          {items.reduce(
-            (acc, category) => acc + category.scripts.length,
-            0,
-          )}{" "}
+          {items.reduce((acc, category) => acc + category.scripts.length, 0)}{" "}
          Total scripts
        </p>
      </div>
      <div className="rounded-lg">
-        <ScriptAccordion items={items} selectedScript={selectedScript} setSelectedScript={setSelectedScript} />
+        <ScriptAccordion
+          items={items}
+          selectedScript={selectedScript}
+          setSelectedScript={setSelectedScript}
+        />
      </div>
    </div>
  );