diff --git a/src/components/blog-card.css b/src/components/blog-card.css deleted file mode 100644 index f8633d6..0000000 --- a/src/components/blog-card.css +++ /dev/null @@ -1,35 +0,0 @@ -.card { - margin: 15px; - position: relative; - display: flex; - flex-direction: column; - min-width: 0; - word-wrap: break-word; - background-color: var(--white); - background-clip: border-box; - border-radius: 0.25rem; -} - -.card-body { - flex: 1 1 auto; - min-height: 1px; - padding: 1.25rem; -} - -.card-img-top { - width: 100%; - border-top-left-radius: calc(0.25rem - 1px); - border-top-right-radius: calc(0.25rem - 1px); -} - -.card a { - color: var(--black); -} - -.tag { - color: var(--purple2); -} - -.date-reading-time { - color: var(--midgrey); -} \ No newline at end of file diff --git a/src/components/blog-card.tsx b/src/components/blog-card.tsx deleted file mode 100644 index b76f5de..0000000 --- a/src/components/blog-card.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import React from 'react' -import { Link } from 'gatsby' - -import './blog-card.css' -import FeatureImage from 'images/default-feature-image.jpg' - -type BlogCardProps = { - title: string - reading_time: number - published_at: Date - excerpt: string - feature_image: string - slug: String - tags: Array - primary_author_name: String - authors: Array -} - -const BlogCard = ({ - title, - reading_time, - published_at, - excerpt, - feature_image, - slug, - tags, - authors, - primary_author_name -}: BlogCardProps) => { - console.log(feature_image) - const months = [ - 'JAN', - 'FEB', - 'MAR', - 'APR', - 'MAY', - 'JUN', - 'JULY', - 'AUG', - 'SEPT', - 'OCT', - 'NOV', - 'DEC' - ] - - const month = new Date(published_at).getMonth() - const formatted_published_at = - new Date(published_at).getDate() + - ' ' + - months[month] + - ' ' + - new Date(published_at).getFullYear() - return ( -
- - img -
- {tags.map((tag: any) => ( - - {tag.name.toUpperCase()} - - ))} -

{title}

-

{excerpt}

-
-
    - {authors.map((author: any) => ( -
  • -
    - Ghost -
    -
    -

    {author.name}

    -
    -
    -
    -
    - Ghost -
    -
    • - ))} -
- -
- {/*

{primary_author_name}

*/} -

{primary_author_name}

- -
- - - • {reading_time} min read - -
-
-
-
- -
- ) -} - -export default BlogCard diff --git a/src/components/blogCard.tsx b/src/components/blogCard.tsx new file mode 100644 index 0000000..55cb7cb --- /dev/null +++ b/src/components/blogCard.tsx @@ -0,0 +1,123 @@ +import React from 'react' +import { Link } from 'gatsby' +import styled from 'styled-components' +import FeatureImage from 'images/default-feature-image.jpg' +import ProfileIcon from 'images/DefaultProfileIcon.png' +import { formatDate } from './helpers' + +const Card = styled.div` + margin: 15px; + position: relative; + display: flex; + flex-direction: column; + min-width: 0; + word-wrap: break-word; + background-color: var(--white); + background-clip: border-box; + border-radius: 0.25rem; + + border: 2px solid #bfbfbf; + border-radius: var(--border-radius); +` + +const CardBody = styled.div` + flex: 1 1 auto; + min-height: 1px; + padding: 1.25rem; +` + +const CardImgTop = styled.img` + width: 100%; + border-top-left-radius: calc(0.25rem - 1px); + border-top-right-radius: calc(0.25rem - 1px); +` + +const Tag = styled.span` + color: var(--purple2); +` + +const Small = styled.div` + font-size: 62.5%; +` + +type BlogCardProps = { + title: String + reading_time: number + published_at: Date + excerpt: String + feature_image: String + slug: String + tags: Array + primary_author_name: String + authors: Array +} + +const BlogCard = ({ + title, + reading_time, + published_at, + excerpt, + feature_image, + slug, + tags, + authors, + primary_author_name +}: BlogCardProps) => { + return ( + + + + + {tags.map((tag: any) => ( + {tag.name.toUpperCase()} + ))} +

{title}

+

{excerpt}

+ +
+
    + {authors.map((author: any) => ( +
  • +
    + Ghost +
    +
    +

    {author.name}

    +
    +
    +
    +
    + Ghost +
    +
    • + ))} +
+ +
+

{primary_author_name}

+
+ + + • {reading_time} min read + +
+
+
+ + + + + ) +} + +export default BlogCard diff --git a/src/components/blogCardFeatured.tsx b/src/components/blogCardFeatured.tsx new file mode 100644 index 0000000..3199e1a --- /dev/null +++ b/src/components/blogCardFeatured.tsx @@ -0,0 +1,175 @@ +import React from 'react' +import styled from 'styled-components' +import FeatureImage from 'images/default-feature-image.jpg' +import ProfileIcon from 'images/DefaultProfileIcon.png' +import { formatDate } from './helpers' + +const Card = styled.div` + margin: 15px; + position: relative; + display: flex; + flex-direction: column; + min-width: 0; + word-wrap: break-word; + background-color: var(--white); + background-clip: border-box; + border-radius: 0.25rem; +` + +const CardBody = styled.div` + flex: 1 1 auto; + min-height: 1px; + padding: 1.25rem; + + @media (max-width: 768px) { + padding: 0; + } +` + +const CardImgTop = styled.img` + width: 100%; + border-top-left-radius: calc(0.25rem - 1px); + border-top-right-radius: calc(0.25rem - 1px); + max-height: 400px; + + @media (min-width: 1200px) { + width: auto; + } +` + +const Tag = styled.span` + color: var(--purple2); +` + +const ColMd8 = styled.div` + text-align: center; + position: relative; + width: 100%; + min-height: 1px; + + @media (min-width: 768px) { + flex: 0 0 65%; + max-width: 65%; + } +` + +const ColMd4 = styled.div` + position: relative; + width: 100%; + min-height: 1px; + + @media (min-width: 768px) { + flex: 0 0 35%; + max-width: 35%; + } +` + +const Row = styled.div` + display: flex; + flex-wrap: wrap; + margin-right: -15px; + margin-left: -15px; + margin-top: 75px; + @media (max-width: 768px) { + background-clip: border-box; + border-radius: 0.25rem; + border: 2px solid #bfbfbf; + border-radius: var(--border-radius); + margin: 4px; + } +` +const Small = styled.div` + font-size: 62.5%; +` + +type BlogCardProps = { + title: String + reading_time: number + published_at: Date + excerpt: String + feature_image: String + slug: String + tags: Array + primary_author_name: String + authors: Array +} + +const BlogCardFeatured = ({ + title, + reading_time, + published_at, + excerpt, + feature_image, + slug, + tags, + authors, + primary_author_name +}: BlogCardProps) => { + return ( + + + + + + + + {tags ? ( + tags.map((tag: any) => ( + + {tag.name.toUpperCase()} + + )) + ) : ( + {' '} + )} +

{title}

+

{excerpt}

+ +
+
    + {authors.map((author: any) => ( +
  • +
    + Ghost +
    +
    +

    {author.name}

    +
    +
    +
    +
    + Ghost +
    +
    • + ))} +
+ +
+

{primary_author_name}

+
+ + + • {reading_time} min read + +
+
+
+ + + + + + ) +} + +export default BlogCardFeatured diff --git a/src/components/header.tsx b/src/components/header.tsx index 9afdcbf..ab8c63d 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -5,6 +5,7 @@ import { useMatch } from '@reach/router' import { useScrollPosition } from '@n8tb1t/use-scroll-position' import WordLogoDark from './wordLogoDark' +import WordLogo from './wordLogo' import MenuButton from './menuButton' const StyledHeader = styled.header<{ @@ -26,7 +27,7 @@ const StyledHeader = styled.header<{ flex-direction: column; width: 100vw; /* change 10rem to 20rem when adding the nav options back*/ - height: ${(props) => (props.isOpen ? '12rem' : '65px')}; + height: ${(props) => (props.isOpen ? '15rem' : '65px')}; justify-content: flex-start; align-items: center; @@ -57,7 +58,12 @@ const NavBar = styled.nav` } ` -const StyledLogo = styled(WordLogoDark)` +const StyledLogoDark = styled(WordLogoDark)` + width: 140px; + height: 65px; +` + +const StyledLogo = styled(WordLogo)` width: 140px; height: 65px; ` @@ -112,12 +118,19 @@ const Header = (props: { fixed: boolean }) => { [isDark] ) + // shows the black logo on "/blog/blog-slug" urls instead of the light one + let Logo + + if (props.fixed || !window.location.pathname.includes('/blog/')) { + Logo = + } else { + Logo = + } + return ( - - - + {Logo} setOpen(!isOpen)} /> { }} > About - + */} { }} > Blog - */} + @@ -179,7 +192,7 @@ const Header = (props: { fixed: boolean }) => { }} > About - + */} { }} > Blog - */} + ) diff --git a/src/components/headerSmall.css b/src/components/headerSmall.css deleted file mode 100644 index 4034ca1..0000000 --- a/src/components/headerSmall.css +++ /dev/null @@ -1,81 +0,0 @@ -.container { - width: 100%; - padding-right: 15px; - padding-left: 15px; - margin-right: auto; - margin-left: auto; -} - -@media (min-width: 576px) { - .container { - max-width: 540px; - } - .header-small { - background-size: auto; - } -} - -@media (min-width: 768px) { - .container { - max-width: 720px; - } - .header-small { - background-size: auto; - } -} - -@media (min-width: 992px) { - .container { - max-width: 960px; - } - .header-small { - background-size: auto; - } -} - -@media (min-width: 1200px) { - .container { - max-width: 960px; - } - .header-small { - background-size: 100% 90%; - } -} - -.jumbotron { - padding: 2rem 1rem; - margin-bottom: 2rem; - background-color: #e9ecef; - border-radius: 0.3rem; -} - -.jumbotron-fluid { - padding-right: 0; - padding-left: 0; - border-radius: 0; -} - -.header-small { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - width: 100%; - height: calc(50vh - 65px); - min-height: 480px; - - background: bottom / cover no-repeat url('../images/bkg-small.svg'); -} - -.header-small-title { - padding-bottom: 100px; - margin: 0; - font-size: 80px; - line-height: 117px; - color: #ffffff; -} - -.header-small-subtitle { - font-weight: normal; -} diff --git a/src/components/headerSmall.tsx b/src/components/headerSmall.tsx deleted file mode 100644 index 1c41158..0000000 --- a/src/components/headerSmall.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import * as React from 'react'; -import './headerSmall.css'; - -type HeaderSmallProps = { - title: string, - subtitle: string -} - -const HeaderSmall = ({ title, subtitle }: HeaderSmallProps) => { - return ( -
-
-
-

{title} < span className="header-small-subtitle" > {subtitle}

-
-
-
- ) -} - -export default HeaderSmall; \ No newline at end of file diff --git a/src/components/helpers.tsx b/src/components/helpers.tsx new file mode 100644 index 0000000..a7526ed --- /dev/null +++ b/src/components/helpers.tsx @@ -0,0 +1,27 @@ +export function formatDate(published_at: Date) { + const months = [ + 'JAN', + 'FEB', + 'MAR', + 'APR', + 'MAY', + 'JUN', + 'JULY', + 'AUG', + 'SEPT', + 'OCT', + 'NOV', + 'DEC' + ] + + const month = new Date(published_at).getMonth() + + const formatted_published_at = + new Date(published_at).getDate() + + ' ' + + months[month] + + ' ' + + new Date(published_at).getFullYear() + + return formatted_published_at +} diff --git a/src/components/wordLogo.tsx b/src/components/wordLogo.tsx new file mode 100644 index 0000000..1c971d7 --- /dev/null +++ b/src/components/wordLogo.tsx @@ -0,0 +1,50 @@ +import React from 'react' + +const WordLogo = (props: JSX.IntrinsicAttributes & React.SVGProps) => ( + + + + + + + + + + + + + + + +) + +export default WordLogo diff --git a/src/components/wordLogoDark.tsx b/src/components/wordLogoDark.tsx index 125bbe0..f02bdad 100644 --- a/src/components/wordLogoDark.tsx +++ b/src/components/wordLogoDark.tsx @@ -1,6 +1,6 @@ import React from 'react' -const WordLogo = (props: any) => ( +const WordLogo = (props: JSX.IntrinsicAttributes & React.SVGProps) => ( { - const months = [ - 'JAN', - 'FEB', - 'MAR', - 'APR', - 'MAY', - 'JUN', - 'JULY', - 'AUG', - 'SEPT', - 'OCT', - 'NOV', - 'DEC' - ] +const SplashContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: calc(40vh); + background: bottom / cover no-repeat url(${bkgUrl}); + + @media only screen and (min-width: 700px) { + justify-content: flex-start; + } +` - const month = new Date(post.published_at).getMonth() - post.published_at = - new Date(post.published_at).getDate() + - ' ' + - months[month] + - ' ' + - new Date(post.published_at).getFullYear() +export default ({ data: { ghostPost: post } }) => { + post.published_at = formatDate(post.published_at) return ( - {/*
*/} -
+
@@ -45,7 +41,8 @@ export default ({ data: { ghostPost: post } }) => {

{post.title}

-

{post.excerpt}

+

{post.custom_excerpt}

+
@@ -67,7 +64,7 @@ export default ({ data: { ghostPost: post } }) => {
Ghost
@@ -76,7 +73,6 @@ export default ({ data: { ghostPost: post } }) => {
- {/*

{post.primary_author.name}

*/}

{post.primary_author.name}

@@ -125,7 +121,6 @@ export default ({ data: { ghostPost: post } }) => {
- {/* */} ) } @@ -146,6 +141,7 @@ export const postQuery = graphql` } published_at excerpt + custom_excerpt primary_author { name } diff --git a/src/pages/blog.css b/src/pages/blog.css deleted file mode 100644 index c7ab141..0000000 --- a/src/pages/blog.css +++ /dev/null @@ -1,50 +0,0 @@ -a:hover { - text-decoration: none !important; -} - -.container { - width: 100%; - padding-right: 15px; - padding-left: 15px; - margin-right: auto; - margin-left: auto; -} - -.row { - display: flex; - flex-wrap: wrap; - margin-right: -15px; - margin-left: -15px; -} - -@media (min-width: 576px) { - .container { - max-width: 540px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 720px; - } - .col-md-4 { - flex: 0 0 33.333333%; - max-width: 33.333333%; - } - .col-md-6 { - flex: 0 0 50%; - max-width: 50%; - } -} - -@media (min-width: 992px) { - .container { - max-width: 960px; - } -} - -.col-md-6 { - position: relative; - width: 100%; - min-height: 1px; -} \ No newline at end of file diff --git a/src/pages/blog.tsx b/src/pages/blog.tsx index 9b85f9f..bf7cb88 100644 --- a/src/pages/blog.tsx +++ b/src/pages/blog.tsx @@ -2,130 +2,106 @@ import React from 'react' import { Link, graphql } from 'gatsby' import { PageLayout } from 'layouts' import { SEO } from 'components' +import styled from 'styled-components' -import './blog.css' -import BlogCard from 'components/blog-card' -import HeaderSmall from 'components/headerSmall' -import FeatureImage from 'images/default-feature-image.jpg' +import BlogCard from 'components/blogCard' +import BlogCardFeatured from 'components/blogCardFeatured' +import bkgUrl from 'images/bkg-small.svg' +import { LogoHeader } from 'components/logoHeader' export default ({ data }) => { const posts = data.allGhostPost.edges.map((edge) => edge.node) - const months = [ - 'JAN', - 'FEB', - 'MAR', - 'APR', - 'MAY', - 'JUN', - 'JULY', - 'AUG', - 'SEPT', - 'OCT', - 'NOV', - 'DEC' - ] + const SplashContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: calc(40vh); + background: bottom / cover no-repeat url(${bkgUrl}); - const month = new Date(posts[0].published_at).getMonth() - const formatted_published_at = - new Date(posts[0].published_at).getDate() + - ' ' + - months[month] + - ' ' + - new Date(posts[0].published_at).getFullYear() + @media only screen and (min-width: 700px) { + justify-content: flex-start; + } + ` + + const Container = styled.div` + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; + max-width: var(--mobile-width); + @media (min-width: 1200px) { + max-width: var(--desktop-width); + } + ` + + const Row = styled.div` + display: flex; + flex-wrap: wrap; + margin-right: -15px; + margin-left: -15px; + ` + + const ColMd4 = styled.div` + @media (min-width: 768px) { + flex: 0 0 33.333333%; + max-width: 33.333333%; + } + ` + + const HorizontalRuler = styled.hr` + @media (max-width: 768px) { + display: none; + } + ` + + let text + + if (posts[0]) { + text = ( +
+ + + +
+ ) + } else { + text =

No posts are available

+ } return ( - -
-
- -
-
- img -
-
-
-
- {posts[0].tags ? ( - posts[0].tags.map((tag: any) => ( - - {tag.name.toUpperCase()} - - )) - ) : ( - - {' '} - - )} -

{posts[0].title}

-

{posts[0].excerpt}

-
-
    - {posts[0].authors.map((author: any) => ( -
  • -
    - Ghost -
    -
    -

    {author.name}

    -
    -
    -
    -
    - Ghost -
    -
    • - ))} -
- -
- {/*

{primary_author_name}

*/} -

- {posts[0].primary_author.name} -

+ {/* */} + + + -
- - - •{' '} - {posts[0].reading_time} min read - -
-
-
-
-
-
-
- -
+ + {text} + -
+ {posts.slice(1).map((post: any) => ( -
+ { primary_author_name={post.primary_author.name} authors={post.authors} /> -
+ ))} -
-
+ + ) }