{wip} Om/add new logo

packages/website/src/app.jsx

@@ -127,6 +127,16 @@ const App = () => {
                     )}
                 />
 
+                <Route exact path='/'>
+                  <Dynamic template='home' />
+                </Route>
+                <Route exact path='/blog'>
+                  <Dynamic template='blog' />
+                </Route>
+                <Route path='/blog/:slug'>
+                  <Dynamic template='blog-page' />
+                </Route>
+
                 <Switch>
                   <Route path='*'>
                     <Dynamic />

packages/website/src/components/contentful-blog-list/contentful-blog-list.jsx

@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from 'react'
+import { PageWrapper, Hero, Blog, Blogs, BlogImage, BlogTitle, BlogSection } from './contentful-blog-list.styles'
+import { getBlogs } from './helpers/blogs'
+import { Break } from '../panels'
+
+export const ContentfulBlogList = ({ slug }) => {
+  const [blogs, setBlogs] = useState([])
+
+  const getData = async () => {
+    const blogItems = await getBlogs()
+    if (!blogItems) return
+
+    setBlogs(blogItems)
+  }
+
+  useEffect(() => {
+    getData()
+  }, [slug])
+
+  return !blogs
+    ? ''
+    : (
+      <PageWrapper>
+        <Hero background='http://images.ctfassets.net/6dcasuqyhf2a/5dlpqFLilkKyfLxKmevhRJ/e14aa9b3beafc095f9b55660823eafff/image_from_ios.jpg?w=1100&h=700&fit=fill'><h1>Blogs</h1></Hero>
+        <Break />
+        <BlogSection>
+          <BlogTitle>
+            <div className='column-left'>
+              <h2>Blogs/News</h2>
+            </div>
+            <div className='column-right'>
+              {blogs.length} results
+            </div>
+          </BlogTitle>
+          <Blogs>
+            {blogs.map((blog) => (
+              <Blog key={blog.title}>
+                <a href={`/blog${blog.url}`}>
+                  <BlogImage background={`${blog.image.fields.file.url}?w=500&h=500&fit=fill`} />
+                </a>
+                <div className='text'>
+                  <h2>{blog.title}</h2>
+                  <p>{blog.dateFormatted}</p>
+                  <a className='button' href={`/blog${blog.url}`}>View</a>
+                </div>
+              </Blog>
+            ))}
+          </Blogs>
+        </BlogSection>
+      </PageWrapper>
+      )
+}

packages/website/src/components/contentful-blog-list/contentful-blog-list.styles.jsx

@@ -0,0 +1,114 @@
+import styled from 'styled-components'
+
+export const PageWrapper = styled.div`
+padding-top: 67px;
+background-color: white;
+
+font-size: 16px;
+`
+export const Hero = styled.div`
+padding: 120px 0;
+background-image: url(${props => props.background});
+background-size: cover;
+background-position: center center;
+font-size: 35px;
+text-align: center;
+h1{
+  background-color: rgba(0,0,0,.5);
+  padding: 0.3rem 2.5rem;
+  font-size: 2rem;
+  color: white;
+  display: inline-block;
+  border-radius: 6px;
+  margin: 20px;
+}
+
+@media (max-width: 640px) {
+  padding: 80px 0;
+    h1{
+      font-size: 1.5rem;
+    }
+  }
+`
+export const Breadcrumb = styled.div`
+    background-color: #f9f9fa;
+    padding: 30px 20px;
+    border-bottom: solid 1px #ddd;
+    .content{
+      max-width: 750px;
+      margin: 0 auto;
+    }
+    a, span{
+      color: #9da0b6;
+    }
+`
+export const BlogSection = styled.div`
+  max-width: 750px;
+  margin: 0 auto;
+  padding: 20px 0;
+
+  @media (max-width: 640px) {
+    padding: 20px 20px;
+  }
+`
+
+export const Blogs = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 30px 10px;
+
+  @media (max-width: 640px) {
+    grid-template-columns: 1fr 1fr;
+  }
+`
+
+export const Blog = styled.div`
+  border: 1px #dcdcdc; solid;
+  border-radius: 6px; 
+  h2{
+    font-size: 18px;
+  }
+  .text{
+    padding: 5px;
+    p{
+      color: #9c9c9c;
+      font-size:12px;
+    }
+  }
+  .button{
+    background-color: #2e6dcb;
+    border: none;
+    color: white;
+    padding: 10px 25px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    border-radius: 6px;
+
+    &:hover{
+      background-color: #2459a8;
+    }
+  }
+`
+
+export const BlogImage = styled.div`
+background-color: #dcdcdc;
+height: 150px;
+background-image: url(${props => props.background});
+background-size: cover;
+background-position: center center;
+background-color: #dcdcdc;
+border-radius: 5px;
+`
+
+export const BlogTitle = styled.div`
+  display: flex;
+  align-items: center;
+  & > * {
+   flex: 1; 
+  }
+  .column-right{
+    text-align: right;
+  }
+`

packages/website/src/components/contentful-blog-list/helpers/blogs.jsx

@@ -0,0 +1,27 @@
+import { setupClient } from '../../../shared/contentful'
+
+export const getBlogs = async () => {
+  const client = setupClient()
+  const entries = await client.getEntries({
+    content_type: 'blog',
+    limit: 100,
+    include: 10
+  })
+  const items = entries?.items || null
+  if (!items.length > 0) return null
+
+  const blogs = []
+  items.forEach((item) => {
+    const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
+    const date = new Date(item.fields.date)
+    const dateFormatted = date.toLocaleDateString('en-GB', options)
+    blogs.push(
+      {
+        ...item.fields,
+        dateFormatted
+      }
+    )
+  })
+
+  return blogs
+}

packages/website/src/components/contentful-blog-list/index.jsx

@@ -0,0 +1 @@
+export { ContentfulBlogList } from './contentful-blog-list'

packages/website/src/components/contentful-blog-page/contentful-blog-page.jsx

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react'
+import { PageWrapper, Hero, Article, Author, Breadcrumb } from './contentful-blog-page.styles'
+import { getBlogFromSlug } from './helpers/blog'
+import { Break } from '../panels'
+
+export const ContentfulBlogPage = ({ slug }) => {
+  const [page, setPage] = useState(null)
+
+  const getData = async () => {
+    const page = await getBlogFromSlug(slug.replace('/blog', ''))
+    setPage(page)
+  }
+
+  useEffect(() => {
+    getData()
+  }, [slug])
+
+  return !page
+    ? ''
+    : (
+      <PageWrapper>
+        <Hero background={`${page.image?.fields.file.url}?w=1100&h=700&fit=fill`}><h1>{page.title}</h1></Hero>
+        <Break />
+        <Breadcrumb>
+          <div className='content'>
+            <a href='/blog'>Blogs</a> <span>/</span> {page.title}
+          </div>
+        </Breadcrumb>
+        <Author>
+          <div className='author-column author-column-image'>
+            <img alt='bark profile image' width='80' height='80' title='bark profile image' src='/pcc-logo-round.EM2LHAUI.png' />
+          </div>
+          <div className='author-column author-column-text'>
+            <h3>{page.author}, <span>{page.authorTitle}</span></h3>
+            <p>{page.dateFormatted}</p>
+          </div>
+        </Author>
+        <Article>
+          {page.bodyComponents}
+        </Article>
+      </PageWrapper>
+      )
+}

packages/website/src/components/contentful-blog-page/contentful-blog-page.styles.jsx

@@ -0,0 +1,86 @@
+import styled from 'styled-components'
+
+export const PageWrapper = styled.div`
+padding-top: 67px;
+background-color: white;
+
+font-size: 16px;
+`
+export const Hero = styled.div`
+padding: 120px 0;
+background-image: url(${props => props.background});
+background-size: cover;
+background-position: center center;
+background-color: #dcdcdc;
+font-size: 35px;
+text-align: center;
+h1{
+  background-color: rgba(0,0,0,.5);
+  padding: 0.3rem 2.5rem;
+  font-size: 2rem;
+  color: white;
+  display: inline-block;
+  border-radius: 6px;
+  margin: 20px;
+}
+
+@media (max-width: 640px) {
+  padding: 80px 0;
+    h1{
+      font-size: 1.5rem;
+    }
+  }
+`
+export const Breadcrumb = styled.div`
+    background-color: #f9f9fa;
+    padding: 30px 20px;
+    border-bottom: solid 1px #ddd;
+    .content{
+      max-width: 750px;
+      margin: 0 auto;
+    }
+    a, span{
+      color: #9da0b6;
+    }
+`
+export const Article = styled.div`
+ max-width: 750px;
+ margin: 0 auto;
+ padding-bottom: 40px;
+
+ line-height: 1.6;
+ a{
+   color: #2e6dcb;
+ }
+
+ hr{
+  border: solid 1px #f1f1f1;
+  margin: 30px 0;
+ }
+
+ @media (max-width: 640px) {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+`
+export const Author = styled.div`
+ display: flex;
+ max-width: 750px;
+ margin: 0 auto;
+ padding: 20px 0;
+ border-bottom: solid 1px #ddd;
+ .author-column-image{
+margin-right: 30px;
+ }
+ .author-column-text{
+   p{color: #6372a1;}
+ }
+ img{
+   border-radius: 50%;
+ }
+
+ @media (max-width: 640px) {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+`

packages/website/src/components/contentful-blog-page/helpers/blog.jsx

@@ -0,0 +1,30 @@
+import { setupClient, renderOptions } from '../../../shared/contentful'
+import { documentToReactComponents } from '@contentful/rich-text-react-renderer'
+
+export const getBlogFromSlug = async (slug = '') => {
+  const client = setupClient()
+  const entries = await client.getEntries({
+    content_type: 'blog',
+    limit: 1,
+    include: 10,
+    'fields.url': slug,
+    order: '-fields.date'
+  })
+  const entry = entries?.items[0] || null
+  if (!entry) return null
+
+  const bodyComponents = documentToReactComponents(
+    entry.fields.body,
+    renderOptions
+  )
+
+  const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
+  const date = new Date(entry.fields.date)
+  const dateFormatted = date.toLocaleDateString('en-GB', options)
+
+  return {
+    ...entry.fields,
+    bodyComponents,
+    dateFormatted
+  }
+}

packages/website/src/components/contentful-blog-page/index.jsx

@@ -0,0 +1 @@
+export { ContentfulBlogPage } from './contentful-blog-page'