Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: migrate to new localization system(project fluent) #71

Merged
merged 1 commit into from
Dec 21, 2023
Merged

refactor: migrate to new localization system(project fluent) #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eslintignore
View file
Open in desktop
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
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion src/assets
Open in desktop
Submodule assets updated 46 files
+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
12 changes: 9 additions & 3 deletions src/components/atoms/common/MainSectionTitle.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}
Expand Down
5 changes: 3 additions & 2 deletions src/components/atoms/interaction/LabeledInputContainer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 />
Expand Down
5 changes: 3 additions & 2 deletions src/components/atoms/search/DifficultySelectorInput.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/components/atoms/search/MusicLengthSelectItem.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

export let icon = `${tag}`;

export let namespace = 'TAG';
export let namespace = 'tag';

export let value: SearchSettings['filter']['musicLength'];

Expand Down Expand Up @@ -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>
3 changes: 2 additions & 1 deletion src/components/atoms/search/SortOrderRadio.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/components/atoms/search/TagCheckbox.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
3 changes: 2 additions & 1 deletion src/components/molecules/FooterSection.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
6 changes: 4 additions & 2 deletions src/components/molecules/TabItem.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -12,7 +14,7 @@

$: active = $currentValue === value;

export let title: string;
export let titleKey: TranslationKey;

export let icon: string | undefined = undefined;

Expand All @@ -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>
Expand Down
6 changes: 4 additions & 2 deletions src/components/molecules/TabItemLink.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -12,7 +14,7 @@

$: active = $currentValue === value;

export let title: string;
export let titleKey: TranslationKey;

export let icon: string | undefined = undefined;

Expand All @@ -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>
Expand Down
36 changes: 16 additions & 20 deletions src/components/molecules/home/HomeLogo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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
Expand All @@ -44,7 +40,7 @@
}}
/>
</span>
</span>
</span> -->
</div>

<style lang="scss">
Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/components/molecules/levels/LevelHeaderLinksArea.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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> -->

Expand Down
3 changes: 2 additions & 1 deletion src/components/molecules/levels/LevelMetaLabelValuePair.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
3 changes: 2 additions & 1 deletion src/components/molecules/levels/SearchGroup.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
3 changes: 2 additions & 1 deletion src/components/molecules/levels/SearchHelpArea.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions src/components/molecules/levels/TooltippedTagIcon.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
6 changes: 3 additions & 3 deletions src/components/molecules/nav/NavLinks.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
5 changes: 3 additions & 2 deletions src/components/molecules/nav/NavMenuGroup.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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 />
Expand Down
6 changes: 3 additions & 3 deletions src/components/molecules/nav/NavSettingsSwitch.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/components/molecules/nav/NavSignArea.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
Loading