🔗 hero and header links (#194)

* link hero to instagram.

* hero and header links.

* improve test coverage.

src/components/Hero/Hero.js

@@ -13,7 +13,7 @@ const HeroWrapper = styled.div`
     }
 `
 
-const HeroImage = styled.div`
+const HeroImage = styled.a`
     .hero-image-container {
         border-radius: 100%;
     }
@@ -23,6 +23,13 @@ const HeroImage = styled.div`
         box-sizing: border-box;
         border: 7px solid ${({theme}) => theme.colors.black};
         background-color: ${({theme}) => theme.colors.black};
+        transition: all 300ms;
+
+        :hover {
+            transform: rotate(-2deg);
+            border: 7px solid ${({theme}) => theme.colors.primary};
+            background-color: ${({theme}) => theme.colors.primary};
+        }
     }
 
     @media (max-width: 700px) {
@@ -74,7 +81,11 @@ const Description = styled.div`
 const Hero = () => {
     return (
         <HeroWrapper>
-            <HeroImage>
+            <HeroImage
+                href="https://instagram.com/bradgarropy"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
                 <StaticImage
                     src="https://github.com/bradgarropy.png"
                     alt="bg"

src/components/Link/Link.js

@@ -0,0 +1,25 @@
+import {Link as GatsbyLink} from "gatsby"
+import PropTypes from "prop-types"
+
+const Link = ({to, children, ...props}) => {
+    if (to.startsWith("/")) {
+        return (
+            <GatsbyLink to={to} {...props}>
+                {children}
+            </GatsbyLink>
+        )
+    }
+
+    return (
+        <a href={to} target="_blank" rel="noopener noreferrer" {...props}>
+            {children}
+        </a>
+    )
+}
+
+Link.propTypes = {
+    to: PropTypes.string.isRequired,
+    children: PropTypes.node,
+}
+
+export default Link

src/components/Link/Link.test.js

@@ -0,0 +1,20 @@
+import Link from "components/Link"
+import {render, screen} from "test-utils/render"
+
+test("shows html link", () => {
+    render(<Link to="https://example.com">Example</Link>)
+
+    expect(screen.getByText("Example")).toHaveAttribute("target", "_blank")
+
+    expect(screen.getByText("Example")).toHaveAttribute(
+        "rel",
+        "noopener noreferrer",
+    )
+})
+
+test("shows gatsby link", () => {
+    render(<Link to="/example">Example</Link>)
+
+    expect(screen.getByText("Example")).not.toHaveAttribute("target", "_blank")
+    expect(screen.getByText("Example")).not.toHaveAttribute("rel")
+})

src/components/Link/index.js

@@ -0,0 +1 @@
+export {default} from "./Link"

src/components/Section/Section.js

@@ -1,3 +1,4 @@
+import Link from "components/Link"
 import PropTypes from "prop-types"
 import styled from "styled-components"
 
@@ -8,17 +9,29 @@ const Title = styled.h2`
     margin: 0rem 0rem 1.75rem 0rem;
 `
 
-const Section = ({title, children}) => {
+const StyledLink = styled(Link)`
+    display: inline-block;
+
+    :hover {
+        text-shadow: 3px 3px ${({theme}) => theme.colors.primary};
+    }
+`
+
+const Section = ({title, link, children}) => {
     return (
         <section>
-            <Title>{title}</Title>
+            <StyledLink to={link}>
+                <Title>{title}</Title>
+            </StyledLink>
+
             {children}
         </section>
     )
 }
 
 Section.propTypes = {
     title: PropTypes.string.isRequired,
+    link: PropTypes.string.isRequired,
     children: PropTypes.node,
 }
 

src/components/Section/Section.test.js

@@ -2,6 +2,10 @@ import Section from "components/Section"
 import {render, screen} from "test-utils/render"
 
 test("shows section", () => {
-    render(<Section title="Test" />)
-    expect(screen.getByText("Test"))
+    render(<Section title="Test" link="https://example.com" />)
+
+    expect(screen.getByText("Test").parentElement).toHaveAttribute(
+        "href",
+        "https://example.com",
+    )
 })

src/pages/index.js

@@ -25,19 +25,19 @@ const IndexPage = () => {
             <Sections>
                 <Hero />
 
-                <Section title="blog">
+                <Section title="blog" link="/blog">
                     <LatestPosts />
                 </Section>
 
-                <Section title="videos">
+                <Section title="videos" link="https://youtube.com/bradgarropy">
                     <LatestVideos />
                 </Section>
 
-                <Section title="projects">
+                <Section title="projects" link="https://github.com/bradgarropy">
                     <FeaturedProjects />
                 </Section>
 
-                <Section title="podcast">
+                <Section title="podcast" link="https://anchor.fm/webdevweekly">
                     <Podcast />
                 </Section>
             </Sections>