Link and withBasePath

Author: lazarusA

src/app/resources/guides/page.mdx

@@ -2,14 +2,14 @@
 import ContentSplitSection from '@/components/ContentSplitSection';
 import Image from 'next/image';
 import SharedContent from './SharedContent.mdx'
-
+import { withBasePath } from '@/lib/utils';
 
 <ContentSplitSection
     title="Elevate Your Project" 
     subtitle="Our template helps you reach new heights with innovative solutions"
     media={
         <Image 
-          src="/logo.png" 
+          src={withBasePath("/logo.png")}
           alt="A futuristic concept" 
           width={100} 
           height={100} 

src/components/DesktopMenu.tsx

@@ -27,13 +27,13 @@ type NavigationProps = {
 }
 
 const ListItem = React.forwardRef<
-  React.ElementRef<"a">,
-  React.ComponentPropsWithoutRef<"a">
+  React.ElementRef<typeof Link>,
+  React.ComponentPropsWithoutRef<typeof Link> & { title: string }
 >(({ className, title, children, ...props }, ref) => {
   return (
     <li>
       <NavigationMenuLink asChild>
-        <a
+        <Link
           ref={ref}
           className={cn(
             "block select-none rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
@@ -47,12 +47,12 @@ const ListItem = React.forwardRef<
               {children}
             </p>
           )}
-        </a>
+        </Link>
       </NavigationMenuLink>
     </li>
-  )
-})
-ListItem.displayName = "ListItem"
+  );
+});
+ListItem.displayName = "ListItem";
 
 const DesktopMenu = ({ items }: NavigationProps) => {
   return (

src/components/Funding.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import Image from 'next/image';
 import { FundingProps, LogoItem } from './FooterTypes';
+import { withBasePath } from '@/lib/utils';
+
 
 const Logo = ({ logo }: { logo: LogoItem }) => {
   const image = (
     <Image 
-      src={logo.src} 
+      src={withBasePath(logo.src)} 
       alt={logo.alt} 
       width={logo.width}
       height={logo.height}

src/components/Logo.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
+import { withBasePath } from '@/lib/utils';
 
 interface LogoProps {
   icon?: string;
@@ -11,7 +12,7 @@ const LogoProject = ({ icon = '', title = '' }: LogoProps) => {
   return (
     <div className="flex-shrink-0 flex items-center mr-4">
         <Link href="/">
-            <Image src={icon} alt={title} width={32} height={32} className="mr-4"/>
+            <Image src={withBasePath(icon)} alt={title} width={32} height={32} className="mr-4"/>
         </Link>
         <Link href="/" className="font-bold text-[var(--link-color)] hover:text-[var(--link-hover)]">
             {title}

src/lib/utils.ts

@@ -4,3 +4,9 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+
+export const withBasePath = (path: string) => {
+  const basePath =  process.env.NODE_ENV === 'production' ? '/next-project-site' : ''
+  return `${ basePath || ''}${path}`;
+};