Frontend do Weblate¶

O frontend atualmente é construído usando Bootstrap, jQuery e algumas bibliotecas de terceiros.

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:

A supported Node.js release.
O gestor de pacotes yarn esteja instalado no seu sistema.
Execute cd client.
Run yarn install --check-files.

Instalação¶

Para instalar uma biblioteca, primeiro execute o seguinte comando:

yarn add <lib-name>

Importar a biblioteca¶

Em seguida, existem duas maneiras de importar a biblioteca:

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).
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.
- Create a <lib-name>LicenseTransform function for the license file introduced in the previous steps and use it.
Observação: Substitua <nome-da-biblioteca> pelo nome real da biblioteca de terceiros.

Construir a biblioteca¶

Crie as bibliotecas usadas pelo projeto executando o seguinte comando:

yarn build

Incluir a biblioteca¶

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

Se a biblioteca foi importada em src/main.js, nenhuma etapa adicional é necessária (pois ela já está incluída em base.html).
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. Django templates are formatted and linted separately by djade and djlint.

Tradução¶

Se precisar de qualquer texto visível para o utilizador no código do frontend, ele deve ser localizável. Na maioria dos casos, tudo o que precisa é envolver o seu texto na função gettext, mas existem recursos mais complexos disponíveis:

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

Translation topic in the Django documentation

Ícones¶

O Weblate atualmente utiliza o Material Design Icons, caso esteja à procura de um símbolo novo, verifique-o.

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.