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?

[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.

[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.

[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]

:tada: This PR is included in version 0.10.3 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: