fix: normalizza il baseUrl in vari componenti per gestire correttamente dev e produzione

Author: aborruso

src/components/HamburgerMenuReact.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { normalizeBaseUrl } from '../lib/paths';
 
 interface HamburgerMenuReactProps {
   baseUrl: string;
@@ -7,6 +8,9 @@ interface HamburgerMenuReactProps {
 export default function HamburgerMenuReact({ baseUrl }: HamburgerMenuReactProps) {
   const [isOpen, setIsOpen] = useState(false);
 
+  // Normalizza il baseUrl per gestire correttamente dev e produzione
+  const normalizedBaseUrl = normalizeBaseUrl(baseUrl);
+
   const toggleMenu = () => {
     setIsOpen(!isOpen);
   };
@@ -59,7 +63,7 @@ export default function HamburgerMenuReact({ baseUrl }: HamburgerMenuReactProps)
       >
         <div className="py-2">
           <a
-            href={baseUrl}
+            href={normalizedBaseUrl || '/'}
             className="block px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors duration-150"
             onClick={closeMenu}
           >
@@ -72,7 +76,7 @@ export default function HamburgerMenuReact({ baseUrl }: HamburgerMenuReactProps)
           </a>
 
           <a
-            href={`${baseUrl.replace(/\/$/, '')}/tabella`}
+            href={`${normalizedBaseUrl}/tabella`}
             className="block px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors duration-150"
             onClick={closeMenu}
           >
@@ -85,7 +89,7 @@ export default function HamburgerMenuReact({ baseUrl }: HamburgerMenuReactProps)
           </a>
 
           <a
-            href={`${baseUrl.replace(/\/$/, '')}/info`}
+            href={`${normalizedBaseUrl}/info`}
             className="block px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors duration-150"
             onClick={closeMenu}
           >

src/components/TableView.tsx

@@ -1,6 +1,7 @@
-import { useState, useMemo, useEffect, useCallback } from 'react';
+import React, { useState, useMemo, useEffect, useCallback } from 'react';
 import type { Initiative } from '../types/initiative';
-import { formatNumber } from '../lib/initiatives';
+import { formatDate, formatNumber, isSigningActive } from '../lib/initiatives';
+import { normalizeBaseUrl } from '../lib/paths';
 import HamburgerMenuReact from './HamburgerMenuReact';
 import { ArrowLeftIcon, XMarkIcon } from '@heroicons/react/24/outline';
 
@@ -17,6 +18,9 @@ export default function TableView({ initiatives, baseUrl }: TableViewProps) {
   const [categoryFilter, setCategoryFilter] = useState('');
   const [statusFilter, setStatusFilter] = useState('');
   const [typeFilter, setTypeFilter] = useState('');
+
+  // Normalizza il baseUrl per gestire correttamente dev e produzione
+  const normalizedBaseUrl = normalizeBaseUrl(baseUrl);
   const [sortColumn, setSortColumn] = useState<SortColumn>('dataApertura');
   const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
   const [isInitialized, setIsInitialized] = useState(false);
@@ -353,7 +357,7 @@ export default function TableView({ initiatives, baseUrl }: TableViewProps) {
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center h-16">
             <div className="flex items-center">
-              <a href={baseUrl} className="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium">
+              <a href={normalizedBaseUrl || '/'} className="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium">
                 <ArrowLeftIcon className="w-5 h-5 mr-2" />
                 Torna alle iniziative
               </a>
@@ -552,7 +556,7 @@ export default function TableView({ initiatives, baseUrl }: TableViewProps) {
                     <tr key={initiative.id} className="hover:bg-gray-50">
                       <td className="px-6 py-4">
                         <a
-                          href={`${baseUrl.replace(/\/$/, '')}/initiative/${initiative.id}`}
+                          href={`${normalizedBaseUrl}/initiative/${initiative.id}`}
                           className="text-blue-600 hover:text-blue-800 font-medium"
                         >
                           {initiative.titolo}

src/layouts/Layout.astro

@@ -20,8 +20,16 @@ const ogImageUrl = (() => {
   const site = Astro.site?.toString() || '';
   const baseUrl = import.meta.env.BASE_URL || '/';
   const cleanSite = site.replace(/\/$/, '');
-  // Assicuriamoci che baseUrl finisca sempre con /
-  const cleanBase = baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`;
+
+  // Gestisci correttamente il baseUrl per dev e produzione
+  let cleanBase = '';
+  if (baseUrl !== '/') {
+    cleanBase = baseUrl.startsWith('/') ? baseUrl : `/${baseUrl}`;
+    cleanBase = cleanBase.endsWith('/') ? cleanBase : `${cleanBase}/`;
+  } else {
+    cleanBase = '/';
+  }
+
   return `${cleanSite}${cleanBase}og-images/${ogImage}`;
 })();
 ---
@@ -34,7 +42,13 @@ const ogImageUrl = (() => {
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/svg+xml" href={(() => {
       const baseUrl = import.meta.env.BASE_URL || '/';
-      return baseUrl.endsWith('/') ? `${baseUrl}favicon.svg` : `${baseUrl}/favicon.svg`;
+      // Se è solo '/', non aggiungere nulla prima del favicon.svg
+      if (baseUrl === '/') {
+        return '/favicon.svg';
+      }
+      // Altrimenti, rimuovi trailing slash e aggiungi favicon
+      const cleanBase = baseUrl.replace(/\/$/, '');
+      return `${cleanBase}/favicon.svg`;
     })()} />
     <title>{title}</title>
 

src/lib/paths.ts

@@ -7,5 +7,21 @@ export function getBasePath(): string {
 export function createPath(path: string): string {
   const basePath = getBasePath();
   const cleanPath = path.startsWith('/') ? path : `/${path}`;
+
+  // Se basePath è vuoto (modalità dev), restituisci solo il path
+  if (!basePath || basePath === '') {
+    return cleanPath;
+  }
+
   return basePath + cleanPath;
 }
+
+// Utility per gestire correttamente il baseUrl in modalità dev e produzione
+export function normalizeBaseUrl(baseUrl: string): string {
+  // Se è solo '/', restituisci stringa vuota per evitare doppie slash
+  if (baseUrl === '/') {
+    return '';
+  }
+  // Rimuovi trailing slash se presente
+  return baseUrl.replace(/\/$/, '');
+}

src/pages/initiative/[id].astro

@@ -43,6 +43,15 @@ const description = String(initiative.descrizioneBreve || initiative.descrizione
 const fullTitle = `${title} - Referendum e Iniziative Popolari`;
 const signingActive = isSigningActive(initiative);
 const ogImage = `og-${initiative.id}.png`;
+
+// Funzione per normalizzare il baseUrl
+const normalizeBaseUrl = (baseUrl: string): string => {
+  if (baseUrl === '/') return '';
+  return baseUrl.replace(/\/$/, '');
+};
+
+const normalizedBaseUrl = normalizeBaseUrl(import.meta.env.BASE_URL || '/');
+
 const currentUrl = (() => {
   const site = Astro.site?.toString() || '';
   const baseUrl = import.meta.env.BASE_URL || '/';
@@ -85,7 +94,7 @@ const currentUrl = (() => {
         <!-- Badges -->
         <div class="flex flex-wrap gap-2 sm:gap-3 mb-4 sm:mb-6">
           <a
-            href={`${import.meta.env.BASE_URL.replace(/\/$/, '')}/?categoria=${encodeURIComponent(initiative.idDecCatIniziativa?.nome || '')}`}
+            href={`${normalizedBaseUrl}/?categoria=${encodeURIComponent(initiative.idDecCatIniziativa?.nome || '')}`}
             class="inline-flex items-center px-2 py-1 sm:px-3 sm:py-1 rounded-full text-xs sm:text-sm font-medium bg-blue-100 text-blue-800 hover:bg-blue-200 transition-colors duration-200 cursor-pointer"
           >
             <TagIcon className="w-3 h-3 sm:w-4 sm:h-4 mr-1" />