Generic template with i18next

designs/web-tcef.svg

@@ -27,8 +27,8 @@
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
      inkscape:zoom="0.69575618"
-     inkscape:cx="793.70078"
+     inkscape:cx="900.10663"
-     inkscape:cy="618.75125"
+     inkscape:cy="596.82354"
      inkscape:document-units="mm"
      inkscape:current-layer="layer1"
      showgrid="false"
@@ -64,33 +64,36 @@
        width="442.13651"
        style="stroke-width:165.45117188" />
     <rect
-       style="opacity:0.75820001;fill:#ac9393;fill-opacity:0.95473256;stroke:none;stroke-width:26.45833206;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       style="opacity:0.18059999;fill:#ac9393;fill-opacity:0.95473256;stroke:none;stroke-width:26.45833206;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
        id="rect6086"
        width="390.98022"
        height="252.89684"
        x="11.057551"
-       y="14.26377" />
+       y="14.26377"
+       rx="5" />
     <rect
        style="opacity:0.29160007;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:26.45833206;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
        id="rect4573"
        width="165.10446"
        height="165.10446"
-       x="29.196411"
+       x="27.583012"
-       y="79.843651" />
+       y="83.608246"
+       rx="5"
+       ry="5" />
     <text
        xml:space="preserve"
        style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:23.18472672px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:Normal;letter-spacing:0px;word-spacing:0px;fill:#550000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
        x="206.0237"
-       y="55.688263"
+       y="62.567436"
        id="text6092"><tspan
          sodipodi:role="line"
          x="206.0237"
-         y="55.688263"
+         y="62.567436"
          style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:30.03565788px;font-family:Roboto;-inkscape-font-specification:'Roboto, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#550000;stroke-width:0.26458332"
          id="tspan6094">TODOS CONTRA EL FUEGO</tspan></text>
     <g
        id="g4691"
-       transform="translate(-3.1138107)">
+       transform="translate(-4.7272093,3.7645966)">
       <text
          id="text6339"
          y="191.32181"
@@ -168,67 +171,48 @@
        id="rect4573-9"
        width="165.10446"
        height="165.10446"
-       x="221.68365"
+       x="220.07025"
-       y="80.650345" />
+       y="84.41494"
+       rx="5"
+       ry="5" />
     <text
        xml:space="preserve"
        style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:83.00547791px;line-height:1.25;font-family:FontAwesome;-inkscape-font-specification:FontAwesome;letter-spacing:0px;word-spacing:0px;fill:#280b0b;fill-opacity:1;stroke:none;stroke-width:0.26458335"
-       x="268.66077"
+       x="267.04736"
-       y="172.39661"
+       y="176.16121"
        id="text6347"><tspan
          sodipodi:role="line"
          id="tspan6345"
-         x="268.66077"
+         x="267.04736"
-         y="172.39661"
+         y="176.16121"
          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:FontAwesome;-inkscape-font-specification:FontAwesome;fill:#280b0b;fill-opacity:1;stroke-width:0.26458335"></tspan></text>
     <text
        xml:space="preserve"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12.69999981px;line-height:1;font-family:sans-serif;-inkscape-font-specification:Normal;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12.69999981px;line-height:1.29999995;font-family:sans-serif;-inkscape-font-specification:Normal;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
-       x="111.32697"
+       x="109.71358"
-       y="216.8549"
+       y="220.61951"
        id="text6092-1"><tspan
          sodipodi:role="line"
-         x="112.91447"
+         x="111.30108"
-         y="216.8549"
+         y="220.61951"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12.69999981px;line-height:1;font-family:Roboto;-inkscape-font-specification:'Roboto, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#501616;stroke-width:0.26458332"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12.69999981px;line-height:1.29999995;font-family:Roboto;-inkscape-font-specification:'Roboto, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#501616;stroke-width:0.26458332"
-         id="tspan4531">ESCOGE UN ÁREA </tspan><tspan
+         id="tspan4535">ESCOGE UN ÁREA </tspan><tspan
          sodipodi:role="line"
-         x="111.32697"
+         x="109.71358"
-         y="229.99629"
+         y="237.57089"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12.69999981px;line-height:1;font-family:Roboto;-inkscape-font-specification:'Roboto, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#501616;stroke-width:0.26458332"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12.69999981px;line-height:1.29999995;font-family:Roboto;-inkscape-font-specification:'Roboto, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#501616;stroke-width:0.26458332"
-         id="tspan4535">DE TÚ INTERÉS</tspan></text>
+         id="tspan4803">DE TÚ INTERÉS</tspan></text>
     <text
        xml:space="preserve"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16.93333244px;line-height:1;font-family:sans-serif;-inkscape-font-specification:Normal;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:47.82115555px;line-height:1.25;font-family:FontAwesome;-inkscape-font-specification:FontAwesome;letter-spacing:0px;word-spacing:0px;fill:#552200;fill-opacity:1;stroke:none;stroke-width:0.26458338"
-       x="304.28241"
+       x="187.7402"
-       y="217.38934"
+       y="176.10248"
-       id="text6092-1-2"><tspan
-         sodipodi:role="line"
-         x="304.28241"
-         y="217.38934"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12.69999981px;line-height:1;font-family:Roboto;-inkscape-font-specification:'Roboto, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#501616;stroke-width:0.26458332"
-         id="tspan4562">TE AVISAREMOS DE</tspan><tspan
-         sodipodi:role="line"
-         x="304.28241"
-         y="234.32268"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12.69999981px;line-height:1;font-family:Roboto;-inkscape-font-specification:'Roboto, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#501616;stroke-width:0.26458332"
-         id="tspan4569">FUEGOS ACTIVOS</tspan><tspan
-         sodipodi:role="line"
-         x="304.28241"
-         y="251.25601"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12.69999981px;line-height:1;font-family:Roboto;-inkscape-font-specification:'Roboto, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#501616;stroke-width:0.26458332"
-         id="tspan4571" /></text>
-    <text
-       xml:space="preserve"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:47.82115555px;line-height:1.25;font-family:FontAwesome;-inkscape-font-specification:FontAwesome;letter-spacing:0px;word-spacing:0px;fill:#552200;fill-opacity:1;stroke:none;stroke-width:0.26458338;"
-       x="189.35361"
-       y="172.33788"
        id="text6347-8"><tspan
          sodipodi:role="line"
          id="tspan6345-9"
-         x="189.35361"
+         x="187.7402"
-         y="172.33788"
+         y="176.10248"
-         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:FontAwesome;-inkscape-font-specification:FontAwesome;fill:#552200;fill-opacity:1;stroke-width:0.26458338;"></tspan></text>
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:FontAwesome;-inkscape-font-specification:FontAwesome;fill:#552200;fill-opacity:1;stroke-width:0.26458338"></tspan></text>
     <text
        xml:space="preserve"
        style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:74.13223267px;line-height:1.25;font-family:FontAwesome;-inkscape-font-specification:FontAwesome;letter-spacing:0px;word-spacing:0px;fill:#280b0b;fill-opacity:1;stroke:none;stroke-width:0.26458338"
@@ -240,5 +224,50 @@
          x="200.96007"
          y="480.14008"
          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:FontAwesome;-inkscape-font-specification:FontAwesome;fill:#280b0b;fill-opacity:1;stroke-width:0.26458338"></tspan></text>
+    <rect
+       style="opacity:0.29160007;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:26.45833397;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4573-9-9"
+       width="268.92136"
+       height="45.315727"
+       x="159.30693"
+       y="-27.791666" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.3499999px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:Normal;text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#550000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+       x="413.64679"
+       y="13.487597"
+       id="text6092-0"><tspan
+         sodipodi:role="line"
+         x="413.64679"
+         y="13.487597"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.3499999px;font-family:Roboto;-inkscape-font-specification:'Roboto, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:end;writing-mode:lr-tb;text-anchor:end;fill:#550000;stroke-width:0.26458332"
+         id="tspan6094-5">INICIO   MAPA ACTUAL   CONTACTO   HISTORIA    ESPAÑOL   MÁS</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.3499999px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:Normal;text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#ac9393;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+       x="384.42468"
+       y="262.5817"
+       id="text6092-0-2"><tspan
+         sodipodi:role="line"
+         x="384.42468"
+         y="262.5817"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.3499999px;font-family:Roboto;-inkscape-font-specification:'Roboto, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:end;writing-mode:lr-tb;text-anchor:end;fill:#ac9393;stroke-width:0.26458332"
+         id="tspan6094-5-0">© COPYLEFT BLA BLA BLA</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12.69999981px;line-height:1.29999995;font-family:sans-serif;-inkscape-font-specification:Normal;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+       x="306.66183"
+       y="219.36673"
+       id="text6092-1-0"><tspan
+         sodipodi:role="line"
+         x="306.66183"
+         y="219.36673"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12.69999981px;line-height:1.29999995;font-family:Roboto;-inkscape-font-specification:'Roboto, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#501616;stroke-width:0.26458332"
+         id="tspan4803-3">TE AVISAREMOS DE</tspan><tspan
+         sodipodi:role="line"
+         x="306.66183"
+         y="236.31812"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12.69999981px;line-height:1.29999995;font-family:Roboto;-inkscape-font-specification:'Roboto, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#501616;stroke-width:0.26458332"
+         id="tspan4828">FUEGOS ACTIVOS</tspan></text>
   </g>
 </svg>

imports/api/Users/server/send-welcome-email.js

@@ -4,13 +4,13 @@ import getOAuthProfile from '../../../modules/get-oauth-profile';
 export default (options, user) => {
   const OAuthProfile = getOAuthProfile(options, user);
 
-  const applicationName = 'Application Name';
+  const applicationName = '¡Tod@s contra el Fuego!';
   const firstName = OAuthProfile ? OAuthProfile.name.first : options.profile.name.first;
   const emailAddress = OAuthProfile ? OAuthProfile.email : options.email;
 
   return sendEmail({
     to: emailAddress,
-    from: `${applicationName} <support@application.com>`,
+    from: `${applicationName} <noreply@comunes.org>`,
     subject: `[${applicationName}] Welcome, ${firstName}!`,
     template: 'welcome',
     templateVars: {

imports/startup/client/i18n.js

@@ -0,0 +1,85 @@
+import i18n from 'i18next';
+import backend from 'i18next-xhr-backend';
+import LngDetector from 'i18next-browser-languagedetector';
+import Cache from 'i18next-localstorage-cache';
+
+// Adapted from: https://github.com/appigram/ryfma-boilerplate/blob/44c1eabfb9928b5623afab36a23997969e5beb02/imports/startup/client/i18n.js
+
+const detectorOptions = {
+  // order and from where user language should be detected
+  order: ['querystring', 'cookie', 'localStorage', 'navigator', 'htmlTag'],
+
+  // keys or params to lookup language from
+  lookupQuerystring: 'lng',
+  lookupCookie: 'i18next',
+  lookupLocalStorage: 'i18nextLng',
+
+  // cache user language on
+  caches: ['localStorage', 'cookie'],
+  excludeCacheFor: ['cimode'], // languages to not persist (cookie, localStorage)
+};
+
+const cacheOptions = {
+  // turn on or off
+  enabled: false,
+  // prefix for stored languages
+  prefix: 'i18next_res_',
+  // expiration
+  expirationTime: 7 * 24 * 60 * 60 * 1000,
+  // language versions
+  versions: {},
+};
+
+var backOpts = {
+  // path where resources get loaded from
+  loadPath: '/locales/{{lng}}/{{ns}}.json',
+
+  // path to post missing resources
+  addPath: '/locales/{{lng}}/{{ns}}.missing.json',
+
+  // jsonIndent to use when storing json files
+  jsonIndent: 2
+};
+
+i18n.use(backend)
+  .use(LngDetector)
+  .use(Cache)
+  .init({
+    backend: backOpts,
+    lng: 'es',
+    //fallbackLng: 'es',
+    fallbackLng: {
+      'en-US': ['en'],
+      'en-GB': ['en'],
+      'pt-BR': ['pt'],
+      'default': ['es']
+    },
+    interpolation: {
+      escapeValue: false, // not needed for react!!
+    },
+    whitelist: false,
+    // whitelist: ['es', 'en'], // allowed languages
+    load: 'all', // es-ES -> es, en-US -> en
+    debug: true,
+    ns: 'common',
+    defaultNS: 'common',
+    saveMissing: true, // if true seems it's fails to getResourceBundle
+    saveMissingTo: 'es',
+    keySeparator: 'ß',
+    nsSeparator: 'ð',
+    pluralSeparator: 'đ',
+    cache: cacheOptions,
+    detection: detectorOptions,
+    react: {
+      wait: true,
+      // https://react.i18next.com/components/i18next-instance.ht
+      /* bindI18n: 'languageChanged loaded',
+      bindStore: 'added removed',
+      nsMode: 'default' */
+    }
+  }, function(err, t) {
+    // initialized and ready to
+    console.log(t('AppName'));
+  });
+
+export default i18n;

imports/startup/server/accounts/email-templates.js

@@ -4,8 +4,8 @@ import getPrivateFile from '../../../modules/server/get-private-file';
 import templateToHTML from '../../../modules/server/handlebars-email-to-html';
 import templateToText from '../../../modules/server/handlebars-email-to-text';
 
-const name = 'Application Name';
+const name = '¡Tod@s contra el Fuego!';
-const email = '<support@application.com>';
+const email = '<noreply@comunes.org>';
 const from = `${name} ${email}`;
 const emailTemplates = Accounts.emailTemplates;
 

imports/ui/components/Footer/Footer.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { year } from '@cleverbeagle/dates';
 import { Link } from 'react-router-dom';
 import { Grid } from 'react-bootstrap';
+import { translate } from 'react-i18next';
 
 import './Footer.scss';
 
@@ -10,18 +11,21 @@ const copyrightYear = () => {
   return currentYear === '2017' ? '2017' : `2017-${currentYear}`;
 };
 
-const Footer = () => (
+const Footer = (props) => {
+  const { t } = props;
+  return (
   <div className="Footer">
     <Grid>
-      <p className="pull-left">&copy; {copyrightYear()} Application Name</p>
+      <p className="pull-left">&copy; Copyleft {copyrightYear()} {t('OrgNameFull')}</p>
       <ul className="pull-right">
-        <li><Link to="/terms">Terms<span className="hidden-xs"> of Service</span></Link></li>
+        <li><Link to="/terms"> {t('Términos')}<span className="hidden-xs"> {t('de Servicio')}</span></Link></li>
-        <li><Link to="/privacy">Privacy<span className="hidden-xs"> Policy</span></Link></li>
+        <li><Link to="/privacidad">{t('Política')}<span className="hidden-xs"> {t('de Privacidad')}</span></Link></li>
       </ul>
     </Grid>
   </div>
-);
+  );
+};
 
 Footer.propTypes = {};
 
-export default Footer;
+export default translate([], { wait: true })(Footer);

imports/ui/components/Navigation/Navigation.js

@@ -4,6 +4,7 @@ import { Navbar } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import PublicNavigation from '../PublicNavigation/PublicNavigation';
 import AuthenticatedNavigation from '../AuthenticatedNavigation/AuthenticatedNavigation';
+import { translate } from 'react-i18next';
 
 import './Navigation.scss';
 
@@ -11,7 +12,7 @@ const Navigation = props => (
   <Navbar>
     <Navbar.Header>
       <Navbar.Brand>
-        <Link to="/">Pup</Link>
+        <Link to="/">{props.t('AppName')}</Link>
       </Navbar.Brand>
       <Navbar.Toggle />
     </Navbar.Header>
@@ -29,4 +30,6 @@ Navigation.propTypes = {
   authenticated: PropTypes.bool.isRequired,
 };
 
-export default Navigation;
+//  export default Navigation;
+
+export default translate([], { wait: true })(Navigation);

imports/ui/layouts/App/App.js

@@ -28,6 +28,11 @@ import Footer from '../../components/Footer/Footer';
 import Terms from '../../pages/Terms/Terms';
 import Privacy from '../../pages/Privacy/Privacy';
 import ExamplePage from '../../pages/ExamplePage/ExamplePage';
+// i18n
+import { I18nextProvider } from 'react-i18next';
+import i18n from '/imports/startup/client/i18n';
+//https://react.i18next.com/components/i18nextprovider.html
+
 
 import './App.scss';
 
@@ -41,7 +46,10 @@ const handleResendVerificationEmail = (emailAddress) => {
   });
 };
 
+
+
 const App = props => (
+  <I18nextProvider i18n={i18n}>
   <Router>
     {!props.loading ? <div className="App">
       {props.userId && !props.emailVerified ? <Alert className="verify-email text-center"><p>Hey friend! Can you <strong>verify your email address</strong> ({props.emailAddress}) for us? <Button bsStyle="link" onClick={() => handleResendVerificationEmail(props.emailAddress)} href="#">Re-send verification email</Button></p></Alert> : ''}
@@ -61,7 +69,7 @@ const App = props => (
           <Route name="recover-password" path="/recover-password" component={RecoverPassword} />
           <Route name="reset-password" path="/reset-password/:token" component={ResetPassword} />
           <Route name="terms" path="/terms" component={Terms} />
-          <Route name="privacy" path="/privacy" component={Privacy} />
+          <Route name="privacy" path="/privacidad" component={Privacy} />
           <Route name="examplePage" path="/example-page" component={ExamplePage} />
           <Route component={NotFound} />
         </Switch>
@@ -69,6 +77,7 @@ const App = props => (
       <Footer />
     </div> : ''}
   </Router>
+  </I18nextProvider>
 );
 
 App.defaultProps = {

imports/ui/layouts/App/App.scss

@@ -21,3 +21,11 @@
     padding: 0;
   }
 }
+
+body {
+  background: url(/home-fire.jpg) no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}

imports/ui/pages/Index/Index.js

@@ -1,15 +1,14 @@
 import React from 'react';
 import { Button } from 'react-bootstrap';
+import { translate } from 'react-i18next';
 
 import './Index.scss';
 
-const Index = () => (
+const Index = (props) => {
+  const { t } = props;
+  return (
   <div className="Index">
-    <img
+    <h1>{props.t('AppName')}</h1>
-      src="https://s3-us-west-2.amazonaws.com/cleverbeagle-assets/graphics/email-icon.png"
-      alt="Clever Beagle"
-    />
-    <h1>Pup</h1>
     <p>A boilerplate for products.</p>
     <div>
       <Button href="http://cleverbeagle.com/pup">Read the Docs</Button>
@@ -19,6 +18,7 @@ const Index = () => (
       <p>Need help and want to stay accountable building your product? <a href="http://cleverbeagle.com?utm_source=pupappindex&utm_campaign=oss">Check out Clever Beagle</a>.</p>
     </footer>
   </div>
-);
+  );
+};
 
-export default Index;
+export default translate([], { wait: true })(Index);

imports/ui/pages/Index/Index.scss

@@ -3,10 +3,12 @@
 
 .Index {
   padding: 20px;
-  background: $cb-blue;
+  background: lighten($todos-back1, 75%);
   text-align: center;
   border-radius: 3px;
-  color: #fff;
+  color: $todos-font1;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
 
   img {
     width: 100px;
@@ -14,7 +16,9 @@
   }
 
   h1 {
-    font-size: 28px;
+    font-size: 86px;
+    text-transform: uppercase;
+    font-family: 'Roboto';
   }
 
   p {

imports/ui/stylesheets/app.scss

@@ -1,3 +1,4 @@
 @import './colors';
 @import './forms';
 @import './bootstrap-overrides';
+@import 'web-fonts';

imports/ui/stylesheets/colors.scss

@@ -18,3 +18,8 @@ $cb-blue: #4285F4;
 $cb-green: #00D490;
 $cb-yellow: #FFCF50;
 $cb-red: #DA5847;
+
+$todos-back1: #AC9393;
+$todos-back2: #FFFFFF;
+$todos-font1: #280B0B;
+$todos-font2: #501616;

package.json

@@ -14,16 +14,22 @@
     "core-js": "^2.5.1",
     "fs": "0.0.1-security",
     "handlebars": "^4.0.10",
+    "i18next": "^10.0.7",
+    "i18next-browser-languagedetector": "^2.1.0",
+    "i18next-localstorage-cache": "^1.1.1",
+    "i18next-xhr-backend": "^1.5.0",
     "jquery": "^2.2.4",
     "jquery-validation": "^1.17.0",
     "juice": "^4.1.1",
     "lodash": "^4.17.4",
     "meteor-node-stubs": "^0.2.11",
+    "moment": "^2.19.2",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-addons-pure-render-mixin": "^15.6.0",
     "react-bootstrap": "^0.31.2",
     "react-dom": "^15.6.1",
+    "react-i18next": "^6.1.0",
     "react-router-bootstrap": "^0.24.3",
     "react-router-dom": "^4.2.2",
     "simpl-schema": "^0.3.2"

public/locales/es/common.json

@@ -0,0 +1,11 @@
+{
+  "AppName": "Tod@s contra el Fuego",
+  "AppNameFull": "¡Tod@s contra el Fuego!",
+  "OrgName": "Comunes",
+  "OrgNameFull": "Asociación Comunes",
+  "Privacidad": "Privacidad",
+  "Términos": "Términos",
+  "de Servicio": "de Servicio",
+  "Política": "Política",
+  "de Privacidad": "de Privacidad"
+}