Implemented basepath variable

References to files in the project should be able to be resolved automatically for the website change over.

Author: Jacobdeanr

app/lib/basepath.tsx

@@ -0,0 +1,5 @@
+export const BASE = process.env.NEXT_PUBLIC_BASE_PATH || '';
+
+export function withBase(p: string) {
+  return `${BASE}${p}`;
+}

app/skyboxes/[slug]/skybox-client.tsx

@@ -1,12 +1,12 @@
 'use client';
+import { withBase } from '@/app/lib/basepath';
 
 import { useState } from 'react';
 import Link from 'next/link';
 import SunParams from '@/app/ui/sunparameters';
 import FogParams from '@/app/ui/fogparameters';
 import MapList from '@/app/ui/maplist';
 import DownloadButton from '@/app/ui/downloadbutton';
-import TechnicalDetails from '@/app/ui/technical-details';
 
 interface SkyboxClientProps {
   slug: string;
@@ -17,7 +17,7 @@ interface SkyboxClientProps {
 export default function SkyboxClient({ slug, skyboxData, previewCount }: SkyboxClientProps) {
   const [activeImage, setActiveImage] = useState(1);
   console.log(activeImage)
-  const imgBase = `/Source_Skyboxes_NextJS/skyboxes/${slug}/images`;
+  const imgBase = withBase(`/skyboxes/${slug}/images`);
   // Generate array of preview numbers based on previewCount
   const previews = Array.from({ length: previewCount }, (_, i) => i + 1);
 
@@ -30,7 +30,7 @@ export default function SkyboxClient({ slug, skyboxData, previewCount }: SkyboxC
           className="inline-flex items-center text-neutral-400 hover:text-white transition-colors mb-6"
         >
           <img 
-            src="/Source_Skyboxes_NextJS/icons/back.svg" 
+            src={withBase(`/icons/back.svg`)} 
             alt="" 
             className="invert w-5 h-5 mr-2" 
           />
@@ -74,7 +74,7 @@ export default function SkyboxClient({ slug, skyboxData, previewCount }: SkyboxC
             </div>
           </div>
           <DownloadButton
-            href={`/Source_Skyboxes_NextJS/skyboxes/${slug}/downloads/${slug}.7z`}
+            href={`${withBase(`/skyboxes/${slug}/downloads/${slug}.7z`)}`}
             download
             size={skyboxData.fileSize}
             className="w-full md:w-auto"

app/ui/downloadbutton.tsx

@@ -1,5 +1,5 @@
 'use client';
-
+import { withBase } from '@/app/lib/basepath';
 import type { ComponentPropsWithoutRef } from 'react';
 
 interface DownloadButtonProps extends ComponentPropsWithoutRef<'a'> {
@@ -43,7 +43,7 @@ export default function DownloadButton({
 
       <span className="relative flex items-center gap-2">
         <img 
-          src="/Source_Skyboxes_NextJS/icons/download.svg" 
+          src={`${withBase(`/icons/download.svg`)}`} 
           alt="" 
           className="w-4 h-4 shrink-0 opacity-90 group-hover:opacity-100 transition-opacity invert brightness-0"
         />

app/ui/maplist.tsx

@@ -1,4 +1,5 @@
 type MapLink = { name: string; url: string };
+import { withBase } from '@/app/lib/basepath';
 
 export default function MapList({ maps }: { maps?: MapLink[] }) {
   if (!maps?.length)
@@ -28,7 +29,7 @@ export default function MapList({ maps }: { maps?: MapLink[] }) {
               <span className="text-sm text-neutral-100">{m.name}</span>
 
               {/* external-link arrow */}
-              <img src="/Source_Skyboxes_NextJS/icons/maximize.svg" alt="" className="invert w-4 h-4" />
+              <img src={`${withBase(`/icons/maximize.svg`)}`} alt="" className="invert w-4 h-4" />
             </a>
           </li>
         ))}

app/ui/modal.tsx

@@ -4,11 +4,12 @@ import Meta from './meta';
 import SunParams from './sunparameters';
 import FogParams from './fogparameters';
 import ViewDetailsButton from './view-details-button';
+import { withBase } from '@/app/lib/basepath';
 
 // Simple chevron icon component
 const ChevronIcon = ({ isOpen }: { isOpen: boolean }) => (
   <img 
-    src="/Source_Skyboxes_NextJS/icons/right-thin-chevron.svg" 
+    src={`${withBase(`/icons/right-thin-chevron.svg`)}`} 
     alt="" 
     className={`invert w-3 h-3 transition-transform ${isOpen ? 'rotate-90' : 'rotate-270'}`} 
   />
@@ -48,10 +49,10 @@ function useModalBehaviour(onClose: () => void) {
 export default function Modal({ slug, onClose }: { slug: string; onClose: () => void }) {
   const [meta, setMeta] = useState<Meta | null>(null);
   const [isExpanded, setIsExpanded] = useState(false);
-  const imgBase = `/Source_Skyboxes_NextJS/skyboxes/${slug}/images`;
+  const imgBase = `${withBase(`/skyboxes/${slug}/images`)}`;
 
   useEffect(() => { 
-    fetch(`/Source_Skyboxes_NextJS/data/${slug}.json`)
+    fetch(`${withBase(`/data/${slug}.json`)}`)
       .then(r => r.ok ? r.json() : null)
       .then(setMeta); 
   }, [slug]);

app/ui/profile-links.ts

@@ -1,18 +1,20 @@
 /* app/ui/profile-links.ts */
+import { withBase } from '@/app/lib/basepath';
+
 export const profileLinks = [
   {
     href: 'https://github.com/Jacobdeanr',
     label: 'GitHub',
-    svg: '/Source_Skyboxes_NextJS/icons/github-mark-white.svg',
+    svg: `${withBase(`/icons/github-mark-white.svg`)}`,
   },
   {
     href: 'https://discord.gg/grqAfezMVs',
     label: 'Discord',
-    svg: '/Source_Skyboxes_NextJS/icons/discord-symbol-white.svg',
+    svg: `${withBase(`/icons/discord-symbol-white.svg`)}`,
   },
   {
     href: 'https://steamcommunity.com/id/Jakobi_OBrien',
     label: 'Steam',
-    svg: '/Source_Skyboxes_NextJS/icons/steam-logo.svg',
+    svg: `${withBase(`/icons/steam-logo.svg`)}`,
   },
 ];

app/ui/skyboxcard.tsx

@@ -3,6 +3,7 @@
 import Image from 'next/image';
 import Modal from './modal';
 import { useState } from 'react';
+import { withBase } from '@/app/lib/basepath';
 
 import type { Sun } from './sunparameters';
 
@@ -19,7 +20,7 @@ interface SkyboxCardProps {
 export default function SkyboxCard({ slug, meta }: SkyboxCardProps) {
   const [open, setOpen] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
-  const imgBase = `/Source_Skyboxes_NextJS/skyboxes/${slug}/images`;
+  const imgBase = withBase(`/skyboxes/${slug}/images`);
 
   const displayTitle = meta?.title || slug
 

app/ui/view-details-button.tsx

@@ -2,6 +2,7 @@
 
 import { ComponentPropsWithoutRef } from 'react';
 import Link from 'next/link';
+import { withBase } from '@/app/lib/basepath';
 
 interface ViewDetailsButtonProps extends ComponentPropsWithoutRef<typeof Link> {
   label?: string;
@@ -32,7 +33,7 @@ export default function ViewDetailsButton({
       `}
     >
       <div className="flex items-center gap-2">
-        <img src="/Source_Skyboxes_NextJS/icons/maximize.svg" alt="" className="invert w-3 h-3 text-neutral-300 group-hover:text-white transition-colors " />
+        <img src={`${withBase(`/icons/maximize.svg`)}`} alt="" className="invert w-3 h-3 text-neutral-300 group-hover:text-white transition-colors " />
         {label}
       </div>
     </Link>

next.config.ts

@@ -1,9 +1,11 @@
 import type { NextConfig } from "next";
 
+const repoBase = process.env.NEXT_PUBLIC_BASE_PATH || '';
+
 const nextConfig: NextConfig = {
   output: "export",
-  basePath: "/Source_Skyboxes_NextJS",
-  assetPrefix: "/Source_Skyboxes_NextJS",
+  basePath: repoBase,
+  assetPrefix: repoBase,
   images: {
     unoptimized: true,
   },