localizePath and ids

[florian-lefebvre]

Hi, when using localizePath with and id in it (#contact for instance), it adds an / at the end. Here is a workaround I've made but not ideal:

return href.startsWith('#') ? href : localizePath(href)

[yassinedoghri]

Thank you for the issue, this is a duplicate of #77, so closing this one.

[phmn27]

return href.startsWith('#') ? href : localizePath(href)

Hi, I have the same problem here with /#contact which generates http://127.0.0.1:3000/fr/#contact/, could you explain the answer to this problem? return href.startsWith('#') ? href : localizePath(href)? Thank you!

[florian-lefebvre]

Hey sure! From what I can see, the only case where adding a / at the end of the localized path is annoying is when you want to go to an id. So let's say #contact. Then you're code should look like:

<a href="#contact">Link</a>

Then you want it to be localized, maybe because it's dynamic so it will become:

<a href={localizePath("#contact")}>Link</a>

And so it will generate your-path-with-locale/#contact/. The ending slash prevents the id scroll from working.
So using my code does exactly that:

return href.startsWith('#') ? href : localizePath(href)

However, if you url is path/#contact it won't work so you can update it like so (not tested):

return href.includes('#') ? localizePath(href).splice(-1) : localizePath(href)

Let me know if that wasn't clear enough 👍

[phmn27]

Thank for your quick and precise answer! Where i put this code "return href.startsWith('#') ? href : localizePath(href)"? In my layout.astro where is located my header?

<ul tabindex="0" class="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52"> <li><a href={localizePath("#solutions")}>{link1}</a></li> <li><a href={localizePath("#enfoque")}>{link2}</a></li> <li><a href={localizePath("#nosotros")}>{link3}</a></li> <li><a href={localizePath("/blog")}>{link4}</a></li> <li><a class="text-primary font-bold" href={localizePath("#contactanos")}>{link5}</a></li> </ul>

To be transparent i'm still learning js/ts ahah! Thank you 💯

[florian-lefebvre]

I would refactor is a little bit like so:

---
import { localizePath } from 'astro-i18next'
const links = [
    {
        href: '#solutions',
        name: 'Solutions',
    },
    {
        href: '#enfoque',
        name: 'Enfoque',
    },
    {
        href: '#nosotros',
        name: 'Nosotros',
    },
    {
        href: '/blog',
        name: 'Blog',
    },
    {
        href: '#contactanos',
        name: 'Contactanos',
        active: true,
    },
].map(({ href, name, active }) => ({
    name,
    active,
    href: href.startsWith('#') ? href : localizePath(href),
}))
---

<ul
    tabindex="0"
    class="menu menu-compact dropdown-content bg-base-100 rounded-box mt-3 w-52 p-2 shadow"
>
    {
        links.map(({ href, name, active }) => (
            <li>
                <a
                    class={active ? 'text-primary font-bold' : null}
                    href={localizePath(href)}
                >
                    {name}
                </a>
            </li>
        ))
    }
</ul>

[phmn27]

That's great, work for me! Thank you for your time!

[Baraff24]

If I am in another page this workaround does not work