Update UI copy

Note

Funkwhale is localized into several languages using Weblate. You must make sure that any frontend strings are properly marked for localization. We use the vue-i18n package to handle translation of frontend files.

All UI strings are stored in front/locales/en.json file. The file is structured to mimic the format of the repository. Each string should be labeled following the semantic naming for the item it applies to.

UI strings can be added to both the <script> and <template> part of a Vue file using following syntax:

Locale file

{
  "components": {
    "About": {
      "title": "About",
      "header": {
        "funkwhale": "A social platform to enjoy and share music"
      },
      "button": {
        "cancel": "Cancel"
      }
    }
  }
}

Script

import { useI18n } from "vue-i18n";
//...
const { t } = useI18n();
//...
const labels = computed(() => ({
  title: t("components.About.title"),
}));

Template

<h2>{{ $t('components.About.header.funkwhale') }}</h2>
<button>{{ $t('components.About.button.cancel') }}</button>

Some strings change depending on whether they are plural or not. You can create plural strings using the vue-i18n pluralization syntax

Locale file

"components": {
    "audio": {
        "ChannelCard": {
            "meta": {
                "episodes": "No episodes | {episode_count} episode | {episode_count} episodes",
                "tracks": "No tracks | {tracks_count} track | {tracks_count} tracks"
            }
        }
    }
}

Template

<div class="description">
  <span
    v-if="object.artist?.content_category === 'podcast'"
    class="meta ellipsis"
  >
    {{ $t('components.audio.ChannelCard.meta.episodes', {episode_count:
    object.artist.tracks_count}) }}
  </span>
  <span v-else>
    {{ $t('components.audio.ChannelCard.meta.tracks', {tracks_count:
    object.artist?.tracks_count}) }}
  </span>
  <tags-list
    label-classes="tiny"
    :truncate-size="20"
    :limit="2"
    :show-more="false"
    :tags="object.artist?.tags ?? []"
  />
</div>