Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

I18n #17

Open
aalin opened this issue Sep 30, 2022 · 0 comments
Open

I18n #17

aalin opened this issue Sep 30, 2022 · 0 comments
Labels
enhancement New feature or request

Comments

@aalin
Copy link
Contributor

aalin commented Sep 30, 2022

I like that CSS files are close to the component files, so why not I18n files too?

So you would have:

MyComponent.rux
MyComponent.css
MyComponent.intl.en.toml
MyComponent.intl.en-US.toml
MyComponent.intl.es-CO.toml
MyComponent.intl.sv-SE.toml

where MyComponent.intl.en-US.toml contains:

title = "Welcome to my page"
body = '''
Hello world
'''

And then inside a component:

def render
  <div>
    <h1>{t(:title)}</h1>
    <p>{t(:body)}</p>
  </div>
end

If the user has accept-lang: en-US they would get translations from .intl.en-US.toml or .intl.en.toml... it should always try to find the best language for the user based on their browser preferences, and then there should probably be a way to override this setting with a cookie.

I think that would be a good start. Then at some later point it will have to support date formats and pluralization rules.
Would be nice to implement something that matches the JavaScript Intl API.

A cool feature would be that if a component has to fall back on another language than the parent node, it could set the lang-attribute on the outer node...

So if you're reading a page in Spanish and a component doesn't have translations in Spanish and has to fall back to English, it would generate this:

<html lang="es-CO">
  <head>
    <title>Hola mundo</title>
  </head>
  <body>
    <h1>Bienvenido a mi página</1>
    <p>Hola hola, este párrafo está traducido al español.</p>
    <div lang="en-US" class="myComponent-abc123">
      <p>This component only has English translations so this is the English translation that is being fallen back upon</p>
    </div>
  </body>
</div>

This way all content on the page will have the correct lang specified even when there are multiple languages on a page.
@aalin aalin added the enhancement New feature or request label Oct 1, 2022
aalin added a commit that referenced this issue Oct 1, 2022
@aalin
Add i18n sketches
15e2f59 
related to #17, wanna do something like this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@aalin