Interface de Weblate

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

Navigateurs pris en charge

Weblate prend en charge les dernières versions stables de presque tous les principaux navigateurs et plateformes.

Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform’s web view API, are not explicitly supported. However, Weblate should (in most cases) display and function correctly in these browsers as well.

Les navigateurs plus anciens pourraient fonctionner mais certaines fonctionnalités seraient limitées.

Gestion des dépendances

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.

Prérequis

Avant de procéder à l’installation, assurez-vous que les prérequis suivants sont satisfaits :

  • Nodejs version 14 ou supérieure.

  • The yarn package manager is installed on your system.

  • Exécuter cd client.

  • Run yarn install.

Installation

To install a library, first run the following command:

yarn add <lib-name>

Importer la bibliothèque

Il y a alors deux manières d’importer la bibliothèque :

  1. S’il s’agit d’une bibliothèque qui concerne tout le projet (elle est utilisée ou nécessaire dans toutes les pages ou presque) :

    • Importez la bibliothèque dans src/main.js.

    • Et donnez lui une portée globale (si nécessaire).

  2. If it is page-specific library (library is used in a specific page or template):

    • Créer un nouveau fichier nommé 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 in mainLicenseTransform in webpack.config.js.

    • Add license file name in additionalFiles in LicensePlugin in plugins array in webpack.config.js.

    • Create a <lib-name>LicenseTransfrom function for the license file introduced in the previous steps and use it.

    Note : Remplacer <lib-name> par le nom de la bibliothèque tierce actuelle.

Compiler la bibliothèque

Construisez les bibliothèques utilisées dans le projet en exécutant la commande suivante :

yarn build

Inclure la bibliothèque

Maintenant la bibliothèque est construite et prête à être utilisée. Pour l’inclure, suivez les étapes ci-après :

  1. If the library was imported in src/main.js, no further steps are required (as it is already included in base.html).

  2. If the library was imported in its specific file src/<lib-name>.js, in weblate/templates use the include tags to link to the built static JavaScript file:

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

Style de codage

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

Traduction

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'

Voir aussi

Translation topic in the Django documentation

Icônes

Weblate currently uses material design icons. In case you are looking for new symbol, check Material Design Icons or Material Design Resources.

Additionally, there is scripts/optimize-svg to reduce size of the SVG as most of the icons are embedded inside the HTML to allow styling of the paths.