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 →
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;
+ }
+}
+