Do we (should we) localize quotes?

[flukeout]

There's a section like this in the new Clubs pages...

It features quotes from 4 Club Captains, all in English. What is the best practice for an element like this when it comes to localization? Should we translate the quotes?

cc @alicoding @jvallera @Carotejada

[alicoding]

In the past we have done that and the community also usually do them plus I think it makes total sense to read them in the language we are displaying.

[flukeout]

Ok, this poses an interesting challenge because the content in the carousel comes from JSON embedded in the page, which looks like this...

var carouselData = [{
  image: `/img/pages/clubs/club-captains/isisipho.png`,
  caption: `I want to teach the girls how to code. Right now they know the basics but there’s a lot of interest in developing these skills further. Therefore I am working with my school to use study time as an opportunity to hold club activities and events so to have a learning space.`,
  attribution: `Isisipho, Africa`
}, {
  image: `/img/pages/clubs/club-captains/patience.png`,
  caption: `Women with disabilities are particularly vulnerable to being digitally excluded because of the lack of awareness, support, access and cost of equipment.`,
  attribution: `Patience, Africa`
}, {
  image: `/img/pages/clubs/club-captains/arkodyuti.png`,
  caption: `Teaching the web is my passion. The Internet is a catalyst to connectivity. It has made connecting with other humans, places and things faster than any man in the physical world could have ever dreamt of.`,
  attribution: `Arkodyuti, India`
}, {
  image: `/img/pages/clubs/club-captains/mark.png`,
  caption: `I am excited about providing opportunities for learners to discover and explore an evolving learning landscape. Be the Urban Exploring maker in your school, the Guerrilla technologist, the Graffiti Artist tinkerer. Be ready to provoke & inspire!`,
  attribution: `Mark, Switzerland`
}];

Should we move ther caption and attribution data to the messages.properties file, like...

{
  image: `/img/pages/clubs/club-captains/mark.png`,
  caption: `captain-mark-caption`,
  attribution: `captain-mark-attribution`
}

...then we could use those as variables with the localization code {this.context.intl.formatMessage({id: 'captain-mark-caption'})}

Thoughts & comments? Do we already have an example of something like this? What's a good way to solve this. We have a related scenario on the Clubs Resources page, which pulls JSON data form a github repo.

cc @gvn @alicoding

[alicoding]

I like what you've suggested there. We have done it for the sidebar similar to what you did @flukeout https://github.com/mozilla/learning.mozilla.org/blob/7c756f52051282508c04b9abfb816f8ba4af91a9/components/sidebar/topLevelNavItems.jsx#L8

[flukeout]

Okay cool, I'll try that out - thanks!

[flukeout]

@gvn Since the Carousel lives in mofo-ui, what are the implications here? Setting it up in the way I describe seems to make it less useful for other sites. Would we have to pass some kind of mode to the Carousel? Like, a localizable version vs a standard version? Let's chat.

@ali Is it possible to localize the JSON before we pass it in?

Something like...

{
  image: `/img/pages/clubs/club-captains/mark.png`,
  caption: this.context.intl.formatMessage({id: 'captain-mark-caption'}),
  attribution: this.context.intl.formatMessage({id: 'captain-mark-caption'})
}

[flukeout]

We've figured it out! We will build the JSON object inside of the react component that uses the Carousel, this will give us access to the formatMessage method.