#Astro won't load the appropriate partials depending on the selected language

5 messages · Page 1 of 1 (latest)

real hawk
#

I'm working on a project with HTMX, partials and the new internationalization feature.

Everything works great on dev. I've made a language picker component and when I switch languages, the appropriate partials load correctly. I've also implemented some logic to change some text depending on the pathname in Astro.url (nothing really fancy).

The thing is, when I go to my site deployed at Netlify and switch languages, it only loads one of the partials and everything else remains the same. I'd love some extra eyes (and brains) to help me figure out what is happening here. I'm probably doing something wrong, I won't discard that.

Here's my site deployed at Netlify:
https://evelazquez.dev/

Here's my project's repo:
https://github.com/eliasvelazquezdev/esvdev_portfolio

GitHub

Contribute to eliasvelazquezdev/esvdev_portfolio development by creating an account on GitHub.

#

This is my project structure

#

This is my navbar component, so you can see how's my approach on this matter (I only pasted one of the links from my navbar, since the other ones are practically the same)


import { getAbsoluteLocaleUrl, getAbsoluteLocaleUrlList } from 'astro:i18n';
import LanguageSelector from '../components/LanguageSelector.astro';

const url = Astro.url.pathname;

---
<nav class="nav-links xl:flex xl:justify-between">
  <ul class="nav-tabs flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400">
    <li class="me-2 nav-item">
        <a  href="" 
            aria-current="page" 
            class="inline-block p-4 rounded-t-lg active text-blue-600 bg-gray-100 hover:text-gray-600 hover:bg-gray-50"
            hx-get={
              url == '/es' ? getAbsoluteLocaleUrl("es", "welcome", {
                            prependWith: "partials"
                          })
              :
              "/partials/welcome"
            }
            hx-trigger="click"
            hx-target="#parent-div"
            hx-swap="innerHTML transition:true"
        >
          {url == '/es' ? 'Inicio' : 'Home'}
        </a>
    </li>
#

As you can see, this is what I'm doing:

If url.pathname contains the '/es' string, it means the site is on Spanish, so I tell Astro to go find the partial named "welcome" on the partials folder. Otherwise, the site is on english and should load the partial with english content.

Again, if the pathname has '/es' on it, it means the site is on Spanish and Astro should show 'Inicio' as the name for that navbar element, otherwise should show 'Home'.

Like I said, everything works flawlessly on dev. Check how it works on Netlify with the link I provided before.

real hawk
#

I just discovered the "npm run preview" command. I'm testing this locally after building the site and it doesn't work as expected, so at least now I know that it has nothing to do with Netlify. Something's wrong with my approach.