chore: add localization to UI and components

[GregoMac1]

Closes #150

[fmaclen]

Couple of edits:

• Updated PR title to chore: prefix so it doesn't trigger a release
• I removed Closes #151, we should do that in a separate PR

[GregoMac1]

@fmaclen I'm still working on this, I still haven't tried all the possible cases to see is every text is showing correclty.

Also, I've just merged main and I can see that there are new texts that I have to localize.

However, I'd like to ask you to please review it to see if the current approach is correct or if there's anything that needs to be changed.

PS: About the failing test, I don't exactly know why it fails. When I run npm run test on my computer, all tests finish successfully. Could it be something about the screenshots' size?

[fmaclen]

I'm not sure if you are still working on this but I left you some note changes.

In my experience with large projects that have a lot of localized strings grouping keys by "section" doesn't work very as the project grows.

Mainly because you end up with generic keys such as name, save, delete, server, etc that need to be used in other "sections", which if you are not super diligent about keeping things organized you quickly run into duplicates.

I think your grouping is okay for now, but we will probably start moving most of those keys up to the parent en tree.

[GregoMac1]

Thanks for the feedback! I'll apply the corrections.

Also, I was wondering on how to translate this, as it has text interpolated with html tags. Do you have any suggestion?

[fmaclen]

I was wondering on how to translate this

Yeah, these cases are tricky because we would need to interpolate components in the middle of a string.

I think the realistic solution to this issue is to re-write the sentences in such a way so the labels in the components can stand alone.

For example:

<p>
  {{ Change your server settings to allow connections }}
  <Badge capitalize={false}>OLLAMA_ORIGINS={ollamaURL.origin}</Badge>
  <a>{{ See docs }}</a>.
  {{ Also check no browser extensions are blocking the connection. }}
</p>

And in this example we can keep the <code> tags in the translated strings:

<p>
  {{ If you want to connect to an Ollama server that is not available on <code class="code">localhost</code> or <code class="code">127.0.0.1</code> you can try: }}
  <a>{{ Creating a tunnel }}</a>
  <a>{{ Allowing mixed content }}</a>
</p>

It sounds a bit more "robotic" but I think it's fine for now.

[fmaclen]

• Minor change in the sectionPage naming convention.
• We are missing the localized sentences in the Settings page, I left you some suggestions in this comment.
• We are also missing some dialog confirmations, errors, toast messages

[fmaclen]

You don't need sessions and sessionPage, you can just do:

sessions: {
  one: "Session",
  other: "Sessions"
}

settings: {
  one: "Setting",
}

Err, this doesn't work the way I was hoping it would 😞
Leave the naming convention you have already with the section and sectionPage.

[fmaclen]

I'll likely end up moving most of the keys as direct children of translation: { }

[GregoMac1]

@fmaclen I've translated the remaining texts.

And in this example we can keep the <code> tags in the translated strings:

<p>
  {{ If you want to connect to an Ollama server that is not available on <code class="code">localhost</code> or <code class="code">127.0.0.1</code> you can try: }}
  <a>{{ Creating a tunnel }}</a>
  <a>{{ Allowing mixed content }}</a>
</p>

About this quote of this comment, I've tried it in several ways using the escaping options, but I couldn't get to the desired result (image below), so for now I left the unformatted text in the translation.

As for the rest of texts with interpolated html tags, please let me know if you'd wish something to be changed.

[fmaclen]

I've tried it in several ways using the escaping options, but I couldn't get to the desired result

Try the svelte syntax {@html}, here's an example.

[fmaclen]

I think everything else looks good, once you fix the escaping issue let's get this one merged 👍

[GregoMac1]

Thank you! It worked!

Try the svelte syntax {@html}, here's an example.

About the example, I think you can get rid of the 'hack' by using eslint-disable-next-line instead of eslint-disable-line (check this commit), although I'm not sure if that was exactly the problem.

[fmaclen]

🎉 This PR is included in version 0.10.3 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀