diff --git a/gatsby-config.js b/gatsby-config.js index c92ab11..5f78b05 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -102,7 +102,16 @@ module.exports = { } }, `gatsby-plugin-offline`, - `gatsby-plugin-react-helmet` + `gatsby-plugin-react-helmet`, + { + resolve: `gatsby-plugin-intl`, + options: { + path: `${__dirname}/src/intl`, + languages: ["en", "fr"], + defaultLanguage: "en", + redirect: true + } + } ], mapping: { "MarkdownRemark.frontmatter.author": `AuthorYaml` diff --git a/l18n.js b/l18n.js new file mode 100644 index 0000000..e69de29 diff --git a/package.json b/package.json index f900503..224b899 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "gatsby-plugin-emotion": "^4.0.3", "gatsby-plugin-feed": "^2.0.13", "gatsby-plugin-google-analytics": "^2.0.20", + "gatsby-plugin-intl@beta": "^0.1.7", "gatsby-plugin-mailchimp": "^5.1.0", "gatsby-plugin-manifest": "^2.0.18", "gatsby-plugin-netlify-cms": "^3.0.12", diff --git a/src/components/HomeIntro/index.js b/src/components/HomeIntro/index.js index b1c75be..ace1056 100644 --- a/src/components/HomeIntro/index.js +++ b/src/components/HomeIntro/index.js @@ -5,16 +5,18 @@ import Styles from "./Styles.module.scss"; import Typist from "react-typist"; import TypistLoop from "react-typist-loop"; import HomeBanner from "./homeBanner.svg"; +import { formatMessage } from "gatsby-plugin-intl"; +import { injectIntl } from "react-intl"; import ConvincedButton from "../ConvincedButton"; -const HomeIntro = () => { +const HomeIntro = ({ intl }) => { const [mounted, setMounted] = useState(false); useEffect(() => { setTimeout(() => { setMounted(true); - }, 2000); + }, 4000); }, []); return ( @@ -26,24 +28,25 @@ const HomeIntro = () => { {!mounted ? ( mass extinctions ) : ( - + {[ - "extreme weather", - "water shortages", - "crop failures", + "extreme_weather", + "water_shortages", + "crop_failures", "wildfires", - "mass migrations", - "sea level rises", - "mass extinctions" + "mass_migrations", + "sea_level rises", + "mass_extinctions" ].map(text => ( - {text} - + + {intl.formatMessage({ id: { text }.text })} + ))} @@ -78,4 +81,4 @@ const HomeIntro = () => { ); }; -export default HomeIntro; +export default injectIntl(HomeIntro); diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js index d83edc5..9b44141 100644 --- a/src/components/Navbar/index.js +++ b/src/components/Navbar/index.js @@ -1,12 +1,13 @@ import React, { useState } from "react"; -import { Link } from "gatsby"; import MenuIcon from "../Images/Icons/MenuIcon"; import GlobalStyles from "../../styles/Global.module.scss"; import ButtonStyles from "../../styles/Buttons.module.scss"; import Styles from "./Styles.module.scss"; import Logo from "./LogoOnDark.svg"; +import { Link, FormattedMessage } from "gatsby-plugin-intl"; +import { injectIntl } from "react-intl"; -function Navbar() { +const Navbar = ({ intl }) => { const [navOpen, setNavOpen] = useState(false); function toggleNav(e) { @@ -22,7 +23,7 @@ function Navbar() { >
- + ClimateChoice
@@ -39,13 +40,16 @@ function Navbar() { className={`${Styles.navList} ${navOpen ? Styles.navListOpen : ""}`} >
  • - - Contribute + + {intl.formatMessage({ id: "contribute" })}
  • - - Donate + +
  • @@ -55,7 +59,7 @@ function Navbar() { ButtonStyles.btnHeader } `} > - View your choices +
  • @@ -63,6 +67,6 @@ function Navbar() {
    ); -} +}; -export default Navbar; +export default injectIntl(Navbar); diff --git a/src/components/Redirect/redirect.js b/src/components/Redirect/redirect.js new file mode 100644 index 0000000..f3a4104 --- /dev/null +++ b/src/components/Redirect/redirect.js @@ -0,0 +1,8 @@ +import React from "react"; +import { injectIntl } from "gatsby-plugin-intl"; + +const Redirect = ({ intl }) => { + return ; +}; + +export default injectIntl(Redirect); diff --git a/src/intl/en.json b/src/intl/en.json new file mode 100644 index 0000000..264ef92 --- /dev/null +++ b/src/intl/en.json @@ -0,0 +1,13 @@ +{ + "link_to_root": "Go back home", + "contribute": "Contribute to ClimateChoice", + "donate": "Donate to climate causes", + "choices": "Your choices", + "extreme_weather": "extreme weather", + "water_shortages": "water shortages", + "crop_failures": "crop failures", + "wildfires": "wildfires", + "mass_migrations": "mass migrations", + "sea_level_rises": "sea-level rises", + "mass_extinctions": "mass extinctions" +} diff --git a/src/intl/fr.json b/src/intl/fr.json new file mode 100644 index 0000000..e10173e --- /dev/null +++ b/src/intl/fr.json @@ -0,0 +1,13 @@ +{ + "link_to_root": "Acceuil", + "contribute": "Contribuer à ClimateChoice", + "donate": "Donner à climate causes", + "choices": "Vos choix", + "extreme_weather": "des conditions climatiques extrèmes", + "water_shortages": "une pénurie d'eau", + "crop_failures": "des mauvaises récoltes", + "wildfires": "des feux de forêt", + "mass_migrations": "l'immigration de masse", + "sea_level_rises": "des hausses du nieveau de la mer", + "mass_extinctions": "l'extinction en masse'" +} diff --git a/yarn.lock b/yarn.lock index 6f8a5da..b012cef 100644 --- a/yarn.lock +++ b/yarn.lock @@ -717,7 +717,7 @@ dependencies: regenerator-runtime "^0.13.2" -"@babel/runtime@7.4.5": +"@babel/runtime@7.4.5", "@babel/runtime@^7.4.5": version "7.4.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12" integrity sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ== @@ -2328,6 +2328,13 @@ brorand@^1.0.1: resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f" integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8= +browser-lang@^0.0.1: + version "0.0.1" + resolved "https://registry.yarnpkg.com/browser-lang/-/browser-lang-0.0.1.tgz#9cccc756a562fb7f271b87d3b2740f468c4d9b92" + integrity sha512-ozdbsXd3q/7gUb98LzM80Y1Y/GRzy9GMucBdT92KRoWLjICxCpJU7RJgqFm+dRXWW8hxTGgnLfb9M4QSrcq5gw== + dependencies: + lodash "^4.17.10" + browserify-aes@^1.0.0, browserify-aes@^1.0.4: version "1.2.0" resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48" @@ -5503,6 +5510,17 @@ gatsby-plugin-google-analytics@^2.0.20: dependencies: "@babel/runtime" "^7.0.0" +gatsby-plugin-intl@beta@^0.1.7: + version "0.2.0-beta.1" + resolved "https://registry.yarnpkg.com/gatsby-plugin-intl/-/gatsby-plugin-intl-0.2.0-beta.1.tgz#8bd36f3b005b1745ea407e0826cb017630069116" + integrity sha512-S2Z+vViQdW4GvaHtMM7IOEZmo8cd0gfOMFi6Ul60Q6ndXu6/T75T4GtHsAY1Lkj7ovxFN/PlM/Bbk8MRGPossQ== + dependencies: + "@babel/runtime" "^7.4.5" + browser-lang "^0.0.1" + intl "^1.2.5" + react "^16.8.6" + react-intl "^2.9.0" + gatsby-plugin-mailchimp@^5.1.0: version "5.1.0" resolved "https://registry.npm.taobao.org/gatsby-plugin-mailchimp/download/gatsby-plugin-mailchimp-5.1.0.tgz#10e5235d0d807ec1bd681c8c0fa636f4a6064491" @@ -7090,6 +7108,35 @@ internal-ip@^4.2.0: default-gateway "^4.2.0" ipaddr.js "^1.9.0" +intl-format-cache@^2.0.5: + version "2.2.9" + resolved "https://registry.yarnpkg.com/intl-format-cache/-/intl-format-cache-2.2.9.tgz#fb560de20c549cda20b569cf1ffb6dc62b5b93b4" + integrity sha512-Zv/u8wRpekckv0cLkwpVdABYST4hZNTDaX7reFetrYTJwxExR2VyTqQm+l0WmL0Qo8Mjb9Tf33qnfj0T7pjxdQ== + +intl-messageformat-parser@1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-1.4.0.tgz#b43d45a97468cadbe44331d74bb1e8dea44fc075" + integrity sha1-tD1FqXRoytvkQzHXS7Ho3qRPwHU= + +intl-messageformat@^2.0.0, intl-messageformat@^2.1.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-2.2.0.tgz#345bcd46de630b7683330c2e52177ff5eab484fc" + integrity sha1-NFvNRt5jC3aDMwwuUhd/9eq0hPw= + dependencies: + intl-messageformat-parser "1.4.0" + +intl-relativeformat@^2.1.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/intl-relativeformat/-/intl-relativeformat-2.2.0.tgz#6aca95d019ec8d30b6c5653b6629f9983ea5b6c5" + integrity sha512-4bV/7kSKaPEmu6ArxXf9xjv1ny74Zkwuey8Pm01NH4zggPP7JHwg2STk8Y3JdspCKRDriwIyLRfEXnj2ZLr4Bw== + dependencies: + intl-messageformat "^2.0.0" + +intl@^1.2.5: + version "1.2.5" + resolved "https://registry.yarnpkg.com/intl/-/intl-1.2.5.tgz#82244a2190c4e419f8371f5aa34daa3420e2abde" + integrity sha1-giRKIZDE5Bn4Nx9ao02qNCDiq94= + into-stream@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/into-stream/-/into-stream-3.1.0.tgz#96fb0a936c12babd6ff1752a17d05616abd094c6" @@ -7098,7 +7145,7 @@ into-stream@^3.1.0: from2 "^2.1.1" p-is-promise "^1.1.0" -invariant@^2.0.0, invariant@^2.1.0, invariant@^2.2.0, invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4: +invariant@^2.0.0, invariant@^2.1.0, invariant@^2.1.1, invariant@^2.2.0, invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4: version "2.2.4" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA== @@ -11118,6 +11165,17 @@ react-input-autosize@^2.2.1: dependencies: prop-types "^15.5.8" +react-intl@^2.9.0: + version "2.9.0" + resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-2.9.0.tgz#c97c5d17d4718f1575fdbd5a769f96018a3b1843" + integrity sha512-27jnDlb/d2A7mSJwrbOBnUgD+rPep+abmoJE511Tf8BnoONIAUehy/U1zZCHGO17mnOwMWxqN4qC0nW11cD6rA== + dependencies: + hoist-non-react-statics "^3.3.0" + intl-format-cache "^2.0.5" + intl-messageformat "^2.1.0" + intl-relativeformat "^2.1.0" + invariant "^2.1.1" + react-is@16.8.5: version "16.8.5" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.5.tgz#c54ac229dd66b5afe0de5acbe47647c3da692ff8" @@ -11350,7 +11408,7 @@ react-waypoint@^8.1.0: prop-types "^15.0.0" react-is "^16.6.3" -react@^16.8.2, react@^16.8.4: +react@^16.8.2, react@^16.8.4, react@^16.8.6: version "16.8.6" resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe" integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==