Weblate フロントエンド

フロントエンドは、現在 Bootstrap、jQuery、およびいくつかのサード パーティのライブラリを使用して構築されています。

対応ブラウザー

Weblate は、すべての主要なブラウザーとプラットフォームの最新の安定したリリース版に対応しています。

WebKit、Blink、または Gecko の最新版を使用する代替ブラウザーは、直接またはプラットフォームの Web ビュー API を使用しているかどうかにかかわらず、明示的に対応していません。ただし、Weblate は（多くの場合）これらのブラウザーでも正常に表示されて機能するはずです。

古いブラウザは動作するかもしれませんが、一部の機能は制限されている場合があります。

依存関係の管理

Installing and managing 3rd party libraries in the client of a django project can be a bit tricky. This document 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

Before proceeding with an installation, make sure you have the following prerequisites:

  • Node.js.

  • Yarn package manager installed on your system.

  • Run cd client.

  • Run yarn install

1- Installation

To install a library, 1st run the following command:

yarn add lib

2- Importing the Library

Then, there are two ways to import the library:

  1. If it is a project-wide library (it is used/needed in all/most pages):

    • Import the library in src/main.js.

  2. 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.

    • Add an entry in webpack.config.js: <lib-name>: "src/<lib-name>.js".

    Note: Replace <lib-name> with the actual name of the 3rd party library.

3- Building the Library

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

yarn build

4- Including the Library

Now the library is built and ready for use. To include it follow these steps:

  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>

コーディング規約

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

現地語化

フロントエンドのコードでユーザーに表示するテキストが必要な場合は、ローカライズ可能にする必要があります。ほとんどの場合、テキストを gettext 関数内でラップするだけですが、もっと複雑な機能も利用できます:

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'

参考

Translation topic in the Django documentation

アイコン

Weblate では現在、マテリアル デザインのアイコンを使用しています。新しいシンボル アイコンをお探しの方は Material Design Icons もしくは Material Design Resources を確認してください。

また、ほとんどのアイコンはパスのスタイルを設定できるよう HTML に埋め込まれるため、SVG のサイズを小さくする scripts/optimize-svg を用意しました。