Add language selector to nav #158

ironng · 2020-05-29T03:08:10Z

Includes miscellaneous updates to our header nav:

Configures the nav items to be editable via cms (and i18n enabled)
Adds a DropdownComponent
Adds LanguageDropdown
Updates the style of the "Mint dApp" button
Makes LocaleLink aware of the active locale

TODO:

Make the language dropdown work with prefix builds

There's a bug in which this method transforms all paths found in frontmatter to relative links, not just image links, breaking any relative links supplied to the nav links list

The default export of LocaleLink will always be set with the active locale, so we don't have to pass down the prop everywhere Closes #138

if present for language selector

ironng · 2020-05-30T01:31:32Z

This doesn't handle redirecting the news article or resource article pages to the correct translation from the language selector. Right now, it tries to just reload the same page to the equivalent locale's page, but this doesn't work for the article pages:

For example:
Going from /de/news to /news works

However
/de/news/2020-04-25-tbtc-launch-eckdaten to /news/2020-04-25-tbtc-launch-eckdaten
doesn't, since that article doesn't exist at that url.

Not sure if this should be figured out as part of this PR, or if we should redirect to the news index page in that case. Or should changing the language from the selector always just take you to the home page in that language for now?

ironng · 2020-06-02T15:53:46Z

@Shadowfiend or @mhluongo any preference to the question posed above?

mhluongo · 2020-06-12T15:20:05Z

Not sure if this should be figured out as part of this PR, or if we should redirect to the news index page in that case.

We've taken a "forked content" approach to localization- eg some content isn't ever going to exist between locales- so I think your approach makes sense. In an ideal world perhaps the 404 would point people to the localized index? A straight redirect seems like an abuse of HTTP :)

ironng · 2020-06-12T17:28:30Z

I'm down with that, we still need to make a 404 page though. :) I see that there already is an issue and design for it! #96

mhluongo

This looks awesome, I'm excited! A couple little snaggly bits that could use clarification or an edit - nothing really high conviction though

mhluongo · 2020-06-12T18:50:19Z

src/components/App.js

@@ -4,18 +4,33 @@ import SEO from './SEO.js'

 import '../css/app.scss'

-export default (props) => {
-  const { children, title, description, locale } = props
+const LocaleContext = React.createContext({})


I've been waiting for a good opp to learn about contexts

mhluongo · 2020-06-12T18:51:54Z

src/components/LocaleLink.js

@@ -20,7 +22,12 @@ const LocaleLink = ({ children, to, locale, ...other }) =>
        locale = defaultLocale
      }

-      localeTo = localeTo.replace('/' + defaultLocale + '/', '/')
+      // strip any existing locale from the pathname
+      localeTo = localeTo.replace(/^\/\w{2}\//, "/")


This will catch non-locale URLs

... I guess the alternative is either doing a GraphQL query + props in a context somewhere, or testing against all ISO locales...

Is it bad that it catches non-locale urls? I think they will be ok since LocaleLink is only used for internal links. The regex should only catch any two letter phrase between two backlashes at the beginning of the path. So the non-locale urls will just pass through. I don't think we'd create any two letter subdirectory? However, I could be very well missing something.

You're right, it probably won't... I'm excited for the day we come up with a two-letter content type (id?) and break this, but I guess it's fine for now. Comments might be nice

I'll try to update this to only test for our supported locales. Lol I think I was just maybe a teeny bit traumatized by our last attempt at that. 🙈 I'll also add more comments!

mhluongo · 2020-06-12T18:52:33Z

src/components/LocaleLink.js

+      localeTo = localeTo.replace(/^\/\w{2}\//, "/")
+
+      if (locale !== defaultLocale) {
+        localeTo = `/${locale}${localeTo}`


Can you clarify this?

Yes!! Will add comments!

mhluongo · 2020-06-12T18:54:41Z

src/components/lib/Header.js


-const Header = props => {
+const NavLink = ({ url, label, ...other }) => {
+  if (/^http/.test(url)) {


Not used to seeing regex literal tests, took me a second

mhluongo · 2020-06-12T18:56:06Z

src/components/lib/LanguageDropdown.js

+
+  // strip prefix build name from url if present
+  const pathname =
+    location.pathname.replace(`/${process.env.GATSBY_BRANCH}/`, "/")


A little surprised we don't have to do this elsewhere

So far we've mostly had to add the prefix.

mhluongo

LGTM!

experiencedft · 2020-06-15T12:06:40Z

Now that this has been added, I believe there are a bunch of translations specific PRs waiting to be merged which should give you the initial i18n in several languages.

mhluongo · 2020-06-15T12:59:53Z

Yep, this was the last piece @jeremyid.

For German, I've been able to roughly spot-check translations myself. Thoughts on how best to do that with these other PRs when we don't have team members who are familiar?

Pretty sure @Shadowfiend can cover... we'll, tons. But it'd be nice to have a second review that's not the team

ironng added 9 commits May 29, 2020 16:06

Add cms config for header nav items

8c8d5d6

Add generated header nav md files for each locale

17a82e5

Update Header to read nav data from cms

8c7a3e8

Exclude the nav md files from fmImagesToRelative

b4eed33

There's a bug in which this method transforms all paths found in frontmatter to relative links, not just image links, breaking any relative links supplied to the nav links list

Create Dropdown component

faf58b4

Add language dropdown

237a0af

Update the url with the correct locale in LocaleLink

ab90ce3

Adjust the mint button style

c4de7aa

Use React Context to automatically set locale for App children

b1483fd

The default export of LocaleLink will always be set with the active locale, so we don't have to pass down the prop everywhere Closes #138

ironng force-pushed the language-dropdown branch from b398d4e to b1483fd Compare May 29, 2020 23:06

ironng added 2 commits May 29, 2020 16:24

Strip prefix build name from location path

36fd27d

if present for language selector

Adjust speech bubble positioning

98cfa92

ironng requested review from Shadowfiend and mhluongo and removed request for Shadowfiend May 30, 2020 01:31

ironng marked this pull request as ready for review June 2, 2020 15:50

ironng marked this pull request as draft June 2, 2020 15:51

ironng marked this pull request as ready for review June 10, 2020 14:58

mhluongo requested changes Jun 12, 2020

View reviewed changes

Make locale prefix regex more specific & add more comments

7797abf

ironng requested a review from mhluongo June 12, 2020 20:54

mhluongo approved these changes Jun 12, 2020

View reviewed changes

mhluongo merged commit 313bdfa into master Jun 12, 2020

mhluongo deleted the language-dropdown branch June 12, 2020 21:40

ironng mentioned this pull request Jun 12, 2020

Update nav design #139

Closed

4 tasks

mhluongo mentioned this pull request Jul 23, 2020

Localized canonical URLs #269

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add language selector to nav #158

Add language selector to nav #158

ironng commented May 29, 2020 •

edited

Loading

ironng commented May 30, 2020 •

edited

Loading

ironng commented Jun 2, 2020

mhluongo commented Jun 12, 2020 •

edited

Loading

ironng commented Jun 12, 2020

mhluongo left a comment

mhluongo Jun 12, 2020

mhluongo Jun 12, 2020

mhluongo Jun 12, 2020

ironng Jun 12, 2020

mhluongo Jun 12, 2020

ironng Jun 12, 2020

ironng Jun 12, 2020

mhluongo Jun 12, 2020

ironng Jun 12, 2020

mhluongo Jun 12, 2020

mhluongo Jun 12, 2020

ironng Jun 12, 2020

mhluongo left a comment

experiencedft commented Jun 15, 2020

mhluongo commented Jun 15, 2020

Add language selector to nav #158

Add language selector to nav #158

Conversation

ironng commented May 29, 2020 • edited Loading

ironng commented May 30, 2020 • edited Loading

ironng commented Jun 2, 2020

mhluongo commented Jun 12, 2020 • edited Loading

ironng commented Jun 12, 2020

mhluongo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mhluongo left a comment

Choose a reason for hiding this comment

experiencedft commented Jun 15, 2020

mhluongo commented Jun 15, 2020

ironng commented May 29, 2020 •

edited

Loading

ironng commented May 30, 2020 •

edited

Loading

mhluongo commented Jun 12, 2020 •

edited

Loading