Render LQIP and photo credit

Author: jason-roundtree

web/components/GlobalStyles.js

@@ -12,7 +12,7 @@ export const GlobalStyles = createGlobalStyle`
         margin: 0;
         padding: 0;
         box-sizing: border-box;
-        font-weight: 300;
+        font-weight: 400;
         color: ${({ theme }) => theme.primaryColor};
     }
     
@@ -54,7 +54,6 @@ export const GlobalStyles = createGlobalStyle`
         font-family: 'Nanum Gothic Coding', monospace;
         &:hover {
             cursor: pointer;
-            /* background-color: var(--primary-darker); */
         }
     }
 

web/components/Layout.js

@@ -16,9 +16,15 @@ const Header = styled.header`
     justify-content: space-between;
     align-items: center;
 `
-const H1 = styled.h1`
+const SiteTitleH1 = styled.h1`
     font-size: 1.5em;
 `
+const SiteTitleText = styled.a`
+    font-weight: 300;
+    &:hover {
+        cursor: pointer;
+    }
+`
 const ToggleBtn = styled.img`
     height: 1.8em;
     width: 1.8em;
@@ -53,7 +59,7 @@ function Layout(props) {
                 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/>
                 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/>
                 <link rel="manifest" href="/site.webmanifest"/>
-                <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400&display=swap" rel="stylesheet"/>
+                <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;600&display=swap" rel="stylesheet"/>
                 <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap" rel="stylesheet"/>
                 <link href="https://fonts.googleapis.com/css2?family=Cuprum&family=Fjalla+One&display=swap" rel="stylesheet"/>
                 <link href="https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap" rel="stylesheet"/>
@@ -62,11 +68,11 @@ function Layout(props) {
 
             <Header>
                 <nav>
-                    <H1>
+                    <SiteTitleH1>
                         <Link href='/'>
-                            <a>Jason Roundtree - Blog</a>
+                            <SiteTitleText>Jason Roundtree - Blog</SiteTitleText>
                         </Link>
-                    </H1>
+                    </SiteTitleH1>
                     {/* <Span>a web dev blog, by </Span><a href='http://jasonroundtree.info/' target="_blank">jason roundtree</a> */}
                 </nav>
                 <ToggleBtn

web/components/PostImg.js

@@ -0,0 +1,56 @@
+import { useState } from 'react'
+import styled from 'styled-components'
+
+const PostImgContainer = styled.div`
+    position: relative;
+    margin: 2.5em 0;
+`
+const PostImg = styled.img`
+    position: relative;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    transition: opacity 400ms ease 0ms;
+`
+const PostLqipImg = styled(PostImg)`
+    position: absolute;
+    width: 100%;
+    filter: blur(10px);
+    transform: scale(1.1);
+    transition: visibility 0ms ease 400ms;
+`
+const PhotoCredit = styled.p`
+    text-align: center;
+`
+
+function PostImage(props) {
+    console.log('PI props: ', props)
+    const [isLoaded, setIsLoaded] = useState(false);
+    return (
+        <PostImgContainer>
+            <PostImg 
+                onLoad={() => setIsLoaded(true)}
+                src={props.postImg.url}
+                alt={`Image of ${props.postImg.description} by ${props.postImg.creditLine}`}
+                style={{ opacity: isLoaded ? 1 : 0 }}
+            />
+        
+            <PostLqipImg 
+                src={props.postImg.metadata.lqip}
+                alt={`Image of ${props.postImg.description} by ${props.postImg.creditLine}`}
+                style={{ visibility: isLoaded ? "hidden" : "visible" }}
+            />
+
+            <PhotoCredit>
+                Photo by 
+                    <a href={props.postImg.source.url} target="_blank">
+                        {props.postImg.creditLine.replace('by Unsplash', ' ')} 
+                    </a>
+                on <a href="https://unsplash.com/" target="_blank">Unsplash</a>
+            </PhotoCredit>
+        </PostImgContainer>
+    )
+} 
+
+export default PostImage