Merge branch 'release/0.9.0'

annabranco · May 5, 2021 · 99e203d · 99e203d · vercel · May 5, 2021
2 parents b553925 + 80b93a1
commit 99e203d
Show file tree

Hide file tree

Showing 64 changed files with 809 additions and 460 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nnk",
-  "version": "0.8.3",
+  "version": "0.9.0",
   "private": true,
   "description": "No Named Kitchen: Supporting People on the Move",
   "repository": "https://github.com/annabranco/nnk",

diff --git a/...s/nnk/src/assets/images/favicon-white.png → ...ges/nnk/src/assets/images/favicon-alt.png b/...s/nnk/src/assets/images/favicon-white.png → ...ges/nnk/src/assets/images/favicon-alt.png
diff --git a/packages/nnk/src/assets/images/favicon.png b/packages/nnk/src/assets/images/favicon.png
diff --git a/packages/nnk/src/assets/images/icons/black-book.png b/packages/nnk/src/assets/images/icons/black-book.png
diff --git a/packages/nnk/src/assets/images/icons/loading.gif b/packages/nnk/src/assets/images/icons/loading.gif
diff --git a/packages/nnk/src/assets/images/index.js b/packages/nnk/src/assets/images/index.js
@@ -9,7 +9,8 @@ export const Logo = require('./logos/logo.png');
 // Main
 export const HomeBG = require('./bgs/homeBg.jpg');
 export const Home = require('./bgs/home.jpg');
-export const Photo01 = require('./spots/base01.jpeg');
+export const JoinUs = require('./spots/volunteers.jpeg');
+export const Photo01 = require('./spots/our-projects.jpeg');
 export const Photo02 = require('./spots/base02.jpeg');
 export const Photo03 = require('./spots/base03.jpeg');
 
@@ -18,17 +19,15 @@ export const Photo05 = require('./spots/base05.jpg');
 export const Photo06 = require('./spots/base06.jpeg');
 export const Photo08 = require('./spots/base08.png');
 export const Photo09 = require('./spots/base09.jpeg');
-export const VolunteersInAction = require('./spots/volunteers.jpeg');
 export const CrossedFork = require('./icons/crossedFork.png');
 
 // Partners
 export const BorderViolence = require('./icons/border-violence.jpg');
-export const GoFundMe = require('./logos/gofundme.png');
-export const PayPal = require('./logos/paypal.png');
-export const Teaming = require('./logos/teaming.png');
+export const Triodos = require('./logos/triodos.jpg');
+export const PayPal = require('./logos/paypal-alt.png');
 
 // What
-export const HeroWhat = require('./spots/logistics.jpeg');
+export const HeroWhat = require('./spots/base01.jpeg');
 export const Program01 = require('./spots/program01.jpeg');
 export const Program02 = require('./spots/program02.jpeg');
 export const Program03 = require('./spots/program03.jpeg');
@@ -37,10 +36,25 @@ export const Program03 = require('./spots/program03.jpeg');
 export const Mapv1 = require('./maps/mapv1.jpg');
 
 // Why
-export const HeroWhy = require('./spots/base07.jpg');
+export const HeroWhy = require('./spots/trainTracks.jpg');
 export const Testimony01 = require('./spots/testimony01.png');
 export const Testimony02 = require('./spots/testimony02.jpg');
 export const Testimony03 = require('./spots/testimony03.png');
 
 // Other
 export const Loading = require('./icons/loading.gif');
+export const BlackBook = require('./icons/black-book.png');
+
+// JTTF
+export const VolunteersInAction = require('./spots/logistics.jpeg');
+
+// Campaigns
+const emergencyInNorthBosnia = require('./spots/donate-bosnia.jpg');
+const supportPeopleInSerbia = require('./spots/donate-serbia.jpg');
+const foodHealthInGreece = require('./spots/donate-patras.jpg');
+
+export const CAMPAIGN_PHOTOS = {
+  supportPeopleInSerbia,
+  emergencyInNorthBosnia,
+  foodHealthInGreece
+};
diff --git a/packages/nnk/src/assets/images/logos/gofundme.png b/packages/nnk/src/assets/images/logos/gofundme.png
diff --git a/packages/nnk/src/assets/images/logos/paypal-alt.png b/packages/nnk/src/assets/images/logos/paypal-alt.png
diff --git a/packages/nnk/src/assets/images/logos/paypal.png b/packages/nnk/src/assets/images/logos/paypal.png
diff --git a/packages/nnk/src/assets/images/logos/teaming.png b/packages/nnk/src/assets/images/logos/teaming.png
diff --git a/packages/nnk/src/assets/images/logos/triodos-alt.png b/packages/nnk/src/assets/images/logos/triodos-alt.png
diff --git a/packages/nnk/src/assets/images/logos/triodos.jpg b/packages/nnk/src/assets/images/logos/triodos.jpg
diff --git a/packages/nnk/src/assets/images/maps/mapv1.jpg b/packages/nnk/src/assets/images/maps/mapv1.jpg
diff --git a/packages/nnk/src/assets/images/spots/donate-bosnia.jpg b/packages/nnk/src/assets/images/spots/donate-bosnia.jpg
diff --git a/packages/nnk/src/assets/images/spots/donate-patras.jpg b/packages/nnk/src/assets/images/spots/donate-patras.jpg
diff --git a/packages/nnk/src/assets/images/spots/donate-serbia.jpg b/packages/nnk/src/assets/images/spots/donate-serbia.jpg
diff --git a/packages/nnk/src/assets/images/spots/our-projects.jpeg b/packages/nnk/src/assets/images/spots/our-projects.jpeg
diff --git a/packages/nnk/src/assets/images/spots/trainTracks.jpg b/packages/nnk/src/assets/images/spots/trainTracks.jpg
diff --git a/packages/nnk/src/components/controllers/App/index.js b/packages/nnk/src/components/controllers/App/index.js
@@ -37,12 +37,17 @@ const App = ({ state, actions }) => {
       <Head>
         <meta name="description" content={state.frontity.description} />
         <html lang="en" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+        />
         <link rel="icon" type="image/png" href={Favicon} sizes="16x16" />
         <link rel="icon" type="image/png" href={Favicon} sizes="32x32" />
         <link
           href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@400;500;700"
           rel="stylesheet"
         />
+        <script src="https://donorbox.org/widget.js" paypalExpress="true" />
         <script
           src="https://kit.fontawesome.com/7d8d592f81.js"
           crossOrigin="anonymous"

diff --git a/packages/nnk/src/components/controllers/Header/index.js b/packages/nnk/src/components/controllers/Header/index.js
@@ -6,23 +6,24 @@ import { MOBILE } from '../../../constants/devices';
 import Link from '../../core/Link';
 import MobileNav from '../MobileNav';
 import Nav from '../Nav';
-// import EnglishFlag from '../../../assets/images/icons/uk.png';
-// import SpanishFlag from '../../../assets/images/icons/es.png';
+import EnglishFlag from '../../../assets/images/icons/uk.png';
+import SpanishFlag from '../../../assets/images/icons/es.png';
 import { LIGHT, DARK } from '../../../constants/theme';
 import { LogoSmall } from '../../../assets/images';
 import { StatePropType, ActionsPropType } from '../../../types';
-import { HeaderContainer, Logo } from './styles';
+import { HeaderContainer, LanguageFlag, Logo } from './styles';
 
 const Header = ({ state, actions }) => {
-  const [activeLanguage, changeLanguage] = useState('es');
+  const [activeLanguage, changeActiveLanguage] = useState('en');
   const { colors } = state.theme;
-  // const { changeTheme } = actions.theme;
+  const { changeLanguage } = actions.theme;
   const MOBILE_VERSION = getMediaQuery() === MOBILE;
 
-  // const onClickFlag = () => {
-  //   changeLanguage(activeLanguage === 'en' ? 'es' : 'en');
-  //   changeTheme(activeLanguage === 'en' ? DARK : LIGHT);
-  // };
+  const onClickFlag = flag => {
+    changeActiveLanguage(flag);
+    changeLanguage(flag);
+    // changeTheme(activeLanguage === 'en' ? DARK : LIGHT);
+  };
 
   useEffect(() => {
     if (activeLanguage === 'es') {
@@ -38,10 +39,11 @@ const Header = ({ state, actions }) => {
         <Logo activeLanguage={activeLanguage} src={LogoSmall} />
       </Link>
       {MOBILE_VERSION ? <MobileNav /> : <Nav />}
-      {/* <LanguageFlag
-        src={activeLanguage === 'en' ? EnglishFlag : SpanishFlag}
-        onClick={onClickFlag}
-      /> */}
+      <LanguageFlag
+        src={activeLanguage === 'es' ? EnglishFlag : SpanishFlag}
+        id={activeLanguage === 'en' ? 'es' : 'en'}
+        onClick={() => onClickFlag(activeLanguage === 'en' ? 'es' : 'en')}
+      />
     </HeaderContainer>
   );
 };

diff --git a/packages/nnk/src/components/controllers/MainPage/index.js b/packages/nnk/src/components/controllers/MainPage/index.js
@@ -1,7 +1,7 @@
 import { connect } from 'frontity';
 import React, { useEffect, useState } from 'react'; // eslint-disable-line import/no-extraneous-dependencies
 import config from '../../../setup/config';
-import { getMediaQuery } from '../../../utils';
+import { getMediaQuery, toggleBodyScroll } from '../../../utils';
 import {
   HOMEPAGE_TEXTS,
   WHY_TEXTS,
@@ -26,6 +26,16 @@ const MainPage = ({ state }) => {
   let volunteerTexts = VOLUNTEER_TEXTS[language];
   let donationTexts = DONATION_TEXTS[language];
 
+  const onToggleSubscription = () => {
+    if (displayModal) {
+      toggleModal(false);
+      toggleBodyScroll();
+    } else {
+      toggleModal(true);
+      toggleBodyScroll('hide');
+    }
+  };
+
   useEffect(() => {
     homepageTexts = HOMEPAGE_TEXTS[language];
     whyTexts = WHY_TEXTS[language];
@@ -50,11 +60,11 @@ const MainPage = ({ state }) => {
       <PageSection size="large" colors={colors}>
         <VolunteerModule texts={volunteerTexts} colors={colors} />
       </PageSection>
-      <SubscriptionButton colors={colors} onClick={toggleModal}>
+      <SubscriptionButton colors={colors} onClick={onToggleSubscription}>
         {donationTexts.subscribeTo} {donationTexts.noNameNews}
       </SubscriptionButton>
       {displayModal && (
-        <AppModal closeAction={() => toggleModal(false)}>
+        <AppModal closeAction={onToggleSubscription}>
           <ExternalForm
             colors={colors}
             width={getMediaQuery() === MOBILE ? 340 : 640}

diff --git a/packages/nnk/src/components/controllers/MainPage/styles.js b/packages/nnk/src/components/controllers/MainPage/styles.js
@@ -15,7 +15,7 @@ MainContainer.displayName = 'MainContainer';
 export const SubscriptionButton = styled.button`
   margin: -30px auto 30px;
   height: 60px;
-  width: 450px;
+  width: 90vw;
   color: ${({ colors }) => colors && colors.secondary};
   background-color: ${({ colors }) => colors && colors.terciary};
   text-transform: uppercase;
@@ -27,5 +27,10 @@ export const SubscriptionButton = styled.button`
   &:hover {
     filter: brightness(1.3);
   }
+
+  @media all and (min-width: 768px) {
+    height: 60px;
+    width: 550px;
+  }
 `;
 SubscriptionButton.displayName = 'SubscriptionButton';
diff --git a/packages/nnk/src/components/controllers/News/index.js b/packages/nnk/src/components/controllers/News/index.js
@@ -16,8 +16,6 @@ const News = ({ state }) => {
     newsSection = NEWS_SECTIONS[language];
   }, [language]);
 
-  console.log('$$$ data', data);
-
   return (
     <NewsSection colors={colors}>
       <NewsWrapper colors={colors}>

diff --git a/packages/nnk/src/components/core/AppModal/index.js b/packages/nnk/src/components/core/AppModal/index.js
@@ -1,16 +1,16 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
-import { node, func } from 'prop-types';
+import { node, func, bool } from 'prop-types';
 import { connect } from 'frontity';
 import { ACTIONS_TEXTS } from '../../../db';
 import { CloseButton, ModalOverlay } from './styles';
 import { StatePropType } from '../../../types';
 
-const AppModal = ({ children, closeAction, state }) => {
+const AppModal = ({ children, closeButton, closeAction, state }) => {
   const { colors, language } = state.theme;
   return (
-    <ModalOverlay>
-      {closeAction && (
+    <ModalOverlay onClick={closeButton ? () => null : () => closeAction()}>
+      {closeAction && closeButton && (
         <CloseButton
           colors={colors}
           text={ACTIONS_TEXTS[language].close}
@@ -25,12 +25,14 @@ const AppModal = ({ children, closeAction, state }) => {
 AppModal.propTypes = {
   children: node,
   closeAction: func,
+  closeButton: bool,
   state: StatePropType.isRequired
 };
 
 AppModal.defaultProps = {
   children: undefined,
-  closeAction: null
+  closeAction: null,
+  closeButton: false
 };
 
 export default connect(AppModal);
diff --git a/packages/nnk/src/components/core/Link/index.js b/packages/nnk/src/components/core/Link/index.js
@@ -10,8 +10,11 @@ const Link = ({
   link,
   className,
   children,
-  'aria-current': ariaCurrent
+  'aria-current': ariaCurrent,
+  target
 }) => {
+  const { colors } = state.theme;
+
   const onClick = event => {
     // Do nothing if it's an external link
     if (link.startsWith('https')) {
@@ -33,10 +36,12 @@ const Link = ({
 
   return (
     <StyledLink
+      colors={colors}
       href={link}
       onClick={onClick}
       className={className}
       aria-current={ariaCurrent}
+      target={target}
     >
       {children}
     </StyledLink>
@@ -49,13 +54,15 @@ Link.propTypes = {
   link: string,
   className: string,
   children: node.isRequired,
-  'aria-current': string
+  'aria-current': string,
+  target: string
 };
 
 Link.defaultProps = {
   className: null,
   link: null,
-  'aria-current': null
+  'aria-current': null,
+  target: null
 };
 
 export default connect(Link);
diff --git a/packages/nnk/src/components/core/Link/styles.js b/packages/nnk/src/components/core/Link/styles.js
@@ -2,5 +2,9 @@ import { styled } from 'frontity';
 
 export const StyledLink = styled.a`
   text-decoration: none;
+
+  &:hover: {
+    color: ${({ colors }) => colors && colors.terciary};
+  }
 `;
 StyledLink.displayName = 'StyledLink';
diff --git a/packages/nnk/src/components/core/List/list-item.js b/packages/nnk/src/components/core/List/list-item.js
@@ -16,19 +16,26 @@ import { ArticleWrapper, Excerpt, PublishDate, Title, InfoBox } from './styles';
  */
 const Item = ({ state, item }) => {
   // const author = state.source.author[item.author];
-  const { colors } = state.theme;
+  const { colors, language } = state.theme;
   const date = new Date(item.date);
   const isReport = item.slug.includes('report');
   const clearOriginalLink = excerpt => {
     return excerpt.split('<p class="link-more">')[0];
   };
 
+  const getTitle = () => {
+    const metaTitle = `_${language}_post_title`;
+    return item.meta[metaTitle] ?? item.title.rendered;
+  };
+
   return (
     <ArticleWrapper colors={colors} isReport={isReport}>
       <Link link={item.link}>
         <Title
           colors={colors}
-          dangerouslySetInnerHTML={{ __html: item.title.rendered }}
+          dangerouslySetInnerHTML={{
+            __html: getTitle()
+          }}
           isReport={isReport}
         />
       </Link>

diff --git a/packages/nnk/src/components/core/List/list.js b/packages/nnk/src/components/core/List/list.js
@@ -9,7 +9,6 @@ import { Container, Header } from './styles';
 const List = ({ state }) => {
   const { colors } = state.theme;
   const data = state.source.get(state.router.link);
-
   return (
     <Container>
       {/* If the list is a taxonomy, we render a title. */}

diff --git a/packages/nnk/src/components/core/Post/index.js b/packages/nnk/src/components/core/Post/index.js
@@ -32,23 +32,28 @@ const Post = ({ actions, libraries, state }) => {
   let texts = ACTIONS_TEXTS[language];
   let newsSection = NEWS_SECTIONS[language];
 
+  const onRead = () => {
+    toggleRead(true);
+  };
+
+  const getTitle = () => {
+    const metaTitle = `_${language}_post_title`;
+    return post.meta[metaTitle] || post.title.rendered;
+  };
+  const getNewsText = () => {
+    const metaContent = `_${language}_post_content`;
+    return post.meta[metaContent] || post.excerpt.rendered;
+  };
+
   useEffect(() => {
     newsSection = NEWS_SECTIONS[language];
     texts = ACTIONS_TEXTS[language];
   }, [language]);
-
-  console.log('$$$ data', data);
-  console.log('$$$ post: ', post);
-
   /**
    * Once the post has loaded in the DOM, prefetch both the
    * home posts and the list component so if the user visits
    * the home page, everything is ready and it loads instantly.
    */
-  const onRead = () => {
-    toggleRead(true);
-  };
-
   useEffect(() => {
     const onReadAll = () => {
       if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
@@ -89,7 +94,7 @@ const Post = ({ actions, libraries, state }) => {
         <div>
           <Title
             colors={colors}
-            dangerouslySetInnerHTML={{ __html: post.title.rendered }}
+            dangerouslySetInnerHTML={{ __html: getTitle() }}
             isReport={isReport}
           />
 
@@ -121,7 +126,7 @@ const Post = ({ actions, libraries, state }) => {
         {/* Render the content using the Html2React component so the HTML is processed
        by the processors we included in the libraries.html2react.processors array. */}
         <Content colors={colors} isReport={isReport}>
-          <Html2React html={post.content.rendered} />
+          <Html2React html={getNewsText()} />
         </Content>
       </Container>
     </PostWrapper>