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

Jump to bottom

feat(core): add Internationalization to Catalyst #463

Merged
merged 1 commit into from
Mar 5, 2024
Merged

feat(core): add Internationalization to Catalyst #463

merged 1 commit into from
Mar 5, 2024

Conversation

bc-alexsaiannyi
Copy link
Contributor

@bc-alexsaiannyi bc-alexsaiannyi commented Jan 31, 2024 •
edited
Loading

What/Why?

This PR adds i18n mechanism to Catalyst. It's basically just a mechanism and will be expanded to all Pages & Components in upcoming PRs.

Ticket

CATALYST-266

Testing

locally

i18n.mov

@vercel Vercel
Copy link

vercel bot commented Jan 31, 2024 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
catalyst ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 5, 2024 4:10pm
catalyst-core-kynz ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 5, 2024 4:10pm
catalyst-latest ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 5, 2024 4:10pm
9 Ignored Deployments
Name Status Preview Comments Updated (UTC)
catalyst-1millionproducts-store ⬜️ Ignored (Inspect) Visit Preview Mar 5, 2024 4:10pm
catalyst-2000ms-api ⬜️ Ignored (Inspect) Visit Preview Mar 5, 2024 4:10pm
catalyst-500ms-api ⬜️ Ignored (Inspect) Visit Preview Mar 5, 2024 4:10pm
catalyst-au ⬜️ Ignored (Inspect) Visit Preview Mar 5, 2024 4:10pm
catalyst-no-kv ⬜️ Ignored (Inspect) Visit Preview Mar 5, 2024 4:10pm
catalyst-nodejs ⬜️ Ignored (Inspect) Visit Preview Mar 5, 2024 4:10pm
catalyst-ppr ⬜️ Ignored (Inspect) Visit Preview Mar 5, 2024 4:10pm
catalyst-storybook ⬜️ Ignored (Inspect) Visit Preview Mar 5, 2024 4:10pm
catalyst-uk ⬜️ Ignored (Inspect) Visit Preview Mar 5, 2024 4:10pm

@vercel vercel bot temporarily deployed to Preview – catalyst-core-kynz January 31, 2024 16:35 Inactive
@bookernath
Copy link
Contributor

bookernath commented Jan 31, 2024 •
edited
Loading

Great start.

I notice you're adding the functionality around internationalized routes e.g. /de/page, but I worry that this might not be releasable in this format before the rest of the platform functionality is in place for end-to-end translations of all page content (which may include localizing URLs themselves).

I think a good step on the way to that could be picking the locale based on the accept-language header together with a cookie that can be used to override it.

From there, we could layer on end-to-end translation inclusive of localized paths once we have catalog translations in GraphQL and know how URLs are going to work.

WDYT?

bookernath
bookernath reviewed Jan 31, 2024
View reviewed changes
apps/core/app/[locale]/(default)/(faceted)/brand/[slug]/page.tsx Outdated
@@ -67,7 +72,7 @@ export default async function Brand({ params, searchParams }: Props) {

<section aria-labelledby="product-heading" className="col-span-4 lg:col-span-3">
<h2 className="sr-only" id="product-heading">
Products
{t('products')}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in cases like this can I supply a default inline? something like

{t('products', default='Products')}

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My 2cents. {t('products', default='Products')} similar approach is used in the bcapp, where we write source phrase directly in the code.
Pros: when adding a new phrase - it is easier to jump to one file
Cons: to extract translations we have to write more complicated code, iterate over AST tree. + we have to add some rules like : default value should not be a variable or expression

{t('products')} - used in checkout, themes, bmp, a-a services.
Pros: Much easier to extract phrases, less error prone mechanism
Cons: adding new phrase require developers to open a dictionary file.

From my point of view {t('products')} seems good.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

next-intl is probably the only nextjs/i18n library that supports both pages and app routers. And it uses translation keys instead of original phrases inline, that of course provides better developer experience.

@bookernath I think we need to sacrifice one of the requirements, either two routers or original phrases inline. From Localization team perspective translation keys are better, but we can do both.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's fine, thank you

@kristinapototska
Copy link

WDYT?

Yup, this is correct 👍

The plan is to have both the domain path (e.g. cats.com/es-es or cats.com/es) to be localizable, as well as the urls path for all the entities (pages, products, brands, categories.

Urls for entities would become available to be localized along with making the entity itself being translatable.

will cc @funivan and @BC-krasnoshapka in case they'd want to add something here.

@vercel vercel bot temporarily deployed to Preview – catalyst-core-kynz February 1, 2024 14:10 Inactive
@bc-alexsaiannyi
Copy link
Contributor Author

Great start.

I notice you're adding the functionality around internationalized routes e.g. /de/page, but I worry that this might not be releasable in this format before the rest of the platform functionality is in place for end-to-end translations of all page content (which may include localizing URLs themselves).

I think a good step on the way to that could be picking the locale based on the accept-language header together with a cookie that can be used to override it.

From there, we could layer on end-to-end translation inclusive of localized paths once we have catalog translations in GraphQL and know how URLs are going to work.

WDYT?

Thanks. Yeah, I see what you mean. I've updated PR and switched off prefixes in routes for now. We still can return to them when we decide/ready.

Here how it works now. What's your thought?🤔

updateLocale.mov

@vercel vercel bot temporarily deployed to Preview – catalyst-core-kynz February 1, 2024 16:29 Inactive
@vercel vercel bot temporarily deployed to Preview – catalyst-core-kynz February 2, 2024 17:55 Inactive
@vercel vercel bot temporarily deployed to Preview – catalyst-core-kynz February 5, 2024 12:34 Inactive
@vercel vercel bot temporarily deployed to Preview – catalyst-core-kynz February 6, 2024 20:52 Inactive
deini
deini reviewed Feb 29, 2024
View reviewed changes
apps/core/components/nav-link/index.tsx Outdated
@@ -0,0 +1,78 @@
'use client';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this component? Can we use the Link coming from navigation inside of our custom Link component?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, it's what I've thought before. Just didn't want to add changes before we agree on that. I'Il do it now.

apps/core/app/[locale]/(default)/(faceted)/brand/[slug]/page.tsx Outdated

const t = await getTranslations({ locale, namespace: 'Brand' });
const tPagination = await getTranslations({ locale, namespace: 'Pagination' });
const dictionary = await getMessages({ locale });
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we call this dictionary and not messages?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We've called core/dictionaries on top level at the first place. So I've thought that it's aligned more with it. But we can rename it as core/messages and also change pattern with getMessages through the project. What do you say?

@bc-alexsaiannyi @BC-krasnoshapka @yurytut1993
feat(core): add Internationalization mechanism
d7e13c6 
Co-authored-by: Volodymyr Krasnoshapka <[email protected]>
Co-authored-by: Yurii Zusik <[email protected]>
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Mar 5, 2024

⚡️🏠 Lighthouse report

We ran Lighthouse against the changes and produced this report. Here's the summary:

Category Score
🟢 Performance 100
🟢 Accessibility 96
🟠 Best practices 78
🟢 SEO 92

Lighthouse ran against https://catalyst-latest-o59w2mst6-bigcommerce-platform.vercel.app/

@bc-alexsaiannyi bc-alexsaiannyi added this pull request to the merge queue Mar 5, 2024
Merged via the queue into main with commit 40554d8 Mar 5, 2024
16 checks passed
@bc-alexsaiannyi bc-alexsaiannyi deleted the catalyst-266 branch March 5, 2024 16:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@BC-krasnoshapka BC-krasnoshapka BC-krasnoshapka left review comments

@christensenep christensenep christensenep left review comments

@bookernath bookernath bookernath left review comments

@funivan funivan funivan left review comments

@deini deini deini approved these changes

@jorgemoya jorgemoya jorgemoya approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
8 participants
@bc-alexsaiannyi @bookernath @kristinapototska @BC-krasnoshapka @jorgemoya @funivan @deini @christensenep