search

ThePacielloGroup / cupper

An inclusive pattern library builder.
MIT License
348 stars 358 forks source link

Add internationalisation (see Hugo Learn Theme for reference) #24

Open aral opened 6 years ago

aral commented 6 years ago

The Hugo Learn Theme has internationalisation by default. This would be a valuable addition to Cupper.

Reference: https://learn.netlify.com/en/ Source: https://github.com/matcornic/hugo-theme-learn

GaetanBt commented 6 years ago

Hello, do you have any news on this ?

Heydon commented 6 years ago

@GaetanBt I believe (but may be mistaken) that this is supported already from core Hugo. See https://regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/

GaetanBt commented 6 years ago

Thanks for the link @Heydon, i'm new to Hugo !

Yeah it seems that it has a built in support for internationalisation. I was more thinking about a way to provide translations of the hard-written content inside the theme.

Maybe i'm missing a point somewhere but if you think it can be a good idea, I would be happy to help and work on French translations.

Heydon commented 6 years ago

@GaetanBt Ah, I see what you mean. Good question (and thanks for offering to help). I'll try to find time to look into it. Let me know if you have any ideas.

GaetanBt commented 6 years ago

I drop some ideas,

First of all I just figured out that the language code set in the config.toml file is not used in the cupper/layouts/_default/baseof.html template.

Maybe we can start by using it like <html lang="{{ .Site.LanguageCode }}"> ?

I don't know if we are allowed to create directories and files in a Hugo theme but we could store translations in a specific locales (or anything) folder with json files. We could create a json file per locale and then, require it in the template depending on the global languageCode configuration.

To organise the translations we could prefix each key by the subject of the concerned file.

For example : 

{
  "shortcodes-warning-ariaLabel": "warning",
  "layout-skipToContent": "skip to content",
  "layout-printVersion": "Print version",
  "layout-darkTheme": "dark theme"
}

Or maybe we could split this in multiple files depending on the subject : 

|-- locales
|    |-- en-us
|        |-- layout
|            |-- locale.json
|        |-- shortcodes
|            |-- locale.json

Or even filter like this : 

|-- locales
|    |-- layout
|        |-- en-us.json
|        |-- fr-fr.json
|    |-- shortcodes
|        |-- en-us.json
|        |-- fr-fr.json