refactor: migrate to new localization system

Co-authored-by: CrackThrough <[email protected]>
ADOFAI-gg · Dec 21, 2023 · 5c28d75 · 5c28d75
1 parent d547ee4
commit 5c28d75
Show file tree

Hide file tree

Showing 59 changed files with 323 additions and 247 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -17,3 +17,4 @@ storybook-static
 src/utils/search/parser.ts
 
 src/assets
+static/~partytown
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "@babel/core": "^7.23.6",
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",
+    "@fluent/bundle": "^0.18.0",
     "@fontsource/m-plus-rounded-1c": "^5.0.11",
     "@fontsource/quicksand": "^5.0.16",
     "@fontsource/roboto-mono": "^5.0.16",

diff --git a/src/assets b/src/assets
diff --git a/src/components/atoms/common/MainSectionTitle.svelte b/src/components/atoms/common/MainSectionTitle.svelte
@@ -1,20 +1,26 @@
 <script lang="ts">
   import Translation from '@/components/utils/Translation.svelte';
+  import type { TranslationKey } from '@/utils/i18n';
 
-  export let title: string;
+  export let title: string | undefined = undefined;
+  export let titleKey: TranslationKey = 'common:change-me';
   export let moreLink: string | null = null;
 </script>
 
 <div class="main-section-title">
   <span class="main-section-title-text">
-    <Translation key={title} />
+    {#if title !== undefined}
+      {title}
+    {:else}
+      <Translation key={titleKey} />
+    {/if}
   </span>
 
   <div class="main-section-title-space" />
 
   {#if moreLink}
     <a href={moreLink} class="main-section-title-more">
-      <Translation key="SHOW_MORE" />
+      <Translation key="common:show-more" />
       <div>›</div>
     </a>
   {/if}

diff --git a/src/components/atoms/interaction/LabeledInputContainer.svelte b/src/components/atoms/interaction/LabeledInputContainer.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
   import Translation from '@/components/utils/Translation.svelte';
+  import type { TranslationKey } from '@/utils/i18n';
 
-  export let label: string;
+  export let key: TranslationKey;
 </script>
 
 <div>
   <div class="translation">
-    <Translation key={label} />
+    <Translation {key} />
   </div>
   <div class="slot">
     <slot />

diff --git a/src/components/atoms/search/DifficultySelectorInput.svelte b/src/components/atoms/search/DifficultySelectorInput.svelte
@@ -14,8 +14,9 @@
   import Translation from '@/components/utils/Translation.svelte';
   import { reduceMotion } from '@/utils/settings';
   import { createEventDispatcher } from 'svelte';
+  import type { TranslationKey } from '@/utils/i18n';
 
-  export let placeholder: string;
+  export let placeholderKey: TranslationKey;
 
   export let value: number | null;
 
@@ -73,7 +74,7 @@
       </button>
     {:else}
       <div class="input-placeholder" transition:fade={{ duration: $reduceMotion ? 0 : 200 }}>
-        <Translation key={placeholder} />
+        <Translation key={placeholderKey} />
       </div>
     {/if}
   </div>

diff --git a/src/components/atoms/search/MusicLengthSelectItem.svelte b/src/components/atoms/search/MusicLengthSelectItem.svelte
@@ -10,7 +10,7 @@
 
   export let icon = `${tag}`;
 
-  export let namespace = 'TAG';
+  export let namespace = 'tag';
 
   export let value: SearchSettings['filter']['musicLength'];
 
@@ -38,6 +38,6 @@
 
 <TagCheckboxBase on:click={click} include={value === $searchSettingStore.filter.musicLength}>
   <Icon style="" size={22} namespace="tagIcons" {icon} slot="icon" alt="Tag Icon" />
-  <Translation key="{namespace}_{tag}_NAME" slot="name" />
-  <Translation key="{namespace}_{tag}_DESCRIPTION" slot="description" />
+  <Translation key="tags:{namespace}-{tag}-name" slot="name" />
+  <Translation key="tags:{namespace}-{tag}-description" slot="description" />
 </TagCheckboxBase>
diff --git a/src/components/atoms/search/SortOrderRadio.svelte b/src/components/atoms/search/SortOrderRadio.svelte
@@ -3,9 +3,10 @@
   import Icon from '@atoms/asset/Icon.svelte';
 
   import TagCheckboxBase from './TagCheckboxBase.svelte';
+  import type { TranslationKey } from '@/utils/i18n';
 
   export let icon: string;
-  export let key: string;
+  export let key: TranslationKey;
 
   export let checked: boolean;
 </script>

diff --git a/src/components/atoms/search/TagCheckbox.svelte b/src/components/atoms/search/TagCheckbox.svelte
@@ -54,6 +54,6 @@
   on:click={update}
 >
   <Icon style="" size={22} namespace="tagIcons" icon={`${tag}`} slot="icon" alt="tag icon" />
-  <Translation key="TAG_{tag}_NAME" slot="name" />
-  <Translation key="TAG_{tag}_DESCRIPTION" slot="description" />
+  <Translation key="tags:tag-{tag}-name" slot="name" />
+  <Translation key="tags:tag-{tag}-description" slot="description" />
 </TagCheckboxBase>
diff --git a/src/components/molecules/FooterSection.svelte b/src/components/molecules/FooterSection.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import Translation from '@/components/utils/Translation.svelte';
+  import type { TranslationKey } from '@/utils/i18n';
 
-  export let title: string;
+  export let title: TranslationKey;
 </script>
 
 <div>

diff --git a/src/components/molecules/TabItem.svelte b/src/components/molecules/TabItem.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import type { TranslationKey } from '@/utils/i18n';
+
   import { getContext } from 'svelte';
   import type { Writable } from 'svelte/store';
   import Icon from '@atoms/asset/Icon.svelte';
@@ -12,7 +14,7 @@
 
   $: active = $currentValue === value;
 
-  export let title: string;
+  export let titleKey: TranslationKey;
 
   export let icon: string | undefined = undefined;
 
@@ -26,7 +28,7 @@
     <Icon size={18} {icon} alt="{icon} icon" />
   {/if}
   <div>
-    <Translation key={title} />
+    <Translation key={titleKey} />
   </div>
   <div class="tab-item__indicator" class:selected={active} />
 </button>

diff --git a/src/components/molecules/TabItemLink.svelte b/src/components/molecules/TabItemLink.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import type { TranslationKey } from '@/utils/i18n';
+
   import { getContext } from 'svelte';
   import type { Readable } from 'svelte/store';
   import Icon from '@atoms/asset/Icon.svelte';
@@ -12,7 +14,7 @@
 
   $: active = $currentValue === value;
 
-  export let title: string;
+  export let titleKey: TranslationKey;
 
   export let icon: string | undefined = undefined;
 
@@ -24,7 +26,7 @@
     <Icon size={18} {icon} alt="{icon} icon" />
   {/if}
   <div>
-    <Translation key={title} />
+    <Translation key={titleKey} />
   </div>
   <div class="tab-item__indicator" class:selected={active} />
 </a>

diff --git a/src/components/molecules/home/HomeLogo.svelte b/src/components/molecules/home/HomeLogo.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
   import HomeLogoImage from '@atoms/home/HomeLogoImage.svelte';
   import Translation from '@/components/utils/Translation.svelte';
-  import { type SyncStatusResponse, SyncStatus } from '@/types';
-  import { currentLang } from '@/utils/i18n';
 
   const forumLinkReplacer = (html: string) => {
     return html.replace(
-      /<forumLink>(.+?)<\/forumLink>/g,
+      /\[forumLink\](.+?)\[\/forumLink\]/g,
       `<a
         class="forum-link"
         href="https://docs.google.com/spreadsheets/d/1PzLHfWmVWJHrBGnNSsLTsdH0ibdk0hB4MpKHET1nkpU/edit#gid=1848316468"
@@ -16,19 +14,17 @@
     );
   };
 
-  export let syncStatus: SyncStatusResponse;
-
-  $: lastSyncedAt = new Date(syncStatus.lastSucceedAt).toLocaleTimeString($currentLang);
+  // $: lastSyncedAt = new Date(syncStatus.lastSucceedAt).toLocaleTimeString($currentLang);
 </script>
 
 <div class="home-logo">
   <HomeLogoImage />
 
   <span class="home-logo__description">
-    <Translation key="HOME_HERO_DESCRIPTION" htmlReplacer={forumLinkReplacer} />
+    <Translation key="home:hero-description" htmlReplacer={forumLinkReplacer} />
   </span>
 
-  <span class="home-logo__sync-status">
+  <!-- <span class="home-logo__sync-status">
     <span class="home-logo__sync-status__status">
       <Translation
         key={syncStatus.status === SyncStatus.Ok
@@ -44,7 +40,7 @@
         }}
       />
     </span>
-  </span>
+  </span> -->
 </div>
 
 <style lang="scss">
@@ -55,19 +51,19 @@
     width: 100%;
     text-align: center;
 
-    &__sync-status {
-      display: block;
-      opacity: 0.6;
+    // &__sync-status {
+    //   display: block;
+    //   opacity: 0.6;
 
-      &__status {
-        font-weight: 600;
-      }
+    //   &__status {
+    //     font-weight: 600;
+    //   }
 
-      &__time {
-        margin-left: 12px;
-        font-weight: 400;
-      }
-    }
+    //   &__time {
+    //     margin-left: 12px;
+    //     font-weight: 400;
+    //   }
+    // }
 
     &__description {
       font-weight: 600;

diff --git a/src/components/molecules/levels/LevelHeaderLinksArea.svelte b/src/components/molecules/levels/LevelHeaderLinksArea.svelte
@@ -17,7 +17,7 @@
       <Icon icon="playFilled" size={36} alt="Play button icon" />
     </a>
     <div class="p-2 text-lg font-medium">
-      <Translation key="LEVEL_OPEN_IN_ADOFAI" />
+      <Translation key="level-details:open-in-adofai" />
     </div>
   </Tooltip> -->
 

diff --git a/src/components/molecules/levels/LevelMetaLabelValuePair.svelte b/src/components/molecules/levels/LevelMetaLabelValuePair.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import Translation from '@/components/utils/Translation.svelte';
+  import type { TranslationKey } from '@/utils/i18n';
 
-  export let label: string;
+  export let label: TranslationKey;
 </script>
 
 <div class="fair">

diff --git a/src/components/molecules/levels/SearchGroup.svelte b/src/components/molecules/levels/SearchGroup.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import Translation from '@/components/utils/Translation.svelte';
+  import type { TranslationKey } from '@/utils/i18n';
 
-  export let title: string;
+  export let title: TranslationKey;
 </script>
 
 <div>

diff --git a/src/components/molecules/levels/SearchHelpArea.svelte b/src/components/molecules/levels/SearchHelpArea.svelte
@@ -2,8 +2,9 @@
   import Icon from '@atoms/asset/Icon.svelte';
   import Tooltip from '@atoms/common/Tooltip.svelte';
   import Translation from '@/components/utils/Translation.svelte';
+  import type { TranslationKey } from '@/utils/i18n';
 
-  export let key: string;
+  export let key: TranslationKey;
 
   let contentWidth: number;
   let containerWidth: number;

diff --git a/src/components/molecules/levels/TooltippedTagIcon.svelte b/src/components/molecules/levels/TooltippedTagIcon.svelte
@@ -12,11 +12,11 @@
 
   <div style="padding: 12px; font-size: 14px;">
     <div style="font-weight: 700;">
-      <Translation key="TAG_{tag}_NAME" />
+      <Translation key="tags:tag-{tag}-name" />
     </div>
 
     <div style="font-weight: 400;">
-      <Translation key="TAG_{tag}_DESCRIPTION" />
+      <Translation key="tags:tag-{tag}-description" />
     </div>
   </div>
 </Tooltip>
diff --git a/src/components/molecules/nav/NavLinks.svelte b/src/components/molecules/nav/NavLinks.svelte
@@ -5,15 +5,15 @@
 
 <div class="nav-link">
   <NavLink to="/levels">
-    <Translation key="NAV_LEVELS" />
+    <Translation key="nav:levels" />
   </NavLink>
 
   <NavLink to="/rankings">
-    <Translation key="NAV_RANKINGS" />
+    <Translation key="nav:rankings" />
   </NavLink>
 
   <NavLink to="/references">
-    <Translation key="NAV_REFERENCES" />
+    <Translation key="nav:references" />
   </NavLink>
 </div>
 

diff --git a/src/components/molecules/nav/NavMenuGroup.svelte b/src/components/molecules/nav/NavMenuGroup.svelte
@@ -5,8 +5,9 @@
     type NavMenuTabType
   } from '@/components/organisms/layout/NavMenuOverlay.svelte';
   import Translation from '@/components/utils/Translation.svelte';
+  import type { TranslationKey } from '@/utils/i18n';
 
-  export let label: string;
+  export let labelKey: TranslationKey;
 
   export let backTab: NavMenuTabType | undefined = undefined;
 
@@ -25,7 +26,7 @@
         <Icon icon="chevronLeft" alt="back" size={18} />
       </button>
     {/if}
-    <Translation key={label} />
+    <Translation key={labelKey} />
   </div>
   <div class="group-content">
     <slot />

diff --git a/src/components/molecules/nav/NavSettingsSwitch.svelte b/src/components/molecules/nav/NavSettingsSwitch.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
   import Switch from '@/components/atoms/form/Switch.svelte';
   import Translation from '@/components/utils/Translation.svelte';
-  import type { TranslationKeys } from '@/utils/i18n';
+  import type { TranslationKey } from '@/utils/i18n';
 
   export let checked: boolean;
 
-  export let label: TranslationKeys;
+  export let labelKey: TranslationKey;
 </script>
 
 <div class="settings-switch">
   <div class="settings-switch-label">
-    <Translation key={label} />
+    <Translation key={labelKey} />
   </div>
   <Switch bind:checked />
 </div>

diff --git a/src/components/molecules/nav/NavSignArea.svelte b/src/components/molecules/nav/NavSignArea.svelte
@@ -5,11 +5,11 @@
 
 <div class="sign-area">
   <a href="/signup" class="sign-area__singup">
-    <Translation key="NAV_SIGNUP" />
+    <Translation key="common:sign-up" />
   </a>
 
   <Button type="nav" href="/login">
-    <Translation key="NAV_LOGIN" />
+    <Translation key="common:sign-in" />
   </Button>
 </div>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -17,3 +17,4 @@ storybook-static
		src/utils/search/parser.ts

		src/assets
		static/~partytown
+5 −0		icons/hide.svg
+3 −0		icons/show.svg
+5 −0		langs.json
+3 −0		locales/en/common-auth.ftl
+7 −0		locales/en/common.ftl
+15 −0		locales/en/footer.ftl
+4 −0		locales/en/home.ftl
+20 −0		locales/en/level-details.ftl
+11 −0		locales/en/level-table-cols.ftl
+19 −0		locales/en/nav.ftl
+2 −0		locales/en/ranking.ftl
+23 −0		locales/en/references.ftl
+61 −0		locales/en/search.ftl
+2 −0		locales/en/settings.ftl
+12 −0		locales/en/sign-in.ftl
+5 −0		locales/en/sign-up-email.ftl
+15 −0		locales/en/sign-up.ftl
+99 −0		locales/en/tags.ftl
+4 −0		locales/en/user-popup.ftl
+6 −0		locales/ja/common.ftl
+81 −0		locales/ja/tags.ftl
+3 −0		locales/ko/common-auth.ftl
+6 −0		locales/ko/common.ftl
+11 −0		locales/ko/footer.ftl
+3 −0		locales/ko/home.ftl
+14 −0		locales/ko/level-details.ftl
+11 −0		locales/ko/level-table-cols.ftl
+16 −0		locales/ko/nav.ftl
+2 −0		locales/ko/ranking.ftl
+19 −0		locales/ko/references.ftl
+46 −0		locales/ko/search.ftl
+2 −0		locales/ko/settings.ftl
+8 −0		locales/ko/sign-in.ftl
+5 −0		locales/ko/sign-up-email.ftl
+10 −0		locales/ko/sign-up.ftl
+63 −0		locales/ko/tags.ftl
+4 −0		locales/ko/user-popup.ftl
+0 −0		locales/vi/tags.ftl
+81 −0		locales/zh-CN/tags.ftl
+3 −8		pontoon-config.toml
+0 −0		tagIcons/sw.svg
+38 −8		translations/en.json
+172 −172		translations/ja.json
+195 −174		translations/ko.json
+1 −0		translations/vi.json
+13 −12		translations/zh-CN.json