Merge branch 'release/0.3.0'

annabranco · Nov 20, 2020 · 0dccc9f · 0dccc9f · vercel · Nov 20, 2020
2 parents 392c0f4 + b123e16
commit 0dccc9f
Show file tree

Hide file tree

Showing 33 changed files with 568 additions and 107 deletions.
diff --git 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
diff --git 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
@@ -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
diff --git a/packages/nnk/src/assets/images/spots/base05.jpg b/packages/nnk/src/assets/images/spots/base05.jpg
diff --git a/packages/nnk/src/assets/images/bgs/what.jpeg → ...s/nnk/src/assets/images/spots/base06.jpeg b/packages/nnk/src/assets/images/bgs/what.jpeg → ...s/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
diff --git a/packages/nnk/src/assets/images/spots/base08.png b/packages/nnk/src/assets/images/spots/base08.png
diff --git a/packages/nnk/src/components/controllers/App/index.js b/packages/nnk/src/components/controllers/App/index.js
@@ -11,19 +11,20 @@ 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
  * in roots.
  */
 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 <head> 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. */}
       <Global styles={globalStyles} />
-      <Global styles={{ body: { background: colors.primary } }} />
+      <Global
+        styles={{
+          body: { background: colors.primary, fontFamily: fontText },
+          p: { color: colors.secondary },
+          h1: { color: colors.terciary, fontFamily: fontTitle },
+          h2: { color: colors.secondary, fontFamily: fontTitle },
+          h3: { color: colors.secondary, fontFamily: fontTitle }
+        }}
+      />
 
       {/* Add the header of the site. */}
       <Header />
@@ -58,6 +67,7 @@ const App = ({ state }) => {
           <MainPage when={data.link === '/'} />
           <WhatSection when={state.router.link === '/what/'} />
           <WhereSection when={state.router.link === '/where/'} />
+          <WhySection when={state.router.link === '/why/'} />
           <Loading when={data.isFetching} />
           <List when={data.isArchive} />
           <Post when={data.isPostType} />

diff --git 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
@@ -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
@@ -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('<p class="link-more">')[0];
+  };
 
-  console.log('$$$ item', item);
   return (
-    <article>
+    <ArticleWrapper colors={colors} isReport={isReport}>
       <Link link={item.link}>
-        <Title dangerouslySetInnerHTML={{ __html: item.title.rendered }} />
+        <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
@@ -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
@@ -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
@@ -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};
 `;