Add an Option of Showing Flags in Locale dropdown

massoudmaboudi commented 2 years ago

Have you read the Contributing Guidelines on issues?

[X] I have read the Contributing Guidelines on issues.

Description

It can be an option in docusaurus.config.js to show the flags of each locale as emoji characters for better compatibility.

I have a dilemma for this feature though

Arguably, the flag of England is the most appropriate flag to represent the English language. But how recognizable is the English flag?
However, often the British flag is used to represent English. Within Britain, other languages other than English are spoken — including Welsh and Scottish Gaelic.
Often the United States flag is used to represent English — and while the USA has far more English speakers than Britain, English does not originate from the United States.

Maybe an optional Unicode character also can be embedded in the config like how it's used in below :

https://www.npmjs.com/package/emoji-flags

{
    "code": "DK",
    "emoji": "🇩🇰",
    "unicode": "U+1F1E9 U+1F1F0",
    "name": "Denmark",
    "title": "flag for Denmark"
}

But it may help #7409 also.

Has this been requested on Canny?

No response

Motivation

To make an improvement in locale dropdown and #7409

API design

No response

Have you tried building it?

No response

Self-service

[ ] I'd be willing to contribute this feature to Docusaurus myself.

Josh-Cena commented 2 years ago

That looks nice, I think we definitely want this type of stuff.

We might even want to port it to other things, like versions dropdown, navbar link items, sidebar links...

(Note, for navbar link items, we have long thought about using icons on medium-sized screens so people don't have to toggle the sidebar when the screen just becomes slightly narrow)

massoudmaboudi commented 2 years ago

You are right. For example, the ladder icon on docusaurus website is nice. So maybe we can add an option to any dropdown as n optional config.

Josh-Cena commented 2 years ago

Ah, that's a construction barrier. And yes, if we make this an API it should be more easily portable.

Also, if we support this API, it should probably support strings, HTMLs, and images.

massoudmaboudi commented 2 years ago

It should be able to be placed, on the left, right of the item, and also on the other side of the item like below:

Josh-Cena commented 2 years ago

Mmm, that's a bit complicated. Note also that the external link icon is already taking the right edge, so we'll probably put it on the left edge by default. Not sure if we want a config option to change that—should be swizzlable.

massoudmaboudi commented 2 years ago

Or also a bit further, what do you think of the Material Design to be optional too and if its false, it can show the flag to solve the #7409?

massoudmaboudi commented 2 years ago

yes, I raise the ideas, you try to choose the best one.

Josh-Cena commented 2 years ago

the Material Design to be optional too and if its false,

Not sure what you mean exactly, but Material is absolutely on my radar, and why I mentioned "it should probably support strings, HTMLs, and images". We won't officially couple the API to any icon library, but you should be able to inject most kinds of icons.

massoudmaboudi commented 2 years ago

This Icon, Just consider we make it optional if the flag is available. Then it will be like the below:

It indicates this is the language dropdown

Josh-Cena commented 2 years ago

Ah, I get you. Not a bad idea? We can think about it once we see the UI/UX.

massoudmaboudi commented 2 years ago

Glad to hear that. Waiting for more updates on this.

slorber commented 2 years ago

agree we should have this and make a poc

This post provides a very lightweight way to get an emoji from a country code:

https://dev.to/jorik/country-code-to-flag-emoji-a21

we can start with something opinionated and then see which options make sense?

facebook / docusaurus