WIP: Implement languages page #21882

wouterraateland · 2020-03-01T14:48:55Z

Open questions

Switching languages is stubbed for now. Could create a hook for that. Or are there any other plans for that?
I'm not sure how to fetch the localization progress. Is it possible to fetch this from each localization repo from the first issue via gatsby-source-git?

Description

Implements the languages page for gatsbyjs.org. Tested in both in light and dark mode.

Related Issues

Fixes #21750

fk

Thanks so much for your PR, @wouterraateland! 🙏 🤗
This is looking great:

www/src/components/languages/language-table-row.js

www/src/pages/languages.js

www/src/components/progress-bar.js

www/src/components/languages/language-table-row.js

tesseralis

This looks fantastic! Thank you so much for you work :)

In addition to the things Flo mentioned, I requested a couple of changes relating to layout and behavior. A lot of stuff hasn't been implemented yet from our side, so we'd like to comment out/remove those features from the language page for now until they can be implemented.

In addition, it seems there's some inconsistencies of what the "default language" means. Right now, the desired behavior is that clicking on any part of the <LanguageTableRow> will change the UI to be that language. For example, clicking "Japanese" will redirect to /ja/languages/.

Similarly, the language that's currently highlighted should be the current language. Not the "default" language, which currently is always English. Setting the "default language" here means "update the user's preferences in local storage so that gatsbyjs.org will redirect to gatsbyjs.org/ja (or something like that)"

www/src/pages/languages.js

www/src/components/languages/language-table-row.js

www/src/pages/languages.js

www/src/utils/i18n.js

www/src/components/languages/language-table-row.js

wouterraateland · 2020-03-12T15:10:47Z

Thanks for the reviews and clarification. Really useful feedback! Will work the requested changes tomorrow.

tesseralis

This looks really good! A couple of changes and we should be good to go as long as @fk approves.

I noticed you've commented out a lot of the features that aren't implemented yet. I know that you'd like to keep your work, but we're also not sure when and if we're going to implement the default language feature or the progress tracking. What I propose is:

check out another branch based off of this one that has the additional features (default language selector and progress bar)
remove the commented-out code from this PR relating to these features
once we're ready to work on these features, I can assign them to you and you can start working off your updated branch.

Does that sound good?

www/src/pages/languages.js

tesseralis · 2020-03-23T21:55:16Z

www/src/components/languages/language-table-row.js

+      </div> */}
+        <MutedLink
+          href={`https://github.com/gatsbyjs/gatsby-${lang.code}`}
+          onClick={event => {


why is the stopPropagation here needed?

Also, since this is an external link, it should have rel="noopener noreferrer" and target="_blank"

stopPropagation is necessary because it is an <a/> tag nested inside another <a/> tag.
Could change the outer one so that doesn't render an <a /> tag, but just a div with an onClick listener. However, even then stopPropagation would be necessary.
Did add rel and target!

tesseralis · 2020-03-23T21:57:31Z

www/src/components/languages/language-table-row.js

+  return (
+    <Row
+      isCurrent={isCurrent}
+      to={isDefault ? "/languages" : `/${lang.code}/languages`}


You can use getLocalizedLink from utils/i18n here to correctly account for the default language

Couldn't find getLocalizedLink, so used localizedPath!

wouterraateland · 2020-03-25T14:55:45Z

Sounds like a plan! I have removed the comments indeed. Let me know if something else needs to be changed.

fk · 2020-03-25T22:45:14Z

we should be good to go as long as @fk approves.

Just building this locally, basically 👍 👍— if I see something, I'll leave a suggestion (and sorry for not finding my way back here earlier! 🙏)

tesseralis · 2020-03-25T23:04:31Z

Hi @wouterraateland, after discussion with @marcysutton, we've decided that the language page might need some redesign to make it accessible. In particular, nested links are inaccessible for keyboard users.

While there are ways to get around this, another issue is that the design of the page doesn't match the implementation. The page looks like you're selecting from a set of options (like a radio button) but in fact you're just clicking a link. I'm talking to @fk right now to figure out a redesign but until then, could we table this PR?

Thank you again for the work you've put in so far! Having an actual implementation helps us see the flaws with the current design and will help us towards a clean, accessible one.

wouterraateland · 2020-03-26T20:30:04Z

No worries @tesseralis . I agree, having the website accessible and understandable is important. Happy to help when the redesign is ready!

fk · 2020-04-06T21:19:17Z

Hey y'all! 👋 Nat and me got together to work on a clearer, simpler UI together and ended up following the reactjs.org pattern:

Figma is here: https://www.figma.com/file/UcsUDRdCoJaQdfITkcKMnU/Language-toggle-UI?node-id=209%3A479

wouterraateland · 2020-04-09T13:53:03Z

That redesign is looking clean! I have updated the code so that it should match the design. However, due to space constraints on my computer, I haven't been able to run the website and test...
I haven't found a quick way to reduce the build size and time of www. Do you know of a possible way? If not, I'll just try to free some space.

tesseralis · 2020-04-11T00:13:40Z

@wouterraateland unfortunately build time is an ongoing issue for us :( In the meantime, what I've been doing is running only on two languages.

@pieh do you have any other advice or options?

AishaBlake

This looks awesome! Thank you so much, @fk, for revisiting the design and @wouterraateland for sticking with us!

on the phone with Nat and she's good!

AishaBlake · 2020-04-15T18:56:30Z

@fk would you mind taking one more look at this? It seems good to me but I don't know our styles as well as I'd like!

fk · 2020-04-16T08:54:13Z

👋 Hey Aisha! Just seeing this—of course, 👀now!

fk · 2020-04-16T10:25:53Z

@wouterraateland Hello again Wouter! Thanks for sticking with this, and us! 💜

This looks great so far! 🙏 I have two hopefully small-ish requests:

Can we not extend the bottom border of the main link across the full width, but only underline the title (excluding the icon)?
Can we please change the border color of the "Contribute" border to the light grey from the designs (grey.30), and the (text) color to purple on hover? It'd be nice to exclude the icon from being underlined here, too.

Replace fixed sizes with theme props on the language page. Co-Authored-By: Florian Kissling <21834+fk@users.noreply.github.com>

…iscelaneous fixes as requested

wouterraateland · 2020-05-06T14:32:45Z

Hi guys, sorry for the long radio silence and @tesseralis thanks still for the advice.

Today I've managed to get sufficient space on my PC and tried to build the website again. This time, the build succeeded, but on rendering, I got an error regarding invalid hooks usage. As the changes in this PR make no use of hooks, I'm not sure why this happens.

@fk The changes you proposed where indeed minor and I think I have implemented them. Not being able to see the result makes it though to verify, but I have good hopes 🙏.

Here is the stacktrace of the error for reference:

react.development.js:1465 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1465)
    at Object.useContext (react.development.js:1473)
    at useMDXComponents (esm.js:120)
    at esm.js:113
    at renderWithHooks (react-dom.development.js:14804)
    at mountIndeterminateComponent (react-dom.development.js:17483)
    at beginWork (react-dom.development.js:18597)
    at HTMLUnknownElement.callCallback (react-dom.development.js:189)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:238)
    at invokeGuardedCallback (react-dom.development.js:293)
    at beginWork$1 (react-dom.development.js:23204)
    at performUnitOfWork (react-dom.development.js:22155)
    at workLoopSync (react-dom.development.js:22131)
    at performSyncWorkOnRoot (react-dom.development.js:21757)
    at scheduleUpdateOnFiber (react-dom.development.js:21189)
    at updateContainer (react-dom.development.js:24374)
    at react-dom.development.js:24759
    at unbatchedUpdates (react-dom.development.js:21904)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24758)
    at render (react-dom.development.js:24841)
    at app.js:67

Could also open an issue with more details if necessary, let me know :)

fk · 2020-05-07T14:06:01Z

Hey Wouter! Welcome back, and don't worry about the "long silence"! 🤗
We appreciate your time!

When updating my local version of your PR, I ran into this 🤷‍♂️ …

… which I could resolve with a yarn (install).
Unfortunately I didn't run into the problem you describe … maybe someone else can help?

Anyway, latest updates are looking good 🙏 (just not sure why the "Gatsby" wordmark next to the monogram isn't showing in the header LOL 😉) — 👍 from me:

fk · 2020-05-07T14:09:58Z

Hold on, another thing not displaying is the TranslateBackground now … 🤔

… ahhh but that just seems to be the color in "light" mode?

fk · 2020-05-07T14:10:26Z

Shoot hit the wrong button, sorry!

wouterraateland · 2020-05-14T10:58:05Z

Thanks @fk !
Your error was something different. Just tried building again this morning. Removing node_modules and .cache did the trick, it works again!
Not sure why the Gatsby wordmark isn't showing, I don't think my code touched that? 😅
Anyway, with the build working again, I've made changes to the TranslateBackground and contribution links. They should display properly now :)

fk · 2020-05-14T12:26:10Z

Just tried building again this morning. Removing node_modules and .cache did the trick, it works again!

🎉 (and sorry for all the build pains!)

Not sure why the Gatsby wordmark isn't showing, I don't think my code touched that? 😅

Yeah, also had me confused. I'll take another look now!

fk · 2020-05-14T12:39:42Z

Gatsby logo is back :) …

LGTM 🙏, ~~I think~~ this is good to go from my end!

muescha · 2020-07-04T18:32:59Z

www/src/pages/languages.js

+`
+
+const allLanguages = [
+  { code: "en", name: "English", localName: "English" },


should better all languages are in the i18n.json so that there is only one place where the languages are placed (and/or tranlsated)?

muescha · 2020-07-04T18:35:48Z

www/src/components/languages/language-thumb.js

+      </LocalName>
+      <ContributionText>
+        <ContributionLink
+          href={`https://github.com/gatsbyjs/gatsby-${lang.code}`}


this link not work for en because https://github.com/gatsbyjs/gatsby-en is not maintened

muescha · 2020-07-04T18:36:23Z

the server need also the current active language list in: process.env.LOCALES because otherwise only english is displayed

wouterraateland requested a review from a team as a code owner March 1, 2020 14:48

tesseralis self-requested a review March 2, 2020 18:05

fk requested changes Mar 8, 2020

View reviewed changes

tesseralis suggested changes Mar 9, 2020

View reviewed changes

tesseralis assigned AishaBlake Mar 9, 2020

tesseralis requested a review from AishaBlake March 9, 2020 22:10

tesseralis added the topic: i18n label Mar 9, 2020

tesseralis mentioned this pull request Mar 9, 2020

☂️ [Umbrella Issue] Localize gatsbyjs.org #19351

Closed

39 tasks

wouterraateland force-pushed the master branch from c71ed5b to 1e6387b Compare March 12, 2020 22:46

tesseralis previously requested changes Mar 23, 2020

View reviewed changes

fk mentioned this pull request Apr 6, 2020

feat(www): /languages page of dot-org #21750

Closed

wouterraateland force-pushed the master branch 3 times, most recently from c96cac5 to 3188ed0 Compare April 9, 2020 13:48

AishaBlake previously approved these changes Apr 15, 2020

View reviewed changes

Implement languages page

9181e7e

wouterraateland and others added 6 commits May 6, 2020 14:27

Apply suggestions from code review

5eb01b5

Replace fixed sizes with theme props on the language page. Co-Authored-By: Florian Kissling <21834+fk@users.noreply.github.com>

Language page fixes: Style table for mobile. Fix semantics of rows. M…

b697564

…iscelaneous fixes as requested

Use localized links. Normalize icon imports.

a94771b

Implement language page redesign

b4c2998

Remove redundant code for languages page

9c2e8c1

Languages page: Apply requested style fixes

da145c0

wouterraateland dismissed AishaBlake’s stale review via da145c0 May 6, 2020 14:21

wouterraateland force-pushed the master branch from 3188ed0 to da145c0 Compare May 6, 2020 14:21

fk closed this May 7, 2020

fk reopened this May 7, 2020

Fix link color usage in language components

6d812d7

fk approved these changes May 14, 2020

View reviewed changes

tesseralis merged commit c4920a3 into gatsbyjs:master Jul 4, 2020

muescha reviewed Jul 4, 2020

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WIP: Implement languages page #21882

WIP: Implement languages page #21882

wouterraateland commented Mar 1, 2020

fk left a comment

tesseralis left a comment

wouterraateland commented Mar 12, 2020

tesseralis left a comment

tesseralis Mar 23, 2020

wouterraateland Mar 25, 2020

tesseralis Mar 23, 2020

wouterraateland Mar 25, 2020

wouterraateland commented Mar 25, 2020

fk commented Mar 25, 2020

tesseralis commented Mar 25, 2020

wouterraateland commented Mar 26, 2020

fk commented Apr 6, 2020

wouterraateland commented Apr 9, 2020

tesseralis commented Apr 11, 2020

AishaBlake left a comment

AishaBlake commented Apr 15, 2020

fk commented Apr 16, 2020

fk commented Apr 16, 2020

wouterraateland commented May 6, 2020

fk commented May 7, 2020

fk commented May 7, 2020

fk commented May 7, 2020

wouterraateland commented May 14, 2020 •

edited

Loading

fk commented May 14, 2020

fk commented May 14, 2020 •

edited

Loading

muescha Jul 4, 2020

muescha Jul 4, 2020

muescha commented Jul 4, 2020

WIP: Implement languages page #21882

WIP: Implement languages page #21882

Conversation

wouterraateland commented Mar 1, 2020

Open questions

Description

Related Issues

fk left a comment

Choose a reason for hiding this comment

tesseralis left a comment

Choose a reason for hiding this comment

wouterraateland commented Mar 12, 2020

tesseralis left a comment

Choose a reason for hiding this comment

tesseralis Mar 23, 2020

Choose a reason for hiding this comment

wouterraateland Mar 25, 2020

Choose a reason for hiding this comment

tesseralis Mar 23, 2020

Choose a reason for hiding this comment

wouterraateland Mar 25, 2020

Choose a reason for hiding this comment

wouterraateland commented Mar 25, 2020

fk commented Mar 25, 2020

tesseralis commented Mar 25, 2020

wouterraateland commented Mar 26, 2020

fk commented Apr 6, 2020

wouterraateland commented Apr 9, 2020

tesseralis commented Apr 11, 2020

AishaBlake left a comment

Choose a reason for hiding this comment

AishaBlake commented Apr 15, 2020

fk commented Apr 16, 2020

fk commented Apr 16, 2020

wouterraateland commented May 6, 2020

fk commented May 7, 2020

fk commented May 7, 2020

fk commented May 7, 2020

wouterraateland commented May 14, 2020 • edited Loading

fk commented May 14, 2020

fk commented May 14, 2020 • edited Loading

muescha Jul 4, 2020

Choose a reason for hiding this comment

muescha Jul 4, 2020

Choose a reason for hiding this comment

muescha commented Jul 4, 2020

wouterraateland commented May 14, 2020 •

edited

Loading

fk commented May 14, 2020 •

edited

Loading