feat: implementar navegación SPA con rutas limpias y redirección 404; actualizar enlaces en el menú

Author: migueldrdev

astro.config.mjs

@@ -5,6 +5,10 @@ import tailwindcss from '@tailwindcss/vite';
 
 // https://astro.build/config
 export default defineConfig({
+  // Configuración para SPA (Single Page Application)
+  // Esto maneja correctamente las rutas client-side
+  output: 'static',
+  
   image: {
     // Configuración de optimización de imágenes para Astro 5
     service: {

public/_redirects

@@ -0,0 +1,16 @@
+# Redirects para SPA - todas las rutas apuntan a index.html
+# Esto permite que /skills, /projects, etc. funcionen correctamente
+# El código 200 hace un "rewrite" sin cambiar la URL
+
+# Rutas de secciones
+/skills           /index.html   200
+/projects         /index.html   200
+/about-me         /index.html   200
+/experience       /index.html   200
+/contact          /index.html   200
+/aptitudes        /index.html   200
+/conocimientos    /index.html   200
+/otras-tecnologias /index.html   200
+
+# Catch-all para cualquier otra ruta (fallback)
+/*                /index.html   200

src/components/Projects.astro

@@ -28,7 +28,7 @@ const { projects = [] } = Astro.props as { projects: Array<Project> };
     <div class="my-slider flex transition-transform duration-500 ease-in-out">
       {
         projects.map((p: Project) => (
-          <article data-id={p.id} class="carousel-item shrink-0 w-full p-4">
+          <article data-id={p.id} class="carousel-item shrink-0 w-full pt-4">
             <Image
               src={projectImages[p.image]}
               alt={p.title}

src/components/navbar/Navbar.astro

@@ -149,16 +149,23 @@ const { menu = [] } = Astro.props;
       currentSectionId = sections[0].id;
     }
 
-    // Actualizamos clases
+    // Actualizamos clases y URL
     navLinks.forEach((link) => {
       const href = link.getAttribute("href");
       if (!href) return;
 
-      const linkId = href.substring(1); // Quitar el '#'
+      // Extraer ID desde la URL limpia: "/" -> "home", "/skills" -> "skills"
+      const linkId = href === "/" ? "home" : href.substring(1);
 
       if (linkId === currentSectionId) {
         link.classList.add(...activeClasses);
-        link.setAttribute("aria-current", "page"); // Accesibilidad
+        link.setAttribute("aria-current", "page");
+        
+        // Actualizar URL del navegador solo si es diferente (sin recargar)
+        const currentPath = window.location.pathname;
+        if (currentPath !== href) {
+          window.history.replaceState({ section: linkId }, "", href);
+        }
       } else {
         link.classList.remove(...activeClasses);
         link.removeAttribute("aria-current");
@@ -190,31 +197,39 @@ const { menu = [] } = Astro.props;
   };
 
   /**
-   * Configura el Smooth Scroll para enlaces internos
+   * Configura el Smooth Scroll para enlaces internos con URLs limpias (sin #)
+   * Usa History API para mantener URLs profesionales
    */
   const initSmoothScroll = (): void => {
+    // Seleccionar enlaces internos (que empiezan con / y son de la misma página)
     document
-      .querySelectorAll<HTMLAnchorElement>('a[href^="#"]')
+      .querySelectorAll<HTMLAnchorElement>('nav a.nav-link')
       .forEach((anchor) => {
         anchor.addEventListener("click", function (e) {
           e.preventDefault();
           const href = this.getAttribute("href");
           if (!href) return;
 
-          const targetId = href.substring(1);
+          // Extraer el ID de la sección desde la URL
+          // "/" -> "home", "/skills" -> "skills"
+          const targetId = href === "/" ? "home" : href.substring(1);
           const targetElement = document.getElementById(targetId);
 
           if (targetElement) {
-            const headerOffset = 80; // Ajustar según la altura real de tu navbar
+            const headerOffset = 80;
             const elementPosition = targetElement.getBoundingClientRect().top;
             const offsetPosition =
               elementPosition + window.scrollY - headerOffset;
 
+            // Scroll suave a la sección
             window.scrollTo({
               top: offsetPosition,
               behavior: "smooth",
             });
 
+            // Actualizar URL usando History API
+            window.history.pushState({ section: targetId }, "", href);
+
             // Cerrar menú móvil si está abierto
             const collapseTarget = document.getElementById("navbar-sticky");
             if (
@@ -229,6 +244,59 @@ const { menu = [] } = Astro.props;
       });
   };
 
+  /**
+   * Maneja la navegación con botones atrás/adelante del navegador
+   */
+  const handleBrowserNavigation = (): void => {
+    window.addEventListener("popstate", (event) => {
+      if (event.state && event.state.section) {
+        const targetElement = document.getElementById(event.state.section);
+        if (targetElement) {
+          const headerOffset = 80;
+          const elementPosition = targetElement.getBoundingClientRect().top;
+          const offsetPosition =
+            elementPosition + window.scrollY - headerOffset;
+
+          window.scrollTo({
+            top: offsetPosition,
+            behavior: "smooth",
+          });
+        }
+      } else {
+        // Si no hay state, ir al inicio
+        window.scrollTo({ top: 0, behavior: "smooth" });
+      }
+    });
+  };
+
+  /**
+   * Maneja la navegación inicial cuando se carga la página con una ruta específica
+   * Ejemplo: si cargas /skills directamente, hace scroll a esa sección
+   */
+  const handleInitialNavigation = (): void => {
+    const currentPath = window.location.pathname;
+    
+    // Si no es la raíz, intentar scroll a la sección correspondiente
+    if (currentPath !== '/') {
+      const sectionId = currentPath.substring(1); // /skills -> skills
+      const targetElement = document.getElementById(sectionId);
+      
+      if (targetElement) {
+        // Pequeño delay para asegurar que el DOM está listo
+        setTimeout(() => {
+          const headerOffset = 80;
+          const elementPosition = targetElement.getBoundingClientRect().top;
+          const offsetPosition = elementPosition + window.scrollY - headerOffset;
+          
+          window.scrollTo({
+            top: offsetPosition,
+            behavior: 'smooth',
+          });
+        }, 100);
+      }
+    }
+  };
+
   // --- INICIALIZACIÓN MAESTRA ---
 
   const initNavbar = (): void => {
@@ -237,6 +305,8 @@ const { menu = [] } = Astro.props;
     handleScrollSpy();
     initMobileMenu();
     initSmoothScroll();
+    handleBrowserNavigation();
+    handleInitialNavigation();
 
     // 2. Event Listener para Scroll (Optimizado con requestAnimationFrame)
     let ticking = false;

src/data/menu.json

@@ -1,49 +1,49 @@
 [
   {
     "id": "home",
-    "href": "#home",
+    "href": "/",
     "label": "Home"
   },
   {
     "id": "about-me",
-    "href": "#about-me",
+    "href": "/about-me",
     "label": "About Me"
   },
   {
     "id": "skills",
-    "href": "#skills",
+    "href": "/skills",
     "label": "Skills"
   },
   {
     "id": "experience",
-    "href": "#experience",
+    "href": "/experience",
     "label": "Experience",
     "items": [
       {
         "id": "aptitudes",
         "label": "Aptitudes",
-        "href": "#aptitudes",
+        "href": "/aptitudes",
         "current": false
       },
-      { "id": "conocimientos", "label": "Conocimientos", "href": "#conocimientos", "current": false },
+      { "id": "conocimientos", "label": "Conocimientos", "href": "/conocimientos", "current": false },
       {
         "id": "projects",
         "label": "Projects",
-        "href": "#projects",
+        "href": "/projects",
         "current": false
       },
       {
         "id": "otras-tecnologias",
         "label": "Otras Tecnologías",
-        "href": "#otras-tecnologias",
+        "href": "/otras-tecnologias",
         "current": false,
         "divider": true
       }
     ]
   },
   {
     "id": "contact",
-    "href": "#contact",
+    "href": "/contact",
     "label": "Contact",
     "current": false
   }

src/pages/404.astro

@@ -0,0 +1,28 @@
+---
+// Esta página se muestra cuando hay un 404
+// Redirige automáticamente al index manteniendo el path para client-side routing
+---
+
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Cargando...</title>
+  <script>
+    // Redirección inmediata al index manteniendo el path
+    // Esto permite que el client-side routing maneje la navegación
+    const currentPath = window.location.pathname;
+    const search = window.location.search;
+    const hash = window.location.hash;
+    
+    // Redirigir al index con el path como state
+    window.location.replace('/' + search + hash);
+  </script>
+</head>
+<body>
+  <div style="display: flex; justify-content: center; align-items: center; height: 100vh; font-family: system-ui;">
+    <p>Cargando...</p>
+  </div>
+</body>
+</html>