Adding multi language

gatsby-config.js

@@ -88,5 +88,14 @@ module.exports = {
  includeInDevelopment: false,
  },
  },
+ {
+ resolve: 'gatsby-plugin-intl',
+ options: {
+ path: `${__dirname}/src/intl`,
+ languages: ['en'],
+ defaultLanguage: 'en',
+ redirect: false,
+ },
+ },
  ],
 };

package.json

@@ -26,6 +26,7 @@
  "@modus/react-idle": "^1.1.1",
  "classnames": "2.2.6",
  "gatsby": "2.32",
+ "gatsby-plugin-intl": "^0.3.3",
  "lazysizes": "^5.3.2",
  "lodash.get": "4.4.2",
  "prop-types": "^15.7.2",
@@ -56,4 +57,4 @@
  "node-sass": "^4.14.1",
  "prettier": "1.19.1"
  }
-}
+}

src/components/AnimatedWords/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from 'gatsby-plugin-intl';
 import s from './styles.module.scss';
 
 const DELAY_TIME = 3;
@@ -24,7 +25,7 @@ const AnimatedWords = ({ words }) => (
  <span className={s.animatedWords}>
  {words.map((word, idx, arr) => (
  <span key={idx} style={animDelay(idx, arr.length)}>
- {word}
+ <FormattedMessage id={word} />
  </span>
  ))}
  </span>

src/components/ContactHero/index.js

@@ -1,23 +1,33 @@
 import React from 'react';
+
+import PropTypes from 'prop-types';
+import { injectIntl, FormattedMessage } from 'gatsby-plugin-intl';
 import PrimaryButton from '../PrimaryButton';
 
 import s from './styles.module.scss';
 
-const ContactHero = () => (
+const ContactHero = ({ intl }) => (
  <section className={s.container}>
  <strong className={s.title}>
- Ready to <span className={s.highlight}>collaborate</span> with Modus?
+ <FormattedMessage id="contactHero.title1" />
+ <span className={s.highlight}>
+ <FormattedMessage id="contactHero.title2" />
+ </span><FormattedMessage id="contactHero.title3" />
  </strong>
  <p className={s.content}>
- Whether you have a new project, idea, or just want to see a sketch come to life we are here to
- help your dreams become reality. Multi-disciplinary teams are ready to assist you on any
- project type. Just hit us up!
+ <FormattedMessage id="contactHero.subTitle" />
  </p>
  <div className={s.ctaContainer}>
- <PrimaryButton className={s.cta} href="mailto:[email protected]" text="Email us" />
- <PrimaryButton className={s.cta} href="tel:+1-855-721-7223" text="Call us now" />
+ <PrimaryButton className={s.cta} href="mailto:[email protected]" text={intl.formatMessage({ id: 'contactHero.emailUsButton' })} />
+ <PrimaryButton className={s.cta} href="tel:+1-855-721-7223" text={intl.formatMessage({ id: 'contactHero.callUsButton' })} />
  </div>
  </section>
 );
 
-export default ContactHero;
+ContactHero.propTypes = {
+ intl: PropTypes.shape({
+ formatMessage: PropTypes.func,
+ }),
+};
+
+export default injectIntl(ContactHero);

src/components/Footer/index.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Link } from 'gatsby';
+import { FormattedMessage } from 'gatsby-plugin-intl';
 import ContactHero from '../ContactHero';
 import Logo from '../Logo';
+
 import s from './styles.module.scss';
 
 const YEAR = new Date().getFullYear();
@@ -20,7 +22,7 @@ const Footer = () => (
  <a className={s.link} href="https://moduscreate.com/?utm_source=labs">
  Modus Create
  </a>
- . All rights reserved.
+ <FormattedMessage id="footer.rightsReserved" />
  </div>
  <div className={s.col}>
  <a className={s.link} href="tel:1-855-721-7223">

src/components/Header/index.js

@@ -1,19 +1,21 @@
 import React from 'react';
+import { FormattedMessage } from 'gatsby-plugin-intl';
 import CloudinaryImage from '../LazyImage';
 import AnimatedWords from '../AnimatedWords';
 import Logo from '../Logo';
+
 import s from './styles.module.scss';
 
 const WORDS = [
- 'Line of Code',
- 'Problem',
- 'Persona',
- 'Sketch',
- 'Pixel',
- 'Test',
- 'Deployment',
- 'Release',
- 'Integration',
+ 'header.animated.line',
+ 'header.animated.problem',
+ 'header.animated.persona',
+ 'header.animated.sketch',
+ 'header.animated.pixel',
+ 'header.animated.test',
+ 'header.animated.deployment',
+ 'header.animated.release',
+ 'header.animated.integration',
 ];
 
 const Header = () => (
@@ -22,14 +24,13 @@ const Header = () => (
  <h1>
  <Logo />
  </h1>
- <h3 className={s.introHeader}>Changing the world</h3>
+ <h3 className={s.introHeader}><FormattedMessage id="header.introHeader" /></h3>
  <strong className={s.heading__main}>
- One
+ <FormattedMessage id="header.heading1" />
  <AnimatedWords words={WORDS} />
- At A Time
+ <FormattedMessage id="header.heading2" />
  </strong>
- <h3 className={s.outroHeader}>Open source community driven experiments</h3>
-
+ <h3 className={s.outroHeader}><FormattedMessage id="header.outroHeader" /></h3>
  <CloudinaryImage
  filename="desktop-side-artifacts.png"
  className={s.artifactsDesktop}

src/components/project/Overview/index.js

@@ -1,25 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from 'gatsby-plugin-intl';
 
 import s from './styles.module.scss';
 
 const ProjectOverview = ({ project }) => (
  <section className={s.contentContainer}>
  <div className={s.main}>
- <h3 className={s.title}>Project Overview</h3>
+ <h3 className={s.title}><FormattedMessage id="overview.title" /></h3>
  <div className={s.projectDescription}>{project.description}</div>
  </div>
  <div className={s.side}>
  <aside>
- <h2 className={s.subTitle}>Technology</h2>
+ <h2 className={s.subTitle}><FormattedMessage id="overview.subTitle1" /></h2>
  {project.stack.map((stacks, index) => (
  <span key={`teck_stacks_${index}`} className={s.technologyContent}>
  {stacks}
  </span>
  ))}
  </aside>
  <aside className={s.tagsSection}>
- <h2 className={s.subTitle}>Tags</h2>
+ <h2 className={s.subTitle}><FormattedMessage id="overview.subTitle2" /></h2>
  {project.tags.map((tag, index) => (
  <div className={s.tagsParent} key={`tag_index${index}`}>
  <div className={s.tagsChild}>{tag}</div>

src/components/project/Team/index.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from 'gatsby-plugin-intl';
 
 import TwitterButton from '../TwitterButton';
 import s from './styles.module.scss';
 
 const Team = ({ project }) => (
  <aside>
- <h3 className={s.title}>Team</h3>
+ <h3 className={s.title}><FormattedMessage id="team.title" /></h3>
  <div className={s.team}>
  {project.team.map((teamMember, index) => (
  <div className={s.member} key={`memberName${index}`}>

src/containers/Projects/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import { StaticQuery, graphql } from 'gatsby';
+import { FormattedMessage } from 'gatsby-plugin-intl';
+
 import ProjectFeatured from '../../components/project/Featured';
 import ProjectListing from '../../components/project/Listing';
 import s from './styles.module.scss';
@@ -37,7 +39,7 @@ const Projects = () => (
  <ProjectFeatured key={node.name} project={node} />
  ))}
  </section>
- <strong className={s.heading__main}>More Labs</strong>
+ <strong className={s.heading__main}><FormattedMessage id="projects.title" /></strong>
  <section className={s.list}>
  {data.listing
  && data.listing.edges.map(({ node }) => (

src/intl/en.json

@@ -0,0 +1,45 @@
+{
+ "contactHero": {
+ "title1": "Ready to ",
+ "title2": " collaborate ",
+ "title3": " with Modus?",
+ "subTitle": "Whether you have a new project, idea, or just want to see a sketch come to life we are here to help your dreams become reality. Multi-disciplinary teams are ready to assist you on any project type. Just hit us up!",
+ "emailUsButton": "Email Us",
+ "callUsButton": "Call us now"
+ },
+ "footer": {
+ "rightsReserved": ". All rights reserved."
+ },
+ "header": {
+ "introHeader": "Changing the world",
+ "heading1": "One",
+ "heading2": "At A Time",
+ "outroHeader": "Open source community driven experiments",
+ "animated": {
+ "line": "Line of Code",
+ "problem": "Problem",
+ "persona": "Persona",
+ "sketch": "Sketch",
+ "pixel": "Pixel",
+ "test": "Test",
+ "deployment": "Deployment",
+ "release": "Release",
+ "integration": "Integration"
+ }
+ },
+ "overview": {
+ "title": "Project Overview",
+ "subTitle1": "Technology",
+ "subTitle2": "Tags"
+ },
+ "team": {
+ "title": "Team"
+ },
+ "projects": {
+ "title": "More Labs"
+ },
+ "notFoundPage": {
+ "title": "NOT FOUND",
+ "subTitle": "You just hit a route that doesn't exist... the sadness."
+ }
+}

src/pages/404.js

@@ -1,10 +1,12 @@
 import React from 'react';
+import { FormattedMessage } from 'gatsby-plugin-intl';
+
 import Layout from '../components/layout/Home';
 
 const NotFoundPage = () => (
  <Layout>
- <h1>NOT FOUND</h1>
- <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+ <h1><FormattedMessage id="notFoundPage.title" /></h1>
+ <p><FormattedMessage id="notFoundPage.subTitle" /></p>
  </Layout>
 );