Add multilang to certificate generation

[alesanchezr]

hrs: 3

Here is the code: https://github.com/breatheco-de/certificates

Right now you can see student certificates by clicking on this link:

https://certificate.breatheco.de/?style=default&cohort=miami-downtown-iii&access_token=951e5b94d524fd624ba7821f2f0333d30d536219&student=7

You can see how the URL querystring has:

style=
cohort=
access_token=
student=

We need to add the language, that way all styles can be implemented in any language (english, spanish, etc.).
Every certificate design must be in a folder with the react component but also in the same folder there should be a json file for each language: en.json and es.json
The posible language are: [en, es]

When the querystrign contains the variable lang=es the application will load the json that correspons to spanish: es.json.

[alesanchezr]

Esto te quedo perfecto chamo. 💪

[alesanchezr]

Te voy a agregar una hora mas para que le pongas un boton para cambiar idioma parecido a el que aparece en las lessons:

Puedes usar ese componente:
Codigo del component: https://github.com/breatheco-de/projects/blob/master/src/components/language.js

Este es el CSS:

.language-switcher{
    position: fixed;
    width: 40px;
    cursor: pointer;
    bottom: 5px;
    right: 5px;
    padding: 5px;
    font-size: 10px;
    box-sizing: border-box;
    border-radius: 25px;
}
.language-switcher .icon{
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 100%;
    background-color: rgba(0,0,0,0.2);
}
.language-switcher ul{
        display: none;
        padding: 0;
        margin: 0;
}
.language-switcher ul li{
    list-style: none;
    width: 40px;
    padding: 5px;
    margin-top: -4px;
    margin-left: -6px;
}
.language-switcher:hover{
    border: 1px solid #f8f9fa;
    background: rgb(215, 215, 215);
}
.language-switcher:hover ul{ display: block; }

[alesanchezr]

Basicamente cambiar el idioma es una redireccion de URL, refrescas la pagina y le pones el parametro del lang en el queryString

[alesanchezr]

@Omonroy36

[alesanchezr]

Aprobado.

[Jtoledo88]

Pagado