Weblate フロントエンド

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


Weblate supports the latest, stable releases of all major browsers and platforms.

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.

Older browsers might work, but some features might be limited.


yarn パッケージ マネージャーは、サード パーティのライブラリを更新するために使用します。設定は scripts/yarn にあり、これはライブラリを更新するラッパ スクリプト scripts/yarn-update であり、ビルドして正しい場所 weblate/static/vendor にコピーするためのものです。この場所には、すべてサードパーティーのフロントエンドのコードが配置されています。

Adding new third-party library typically consists of:

# Add a yarn package
yarn --cwd scripts/yarn add PACKAGE
# Edit the script to copy package to the static folder
edit scripts/yarn-update
# Run the update script
# Add files to git
git add .

コーディング スタイル

Weblate は、JavaScript ファイルと CSS ファイルの両方のコード フォーマットに Prettier を使用しています。

また ESLint を使用して JavaScript コードを検査します。


フロントエンドのコードでユーザーに表示するテキストが必要な場合は、現地語化が可能な文字列であることが必要です。ほとんどの場合、テキストを 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'


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

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