diff --git a/frontity.settings.js b/frontity.settings.js index 882c6bd..77c7a97 100644 --- a/frontity.settings.js +++ b/frontity.settings.js @@ -14,7 +14,7 @@ const settings = { theme: { menu: [], featured: { - showOnList: false, + showOnList: true, showOnPost: false } } @@ -24,8 +24,7 @@ const settings = { name: '@frontity/wp-source', state: { source: { - api: - 'https://public-api.wordpress.com/wp/v2/sites/threebunniesfc.wordpress.com' + api: 'https://www.borderviolence.eu/wp-json/' } } }, diff --git a/package-lock.json b/package-lock.json index 107aa1b..b80a56c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "nnk", - "version": "1.0.0", + "version": "0.3.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index f7ddca6..f88aa9c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nnk", - "version": "0.2.0", + "version": "0.3.0", "private": true, "description": "No Named Kitchen: Supporting People on the Move", "repository": "https://github.com/annabranco/nnk", @@ -22,6 +22,7 @@ "@frontity/nnk": "./packages/nnk", "@frontity/tiny-router": "^1.2.2", "@frontity/wp-source": "^1.9.1", + "axios": "^0.21.0", "frontity": "^1.12.0", "prop-types": "^15.7.2" }, diff --git a/packages/nnk/src/assets/images/index.js b/packages/nnk/src/assets/images/index.js index 9050ac7..61c7ede 100644 --- a/packages/nnk/src/assets/images/index.js +++ b/packages/nnk/src/assets/images/index.js @@ -11,10 +11,15 @@ export const HomeBG = require('./bgs/homeBg.jpg'); export const Photo01 = require('./spots/base01.jpeg'); export const Photo02 = require('./spots/base02.jpeg'); export const Photo03 = require('./spots/base03.jpeg'); +export const Photo04 = require('./spots/base04.jpg'); +export const Photo05 = require('./spots/base05.jpg'); +export const Photo06 = require('./spots/base06.jpeg'); +export const Photo07 = require('./spots/base07.png'); +export const Photo08 = require('./spots/base07.png'); + export const VolunteersInAction = require('./spots/volunteers.jpeg'); // What -export const WhatBG = require('./bgs/what.jpeg'); export const Program01 = require('./spots/program01.jpeg'); export const Program02 = require('./spots/program02.jpeg'); export const Program03 = require('./spots/program03.png'); diff --git a/packages/nnk/src/assets/images/spots/base04.jpg b/packages/nnk/src/assets/images/spots/base04.jpg new file mode 100644 index 0000000..91ff3cc Binary files /dev/null and b/packages/nnk/src/assets/images/spots/base04.jpg differ diff --git a/packages/nnk/src/assets/images/spots/base05.jpg b/packages/nnk/src/assets/images/spots/base05.jpg new file mode 100644 index 0000000..97754b2 Binary files /dev/null and b/packages/nnk/src/assets/images/spots/base05.jpg differ diff --git a/packages/nnk/src/assets/images/bgs/what.jpeg b/packages/nnk/src/assets/images/spots/base06.jpeg similarity index 100% rename from packages/nnk/src/assets/images/bgs/what.jpeg rename to packages/nnk/src/assets/images/spots/base06.jpeg diff --git a/packages/nnk/src/assets/images/spots/base07.png b/packages/nnk/src/assets/images/spots/base07.png new file mode 100644 index 0000000..de8cfdd Binary files /dev/null and b/packages/nnk/src/assets/images/spots/base07.png differ diff --git a/packages/nnk/src/assets/images/spots/base08.png b/packages/nnk/src/assets/images/spots/base08.png new file mode 100644 index 0000000..20a047e Binary files /dev/null and b/packages/nnk/src/assets/images/spots/base08.png differ diff --git a/packages/nnk/src/components/controllers/App/index.js b/packages/nnk/src/components/controllers/App/index.js index cf15570..ac0b490 100644 --- a/packages/nnk/src/components/controllers/App/index.js +++ b/packages/nnk/src/components/controllers/App/index.js @@ -11,9 +11,11 @@ import Post from '../../core/Post'; import Title from '../../core/HtmlTitle'; import WhatSection from '../../views/What'; import WhereSection from '../../views/Where'; +import WhySection from '../../views/Why'; import { globalStyles } from '../../../setup/globalStyles'; import { MainArea } from './styles'; import { StatePropType } from '../../../types'; +import { fontText, fontTitle } from '../../../setup/themes'; /** * Theme is the root React component of our theme. The one we will export @@ -21,9 +23,8 @@ import { StatePropType } from '../../../types'; */ const App = ({ state }) => { const { colors } = state.theme; - - // Get information about the current URL. const data = state.source.get(state.router.link); + return ( <> {/* Add some metatags to the of the HTML. */} @@ -44,7 +45,15 @@ const App = ({ state }) => { {/* Add some global styles for the whole site, like body or a's. Not classes here because we use CSS-in-JS. Only global HTML tags. */} - + {/* Add the header of the site. */}
@@ -58,6 +67,7 @@ const App = ({ state }) => { + diff --git a/packages/nnk/src/components/controllers/Header/styles.js b/packages/nnk/src/components/controllers/Header/styles.js index 4966955..ba33ed8 100644 --- a/packages/nnk/src/components/controllers/Header/styles.js +++ b/packages/nnk/src/components/controllers/Header/styles.js @@ -15,7 +15,6 @@ export const HeaderContainer = styled.header` activeLanguage === 'en' && css` height: 110px; - margin-bottom: 10px; border-bottom: 4px solid ${colors.terciary}; `} diff --git a/packages/nnk/src/components/core/FeaturedMedia/index.js b/packages/nnk/src/components/core/FeaturedMedia/index.js index 2d221e5..d1c808f 100644 --- a/packages/nnk/src/components/core/FeaturedMedia/index.js +++ b/packages/nnk/src/components/core/FeaturedMedia/index.js @@ -7,7 +7,6 @@ import { StatePropType } from '../../../types'; const FeaturedMedia = ({ state, id }) => { const media = state.source.attachment[id]; - console.log('$$$ id', id); if (!media) { return null; } diff --git a/packages/nnk/src/components/core/List/list-item.js b/packages/nnk/src/components/core/List/list-item.js index 39ab502..52d8fd4 100644 --- a/packages/nnk/src/components/core/List/list-item.js +++ b/packages/nnk/src/components/core/List/list-item.js @@ -3,7 +3,15 @@ import { connect } from 'frontity'; import { any } from 'prop-types'; import Link from '../Link'; import FeaturedMedia from '../FeaturedMedia'; -import { AuthorName, Excerpt, PublishDate, StyledLink, Title } from './styles'; +import { + ArticleWrapper, + AuthorName, + Excerpt, + PublishDate, + StyledLink, + Title, + InfoBox +} from './styles'; import { ItemPropType, StatePropType } from '../../../types'; /** @@ -16,43 +24,55 @@ import { ItemPropType, StatePropType } from '../../../types'; */ const Item = ({ state, item }) => { const author = state.source.author[item.author]; + const { colors } = state.theme; const date = new Date(item.date); + const isReport = item.slug.includes('report'); + const clearOriginalLink = excerpt => { + return excerpt.split('

')[0]; + }; - console.log('$$$ item', item); return ( -

+ - + <Title + colors={colors} + dangerouslySetInnerHTML={{ __html: item.title.rendered }} + isReport={isReport} + /> </Link> - <div> - {/* If the post has an author, we render a clickable author text. */} + <InfoBox isReport={isReport}> {author && ( - <StyledLink link={author.link}> + <StyledLink colors={colors} link={author.link}> <AuthorName> By <b>{author.name}</b> </AuthorName> </StyledLink> )} - <PublishDate> - {' '} - on <b>{date.toDateString()}</b> + <PublishDate colors={colors} isReport={isReport}> + {date.toDateString()} </PublishDate> - </div> + </InfoBox> - {/* - * If the want to show featured media in the - * list of featured posts, we render the media. - */} {state.theme.featured.showOnList && ( - <FeaturedMedia id={item.featured_media} /> + <Link link={item.link}> + <FeaturedMedia id={item.featured_media} /> + </Link> )} {/* If the post has an excerpt (short summary text), we render it */} {item.excerpt && ( - <Excerpt dangerouslySetInnerHTML={{ __html: item.excerpt.rendered }} /> + <Link link={item.link}> + <Excerpt + colors={colors} + dangerouslySetInnerHTML={{ + __html: clearOriginalLink(item.excerpt.rendered) + }} + isReport={isReport} + /> + </Link> )} - </article> + </ArticleWrapper> ); }; diff --git a/packages/nnk/src/components/core/List/list.js b/packages/nnk/src/components/core/List/list.js index c0c913b..c6a82e6 100644 --- a/packages/nnk/src/components/core/List/list.js +++ b/packages/nnk/src/components/core/List/list.js @@ -1,36 +1,30 @@ import React from 'react'; -import { connect, styled, decode } from 'frontity'; -import { any } from 'prop-types'; +import { connect, decode } from 'frontity'; import Item from './list-item'; import Pagination from './pagination'; import { Container, Header } from './styles'; import { StatePropType } from '../../../types'; const List = ({ state }) => { - // Get the data of the current list. + const { colors } = state.theme; const data = state.source.get(state.router.link); return ( <Container> {/* If the list is a taxonomy, we render a title. */} {data.isTaxonomy && ( - <Header> + <Header colors={colors}> {data.taxonomy}:{' '} <b>{decode(state.source[data.taxonomy][data.id].name)}</b> </Header> )} - - {/* If the list is for a specific author, we render a title. */} {data.isAuthor && ( - <Header> + <Header colors={colors}> Author: <b>{decode(state.source.author[data.id].name)}</b> </Header> )} - - {/* Iterate over the items of the list. */} {data.items.map(({ type, id }) => { const item = state.source[type][id]; - // Render one Item component for each one. return <Item key={item.id} item={item} />; })} <Pagination /> diff --git a/packages/nnk/src/components/core/List/pagination.js b/packages/nnk/src/components/core/List/pagination.js index a10d912..9ce1af9 100644 --- a/packages/nnk/src/components/core/List/pagination.js +++ b/packages/nnk/src/components/core/List/pagination.js @@ -13,6 +13,7 @@ import { ActionsPropType, StatePropType } from '../../../types'; * when we wrap this component in `connect(...)` */ const Pagination = ({ state, actions }) => { + const { colors } = state.theme; // Get the total posts to be displayed based for the current link const { next, previous } = state.source.get(state.router.link); @@ -28,7 +29,7 @@ const Pagination = ({ state, actions }) => { {/* If there's a next page, render this link */} {next && ( <Link link={next}> - <Text>← Older posts</Text> + <Text colors={colors}>← Older posts</Text> </Link> )} @@ -37,7 +38,7 @@ const Pagination = ({ state, actions }) => { {/* If there's a previous page, render this link */} {previous && ( <Link link={previous}> - <Text>Newer posts →</Text> + <Text colors={colors}>Newer posts →</Text> </Link> )} </div> diff --git a/packages/nnk/src/components/core/List/styles.js b/packages/nnk/src/components/core/List/styles.js index 18b8948..9e43f9d 100644 --- a/packages/nnk/src/components/core/List/styles.js +++ b/packages/nnk/src/components/core/List/styles.js @@ -1,34 +1,82 @@ -import { styled } from 'frontity'; +import { css, styled } from 'frontity'; +import { sizeMedium } from '../../../setup/themes'; import Link from '../Link'; // --- List Item -export const Title = styled.h1` +export const ArticleWrapper = styled.article` + ${({ isReport, colors }) => + isReport && + css` + margin: 30px auto; + border: 1px solid ${colors.primary}; + box-shadow: 0 0 10px 2px ${colors.secondary}; + ${'' /* background: white; */} + + &:hover: { + border: 2px solid ${colors.terciary}; + } + `} +`; + +export const Title = styled.h3` font-size: 2rem; - color: rgba(12, 17, 43); margin: 0; padding-top: 24px; padding-bottom: 8px; box-sizing: border-box; + + ${({ isReport, colors }) => + isReport && + css` + width: 100%; + text-align: center; + color: ${colors.terciary}; + `} `; export const AuthorName = styled.span` - color: rgba(12, 17, 43, 0.9); font-size: 0.9em; `; +export const InfoBox = styled.div` + ${({ isReport }) => + isReport && + css` + display: flex; + flex-direction: column; + margin: 0; + align-items: center; + text-align: justify; + `} +`; + export const StyledLink = styled(Link)` padding: 15px 0; `; export const PublishDate = styled.span` - color: rgba(12, 17, 43, 0.9); font-size: 0.9em; + ${({ isReport, colors }) => + isReport && + css` + color: ${colors.secondary}; + text-align: center; + `} `; export const Excerpt = styled.div` line-height: 1.6em; - color: rgba(12, 17, 43, 0.8); + + ${({ isReport }) => + isReport && + css` + display: flex; + flex-direction: column; + margin: 20px 30px; + align-items: center; + text-align: justify; + `} `; // --- List @@ -43,12 +91,13 @@ export const Container = styled.section` export const Header = styled.h3` font-weight: 300; text-transform: capitalize; - color: rgba(12, 17, 43, 0.9); + color: ${({ colors }) => colors && colors.secondary}; `; // -- Pagination export const Text = styled.em` display: inline-block; - margin-top: 16px; + margin-top: 30px; + color: ${({ colors }) => colors && colors.terciary}; `; diff --git a/packages/nnk/src/components/core/Post/index.js b/packages/nnk/src/components/core/Post/index.js index 80015f7..a6f4fb0 100644 --- a/packages/nnk/src/components/core/Post/index.js +++ b/packages/nnk/src/components/core/Post/index.js @@ -9,26 +9,25 @@ import { Content, DateWrapper, StyledLink, - Title + Title, + BackToReports } from './styles'; import { ActionsPropType, LibrariesPropTypes, StatePropType } from '../../../types'; +import { ACTIONS_TEXTS } from '../../../db'; const Post = ({ state, actions, libraries }) => { - // Get information about the current URL. + const { colors, language } = state.theme; const data = state.source.get(state.router.link); - // Get the data of the post. const post = state.source[data.type][data.id]; - // Get the data of the author. const author = state.source.author[post.author]; - // Get a human readable date. const date = new Date(post.date); - - // Get the html2react component. const Html2React = libraries.html2react.Component; + const isReport = post.slug.includes('report'); + const texts = ACTIONS_TEXTS[language]; /** * Once the post has loaded in the DOM, prefetch both the @@ -40,25 +39,33 @@ const Post = ({ state, actions, libraries }) => { List.preload(); }, []); - // Load the post, but only if the data is ready. return data.isReady ? ( <Container> + {isReport && ( + <BackToReports colors={colors} link="/category/monthly-report/"> + {`<< ${texts.backToReports}`} + </BackToReports> + )} <div> - <Title dangerouslySetInnerHTML={{ __html: post.title.rendered }} /> + <Title + colors={colors} + isReport={isReport} + dangerouslySetInnerHTML={{ __html: post.title.rendered }} + /> {/* Only display author and date on posts */} {data.isPost && ( <div> {author && ( <StyledLink link={author.link}> - <Author> + <Author colors={colors}> By <b>{author.name}</b> </Author> </StyledLink> )} - <DateWrapper> + <DateWrapper colors={colors} isReport={isReport}> {' '} - on <b>{date.toDateString()}</b> + Published on <b>{date.toDateString()}</b> </DateWrapper> </div> )} @@ -71,7 +78,7 @@ const Post = ({ state, actions, libraries }) => { {/* Render the content using the Html2React component so the HTML is processed by the processors we included in the libraries.html2react.processors array. */} - <Content> + <Content colors={colors} isReport={isReport}> <Html2React html={post.content.rendered} /> </Content> </Container> diff --git a/packages/nnk/src/components/core/Post/styles.js b/packages/nnk/src/components/core/Post/styles.js index a485707..0c9d930 100644 --- a/packages/nnk/src/components/core/Post/styles.js +++ b/packages/nnk/src/components/core/Post/styles.js @@ -1,4 +1,5 @@ -import { styled } from 'frontity'; +import { css, styled } from 'frontity'; +import { sizeLargeTitle } from '../../../setup/themes'; import Link from '../Link'; export const Container = styled.div` @@ -12,7 +13,13 @@ export const Title = styled.h1` margin: 0; margin-top: 24px; margin-bottom: 8px; - color: rgba(12, 17, 43); + color: ${({ colors }) => colors && colors.terciary}; + + ${({ isReport }) => + isReport && + css` + font-size: ${sizeLargeTitle}; + `} `; Title.displayName = 'Title'; @@ -21,17 +28,22 @@ export const StyledLink = styled(Link)` `; StyledLink.displayName = 'StyledLink'; +export const BackToReports = styled.div` + color: ${({ colors }) => colors && colors.terciary}; +`; +BackToReports.displayName = 'BackToReports'; + export const Author = styled.p` display: inline; font-size: 0.9em; - color: rgba(12, 17, 43, 0.9); + color: ${({ colors }) => colors && colors.secondary}; `; Author.displayName = 'Author'; export const DateWrapper = styled.p` display: inline; font-size: 0.9em; - color: rgba(12, 17, 43, 0.9); + color: ${({ colors }) => colors && colors.secondary}; `; DateWrapper.displayName = 'DateWrapper'; @@ -41,7 +53,13 @@ DateWrapper.displayName = 'DateWrapper'; */ export const Content = styled.div` word-break: break-word; - color: rgba(12, 17, 43, 0.8); + color: ${({ colors }) => colors && colors.secondary}; + ${({ isReport }) => + isReport && + css` + margin: 40px auto; + text-align: justify; + `} /* WordPress Core Align Classes */ @@ -74,7 +92,31 @@ export const Content = styled.div` } p { - line-height: 1.6em; + line-height: 2; + margin: 20px auto; + width: 100%; + } + + span { + line-height: 2; + margin: 20px auto; + } + + li:not([class]), + a[class=''] { + line-height: 1.5; + margin-left: 50px; + list-style: disc; + } + + span { + line-height: 2; + margin: 20px auto; + } + + form { + margin: 30px auto; + margin-left: 50px; } img { @@ -106,8 +148,27 @@ export const Content = styled.div` } a { - text-decoration: underline; - color: rgb(31, 56, 197); + text-decoration: none; + color: #26b9ff; + width: 100%; + + & button { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: white; + } + } + + button { + margin: 10px auto 40px; + background: crimson; + border: 1px solid red; + border-radius: 10px; + padding: 5px 10px; + cursor: pointer; + text-align: center; } /* Input fields styles */ @@ -143,7 +204,7 @@ export const Content = styled.div` display: inline-block; border: 1px solid #1f38c5; border-radius: 4px; - margin-bottom: 0; + margin: 30px 0 10px 0; background-image: none; background-color: #1f38c5; padding: 12px 36px; diff --git a/packages/nnk/src/components/views/Footer/styles.js b/packages/nnk/src/components/views/Footer/styles.js index 8204544..4960b07 100644 --- a/packages/nnk/src/components/views/Footer/styles.js +++ b/packages/nnk/src/components/views/Footer/styles.js @@ -1,5 +1,4 @@ import { styled } from 'frontity'; -import Link from '../../core/Link'; export const FooterContainer = styled.div` display: flex; diff --git a/packages/nnk/src/components/views/ReportItem/index.js b/packages/nnk/src/components/views/ReportItem/index.js new file mode 100644 index 0000000..e5b05df --- /dev/null +++ b/packages/nnk/src/components/views/ReportItem/index.js @@ -0,0 +1,50 @@ +import React, { useEffect, useState } from 'react'; +import { string } from 'prop-types'; +import { connect } from 'frontity'; +import { Report, ReportImage, ReportTitle } from './styles'; +import { StatePropType } from '../../../types'; +import { fetchData } from '../../../utils'; +import Link from '../../core/Link'; + +const ReportItem = ({ state, url }) => { + const [report, setReport] = useState(); + + useEffect(() => { + fetchData(url) + .then(resp => { + setReport(resp[0]); + }) + .catch(error => + console.error(`Failed to get report from ${URL}. ${error}.`) + ); + }, [url]); + + const transformLink = link => link.split('https://www.borderviolence.eu')[1]; + + return ( + <> + {report && ( + <Link link={transformLink(report.link)}> + <Report> + <ReportTitle + dangerouslySetInnerHTML={{ __html: report.title.rendered }} + /> + <ReportImage + src={state.source.attachment[report.featured_media].source_url} + alt={ + state.source.attachment[report.featured_media].title.rendered + } + /> + </Report> + </Link> + )} + </> + ); +}; + +ReportItem.propTypes = { + state: StatePropType.isRequired, + url: string.isRequired +}; + +export default connect(ReportItem); diff --git a/packages/nnk/src/components/views/ReportItem/styles.js b/packages/nnk/src/components/views/ReportItem/styles.js new file mode 100644 index 0000000..9a763be --- /dev/null +++ b/packages/nnk/src/components/views/ReportItem/styles.js @@ -0,0 +1,27 @@ +import { styled } from 'frontity'; +import { fontText, sizeMedium } from '../../../setup/themes'; + +export const Report = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 20px 30px; + width: auto; +`; +Report.displayName = 'ReportTitle'; + +export const ReportTitle = styled.h3` + margin-bottom: 20px; + font-size: ${sizeMedium}; + color: ${({ colors }) => colors && colors.secondary}; + font-family: ${fontText}; + font-weight: 700; ; +`; +ReportTitle.displayName = 'ReportTitle'; + +export const ReportImage = styled.img` + width: 100%; + border: 1px solid white; +`; +ReportImage.displayName = 'ReportImage'; diff --git a/packages/nnk/src/components/views/SectionHeader/index.js b/packages/nnk/src/components/views/SectionHeader/index.js index da27248..83e01a0 100644 --- a/packages/nnk/src/components/views/SectionHeader/index.js +++ b/packages/nnk/src/components/views/SectionHeader/index.js @@ -3,6 +3,7 @@ import { arrayOf, string } from 'prop-types'; import SocialModule from '../SocialContainer'; import { PhotoContainer } from '../HomePageModules/Main/styles'; import { Title, TitleWrapper } from './styles'; +import { ColorsPropType, ConfigSocialLinksPropType } from '../../../types'; const SectionHeader = ({ colors, img, socialLinks, position, title }) => ( <PhotoContainer img={img} position={position}> @@ -14,10 +15,10 @@ const SectionHeader = ({ colors, img, socialLinks, position, title }) => ( ); SectionHeader.propTypes = { - colors: string.isRequired, + colors: ColorsPropType.isRequired, img: string.isRequired, position: string, - socialLinks: arrayOf(string).isRequired, + socialLinks: arrayOf(ConfigSocialLinksPropType).isRequired, title: string.isRequired }; diff --git a/packages/nnk/src/components/views/What/index.js b/packages/nnk/src/components/views/What/index.js index 1199ac3..d904680 100644 --- a/packages/nnk/src/components/views/What/index.js +++ b/packages/nnk/src/components/views/What/index.js @@ -4,7 +4,7 @@ import SectionHeader from '../SectionHeader'; import { getSocialLinks } from '../../../utils'; import { WHAT_TEXTS } from '../../../db'; import { - WhatBG, + Photo01, Program01, Program02, Program03 @@ -36,8 +36,8 @@ const WhatSection = ({ state }) => { <Section colors={colors}> <SectionHeader colors={colors} - img={WhatBG} - position="0 76%" + img={Photo01} + position="0 20%" socialLinks={socialLinks} title={texts.title} /> diff --git a/packages/nnk/src/components/views/Where/index.js b/packages/nnk/src/components/views/Where/index.js index 086a00d..6c242ad 100644 --- a/packages/nnk/src/components/views/Where/index.js +++ b/packages/nnk/src/components/views/Where/index.js @@ -3,7 +3,7 @@ import { connect } from 'frontity'; import SectionHeader from '../SectionHeader'; import { getSocialLinks } from '../../../utils'; import { WHERE_TEXTS } from '../../../db'; -import { Mapv1, Photo01 } from '../../../assets/images'; +import { Mapv1, Photo05 } from '../../../assets/images'; import { Content, Map, Section } from './styles'; import { StatePropType } from '../../../types'; @@ -20,8 +20,8 @@ const WhereSection = ({ state }) => { <Section colors={colors}> <SectionHeader colors={colors} - img={Photo01} - position="0 20%" + img={Photo05} + position="0 30%" socialLinks={socialLinks} title={texts.title} /> diff --git a/packages/nnk/src/components/views/Why/index.js b/packages/nnk/src/components/views/Why/index.js new file mode 100644 index 0000000..7d0b665 --- /dev/null +++ b/packages/nnk/src/components/views/Why/index.js @@ -0,0 +1,104 @@ +import React, { useEffect, useState } from 'react'; +import { connect } from 'frontity'; +import SectionHeader from '../SectionHeader'; +import { getSocialLinks } from '../../../utils'; +import { WHY_TEXTS } from '../../../db'; +import { Photo07, Program03 } from '../../../assets/images'; +import { + BorderViolenceArea, + Content, + Intro, + Photo, + RecentArea, + Section, + SubTitle, + TestimonialArea, + Title, + TextTestimonial, + TextVictim, + LatestReportsArea, + ReportLink +} from './styles'; +import { StatePropType } from '../../../types'; +import config from '../../../setup/config'; +import ReportItem from '../ReportItem'; + +const WhySection = ({ state }) => { + const { colors, language } = state.theme; + const [latestReports, setLatestReports] = useState([]); + let texts = WHY_TEXTS[language]; + const socialLinks = getSocialLinks(['Facebook', 'Twitter', 'Instagram']); + + const getLatestMonthlyReports = () => { + const categories = state.source.category; + + if (Object.keys(categories).length > 0) { + const reports = []; + const latests = []; + // eslint-disable-next-line no-unused-vars + Object.entries(categories).forEach(([id, category]) => { + if (category.link.includes('monthly-report')) { + reports.push(category); + } + }); + const latestIds = Object.keys(reports).splice(-config.latestReportsNum); + + latestIds.forEach(id => { + // eslint-disable-next-line no-underscore-dangle + const URL = reports[id]._links['wp:post_type'][0].href; + latests.push(URL); + }); + setLatestReports(latests); + } + }; + + useEffect(() => { + texts = WHY_TEXTS[language]; + }, [language]); + + useEffect(() => { + getLatestMonthlyReports(); + }, [state]); + + return ( + <Section colors={colors}> + <SectionHeader + colors={colors} + img={Photo07} + position="0 80%" + socialLinks={socialLinks} + title={texts.title} + /> + <Content> + <Intro>{texts.fullInto}</Intro> + <SubTitle colors={colors}>{texts.programsTitle}</SubTitle> + <TestimonialArea colors={colors}> + <Photo img={Program03} /> + <TextTestimonial>{texts.testimonial}</TextTestimonial> + <TextVictim>{texts.victim}</TextVictim> + </TestimonialArea> + <BorderViolenceArea> + <Title colors={colors}>{texts.borderViolence} + + {latestReports && + latestReports.map(reportUrl => ( + + ))} + + + {texts.moreReports} + + + + {texts.recentTestimonials} + + + + ); +}; + +WhySection.propTypes = { + state: StatePropType.isRequired +}; + +export default connect(WhySection); diff --git a/packages/nnk/src/components/views/Why/styles.js b/packages/nnk/src/components/views/Why/styles.js new file mode 100644 index 0000000..c9b774c --- /dev/null +++ b/packages/nnk/src/components/views/Why/styles.js @@ -0,0 +1,120 @@ +import { styled, css } from 'frontity'; +import { + BaseText, + BaseTitle, + fontText, + sizeLarge, + sizeLargeTitle, + sizeXLargeTitle +} from '../../../setup/themes'; +import Link from '../../core/Link'; + +const WhyArea = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: auto; + width: 80%; + text-align: justify; +`; + +export const BorderViolenceArea = styled(WhyArea)``; +BorderViolenceArea.displayName = 'BorderViolenceArea'; + +export const Content = styled.div` + padding: 20px 80px; +`; +Content.displayName = 'Content'; + +export const Intro = styled(BaseText)` + text-align: justify; + font-size: ${sizeLarge}; + color: ${({ colors }) => colors && colors.secondary}; +`; +Intro.displayName = 'Intro'; + +export const LatestReportsArea = styled.div` + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin: auto; +`; +LatestReportsArea.displayName = 'LatestReportsArea'; + +export const Photo = styled.div` + margin: 20px auto; + height: 200px; + width: 200px; + overflow: hidden; + ${({ img }) => + css` + border-radius: 50%; + background-image: ${`url(${img})`}; + background-position: left top; + background-size: 105%; + background-repeat: no-repeat; + `} +`; +Photo.displayName = 'Photo'; + +export const RecentArea = styled(WhyArea)``; +RecentArea.displayName = 'RecentArea'; + +export const ReportLink = styled(Link)` + margin: 40px auto 20px; + font-size: ${sizeLarge}; + font-family: ${fontText}; + color: ${({ colors }) => colors && colors.secondary}; + text-decoration: none; + cursor: pointer; +`; +ReportLink.displayName = 'ReportLink'; + +export const Section = styled.section` + color: ${({ colors }) => colors && colors.secondary}; +`; +Section.displayName = 'Section'; + +export const SubTitle = styled(BaseTitle)` + margin: 50px auto; + text-align: center; + font-size: ${sizeLargeTitle}; + color: ${({ colors }) => colors && colors.terciary}; +`; +SubTitle.displayName = 'SubTitle'; + +export const TestimonialArea = styled(WhyArea)` + margin: 20px auto; + width: 50%; +`; +TestimonialArea.displayName = 'TestimonialArea'; + +export const Text = styled(BaseText)` + text-align: justify; + color: ${({ colors }) => colors && colors.secondary}; +`; +Text.displayName = 'Text'; + +export const TextTestimonial = styled(Text)` + text-align: center; + font-size: ${sizeLarge}; + font-style: italic; +`; +Intro.displayName = 'Intro'; + +export const TextVictim = styled(Text)` + margin: 20px auto; + text-align: center; + font-size: ${sizeLarge}; + font-weight: 700; +`; +Intro.displayName = 'Intro'; + +export const Title = styled(BaseTitle)` + margin: 50px auto; + font-size: ${sizeXLargeTitle}; + color: ${({ colors }) => colors && colors.terciary}; +`; +Title.displayName = 'Title'; diff --git a/packages/nnk/src/db/actions.json b/packages/nnk/src/db/actions.json index 6b31d3f..25ce7df 100644 --- a/packages/nnk/src/db/actions.json +++ b/packages/nnk/src/db/actions.json @@ -1,5 +1,6 @@ { "en": { - "back": "back" + "back": "back", + "backToReports": "Back to reports" } } \ No newline at end of file diff --git a/packages/nnk/src/db/why.json b/packages/nnk/src/db/why.json index 2935a40..5d6a05b 100644 --- a/packages/nnk/src/db/why.json +++ b/packages/nnk/src/db/why.json @@ -1,5 +1,12 @@ { "en": { - "intro": "Many people are forced to escape from armed conflicts, discrimination or poverty,\nfleeing to find the peace and civil rights that they are missing at home.\n However, there are no safe pathways and people are exposed to hunger, pain and trauma." - } + "title": "Why?", + "intro": "Many people are forced to escape from armed conflicts, discrimination or poverty,\nfleeing to find the peace and civil rights that they are missing at home.\n However, there are no safe pathways and people are exposed to hunger, pain and trauma.", + "fullInto": "Many people are forced to escape from armed conflicts, discrimination or poverty. Most of them flee to find in Europe the peace and civil rights that they are missing at home. However, there are no safe pathways to migrate and people are exposed to hunger, pain and trauma while authorities reject them applying violence instead of sustainable solutions.", + "testimonial": "\"It was midnight. We were in the forest in Croatia when the police stopped us. I told them I need asylum, because my life is in danger, but they laugh at me and started to hit us with their sticks...\"", + "victim": "Ava (26 years old). She is moving from Iran to Germany.", + "borderViolence": "Border violence reports", + "recentTestimonials": "Recent testimonials", + "moreReports": "Click here to find more reports" + } } \ No newline at end of file diff --git a/packages/nnk/src/index.js b/packages/nnk/src/index.js index 1470b82..875f673 100644 --- a/packages/nnk/src/index.js +++ b/packages/nnk/src/index.js @@ -16,20 +16,14 @@ const nnkTheme = { theme: App }, state: { - - /** - * State is where the packages store their default settings and other - * relevant state. It is scoped to the `theme` namespace. - */ - theme: { language: config.defaultLanguage, colors: THEMES.dark, menu: [], isMobileMenuOpen: false, featured: { - showOnList: false, - showOnPost: false + showOnList: true, + showOnPost: true } }, source: { @@ -41,16 +35,14 @@ const nnkTheme = { '/where/': { isReady: true, isFetching: false + }, + '/why/': { + isReady: true, + isFetching: false } } } }, - - /** - * Actions are functions that modify the state or deal with other parts of - * Frontity like libraries. - */ - actions: { theme: { toggleMobileMenu: ({ state }) => { @@ -60,20 +52,12 @@ const nnkTheme = { state.theme.isMobileMenuOpen = false; }, changeTheme: ({ state }) => newTheme => { - console.log('$$$ newTheme', newTheme); - console.log('$$$ state', state); state.theme.colors = THEMES[newTheme]; } } }, libraries: { html2react: { - - /** - * Add a processor to `html2react` so it processes the `` tags - * inside the content HTML. You can add your own processors too - */ - processors: [image, iframe] } } diff --git a/packages/nnk/src/setup/config.js b/packages/nnk/src/setup/config.js index 771c07d..4027f90 100644 --- a/packages/nnk/src/setup/config.js +++ b/packages/nnk/src/setup/config.js @@ -8,6 +8,7 @@ export default { buttonsBackground: THEMES[LIGHT].purewWhite, buttonsText: THEMES[LIGHT].primary, buttonsHighlight: THEMES[LIGHT].terciary, + latestReportsNum: 2, socialLinks: [ { type: 'Facebook', diff --git a/packages/nnk/src/setup/themes.js b/packages/nnk/src/setup/themes.js index 2a42a79..a1740ac 100644 --- a/packages/nnk/src/setup/themes.js +++ b/packages/nnk/src/setup/themes.js @@ -5,8 +5,8 @@ import { DARK, LIGHT } from '../constants/theme'; export const THEMES = { [DARK]: { - primary: 'black', - secondary: 'white', + primary: '#212121', + secondary: '#f8f8ff', terciary: '#da002b', neutral: '#868686', purewWhite: '#ffffff', diff --git a/packages/nnk/src/utils/index.js b/packages/nnk/src/utils/index.js index 867f304..748626d 100644 --- a/packages/nnk/src/utils/index.js +++ b/packages/nnk/src/utils/index.js @@ -1,3 +1,5 @@ +import axios from 'axios'; + import { DESKTOP, MOBILE, TABLET } from '../constants/devices'; import config from '../setup/config'; @@ -17,3 +19,11 @@ export const getMediaQuery = () => { } return DESKTOP; }; + +export const fetchData = URL => { + const request = axios + .get(URL) + .then(resp => resp.data) + .catch(error => console.error(`Failed to get data from ${URL}. ${error}.`)); + return request; +}; diff --git a/yarn.lock b/yarn.lock index 73bc0ae..5e99007 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2347,6 +2347,13 @@ axe-core@^3.5.4: resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-3.5.5.tgz#84315073b53fa3c0c51676c588d59da09a192227" integrity sha512-5P0QZ6J5xGikH780pghEdbEKijCTrruK9KxtPZCFWUpef0f6GipO+xEZ5GKCb020mmqgbiNO6TcA55CriL784Q== +axios@^0.21.0: + version "0.21.0" + resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.0.tgz#26df088803a2350dff2c27f96fef99fe49442aca" + integrity sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw== + dependencies: + follow-redirects "^1.10.0" + axobject-query@^2.1.2: version "2.2.0" resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be" @@ -4427,6 +4434,11 @@ flush-write-stream@^1.0.0: inherits "^2.0.3" readable-stream "^2.3.6" +follow-redirects@^1.10.0: + version "1.13.0" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db" + integrity sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA== + for-in@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"