MAJOR: change several files so they are compatible with gh-pages

.gitignore

@@ -15,7 +15,6 @@
 
 # next.js
 /.next/
-/out/
 
 # production
 /build

Dockerfile

@@ -1,25 +0,0 @@
-FROM oven/bun:alpine AS base
-
-# Stage 1: Install dependencies
-FROM base AS deps
-WORKDIR /app
-COPY package.json bun.lockb ./
-RUN bun install
-
-# Stage 2: Build the application
-FROM base AS builder
-WORKDIR /app
-COPY --from=deps /app/node_modules ./node_modules
-COPY . .
-RUN bun run build
-
-# Stage 3: Production server
-FROM base AS runner
-WORKDIR /app
-ENV NODE_ENV=production
-COPY --from=builder /app/public ./public
-COPY --from=builder /app/.next/standalone ./
-COPY --from=builder /app/.next/static ./.next/static
-
-EXPOSE 3000
-CMD ["bun", "run", "server.js"]

docker-compose.yml

@@ -1,65 +0,0 @@
-services:
-  pocketbase:
-    image: ghcr.io/muchobien/pocketbase:latest
-    restart: unless-stopped
-    command:
-      - --encryptionEnv #optional
-      - ENCRYPTION #optional
-    environment:
-      ENCRYPTION: ${ENCRYPTION_SECRET} 
-    ports:
-      - "3002:8090"
-    volumes:
-      - ./data/pb/data:/pb_data
-      - ./data/pb/public:/pb_public #optional
-      - ./data/pb/hooks:/pb_hooks #optional
-    healthcheck: #optional (recommended) since v0.10.0
-      test: wget --no-verbose --tries=1 --spider http://localhost:8090/api/health || exit 1
-      interval: 5s
-      timeout: 5s
-      retries: 5
-
-  umami:
-    image: ghcr.io/umami-software/umami:postgresql-latest
-    ports:
-      - "3001:3000"
-    environment:
-      DATABASE_URL: postgresql://umami:umami@umami-db:5432/umami
-      DATABASE_TYPE: postgresql
-      APP_SECRET: ${APP_SECRET}
-    depends_on:
-      umami-db:
-        condition: service_healthy
-    restart: unless-stopped
-    healthcheck:
-      test: ["CMD-SHELL", "curl http://localhost:3000/api/heartbeat"]
-      interval: 5s
-      timeout: 5s
-      retries: 5
-
-  app:
-    build: .
-    ports:
-      - '3000:3000'
-    environment:
-      - NODE_ENV=production
-      - NEXT_PUBLIC_UMAMI_URL=${NEXT_PUBLIC_UMAMI_URL}
-      - NEXT_PUBLIC_UMAMI_TOKEN=${NEXT_PUBLIC_UMAMI_TOKEN}
-      - NEXT_PUBLIC_POCKETBASE_URL=${NEXT_PUBLIC_POCKETBASE_URL}
-    restart: unless-stopped
-
-  umami-db:
-    image: postgres:15-alpine
-    environment:
-      POSTGRES_DB: umami
-      POSTGRES_USER: umami
-      POSTGRES_PASSWORD: umami
-    volumes:
-      - ./data/umami/data:/var/lib/postgresql/data
-    restart: unless-stopped
-    healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U $${POSTGRES_USER} -d $${POSTGRES_DB}"]
-      interval: 5s
-      timeout: 5s
-      retries: 5
-

example.env

@@ -1,6 +1,4 @@
 NEXT_PUBLIC_POCKETBASE_URL=https://pocketbase.proxmoxve-scripts.com
 NEXT_PUBLIC_ANALYTICS_URL=https://analytics.proxmoxve-scripts.com
 NEXT_PUBLIC_ANALYTICS_TOKEN=b60d130323-1a11-4244-a1010-81d263c5c49a7
-APP_SECRET=faeziwezrdgsjibjahyusndwwpiwykgfhdjhysaidmtwywivmh
-ENCRYPTION_SECRET=idtrkpcthrnirnqxkafbivyditqnxsnymrfpeqqsookzjyuvmz
 NODE_ENV=production

next.config.ts

@@ -15,16 +15,7 @@ const nextConfig = {
   },
 
   output: "export",
-  basePath: "/proxmox-helper-scripts",
-
-  async rewrites() {
-    return [
-      {
-        source: "/analytics/:path*",
-        destination: `https://${process.env.NEXT_PUBLIC_ANALYTICS_URL}/:path*`,
-      },
-    ];
-  },
+  // basePath: "/proxmox-helper-scripts",
 };
 
 export default nextConfig;

package.json

@@ -28,7 +28,6 @@
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@vercel/analytics": "^1.2.2",
-    "@vercel/speed-insights": "^1.0.12",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",

src/app/api/categories/route.ts

@@ -2,6 +2,8 @@ import { pb } from "@/lib/pocketbase";
 import { Category } from "@/lib/types";
 import { NextResponse } from "next/server";
 
+export const dynamic = "force-static";
+
 export async function GET() {
   try {
     const response = await pb.collection("categories").getFullList<Category>({

src/app/api/og/route.tsx

@@ -1,84 +0,0 @@
-import { pb } from "@/lib/pocketbase";
-import { Script } from "@/lib/types";
-import Image from "next/image";
-import { ImageResponse } from "next/og";
-import { NextRequest } from "next/server";
-import { ClientResponseError } from "pocketbase";
-
-export async function GET(req: NextRequest) {
-  const { searchParams } = new URL(req.url);
-  const title = searchParams.get("title");
-
-  if (!title) {
-    return new Response("Missing title parameter", { status: 400 });
-  }
-
-  try {
-    const script: Script = await pb
-      .collection("proxmox_scripts")
-      .getFirstListItem(`title="${title}"`, {
-        fields: "logo,id",
-      });
-
-    const imageResponse = new ImageResponse(
-      (
-        <div
-          style={{
-            background: "rgb(30,41,59)",
-            backgroundImage:
-              "linear-gradient(67deg, rgba(30, 41, 59, 1) 0%, rgba(15, 23, 42, 1) 50%, rgba(30, 41, 59, 1) 100%)",
-            width: "100%",
-            height: "100%",
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-            alignItems: "center",
-          }}
-        >
-          <Image
-            src={script.logo}
-            alt={title}
-            style={{
-              maxWidth: "40%",
-              maxHeight: "40%",
-              objectFit: "contain",
-            }}
-          />
-          <p
-            style={{
-              color: "white",
-              fontSize: "64px",
-              fontWeight: "bold",
-              textAlign: "center",
-              marginTop: "20px",
-            }}
-          >
-            {title}
-          </p>
-        </div>
-      ),
-      {
-        width: 1200,
-        height: 630,
-      },
-    );
-
-    // Set Cache-Control headers
-    const response = new Response(imageResponse.body, {
-      headers: {
-        "Content-Type": "image/png",
-        "Cache-Control": "public, max-age=31536000, immutable", // Cache for one year
-      },
-    });
-
-    return response;
-  } catch (error) {
-    console.error("Error fetching script or generating image:", error);
-
-    if (error instanceof ClientResponseError && error.status === 404) {
-      return new Response("Script not found", { status: 404 });
-    }
-
-    return new Response("Error generating image", { status: 500 });
-  }
-}

src/app/layout.tsx

@@ -60,7 +60,7 @@ export default function RootLayout({
       <head>
         <script
           defer
-          src="/analytics/script.js"
+          src={`https://${process.env.NEXT_PUBLIC_ANALYTICS_URL}/script.js`}
           data-website-id={process.env.NEXT_PUBLIC_ANALYTICS_TOKEN}
         ></script>
         <link rel="preconnect" href={process.env.NEXT_PUBLIC_POCKETBASE_URL} />
@@ -75,7 +75,6 @@ export default function RootLayout({
                 <div className="w-full max-w-7xl ">
                   {children}
                   <Toaster richColors />
-                  <SpeedInsights />
                 </div>
               </div>
               <Footer />

src/app/manifest.ts

@@ -1,5 +1,7 @@
 import type { MetadataRoute } from "next";
 
+export const dynamic = "force-static";
+
 export default function manifest(): MetadataRoute.Manifest {
   return {
     name: "Proxmox VE Helper-Scripts",

src/app/robots.ts

@@ -1,5 +1,7 @@
 import type { MetadataRoute } from "next";
 
+export const dynamic = "force-static";
+
 export default function robots(): MetadataRoute.Robots {
   return {
     rules: {

src/app/scripts/_components/ScriptBrowser.tsx

@@ -136,9 +136,11 @@ const ScriptBrowser = ({
                         linkRefs.current[script.title] = el;
                       }}
                     >
-                      <img
+                      <Image
                         src={script.logo}
-                        // priority={true}
+                        height={16}
+                        width={16}
+                        unoptimized
                         alt={script.title}
                         className="mr-1 w-4 h-4 rounded-full"
                       />

src/app/scripts/_components/ScriptInfoBlocks.tsx

@@ -78,6 +78,7 @@ export function LatestScripts({ items }: { items: Category[] }) {
                 <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-accent p-1">
                   <Image
                     src={item.logo}
+                    unoptimized
                     height={64}
                     width={64}
                     alt=""
@@ -161,6 +162,7 @@ export function MostViewedScripts({ items }: { items: Category[] }) {
               <CardTitle className="flex items-center gap-3">
                 <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}
                     height={64}
                     width={64}

src/app/scripts/_components/ScriptItem.tsx

@@ -62,13 +62,13 @@ function ScriptItem({
               <div className="rounded-lg border bg-accent/20 p-4">
                 <div className="flex justify-between">
                   <div className="flex">
-                    <img
+                    <Image
                       className="h-32 w-32 rounded-lg bg-accent/60 object-contain p-3 shadow-md"
                       src={item.logo}
-                      // width={400}
-                      // height={400}
+                      width={400}
+                      height={400}
                       alt={item.title}
-                      // priority
+                      unoptimized
                     />
                     <div className="ml-4 flex flex-col justify-between">
                       <div className="flex h-full w-full flex-col justify-between">

src/app/scripts/_components/ScriptPage.tsx

@@ -32,7 +32,7 @@ export default function ScriptPage() {
   useEffect(() => {
     const fetchCategories = async (): Promise<void> => {
       try {
-        const response = await fetch("/api/categories");
+        const response = await fetch("api/categories");
         if (!response.ok) {
           throw new Error("Failed to fetch categories");
         }

src/app/scripts/page.tsx

@@ -1,36 +1,32 @@
-import { Metadata } from "next";
+// import { Metadata } from "next";
 import ScriptPage from "./_components/ScriptPage";
 
-type Props = {
-  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
-};
+export const dynamic = "force-static";
 
-export async function generateMetadata(props: Props): Promise<Metadata | null> {
-  const searchParams = await props.searchParams;
-  const scriptName = searchParams.id;
+// type Props = {
+//   searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+// };
 
-  if (!scriptName || typeof scriptName !== "string") {
-    return null;
-  }
+// export async function generateMetadata(props: Props): Promise<Metadata | null> {
+//   const searchParams = await props.searchParams;
+//   const scriptName = searchParams.id;
 
-  const imageurl = `https://proxmoxve-scripts.com/api/og?title=${scriptName}`;
+//   if (!scriptName || typeof scriptName !== "string") {
+//     return null;
+//   }
 
-  return {
-    title: scriptName + " | Proxmox VE Helper-Scripts",
-    description: `This script is used to install ${scriptName} on your Proxmox VE host. | Proxmox VE Helper-Scripts is a collection of scripts to help manage your Proxmox Virtual Environment. with over 150+ scripts, you are sure to find what you need.`,
 
-    openGraph: {
-      title: scriptName + " | Proxmox VE Helper-Scripts",
-      description: `This script is used to install ${scriptName} on your Proxmox VE host. | Proxmox VE Helper-Scripts is a collection of scripts to help manage your Proxmox Virtual Environment. with over 150+ scripts, you are sure to find what you need.`,
-      url: `https://proxmoxve-scripts.com/scripts?id=${scriptName}`,
-      images: [
-        {
-          url: imageurl,
-        },
-      ],
-    },
-  };
-}
+//   return {
+//     title: scriptName + " | Proxmox VE Helper-Scripts",
+//     description: `This script is used to install ${scriptName} on your Proxmox VE host. | Proxmox VE Helper-Scripts is a collection of scripts to help manage your Proxmox Virtual Environment. with over 150+ scripts, you are sure to find what you need.`,
+
+//     openGraph: {
+//       title: scriptName + " | Proxmox VE Helper-Scripts",
+//       description: `This script is used to install ${scriptName} on your Proxmox VE host. | Proxmox VE Helper-Scripts is a collection of scripts to help manage your Proxmox Virtual Environment. with over 150+ scripts, you are sure to find what you need.`,
+//       url: `https://proxmoxve-scripts.com/scripts?id=${scriptName}`,
+//     },
+//   };
+// }
 
 export default function page() {
   return (

src/app/sitemap.ts

@@ -1,5 +1,7 @@
 import type { MetadataRoute } from "next";
 
+export const dynamic = "force-static";
+
 export default function sitemap(): MetadataRoute.Sitemap {
   return [
     {

src/components/CommandMenu.tsx

@@ -51,7 +51,7 @@ export default function CommandMenu() {
   React.useEffect(() => {
     const fetchCategories = async (): Promise<void> => {
       try {
-        const response = await fetch("/api/categories");
+        const response = await fetch("api/categories");
         if (!response.ok) {
           throw new Error("Failed to fetch categories");
         }
@@ -104,6 +104,7 @@ export default function CommandMenu() {
                   <div className="flex gap-2" onClick={() => setOpen(false)}>
                     <Image
                       src={script.logo}
+                      unoptimized
                       height={16}
                       width={16}
                       alt=""

src/components/Navbar.tsx

@@ -3,7 +3,6 @@ import { Button } from "@/components/ui/button";
 import Image from "next/image";
 import Link from "next/link";
 import { useEffect, useState } from "react";
-import logo from "../../public/logo.png";
 
 import { navbarLinks } from "@/config/siteConfig";
 
@@ -48,7 +47,13 @@ function Navbar() {
             href={"/"}
             className="flex cursor-pointer flex-row-reverse items-center gap-2 font-semibold sm:flex-row"
           >
-            <Image height={18} width={18} alt="logo" src={logo} />
+            <Image
+              height={18}
+              unoptimized
+              width={18}
+              alt="logo"
+              src="/proxmox-helper-scripts/logo.png"
+            />
             <span className="hidden lg:block">Proxmox VE Helper-Scripts</span>
           </Link>
           {/* <MobileNav /> */}