Weblate フロントエンド¶

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

依存関係の管理¶

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

コーディングスタイル¶

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'

参考

Translation topic in the Django documentation

アイコン¶

Weblate では現在、マテリアルデザインのアイコンを使用しています。新しいアイコンをお探しの方は <https://materialdesignicons.com/> を確認してください。

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