i18n the homepage.

frontend/client/components/Home/Actions.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import copy from './copy';
+import { withNamespaces, WithNamespaces } from 'react-i18next';
 import './Actions.less';
 
-const HomeActions: React.SFC<{}> = () => (
+const HomeActions: React.SFC<WithNamespaces> = ({ t }) => (
   <div className="HomeActions">
-    <h2 className="HomeActions-title">{copy.actionsTitle}</h2>
+    <h2 className="HomeActions-title">{t('home.actions.title')}</h2>
     <div className="HomeActions-buttons">
       <Link className="HomeActions-buttons-button is-light" to="/proposals">
-        Browse proposals
+        {t('home.actions.proposals')}
       </Link>
       <Link className="HomeActions-buttons-button is-dark" to="/requests">
-        See all requests
+      {t('home.actions.requests')}
       </Link>
     </div>
   </div>
 );
 
-export default HomeActions;
+export default withNamespaces()(HomeActions);

frontend/client/components/Home/Guide.tsx

@@ -1,23 +1,23 @@
 import React from 'react';
-import copy from './copy';
+import { withNamespaces, WithNamespaces } from 'react-i18next';
 import SubmitIcon from 'static/images/guide-submit.svg';
 import ReviewIcon from 'static/images/guide-review.svg';
 import CommunityIcon from 'static/images/guide-community.svg';
 import CompleteIcon from 'static/images/guide-complete.svg';
 import './Guide.less';
 
-const HomeGuide: React.SFC<{}> = () => {
+const HomeGuide: React.SFC<WithNamespaces> = ({ t }) => {
   const items = [{
-    text: copy.guideOne,
+    text: t('home.guide.submit'),
     icon: <SubmitIcon />,
   }, {
-    text: copy.guideTwo,
+    text: t('home.guide.review'),
     icon: <ReviewIcon />,
   }, {
-    text: copy.guideThree,
+    text: t('home.guide.community'),
     icon: <CommunityIcon />,
   }, {
-    text: copy.guideFour,
+    text: t('home.guide.complete'),
     icon: <CompleteIcon />,
   }];
 
@@ -27,7 +27,7 @@ const HomeGuide: React.SFC<{}> = () => {
         <polygon points="100 0, 100 100, 0 100"/>
       </svg>
       <h2 className="HomeGuide-title">
-        {copy.guideTitle}
+        {t('home.guide.title')}
       </h2>
       <div className="HomeGuide-items">
         {items.map((item, idx) => (
@@ -41,4 +41,4 @@ const HomeGuide: React.SFC<{}> = () => {
   );
 };
 
-export default HomeGuide;
+export default withNamespaces()(HomeGuide);

frontend/client/components/Home/Intro.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import copy from './copy';
+import { withNamespaces, WithNamespaces } from 'react-i18next';
 import HomeIllustration from 'static/images/home-illustration.png';
 import './Intro.less';
 
-const HomeIntro: React.SFC<{}> = () => (
+const HomeIntro: React.SFC<WithNamespaces> = ({ t }) => (
   <div className="HomeIntro">
     <div className="HomeIntro-content">
-      <h1 className="HomeIntro-content-title">{copy.introTitle}</h1>
-      <p className="HomeIntro-content-subtitle">{copy.introSubtitle}</p>
+      <h1 className="HomeIntro-content-title">{t('home.intro.title')}</h1>
+      <p className="HomeIntro-content-subtitle">{t('home.intro.subtitle')}</p>
       <div className="HomeIntro-content-buttons">
         <Link className="HomeIntro-content-buttons-auth" to="/auth">
-          {copy.introSignUp}
+          {t('home.intro.signup')}
         </Link>
         <a className="HomeIntro-content-buttons-learn" href="#home-guide">
-          {copy.introLearnMore}
+          {t('home.intro.learn')}
         </a>
       </div>
     </div>
@@ -24,4 +24,4 @@ const HomeIntro: React.SFC<{}> = () => (
   </div>
 );
 
-export default HomeIntro;
+export default withNamespaces()(HomeIntro);

frontend/client/components/Home/Requests.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
+import { withNamespaces, WithNamespaces } from 'react-i18next';
 import Placeholder from 'components/Placeholder';
 import Loader from 'components/Loader';
 import RFPItem from 'components/RFPs/RFPItem';
-import copy from './copy';
-import { convert } from 'utils/markdown';
 import { fetchRfps } from 'modules/rfps/actions';
 import { AppState } from 'store/reducers';
 import './Requests.less';
@@ -20,7 +19,7 @@ interface DispatchProps {
   fetchRfps: typeof fetchRfps;
 }
 
-type Props = StateProps & DispatchProps;
+type Props = StateProps & DispatchProps & WithNamespaces;
 
 class HomeRequests extends React.Component<Props> {
   componentDidMount() {
@@ -28,7 +27,7 @@ class HomeRequests extends React.Component<Props> {
   }
 
   render() {
-    const { rfps, isFetchingRfps } = this.props;
+    const { t, rfps, isFetchingRfps } = this.props;
     const activeRfps = (rfps || []).filter(rfp => rfp.status === RFP_STATUS.LIVE).slice(0, 2);
 
     let content;
@@ -38,7 +37,9 @@ class HomeRequests extends React.Component<Props> {
           {activeRfps.map(rfp => (
             <RFPItem key={rfp.id} rfp={rfp} />
           ))}
-          <Link className="HomeRequests-content-more" to="/requests">See all requests →</Link>
+          <Link className="HomeRequests-content-more" to="/requests">
+            {t('home.requests.more')} →
+          </Link>
         </>
       );
     } else if (isFetchingRfps) {
@@ -46,8 +47,8 @@ class HomeRequests extends React.Component<Props> {
     } else {
       content = (
         <Placeholder
-          title="No open requests at this time"
-          subtitle="But don’t let that stop you! Proposals can be submitted at any time."
+          title={t('home.requests.emptyTitle')}
+          subtitle={t('home.requests.emptySubtitle')}
         />
       );
     }
@@ -56,11 +57,14 @@ class HomeRequests extends React.Component<Props> {
       <div className="HomeRequests">
         <div className="HomeRequests-divider" />
         <div className="HomeRequests-text">
-          <h2 className="HomeRequests-text-title">{copy.requestTitle}</h2>
-          <div
-            className="HomeRequests-text-description"
-            dangerouslySetInnerHTML={{ __html: convert(copy.requestDescription) }}
-          />
+          <h2 className="HomeRequests-text-title">
+            {t('home.requests.title')}
+          </h2>
+          <div className="HomeRequests-text-description">
+            {t('home.requests.description').split('\n').map((s: string, idx: number) =>
+              <p key={idx}>{s}</p>
+            )}
+          </div>
         </div>
         <div className="HomeRequests-content">
           {content}
@@ -70,10 +74,12 @@ class HomeRequests extends React.Component<Props> {
   }
 }
 
+
+
 export default connect<StateProps, DispatchProps, {}, AppState>(
   state => ({
     rfps: state.rfps.rfps,
     isFetchingRfps: state.rfps.isFetchingRfps,
   }),
   { fetchRfps },
-)(HomeRequests);
+)(withNamespaces()(HomeRequests));

frontend/client/components/Home/copy.ts

@@ -1,44 +0,0 @@
-export default {
-  // Intro
-  introTitle: `Grants and crowdfunding for the Zcash community`,
-  introSubtitle: `Get funding for, or contribute to improvements to the Zcash ecosystem`,
-  introSignUp: `Sign up now`,
-  introSeeProposals: 'Browse proposals',
-  introLearnMore: `or learn more below`,
-
-  // Requests from the ZF
-  requestTitle: `Open Requests from the ZF`,
-  requestDescription: `
-The Zcash Foundation will periodically open up requests for proposals that
-have financial incentives attached to them in the form of fixed bounties,
-or pledges of contribution matching.
-
-Proposals will be reviewed and chosen based on the ZF’s confidence in the
-team and their plan.
-
-To be eligible for funding from the Zcash Foundation, teams must provide
-identifying information for legal reasons.
-  `,
-
-  // How it works
-  guideTitle: `How it works`,
-  guideOne: `
-Individuals and teams submit proposals against requests from the Zcash
-Foundation, or of their own ideas
-  `,
-  guideTwo: `
-Their proposal is reviewed by the Zcash Foundation, and potentially
-rewarded a bounty or met with matching contributions
-  `,
-  guideThree: `
-The proposal is then opened up to the community to discuss, provide
-feedback, and help it reach its funding goal
-  `,
-  guideFour: `
-Once successfully funded, the proposal creator(s) post updates with their
-progress and are paid out as they reach project milestones
-  `,
-
-  // Bottom actions
-  actionsTitle: `Take a look at what's happening`,
-}

frontend/client/index.tsx

@@ -25,6 +25,8 @@ const i18nLanguage = window && (window as any).__PRELOADED_I18N__;
 i18n.changeLanguage(i18nLanguage.locale);
 i18n.addResourceBundle(i18nLanguage.locale, 'common', i18nLanguage.resources, true);
 
+console.log(i18n);
+
 const App = hot(module)(() => (
   <I18nextProvider i18n={i18n}>
     <Provider store={store}>

frontend/client/static/locales/en/common.json

@@ -2,9 +2,35 @@
   "home": {
     "title": "Home",
     "description": "ZF Grants organizes creators and community members to incentivize ecosystem improvements",
-    "heroTitle1": "Decentralized funding for",
-    "heroTitle2": "Blockchain ecosystem improvements",
-    "createButton": "Propose a Project",
-    "exploreButton": "Explore Projects"
+
+    "intro": {
+      "title": "Grants and crowdfunding for the Zcash community",
+      "subtitle": "Get funding for, or contribute to improvements to the Zcash ecosystem",
+      "signup": "Sign up now",
+      "browse": "Browse proposals",
+      "learn": "or learn more below"
+    },
+
+    "requests": {
+      "title": "Open Requests from the ZF",
+      "description": "The Zcash Foundation will periodically open up requests for proposals that have financial incentives attached to them in the form of fixed bounties, or pledges of contribution matching.\nProposals will be reviewed and chosen based on the ZF’s confidence in the team and their plan.\nTo be eligible for funding from the Zcash Foundation, teams must provide identifying information for legal reasons.",
+      "more": "See all requests",
+      "emptyTitle": "No open requests at this time",
+      "emptySubtitle": "But don’t let that stop you! Proposals can be submitted at any time."
+    },
+
+    "guide": {
+      "title": "How it works",
+      "submit": "Individuals and teams submit proposals against requests from the Zcash Foundation, or of their own ideas",
+      "review": "Their proposal is reviewed by the Zcash Foundation, and potentially rewarded a bounty or met with matching contributions",
+      "community": "The proposal is then opened up to the community to discuss, provide feedback, and help it reach its funding goal",
+      "complete": "Once successfully funded, the proposal creator(s) post updates with their progress and are paid out as they reach project milestones"
+    },
+
+    "actions": {
+      "title": "Take a look at what's happening",
+      "proposals": "Browse proposals",
+      "requests": "See all requests"
+    }
   }
 }