Merge pull request #6 from luck-js/develop

v1.3.0-alpha
luck-js · Nov 5, 2019 · 9f6ae1e · 9f6ae1e
2 parents 32270ce + 50759e2
commit 9f6ae1e
Show file tree

Hide file tree

Showing 33 changed files with 1,153 additions and 325 deletions.
diff --git a/.env.develop b/.env.develop
@@ -1,2 +1,3 @@
-APPOLO_CLIENT_TOKEN=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVkODI0OTUzYjViZmY4MjZlODNmZmU1MSIsImlzQWRtaW4iOnRydWUsImlhdCI6MTU3MTQ5Mzc2MywiZXhwIjoxNTc0MDg1NzYzfQ.4waARlkToB3Rq2JE0cEmyBmsaHfJyUwwlaK3wdrPUqE
+APPOLO_CLIENT_TOKEN=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVkYmViZTNkNDM3OGVhNTExZDE4MGIzZSIsImlzQWRtaW4iOnRydWUsImlhdCI6MTU3Mjc4MTY1NiwiZXhwIjoxNTc1MzczNjU2fQ.--S0L3AC0nJqskUp49_6_yYFs6oCmEyNhRCPsvnt68A
 CLIENT_URL=http://localhost:1337
+SHOULD_SHOW_DRAFT=true
diff --git a/.travis.yml b/.travis.yml
@@ -17,15 +17,19 @@ jobs:
     services:
       - docker
     script:
-      - docker build --build-arg TRACKING_ID=$TRACKING_ID --build-arg CLIENT_URL=$CLIENT_URL --build-arg APPOLO_CLIENT_TOKEN=$APPOLO_CLIENT_TOKEN . -t $IMAGE_NAME
+      - docker build --build-arg SHOULD_SHOW_DRAFT=$SHOULD_SHOW_DRAFT --build-arg TRACKING_ID=$TRACKING_ID --build-arg CLIENT_URL=$CLIENT_URL --build-arg APPOLO_CLIENT_TOKEN=$APPOLO_CLIENT_TOKEN . -t $IMAGE_NAME
       - echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
       - docker push $IMAGE_NAME
     if: branch = develop
-    env: IMAGE_NAME=$DEV_IMAGE_NAME
+    env:
+      - IMAGE_NAME=$DEV_IMAGE_NAME
+      - SHOULD_SHOW_DRAFT=true
 
   - <<: *build
     if: branch = master OR tag =~ ^v.*$
-    env: IMAGE_NAME=$PROD_IMAGE_NAME
+    env:
+     - IMAGE_NAME=$PROD_IMAGE_NAME
+     - SHOULD_SHOW_DRAFT=false
 
 
   - &deploy

diff --git a/Dockerfile b/Dockerfile
@@ -6,9 +6,11 @@ COPY . .
 ARG APPOLO_CLIENT_TOKEN
 ARG CLIENT_URL
 ARG TRACKING_ID
+ARG SHOULD_SHOW_DRAFT
 ENV APPOLO_CLIENT_TOKEN=$APPOLO_CLIENT_TOKEN
 ENV CLIENT_URL=$CLIENT_URL
 ENV TRACKING_ID=$TRACKING_ID
+ENV SHOULD_SHOW_DRAFT=$SHOULD_SHOW_DRAFT
 RUN yarn run build
 ENV PORT 3000
 EXPOSE 3000

diff --git a/components/Card/CardDesktop.tsx b/components/Card/CardDesktop.tsx
@@ -2,9 +2,10 @@ import React, { Fragment } from 'react';
 import styled from 'styled-components';
 import Link from 'next/link';
 import { TinyText, Trafalgar } from '../Typography';
-import RatioContainer from '../../components/RatioContainer';
 import { Box } from '../Box';
-import { Theme, Hashtag, Post } from '../../utils';
+import { Theme, Hashtag } from '../../utils';
+import {ViewPost} from "../../pages/blog"
+import {RatioLazyImage} from "../RatioLazyImage"
 
 const Container = styled(Box)`
   position: relative;
@@ -13,14 +14,14 @@ const Container = styled(Box)`
   overflow: hidden;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  
-  h3 {
+  h2 {
     text-decoration: underline;
     text-decoration-color: transparent;
     transition: text-decoration-color 0.5s, opacity 0.5s;
   }
   
   &:hover {
-    h3 {
+    h2 {
       opacity: 0.8;
       text-decoration-color: ${Theme.colors.black};
     }
@@ -31,18 +32,6 @@ const ContentContainer = styled(Box)`
   padding: ${Theme.space.medium}px;
 `;
 
-const Image = styled('img')`
-  width: 100%;
-  height: auto;
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-`;
-const ImageContainer = styled(RatioContainer)`
-  position: relative;
-`;
-
 const Hashtags = styled(TinyText)`
   span {
     text-transform: uppercase;
@@ -53,8 +42,12 @@ const Hashtags = styled(TinyText)`
   }
 `;
 
+const Image = styled(RatioLazyImage)`
+  border-top-left-radius: 14px;
+  border-top-right-radius: 14px;
+`;
 
-export interface CardDesktopProps extends Post {
+export interface CardDesktopProps extends ViewPost {
   display: any;
 }
 
@@ -63,33 +56,32 @@ const CardDesktop: React.FunctionComponent<CardDesktopProps> = ({
   description,
   slug,
   cover,
+  coverPlaceholder,
   hashtags = [],
   ...props
-}) => (
+}) => {
+  return (
   <Fragment>
     {cover && (
       <Container {...props}>
         <Link href={`/blog/${slug}`}>
           <Box as="a" href={`/blog/${slug}`} aria-label={`przejdź do ${title}`}>
-              <ImageContainer ratio="69%">
-                <p>{cover.url}</p>
-                <Image src={cover.url} alt="" />
-              </ImageContainer>
-              <ContentContainer>
-                <Hashtags>
-                  {(hashtags as Hashtag[]).map(({ name }, index) => (
-                    <span key={`CardDesktop-${name}-${index}`}>#{name}</span>
-                  ))}
-                </Hashtags>
-                <Trafalgar tag="h2" pt={['xsmall', 'xsmall', 'xsmall', 'xsmall']}>
-                  {title}
-                </Trafalgar>
-              </ContentContainer>
-            </Box>
-          </Link>
+            <Image url={cover.url} placeholderUrl={coverPlaceholder.url} ratio="69%" />
+            <ContentContainer>
+              <Hashtags>
+                {(hashtags as Hashtag[]).map(({ name }, index) => (
+                  <span key={`CardDesktop-${name}-${index}`}>#{name}</span>
+                ))}
+              </Hashtags>
+              <Trafalgar tag="h2" pt={['xsmall', 'xsmall', 'xsmall', 'xsmall']}>
+                {title}
+              </Trafalgar>
+            </ContentContainer>
+          </Box>
+        </Link>
       </Container>
     )}
   </Fragment>
-);
+)};
 
 export default CardDesktop;
diff --git a/components/Card/CardMobile.tsx b/components/Card/CardMobile.tsx
@@ -3,9 +3,10 @@ import styled from 'styled-components';
 import Link from 'next/link';
 import { Flex } from '../Flex';
 import { Trafalgar } from '../Typography';
-import RatioContainer from '../../components/RatioContainer';
 import { Box } from '../Box';
-import { Theme, Post } from '../../utils';
+import { Theme } from '../../utils';
+import { ViewPost } from '../../pages/blog';
+import { RatioLazyImage } from '../RatioLazyImage';
 
 const Container = styled(Flex)`
   margin-bottom: ${Theme.space.small}px;
@@ -27,38 +28,30 @@ const InnerContainer = styled(Flex)`
   cursor: pointer;
   width: 100%;
 
-  h3 {
+  h2 {
     text-decoration: underline;
     text-decoration-color: transparent;
     transition: text-decoration-color 0.5s, opacity 0.5s;
   }
   &:hover {
-    h3 {
+    h2 {
       opacity: 0.8;
       text-decoration-color: ${Theme.colors.black};
     }
   }
 `;
 
-const Image = styled('img')`
-  width: 100%;
-  height: auto;
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-`;
-
-const ImageContainer = styled(RatioContainer)`
-  position: relative;
-`;
-
 const ContentContainer = styled(Box)`
   padding: ${Theme.space.medium}px;
   text-align: center;
 `;
 
-export interface CardMobileProps extends Post {
+const Image = styled(RatioLazyImage)`
+  border-top-left-radius: 14px;
+  border-top-right-radius: 14px;
+`;
+
+export interface CardMobileProps extends ViewPost {
   display: any;
 }
 
@@ -67,6 +60,7 @@ const CardMobile: React.FunctionComponent<CardMobileProps> = ({
   description,
   slug,
   cover,
+  coverPlaceholder,
   ...props
 }) => (
   <Fragment>
@@ -75,10 +69,7 @@ const CardMobile: React.FunctionComponent<CardMobileProps> = ({
         <InnerContainer>
           <Link href={`/blog/${slug}`}>
             <Box as="a" href={`/blog/${slug}`} aria-label={`przejdź do ${title}`}>
-              <ImageContainer ratio="69%">
-                <p>{cover.url}</p>
-                <Image src={cover.url} alt="" />
-              </ImageContainer>
+              <Image url={cover.url} placeholderUrl={coverPlaceholder.url} ratio="69%" />
               <ContentContainer>
                 <Trafalgar tag="h2">{title}</Trafalgar>
               </ContentContainer>

diff --git a/components/Card/index.tsx b/components/Card/index.tsx
@@ -1,9 +1,9 @@
 import React, { Fragment } from 'react';
 import CardMobile from './CardMobile';
 import CardDesktop from "./CardDesktop"
-import { Post } from '../../utils';
+import {ViewPost} from "../../pages/blog"
 
-const Card: React.FunctionComponent<Post> = ({ ...props }) => (
+const Card: React.FunctionComponent<ViewPost> = ({ ...props }) => (
   <Fragment>
     <CardMobile display={['flex', 'flex', 'none']} {...props} />
     <CardDesktop display={['none', 'none', 'block']} {...props} />

diff --git a/components/FontProvider.tsx b/components/FontProvider.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import {createContext, useState, useEffect} from 'react';
+export const FontContext = createContext<boolean>(false);
+
+const FontFaceObserver = require('fontfaceobserver');
+
+const Fonts = async () => {
+  document.documentElement.className += " fonts-loaded";
+
+  const lato = new FontFaceObserver('Lato');
+
+  return await lato.load();
+};
+
+const FontProvider: React.FunctionComponent = ({ children }) => {
+  const [isFontLoaded, setIsFontLoaded] = useState(false);
+
+  useEffect(() => {
+    let isSubscribed = true
+    Fonts().then(() => isSubscribed ? setIsFontLoaded(true) : null);
+    return () => {(isSubscribed = false)};
+  }, []);
+
+  return (
+    <FontContext.Provider value={isFontLoaded}>
+      { children }
+    </FontContext.Provider>
+  );
+};
+export default FontProvider;
diff --git a/components/GlobalStyle.tsx b/components/GlobalStyle.tsx
@@ -7,15 +7,24 @@ const GlobalStyle = createGlobalStyle`
     margin: 0;
     padding: 0;
   }
+  html, body, #__next {
+    height: 100%;
+  }
   html {
     background-color: ${Theme.colors.main};
   }
+  
   body {
     margin: 0;
     padding: 0;
     width: 100%;
     color: ${Theme.colors.main};
-    font-family: ${Theme.fontFamilies.body} ;
+  }
+  
+  .fonts-loaded {
+    body {
+      font-family: ${Theme.fontFamilies.body} ;
+    }
   }
   
   a {

diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -2,37 +2,24 @@ import * as React from 'react';
 import Head from 'next/head';
 import styled from 'styled-components';
 import { Box } from './Box';
-import { useState } from 'react';
-import { useEffect } from 'react';
-import Fonts from '../utils/fonts';
 
 type LayoutProps = {
   backgroundColor: string;
 };
 const Container = styled(Box)`
   margin: 0;
-  height: 100vh;
-`;
-const InnerContainer = styled('div')<{ isFontLoaded: boolean }>`
-  opacity: ${props => (props.isFontLoaded ? 1 : 0)};
-  transition: 0.5s;
+  min-height: 100%;
 `;
 
 const Layout: React.FunctionComponent<LayoutProps> = ({ children, ...props }) => {
-  const [isFontLoaded, setIsFontLoaded] = useState(false);
-  useEffect(() => {
-    let isSubscribed = true
-    Fonts().then(() => isSubscribed ? setIsFontLoaded(true) : null);
-    return () => {(isSubscribed = false)};
-  }, []);
-
   return (
     <Container {...props}>
       <Head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700&subset=latin-ext" rel="stylesheet" />
       </Head>
-      <InnerContainer isFontLoaded={isFontLoaded}>{children}</InnerContainer>
+      {children}
     </Container>
   );
 };