Generic template with i18next

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="/privacy">Privacy<span className="hidden-xs"> Policy</span></Link></li>
+        <li><Link to="/terms"> {t('Términos')}<span className="hidden-xs"> {t('de Servicio')}</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
-      src="https://s3-us-west-2.amazonaws.com/cleverbeagle-assets/graphics/email-icon.png"
-      alt="Clever Beagle"
-    />
-    <h1>Pup</h1>
+    <h1>{props.t('AppName')}</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;