From ef017540a2ffa4732d9b52d0d8d1e026f43554cd Mon Sep 17 00:00:00 2001
From: Jorge Baumann <jorge.baumann.aguilar@gmail.com>
Date: Wed, 5 Jun 2024 17:52:53 +0200
Subject: [PATCH] fix: link, add uses, add active link, remove fb ico

---
 src/components/ArticleCard.astro |  4 ++--
 src/components/Footer.astro      | 10 +++++----
 src/components/NavBar.astro      | 37 +++++++++++++++-----------------
 src/components/UsesPage/uses.md  |  6 ++++--
 src/styles/global.css            | 11 +++++++++-
 5 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/src/components/ArticleCard.astro b/src/components/ArticleCard.astro
index 41cf48c..01fc6c4 100644
--- a/src/components/ArticleCard.astro
+++ b/src/components/ArticleCard.astro
@@ -40,7 +40,7 @@ if (!images[`/src/assets/authors/${authorParsed}.avif`])
           />
         </div>
         <h2 class='mt-2 text-lg font-semibold text-gray-900 group-hover:text-gray-600'>
-          <a href={`/blog/${post.slug}/`}>
+          <a href={`/blog/${post.slug}`}>
             <span class='absolute inset-0' />
             {post.data.title}
           </a>
@@ -63,7 +63,7 @@ if (!images[`/src/assets/authors/${authorParsed}.avif`])
           {post.data.author}
         </a> */}
         <a
-          href='`{/blog/${post.slug}/`}'
+          href={`/blog/${post.slug}`}
           class='text-sm font-semibold leading-6 text-violet-700 hover:text-violet-600'
         >
           Ver más &rarr;
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 471a8b6..d48f502 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -278,7 +278,8 @@ const today = new Date();
               ></path></g
             ></svg
           ></a
-        ><a
+        >
+        <!-- <a
           href='https://www.facebook.com/Baumannzone-Desarrollo-Full-Stack-Javascript-110550534472293'
           target='_blank'
           rel=' noopener noreferrer'
@@ -296,9 +297,10 @@ const today = new Date();
               ><path
                 d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'
               ></path></g
-            ></svg
-          ></a
-        ><a
+            >
+          </svg>
+        </a> -->
+        <a
           href='https://codepen.com/baumannzone'
           target='_blank'
           rel=' noopener noreferrer'
diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
index d269a61..107cc2a 100644
--- a/src/components/NavBar.astro
+++ b/src/components/NavBar.astro
@@ -1,6 +1,5 @@
 ---
 const currentPath = Astro.url.pathname;
-console.log('🚀 ~ currentPath:', currentPath);
 
 const links = [
   { href: '/', text: 'Inicio' },
@@ -37,17 +36,12 @@ const links = [
           >
         </div>
 
-        <div class='hidden sm:ml-6 sm:flex sm:space-x-8'>
-          <!-- Current: "border-violet-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
+        <div class='hidden sm:ml-6 sm:flex sm:space-x-8' id='desktop-menu'>
           {
             links.map((link) => (
               <a
                 href={link.href}
-                class={`relative inline-flex items-center border-b-4 px-1 pt-1 text-sm font-medium ${
-                  currentPath === link.href
-                    ? 'border-violet-500 text-gray-900'
-                    : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
-                }`}
+                class='relative inline-flex items-center border-b-4 px-1 pt-1 text-sm font-medium border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
               >
                 {link.text}
                 {/* {link.showDot && (
@@ -70,11 +64,6 @@ const links = [
         >
           <span class='absolute -inset-0.5'></span>
           <span class='sr-only'>Open main menu</span>
-          <!--
-            Icon when menu is closed.
-
-            Menu open: "hidden", Menu closed: "block"
-          -->
           <svg
             class='block h-6 w-6'
             fill='none'
@@ -111,19 +100,13 @@ const links = [
     </div>
   </div>
 
-  <!-- Mobile menu, show/hide based on menu state. -->
   <div class='hidden sm:hidden' id='mobile-menu'>
     <div class='space-y-1 pb-3 pt-2'>
-      <!-- Current: "bg-violet-50 border-violet-500 text-violet-700", Default: "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700" -->
       {
         links.map((link) => (
           <a
             href={link.href}
-            class={`block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium ${
-              currentPath === link.href
-                ? 'border-violet-500 bg-violet-50 text-violet-700'
-                : 'text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700'
-            }`}
+            class='block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700'
           >
             {link.text}
           </a>
@@ -134,10 +117,24 @@ const links = [
 </nav>
 
 <script>
+  // Toggle mobile menu
   const mobileMenuButton = document.getElementById('mobile-menu-button');
   const mobileMenu = document.getElementById('mobile-menu');
 
   mobileMenuButton?.addEventListener('click', () => {
     mobileMenu?.classList.toggle('hidden');
   });
+
+  // Add active class to current link
+  const navLinks = document.querySelectorAll('nav a');
+  const currentURL = window.location.href;
+  navLinks.forEach((link) => {
+    if ((link as HTMLAnchorElement).href === currentURL) {
+      if (link.parentElement?.id === 'desktop-menu') {
+        link.classList.add('active-link');
+      } else {
+        link.classList.add('active-link-mobile');
+      }
+    }
+  });
 </script>
diff --git a/src/components/UsesPage/uses.md b/src/components/UsesPage/uses.md
index 58006d3..607ca98 100644
--- a/src/components/UsesPage/uses.md
+++ b/src/components/UsesPage/uses.md
@@ -120,13 +120,15 @@ Con **Oh My Zsh** puedes cambiar fácilmente de temas y elegir el que más te gu
 
 ## Gadgets & Tools
 
-- [DJI OM 5](https://amzn.to/2XF7UGz) - Estabilizador para móviles DJI OM 5 de 3 ejes. Color _athen gray_.
+- [DJI OM 5](https://amzn.to/2XF7UGz) - Estabilizador para móviles DJI OM 5 de 3 ejes. Color _athen gray_. Si te mola grabar vídeos con el móvil, este es tu gadget.
 - [Mini Dron Tello](https://amzn.to/3ldFr4l) - Un mini dron de DJI. Se puede programar con `JavaScript`.
-- [Fidget Cube](https://www.kickstarter.com/projects/antsylabs/fidget-cube-a-vinyl-desk-toy)
+- [Fidget Cube](https://amzn.to/3RgkwwV) - Cubo antiestrés. Un vicio. Tiene botones, ruedas, interruptores y bolitas para jugar.
 - [iPhone 12 Mini Púrpura](https://www.apple.com/es/iphone-12/key-features/) - Mi primer móvil de Apple. Me encanta que sea tan pequeño. Más portable y manejable.
 - [Amazon Kindle eBook](https://amzn.to/3xkVSys)
 - [Power Ball](https://amzn.to/4bYITH4) - Bola Giratoria para mover un poco las muñecas.
 - [DYMO Label Maker](https://amzn.to/4dX1OUB) - Impresora de etiquetas para tener todo bien organizado.
+- [Raspberry Pi 3 B](https://amzn.to/3x4XkL6) - La uso para hacer pruebas y experimentos. Es un mini ordenador que actualmente tiene instalado [Retropie](https://retropie.org.uk/).
+- [Mandos Super Nintendo USB](https://amzn.to/3x28pg0) - Versión no original de los mandos de la Super Nintendo. Los uso con la Raspberry Pi para jugar a los juegos de mi infancia.
 
 ---
 
diff --git a/src/styles/global.css b/src/styles/global.css
index b94602b..fed5a4a 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -23,4 +23,13 @@
     @apply sm:px-6;
     @apply lg:px-8;
   }
-}
\ No newline at end of file
+
+  .active-link {
+    @apply border-violet-500 text-gray-900 !important;
+  }
+
+  .active-link-mobile {
+    @apply border-violet-500 bg-violet-50 text-violet-700 !important;
+  }
+}
+