fix: Localize the duration in sponsor section #136

KannoStanfoot · 2024-05-10T00:04:22Z

Issue

https://github.com/vuejs-jp/vuefes-2024-backside/issues/151

Details of the changes

スポンサーセクションの期間のローカライズが正しくされていない問題を修正した
Storybookのi18n対応を行なった

Screenshots

Before

ja	en

After

ja	en

Storybook

確認用URL Chromatic

netlify · 2024-05-10T00:04:39Z

✅ Deploy Preview for vuefes-2024 ready!

Name	Link
🔨 Latest commit	`165747c`
🔍 Latest deploy log	https://app.netlify.com/sites/vuefes-2024/deploys/6640b082620b660008d4ba9d
😎 Deploy Preview	https://deploy-preview-136--vuefes-2024.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

KannoStanfoot · 2024-05-10T00:09:49Z

Done.
~~WIP: Chromaticのディレクトリ指定でエラーが発生しているので修正する。~~

apps/web/app/components/SponsorPageSection.vue

apps/web/app/lang/ja.json

kazupon · 2024-05-10T01:20:20Z

apps/web/app/components/SponsorPageSection.vue

+          :start="{
+            prefixYear: $t('sponsor.prefixYear'),
+            date: $t('sponsor.start_date'),
+            dayOfWeek: $t('sponsor.day_of_week.monday'),


$t には key が見つからなかった場合に引数にデフォルトメッセージをしていすれば、そのデフォルトメッセージで解決するので、それを利用すると en 側のリソースに空文字を指定する必要がない気がする。
https://vue-i18n.intlify.dev/api/injection.html#t-key-defaultmsg

Suggested change

dayOfWeek: $t('sponsor.day_of_week.monday'),

dayOfWeek: $t('sponsor.day_of_week.monday', ''),

@kazupon
デフォルトメッセージの指定、空文字だと挙動としてkeyを返却するようです。

dayOfWeek: $t('sponsor.day_of_week.monday', ''),
期待結果： ''
結果：'sponsor.day_of_week.monday'

dayOfWeek: $t('sponsor.day_of_week.monday', 'x'),
期待結果： 'x'
結果：'x'

あ、ホントですね。すいません、これ vue-i18n のデフォルトメッセージのエッジケースなバグっぽいですね...
あとは、

useI18n が露出する locale を使って en のときは空文字を与える

useI18n が露出する te を使って sponsor.day_of_week.monday key が vue-i18n で有効になっているlocale ないときは、空文字を与える

SponsorPageSection.vue 内部で workaround 的に対応する感じですかね...
あとは現状のまま行くか。

2 の方法で空文字を与えるよう修正しました。

vuefes-2024/apps/web/app/components/SponsorPageSection.vue

Lines 11 to 32 in 426ef4d

const { t, te } = useI18n()

const { locale } = useLocaleCurrent()

/**

* Get translation or return empty string

* @param key - translation key

* @returns translation or empty string

*/

function getTranslationOrDefault(key: string): string {

return te(key, locale.value) ? t(key) : ''

}

const periodStart = {

prefixYear: t('prefix_year'),

date: t('start_date'),

dayOfWeek: getTranslationOrDefault('day_of_week.monday'),

}

const periodEnd = {

suffixYear: t('suffix_year'),

date: t('end_date'),

dayOfWeek: getTranslationOrDefault('day_of_week.thursday'),

}

あ、ホントですね。すいません、これ vue-i18n のデフォルトメッセージのエッジケースなバグっぽいですね...

ちなみに、これは vue-i18n v10 で直しておきました。
intlify/vue-i18n#1849

(nuxt i18n にはまだ取り込めていない。)

apps/web/app/lang/en.json

KannoStanfoot · 2024-05-10T06:58:27Z

📝 lang/ のリソース定義、スネークケースに統一する

KannoStanfoot · 2024-05-11T16:14:27Z

apps/web/app/components/SponsorPageSection.vue

+
+const { t, te } = useI18n()
+const { locale } = useLocaleCurrent()
+/**
+ * Get translation or return empty string
+ * @param key - translation key
+ * @returns translation or empty string
+ */
+function getTranslationOrDefault(key: string): string {
+  return te(key, locale.value) ? t(key) : ''
+}


@jiyuujin @toshick @ryuhei373
[Ask]
この部分、tsファイルで管理した方が汎用性あると思いつつ
本プロジェクトでどのディレクトリで管理すべきか判断つかなかったのでコンポーネントに直接実装しています。

外出しする場合、どのディレクトリで管理するのが良いでしょうか？

外出しする場合、どのディレクトリで管理するのが良いでしょうか？

apps/web/app/composables で良いかと思います

getTranslationOrDefault ではなく composable なので、useTranslation にしておくとよいかと思います。

jiyuujin

翌朝10:00よりスポンサー公募第二弾が開始する予定なので、
いったんマージしますね mm

後ほどリファクタリングを進めていただければ（急ぎませんので mm

fix: Localize the duration in sponsor section

acd767c

github-actions bot assigned KannoStanfoot May 10, 2024

KannoStanfoot changed the title ~~fix: Localize the duration in sponsor section~~ [WIP]fix: Localize the duration in sponsor section May 10, 2024

chore: fix chromatic action

4d2a34e

KannoStanfoot changed the title ~~[WIP]fix: Localize the duration in sponsor section~~ fix: Localize the duration in sponsor section May 10, 2024

jiyuujin reviewed May 10, 2024

View reviewed changes

apps/web/app/components/SponsorPageSection.vue Outdated Show resolved Hide resolved

jiyuujin reviewed May 10, 2024

View reviewed changes

apps/web/app/lang/ja.json Outdated Show resolved Hide resolved

kazupon reviewed May 10, 2024

View reviewed changes

apps/web/app/lang/en.json Outdated Show resolved Hide resolved

KannoStanfoot added 2 commits May 11, 2024 04:17

fix: remove unused CSS import statement

2ccd077

refactor: organize resources for i18n support

426ef4d

KannoStanfoot commented May 11, 2024

View reviewed changes

KannoStanfoot and others added 2 commits May 12, 2024 01:29

fix: fix Date story build error

691c3d3

Merge branch 'main' into feature/sponsor-section-localization

165747c

jiyuujin approved these changes May 12, 2024

View reviewed changes

jiyuujin merged commit 02dde23 into main May 12, 2024
12 of 13 checks passed

jiyuujin deleted the feature/sponsor-section-localization branch May 12, 2024 12:13

KannoStanfoot mentioned this pull request May 18, 2024

refactor: make getTranslationOrDefault function composable #140

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Localize the duration in sponsor section #136

fix: Localize the duration in sponsor section #136

KannoStanfoot commented May 10, 2024 •

edited

Loading

netlify bot commented May 10, 2024 •

edited

Loading

KannoStanfoot commented May 10, 2024 •

edited

Loading

kazupon May 10, 2024

KannoStanfoot May 10, 2024

kazupon May 11, 2024

KannoStanfoot May 11, 2024 •

edited

Loading

kazupon May 12, 2024

KannoStanfoot commented May 10, 2024

KannoStanfoot May 11, 2024 •

edited

Loading

jiyuujin May 12, 2024

kazupon May 12, 2024

jiyuujin left a comment •

edited

Loading

	dayOfWeek: $t('sponsor.day_of_week.monday'),
	dayOfWeek: $t('sponsor.day_of_week.monday', ''),

	const { t, te } = useI18n()
	const { locale } = useLocaleCurrent()
	/**
	* Get translation or return empty string
	* @param key - translation key
	* @returns translation or empty string
	*/
	function getTranslationOrDefault(key: string): string {
	return te(key, locale.value) ? t(key) : ''
	}

	const periodStart = {
	prefixYear: t('prefix_year'),
	date: t('start_date'),
	dayOfWeek: getTranslationOrDefault('day_of_week.monday'),
	}

	const periodEnd = {
	suffixYear: t('suffix_year'),
	date: t('end_date'),
	dayOfWeek: getTranslationOrDefault('day_of_week.thursday'),
	}

fix: Localize the duration in sponsor section #136

fix: Localize the duration in sponsor section #136

Conversation

KannoStanfoot commented May 10, 2024 • edited Loading

Issue

Details of the changes

Screenshots

Before

After

Storybook

netlify bot commented May 10, 2024 • edited Loading

✅ Deploy Preview for vuefes-2024 ready!

KannoStanfoot commented May 10, 2024 • edited Loading

kazupon May 10, 2024

Choose a reason for hiding this comment

KannoStanfoot May 10, 2024

Choose a reason for hiding this comment

kazupon May 11, 2024

Choose a reason for hiding this comment

KannoStanfoot May 11, 2024 • edited Loading

Choose a reason for hiding this comment

kazupon May 12, 2024

Choose a reason for hiding this comment

KannoStanfoot commented May 10, 2024

KannoStanfoot May 11, 2024 • edited Loading

Choose a reason for hiding this comment

jiyuujin May 12, 2024

Choose a reason for hiding this comment

kazupon May 12, 2024

Choose a reason for hiding this comment

jiyuujin left a comment • edited Loading

Choose a reason for hiding this comment

KannoStanfoot commented May 10, 2024 •

edited

Loading

netlify bot commented May 10, 2024 •

edited

Loading

KannoStanfoot commented May 10, 2024 •

edited

Loading

KannoStanfoot May 11, 2024 •

edited

Loading

KannoStanfoot May 11, 2024 •

edited

Loading

jiyuujin left a comment •

edited

Loading