Add language toggle (EN-JP)

[torotimes]

Hi @Prid13 - can you experiment with how we can set up a language toggle? To go from wgtwo.com to wgtwo.com/jp and back.

Our issue today is that it is hard to find the /jp pages.

We are not looking to localize our site to a bunch of other languages any time soon, so while we should always keep the future in mind, we don't have to design for a future where we have 20 different languages to choose between.

The most obvious (and most standard UX) approach is to have a small flag/language toggle in the top right corner. Another is a flag or dropdown toggle in the bottom right. But I think we should look at doing something top right.

As for the actual design, there are multiple options:

• Flag toggle (US <--> JP)
• Text toggle (English <--> Japanese)

Here's a simple rundown of some options: https://usersnap.com/blog/design-language-switch/

Have fun with playing around with options!

I've included @naoya-wg2 in this issue for him to comment on the options directly (he's our main man in Japan!).

[jonny-wg2]

I think keeping the design simple with the following on the top right of the page, or depending on spacing a drop down

EN | 日本

And the language that is active is bold

[torotimes]

I think that makes sense, @jonny-wg2 :)

[Prid13]

Schwoop: https://github.com/working-group-two/wgtwo.com/pull/380

[jonny-wg2]

Doing something like this might be a clever solution too - https://ipapi.medium.com/change-website-based-on-visitors-country-using-javascript-514ccb5aef4d

Unsure how if it's the best solution though because then a japanese up could never access the English page?

[Prid13]

Doing something like this might be a clever solution too - https://ipapi.medium.com/change-website-based-on-visitors-country-using-javascript-514ccb5aef4d

Aah, clever idea ;) but like you said, I already see some issues with it:

• There would be no way to change language and you'd be restricted to your location
• If you have VPN on, there might be some "unexpected" confusion for the end user 😅 (unlikely case, though)
• Where would such a global code be placed in Docusaurus?
• It's dependent on an external API, and that's no good :< there's probably a built-in JS method or library to do the same thing (unreliably), but perhaps it's a bit overkill just for JP users?

If there's some data on this we could make better evaluations 😇 What do you think?

I reckon most JP users find this website through Google or social media links, in which case it's probably the JP site that pops up, right?

[jonny-wg2]

Yeah you are totally right - bad idea!!

I just saw this website from a cold email and thought they have a good implementation (for reference)

https://dataddo.com/

[jonny-wg2]

I now see the current implmentation

I think updating some CSS could do good here! Other than that it looks nice - simple.

Some updates would include:

• make flag bigger to match size of other text on the bar
• remove whitespace in dropdown

[Prid13]

Thanks for the feedback @jonny-wg2. Check this out: https://github.com/working-group-two/wgtwo.com/pull/386

[jonny-wg2]

Can we update the current implementation to match cloudflares? @Prid13

[torotimes]

This is a good solution, @jonny-wg2.

@Prid13, can we implement that, and fix the issue on Windows?

Jonny, @Prid13 also submitted this one, by the way, based on your input (I tried to approve it until we have something else in place but there was a prettier issue) https://github.com/working-group-two/wgtwo.com/pull/386

[jonny-wg2]

Ah just now saw #386 - looks much better! 👍🏻

[Prid13]

@jonny-wg2 that cloudflare example is good, but the only way I was able to make it work in Docusaurus without hacking the navbar was to hide the default element and replace with this another element on top with a Globe icon:

Would have to add another element on top for the arrow 😅 You still want this, or? :)

The reason for this is bc the selected language in the dropdown shows up in the navbar exactly as it looks in the dropdown. E.g., if an option is named "English (UK)" and you select it, "English (UK)" will show up by default in the navbar.

And this is how the options are defined:

[jonny-wg2]

Nice! I really like the above solution with the globe!

I vote we go with the globe if possible

A couple things to do

• [x] Globe icon with drop down arrow
• [x] Change label GB to English
• [x] Change label JP to 日本
• [x] Make the drop down like cloudflare where the text is beneath one another

[Prid13]

Alright, finally got around to making a working solution :) It's a bit hacky, and I kinda hate that, but it works (on my laptop at least haha):

https://github.com/working-group-two/wgtwo.com/assets/27897747/7cbaf4c4-0e94-4914-a0e8-7bd97ff12b55

The globe and arrow icons are raw SVGs pulled from the Lucide library.

Also, the globe icon wasn't aligning percetly with the search icon in the navbar, so I tweaked it a bit by a few pixels. This may have varying results on different devices, so gotta test 😅

PR: https://github.com/working-group-two/wgtwo.com/pull/392

[jonny-wg2]

Merged! Looks amazing. Great work - was a journey to come up with a clever solution.

[Prid13]

Merged! Looks amazing. Great work - was a journey to come up with a clever solution.

Yeah, thanks for all your input, research and inspiration with the examples, I love your willingness to aim for the top 😇👍