feat: migrate EditLink component

[HinataKah0]

Migrate EditLink component from nodejs.dev
and create a new Story.

Related to: #5242

[SEWeiTung]

@HinataKah0 : Plz first to run the code formation check to verify your codes :)

Thank you for your 1st contribution!

npm run prettier:fix

[SEWeiTung]

There're still many things I want to mention for the "Edit on GitHub", and this problem has happened in "nodejs.dev"：

“Edit on GitHub”'s Problem

First let's see a bug (Sorry I cannot send it directly to the nodejs.dev, bcoz it's now archived, and no-one has reported the bug yet)：

1）Open the link something like this : https://nodejs.dev/zh-cn/about/

2）Click "Edit on GitHub"：

3）Notice we don't have a simplified translated file here yet, so this will return you a 404 page instead!

Reason

We don't have real translated file yet, so we cannot use "edit" in the baseURL, as what I've mentioned in the code-review.

Several Solutions:

Solution 1：Smart Jump

Any languages with the "Edit on GitHub", when clicking it, it will jump to either the language itself (if we really have the page), or jump to the English page (to edit in English). Because we use translations in Crowdin instead of in GitHub.

Solution 2："Edit" with an "Adding" function when without the translated page

1. If we don't the page, we use "new" in the base URL. Then an empty page will be returned to you in GitHub, where you can do whatever you can.
2. If we have the translated page, just keep "edit" in the base URL instead.

PS: Do we really need "Edit on GitHub"? Bcoz we've translated files in Crowdin instead of in GitHub, and if we do that, the default one will be in GitHub, is it suitable?

Solution 3："Edit on GitHub" in English and "Edit on Crowdin" for other translations

I tend to cope with this, bcoz we're translating and editing in Crowdin mainly. And another advantage is that no matter whether we've got the page or not, we can directly open the file in the English version, and choose the language you wanna to translate into. To simplifiy the problem ,we can just make the "Edit On GitHub"'s link something like this following:

https://crowdin.com/project/nodejs-website/(your current language prefix here)

Take the Simplified Chinese as an example:
https://crowdin.com/project/nodejs-website/zh-CN

Notice：Crowdin doesn't include English itself, maybe for English, we still need "Edit on GitHub", but "Edit on Crowdin" for other translations?

Others

How do check the code just depends on how we think of the "Edit On GitHub"'s problem. And that's the reason why I use "Request changes" here. I'm not saying the code is "right" or "wrong", it should rely on discussions bcoz there're many things maybe we've missed before.

[SEWeiTung]

Maybe "Edit On GitHub" for translations (for English pages/other translation pages) won't be too easy to migrate, it's nice for us to have a discussion here before deciding how to do XD

[ovflowd]

Hey @HinataKah0 I've re-created your branch with the updated major/website-redesign so that you didn't need to rebase xD

Anyhow, can we use react-icons here instead? We're going to leave mui-icons and fort-awesome in favour of react-icons

[HinataKah0]

@MaledongGit

About lint issue:
It was resolved after merging major/website-redesign.

About redirection URL:
Thanks for bringing it up, it's a valid point.
+1 on it, I think let's wait for a while to hear inputs from others who understand the translation workflow as well.
I don't think it's worth to over-engineer the redirection logic. So I prefer to make it simple but enough to cater to our translation workflow.
Based on the README, initial development "usually" happens in English. So +1 for en -> "Edit on GitHub" and xx -> "Edit on Crowdin" currently.

@ovflowd

Thanks! Sure, react-icons works for me.

It looks like I'll change my copy-paste-able (I am lazy in general) commands to not rebase to make it similar with everyone's workflow 😝

Agreed together

[SEWeiTung]

So +1 for en -> "Edit on GitHub" and xx -> "Edit on Crowdin" currently.

Before posting this suggestions, I didn't anything related to it on README, is it you that is voting for this idea? Still on discussion or……?

But no matter what we do, if all of you can agree with the same idea or maybe a better one, that's nice, and I've cancelled my review now.

[HinataKah0]

is it you that is voting for this idea?

"+1" means I vote for the idea.

Actually, I think this is easily "revert"-able. So we can try any "easy-to-implement" idea first, then change it in the future if we see it doesn't fit well.

[ovflowd]

I'm fine with whatever y'all decide :)

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 24, 2023 9:36am
nodejs-org-stories	✅ Ready (Inspect)	Visit Preview		Apr 24, 2023 9:36am

[HinataKah0]

Edit (English):

Translate (Non-English):

[ovflowd]

@HinataKah0 no need to add screenshots of Storybooks here. Vercel Bot already adds preview link for Storybook 👀

[ovflowd]

LGTM! Tremendous work :) Thank you for this amazing contribution <3

[HinataKah0]

@MaledongGit Sorry I missed to address your comment.

About all uppercase, I did comparison:

Styling is always opinionated 😛
TBH, I prefer the 2nd one as well (aesthetic). However, the 2nd one seems weaker in size compared to the paragraph above it which makes it less noticeable. So, if we want to change the style, I think we might need to increase the font size a bit or keep it as it is for now.

I think let's keep it as it is since it is very much a matter of taste (different people will have different opinions).

[SEWeiTung]

TBH, I prefer the 2nd one as well (aesthetic). However, the 2nd one seems weaker in size compared to the paragraph above it which makes it less noticeable.

Yes, I must admin it looks not noticeable, mixed with other Latin-words.
Maybe prettier it with some styles (to change the colors of the font).
But that's not an important case. Just a suggestion left here.

[ovflowd]

Can someone give the extra approval that this PR requires? :) cc @nodejs/website

[mikeesto]

LGTM, thanks for your contribution