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¶
Installing and managing 3rd party libraries in the client of a django project can be a bit tricky. This section provides a step-by-step guide on how to install and manage 3rd party libraries used by the client side of Weblate using Webpack.
Prerequisites¶
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’ instalado no seu sistema.
Execute
cd client
.Execute
yarn install
Instalação¶
To install a library, 1st run the following command:
yarn add <lib-name>
Importing the Library¶
Em seguida, existem duas maneiras de importar a biblioteca:
- If it is a project-wide library (it is used/needed in all/most pages):
Import the library in
src/main.js
.And declare it in the global scope (if needed).
- If it is page-specific library (library is used in a specific page or template):
Create a new file named
src/<lib-name>.js
.Import the library in it. Then inject it into the
window
object to be globally accessible.Add an entry in
webpack.config.js
:<lib-name>: "src/<lib-name>.js"
.Add library name in
excludePrefixes
array inmainLicenseTransform
inwebpack.config.js
.Add license file name in
additionalFiles
inLicensePlugin
inplugins
array inwebpack.config.js
.Create a
<lib-name>LicenseTransfrom
function for the license file introduced in the previous steps and use it.
Note: Replace
<lib-name>
with the actual name of the 3rd party library.
Building the Library¶
Build the libraries used by the project, by running the following command:
yarn build
Including the Library¶
Now the library is built and ready for use. To include it follow these steps:
If the library was imported in
src/main.js
, no further steps are required (as it is already included inbase.html
).If the library was imported in its specific file
src/<lib-name>.js
, inweblate/templates
use the include tags to link to the built static JavaScript file:
{% 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.
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'
Í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.