render home page posts

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    "next/babel",
+    "@emotion/babel-preset-css-prop"
+  ],
+  "plugins": [
+    [
+      "emotion"
+    ]
+  ]
+}

components/card/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
+import ReactHtmlParser from 'react-html-parser';
 
 import { Button } from 'gfw-components';
 
@@ -16,7 +17,15 @@ import {
   PostExcerpt,
 } from './styles';
 
-const Card = ({ title, excerpt, media, categories, large, video, link }) => (
+const Card = ({
+  title,
+  excerpt,
+  featured_media,
+  categories,
+  large,
+  video,
+  link,
+}) => (
   <CardWrapper>
     <a
       href={link}
@@ -32,9 +41,9 @@ const Card = ({ title, excerpt, media, categories, large, video, link }) => (
     >
       &nbsp;
     </a>
-    {!!media && (
+    {!!featured_media && (
       <MediaWrapper large={large}>
-        <Media {...media} />
+        <Media {...featured_media} />
         {video && (
           <Overlay>
             <Button
@@ -60,18 +69,21 @@ const Card = ({ title, excerpt, media, categories, large, video, link }) => (
       />
     )}
     {title && <PostTitle large={large}>{title}</PostTitle>}
-    {excerpt && <PostExcerpt large={large}>{excerpt}</PostExcerpt>}
+    {excerpt && (
+      <PostExcerpt large={large}>{ReactHtmlParser(excerpt)}</PostExcerpt>
+    )}
   </CardWrapper>
 );
 
 Card.propTypes = {
   link: PropTypes.string,
   title: PropTypes.string,
-  excerpt: PropTypes.node,
+  excerpt: PropTypes.string,
   media: PropTypes.object,
   categories: PropTypes.array,
   large: PropTypes.bool,
   video: PropTypes.bool,
+  featured_media: PropTypes.object,
 };
 
 export default Card;

components/featured/index.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactHtmlParser from 'react-html-parser';
+
+import Media from 'components/media';
+import CategoryList from 'components/category-list';
+import { clearExcerptHellip } from 'utils/content';
+
+import {
+  Wrapper,
+  Overlay,
+  ContentWrapper,
+  PostTitle,
+  PostExcerpt,
+} from './styles';
+
+const MainPost = ({ featured_media, categories, title, excerpt }) => {
+  return (
+    <Wrapper>
+      {featured_media && <Media {...featured_media} />}
+      <Overlay>
+        <ContentWrapper>
+          {categories && <CategoryList categories={categories} />}
+          {title && <PostTitle className="notranslate">{title}</PostTitle>}
+          {excerpt && (
+            <PostExcerpt className="notranslate">
+              {ReactHtmlParser(clearExcerptHellip(excerpt))}
+            </PostExcerpt>
+          )}
+        </ContentWrapper>
+      </Overlay>
+    </Wrapper>
+  );
+};
+
+MainPost.propTypes = {
+  featured_media: PropTypes.object,
+  title: PropTypes.string,
+  excerpt: PropTypes.string,
+  categories: PropTypes.array,
+};
+
+export default MainPost;

components/featured/styles.js

@@ -0,0 +1,99 @@
+import styled from '@emotion/styled';
+import { theme } from 'gfw-components';
+
+export const Wrapper = styled.article`
+  height: 400px;
+  position: relative;
+  overflow: hidden;
+
+  ${theme.mediaQueries.small} {
+    height: 440px;
+  }
+
+  ${theme.mediaQueries.medium} {
+    height: 440px;
+  }
+
+  img {
+    transition: all 0.2s ease-in-out;
+  }
+
+  &:hover {
+    img {
+      transition: all 0.2s ease-in-out;
+      transform: scale(1.05);
+    }
+
+    h3 {
+      text-decoration: underline;
+    }
+  }
+`;
+
+export const Overlay = styled.div`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.9) 0%,
+    rgba(0, 0, 0, 0.3) 100%
+  );
+`;
+
+export const ContentWrapper = styled.div`
+  position: absolute;
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+  top: 0;
+  padding: 30px 16px;
+  width: 100%;
+  height: 100%;
+
+  ${theme.mediaQueries.small} {
+    padding: 40px 50px;
+    width: 75%;
+  }
+
+  ${theme.mediaQueries.medium} {
+    padding: 50px 70px;
+  }
+`;
+
+export const PostTitle = styled.h3`
+  font-size: 30px;
+  line-height: 37px;
+  color: ${theme.colors.white};
+  width: 100%;
+  margin-bottom: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+
+  ${theme.mediaQueries.small} {
+    font-size: 36px;
+    line-height: 45px;
+  }
+`;
+
+export const PostExcerpt = styled.div`
+  font-size: 14px;
+  line-height: 21px;
+  color: ${theme.colors.white};
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+
+  ${theme.mediaQueries.small} {
+    font-size: 16px;
+    line-height: 28px;
+  }
+`;

components/intro/index.js

@@ -5,10 +5,10 @@ import { Title, Description } from './styles';
 
 const Intro = ({ title, description }) => {
   return (
-    <>
+    <div>
       <Title>{title}</Title>
       <Description>{description}</Description>
-    </>
+    </div>
   );
 };
 

components/search/index.js

@@ -1,10 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
-import compact from 'lodash/compact';
 import deburr from 'lodash/deburr';
 import toUpper from 'lodash/toUpper';
-import sortBy from 'lodash/sortBy';
 import debounce from 'lodash/debounce';
 import { CancelToken } from 'axios';
 import { useRouter } from 'next/router';
@@ -55,7 +53,7 @@ const Search = ({
     }
   };
 
-  const filteredMeta = results.filter((meta) =>
+  const filteredMeta = results?.filter((meta) =>
     deburrUpper(meta.name).includes(deburrUpper(search))
   ) || [{ name: search, link: `/search/${search}/` }];
 
@@ -92,53 +90,15 @@ const Search = ({
     debounce(() => {
       const fetchSearchContent = async () => {
         const source = CancelToken.source();
-        const articlesResponse = await getPostsByType({
-          type: 'articles',
-          params: search
-            ? {
-                search,
-              }
-            : {
-                'filter[meta_key]': 'featured',
-                'filter[meta_value]': 1,
-              },
+        const postsResponse = await getPostsByType({
+          type: 'posts',
+          params: {
+            search,
+          },
           cancelToken: source.token,
         });
 
-        const webinarsResponse = await getPostsByType({
-          type: 'webinars',
-          params: search
-            ? {
-                search,
-              }
-            : {
-                'filter[meta_key]': 'featured',
-                'filter[meta_value]': 1,
-              },
-          cancelToken: source.token,
-        });
-
-        const additionalMaterialsResponse = await getPostsByType({
-          type: 'additional_materials',
-          params: search
-            ? {
-                search,
-              }
-            : {
-                'filter[meta_key]': 'featured',
-                'filter[meta_value]': 1,
-              },
-          cancelToken: source.token,
-        });
-
-        const allResults = sortBy(
-          compact([
-            ...articlesResponse,
-            ...webinarsResponse,
-            ...additionalMaterialsResponse,
-          ]),
-          'acf.order'
-        )?.map((r) => {
+        const allResults = postsResponse?.posts?.map((r) => {
           return {
             ...r,
             name: r.title,
@@ -175,7 +135,7 @@ const Search = ({
                 ref={inputRef}
                 value={search}
                 expanded={expanded}
-                placeholder="Search the GFW Blog"
+                placeholder="Search the GFW Blog (e.g. fires, Brazil, palm oil)"
                 onChange={(e) => setSearch(e.target.value)}
                 onKeyDown={keyDownHandler}
               />