Frontend do Weblate

The frontend is currently built using Bootstrap, jQuery and few third-party libraries.

Navegadores suportados

Weblate oferece suporte às versões mais recentes e estáveis de todos os principais navegadores e plataformas.

Navegadores alternativos que usam a versão mais recente do WebKit, Blink ou Gecko, seja diretamente ou por meio da API de visualização da web da plataforma, não são explicitamente suportados. No entanto, o Weblate deve (na maioria dos casos) ser exibido e funcionar corretamente nesses navegadores também.

Navegadores mais antigos podem funcionar, mas alguns recursos podem ser limitados.

Gestão de dependências

Instalar e gerir bibliotecas de terceiros no cliente de um projeto Django pode ser um pouco complicado. Esta secção fornece um guia passo a passo sobre como instalar e gerir bibliotecas de terceiros usadas pelo lado do cliente do Weblate usando Webpack.

Pré-requisitos

Antes de prosseguir com a instalação, certifique-se de ter os seguintes pré-requisitos:

  • Versão 14 ou superior do Nodejs.

  • O gestor de pacotes yarn esteja instalado no seu sistema.

  • Execute cd client.

  • Execute yarn install.

Instalação

To install a library, first run the following command:

yarn add <lib-name>

Importing the Library

Em seguida, existem duas maneiras de importar a biblioteca:

  1. Se for uma biblioteca para todo o projeto (é usada/necessária em todas/na maioria das páginas):

    • Importe a biblioteca em src/main.js.

    • E declare-a no escopo global (se for necessário).

  2. Se for uma biblioteca específica de página (a biblioteca é usada numa página ou modelo específico):

    • Crie um novo ficheiro chamado src/<nome-da-biblioteca>.js.

    • Importe a biblioteca nele. Então injete-a no objeto window para ser acessível globalmente.

    • Adicione uma entrada em webpack.config.js: <nome-da-biblioteca>: "src/<nome-da-biblioteca>.js".

    • Adicione o nome da biblioteca no array excludePrefixes em mainLicenseTransform em webpack.config.js.

    • Adicione o nome do ficheiro de licença em additionalFiles em LicensePlugin no array plugins em webpack.config.js.

    • Crie uma função <nome-da-biblioteca>LicenseTransfrom para o ficheiro de licença introduzido nas etapas anteriores e use-a.

    Observação: Substitua <nome-da-biblioteca> pelo nome real da biblioteca de terceiros.

Building the Library

Build the libraries used by the project, by running the following command:

yarn build

Including the Library

Agora a biblioteca está construída e pronta para uso. Para incluí-la siga estes passos:

  1. Se a biblioteca foi importada em src/main.js, nenhuma etapa adicional é necessária (pois ela já está incluída em base.html).

  2. Se a biblioteca foi importada no seu ficheiro específico src/<nome-da-biblioteca>.js, em weblate/templates use as tags include para vincular ao ficheiro JavaScript estático criado:

{% load static %}
<script src="{% static 'js/vendor/<lib-name>.js' %}"></script>

Estilo de codificação

Weblate relies on Biome for formatting and linting the JavaScript and CSS code.

Tradução

Should you need any user visible text in the frontend code, it should be localizable. In most cases, all you need is to wrap your text inside gettext function, but there are more complex features available:

document.write(gettext('this is to be translated'));

var object_count = 1 // or 0, or 2, or 3, ...
s = ngettext('literal for the singular case',
        'literal for the plural case', object_count);

fmts = ngettext('There is %s object. Remaining: %s',
        'There are %s objects. Remaining: %s', 11);
s = interpolate(fmts, [11, 20]);
// s is 'There are 11 objects. Remaining: 20'

Veja também

Tópico sobre tradução na documentação do Django

Ícones

Weblate currently uses Material Design Icons, in case you are looking for new symbol, check that.

Além disso, existe scripts/optimize-svg para reduzir o tamanho do SVG, já que a maioria dos ícones são embutidos no HTML para permitir estilização dos caminhos.