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.

Gerenciamento de dependências

Instalar e gerenciar bibliotecas de terceiros no cliente de um projeto Django pode ser um pouco complicado. Esta seção fornece um guia passo a passo sobre como instalar e gerenciar 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 gerenciador de pacotes yarn esteja instalado no seu sistema.

  • Execute cd client.

  • Execute yarn install.

Instalação

Para instalar uma biblioteca, primeiro execute o seguinte comando:

yarn add <lib-name>

Importando a biblioteca

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 necessário).

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

    • Crie um novo arquivo 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 arquivo de licença em additionalFiles em LicensePlugin no array plugins em webpack.config.js.

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

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

Construindo a biblioteca

Crie as bibliotecas usadas pelo projeto executando o seguinte comando:

yarn build

Incluindo a biblioteca

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 em seu arquivo específico src/<nome-da-biblioteca>.js, em weblate/templates use as tags include para vincular ao arquivo JavaScript estático criado:

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

Estilo de codificação

Weblate depende do Biome para a formatação e linting do código JavaScript e CSS.

Localização

Se você precisar de qualquer texto visível para o usuário no código do frontend, ele deve ser localizável. Na maioria dos casos, tudo que você precisa é envolver seu texto dentro da 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'

Ver também

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

Ícones

Weblate atualmente usa ícones de design de material. Caso você esteja procurando por um novo símbolo, verifique Material Design Icons ou Material Design Resources.

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.