add gatsby link component.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "dailytexascountry.com",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "description": "🤠 daily texas country",
     "keywords": [
         "gatsby",
@@ -49,8 +49,9 @@
         "new": "plop"
     },
     "dependencies": {
+        "@bradgarropy/gatsby-link": "^0.0.2",
         "@bradgarropy/gatsby-plugin-seo": "^1.0.0",
-        "airtable": "^0.10.1",
+        "airtable": "^0.11.0",
         "babel-plugin-styled-components": "^1.12.0",
         "copyright": "0.0.5",
         "date-fns": "^2.16.1",
@@ -95,12 +96,12 @@
         "@hot-loader/react-dom": "^17.0.1",
         "@testing-library/jest-dom": "^5.11.6",
         "@testing-library/react": "^11.2.2",
-        "@testing-library/user-event": "^12.6.0",
+        "@testing-library/user-event": "^13.1.3",
         "all-contributors-cli": "^6.20.0",
         "babel-eslint": "^10.1.0",
         "cross-env": "^7.0.3",
         "eslint": "^7.16.0",
-        "eslint-config-prettier": "^7.1.0",
+        "eslint-config-prettier": "^8.2.0",
         "eslint-plugin-jsx-a11y": "^6.4.1",
         "eslint-plugin-react": "^7.21.5",
         "eslint-plugin-react-hooks": "^4.2.0",

src/components/Episode/Episode.js

@@ -1,3 +1,4 @@
+import Link from "@bradgarropy/gatsby-link"
 import EpisodeMeta from "components/EpisodeMeta"
 import PropTypes from "prop-types"
 import styled from "styled-components"
@@ -14,14 +15,12 @@ const Episode = ({episode}) => {
 
     return (
         <StyledEpisode>
-            <a
+            <Link
                 aria-label={title}
-                href={`https://youtube.com/watch?v=${videoId}`}
-                target="_blank"
-                rel="noopener noreferrer"
+                to={`https://youtube.com/watch?v=${videoId}`}
             >
                 <Image fluid={thumbnail} />
-            </a>
+            </Link>
 
             <EpisodeMeta episode={episode} />
         </StyledEpisode>

src/components/EpisodeMeta/EpisodeMeta.js

@@ -1,3 +1,4 @@
+import Link from "@bradgarropy/gatsby-link"
 import PropTypes from "prop-types"
 import styled from "styled-components"
 import Title from "styles/Title"
@@ -6,7 +7,7 @@ const StyledEpisodeMeta = styled.div`
     display: grid;
 `
 
-const TitleLink = styled.a`
+const TitleLink = styled(Link)`
     justify-self: start;
 `
 
@@ -17,11 +18,7 @@ const EpisodeMeta = ({episode}) => {
         <StyledEpisodeMeta>
             <span>{publishedAt}</span>
 
-            <TitleLink
-                href={`https://youtube.com/watch?v=${videoId}`}
-                target="_blank"
-                rel="noopener noreferrer"
-            >
+            <TitleLink to={`https://youtube.com/watch?v=${videoId}`}>
                 <Title>{title}</Title>
             </TitleLink>
         </StyledEpisodeMeta>

src/components/FeaturedPlaylist/FeaturedPlaylist.js

@@ -1,3 +1,4 @@
+import Link from "@bradgarropy/gatsby-link"
 import PropTypes from "prop-types"
 import styled from "styled-components"
 import Image from "styles/Image"
@@ -37,19 +38,14 @@ const FeaturedPlaylist = ({playlist}) => {
 
     return (
         <StyledFeaturedPlaylist>
-            <a
-                aria-label={name}
-                href={url}
-                target="_blank"
-                rel="noopener noreferrer"
-            >
+            <Link aria-label={name} to={url}>
                 <PlaylistImage fluid={image} />
-            </a>
+            </Link>
 
             <PlaylistInfo>
-                <a href={url} target="_blank" rel="noopener noreferrer">
+                <Link to={url}>
                     <h1>{name}</h1>
-                </a>
+                </Link>
 
                 <span>{description}</span>
             </PlaylistInfo>

src/components/FeaturedPosts/FeaturedPosts.js

@@ -1,4 +1,4 @@
-import {Link} from "gatsby"
+import Link from "@bradgarropy/gatsby-link"
 import PropTypes from "prop-types"
 import styled from "styled-components"
 import Image from "styles/Image"

src/components/Footer/Footer.js

@@ -1,7 +1,7 @@
+import Link from "@bradgarropy/gatsby-link"
 import BG from "components/BG"
 import Copyright from "components/Copyright"
 import Social from "components/Social"
-import {Link} from "gatsby"
 import styled from "styled-components"
 
 const StyledFooter = styled.footer`

src/components/Header/Header.js

@@ -1,5 +1,5 @@
+import Link from "@bradgarropy/gatsby-link"
 import Navigation from "components/Navigation"
-import {Link} from "gatsby"
 import styled from "styled-components"
 import DTXC from "svg/dtxc.svg"
 

src/components/MobileFooter/MobileFooter.js

@@ -1,7 +1,7 @@
+import Link from "@bradgarropy/gatsby-link"
 import BG from "components/BG"
 import Copyright from "components/Copyright"
 import Social from "components/Social"
-import {Link} from "gatsby"
 import styled from "styled-components"
 
 const StyledFooter = styled.footer`

src/components/MobileHeader/MobileHeader.js

@@ -1,6 +1,6 @@
+import Link from "@bradgarropy/gatsby-link"
 import MobileNavigation from "components/MobileNavigation"
 import Navigation from "components/Navigation"
-import {Link} from "gatsby"
 import {useApp} from "hooks"
 import styled from "styled-components"
 import DTXC from "svg/dtxc.svg"

src/components/MobileNavigation/MobileNavigation.js

@@ -1,4 +1,4 @@
-import {Link} from "gatsby"
+import Link from "@bradgarropy/gatsby-link"
 import {useApp} from "hooks"
 import PropTypes from "prop-types"
 import styled from "styled-components"

src/components/Navigation/Navigation.js

@@ -1,4 +1,4 @@
-import {Link} from "gatsby"
+import Link from "@bradgarropy/gatsby-link"
 import {useApp} from "hooks"
 import styled from "styled-components"
 import {navLink} from "styles/partials"

src/components/Playlist/Playlist.js

@@ -1,3 +1,4 @@
+import Link from "@bradgarropy/gatsby-link"
 import PlaylistMeta from "components/PlaylistMeta"
 import PropTypes from "prop-types"
 import styled from "styled-components"
@@ -30,14 +31,9 @@ const Playlist = ({playlist}) => {
 
     return (
         <StyledPlaylist>
-            <a
-                aria-label={name}
-                href={url}
-                target="_blank"
-                rel="noopener noreferrer"
-            >
+            <Link aria-label={name} to={url}>
                 <PlaylistImage fluid={image} />
-            </a>
+            </Link>
 
             <PlaylistMeta playlist={playlist} />
         </StyledPlaylist>

src/components/PlaylistMeta/PlaylistMeta.js

@@ -1,3 +1,4 @@
+import Link from "@bradgarropy/gatsby-link"
 import PropTypes from "prop-types"
 import styled from "styled-components"
 import Title from "styles/Title"
@@ -13,7 +14,7 @@ const StyledPlaylistMeta = styled.div`
     }
 `
 
-const PlaylistLink = styled.a`
+const PlaylistLink = styled(Link)`
     justify-self: start;
 
     @media (max-width: ${({theme}) => theme.breakpoints.mobile}) {
@@ -43,7 +44,7 @@ const PlaylistMeta = ({playlist}) => {
 
     return (
         <StyledPlaylistMeta>
-            <PlaylistLink href={url} target="_blank" rel="noopener noreferrer">
+            <PlaylistLink to={url}>
                 <PlaylistName>{name}</PlaylistName>
             </PlaylistLink>
 

src/components/Post/Post.js

@@ -1,5 +1,5 @@
+import Link from "@bradgarropy/gatsby-link"
 import PostMeta from "components/PostMeta"
-import {Link} from "gatsby"
 import PropTypes from "prop-types"
 import styled from "styled-components"
 import Image from "styles/Image"

src/components/PostMeta/PostMeta.js

@@ -1,4 +1,4 @@
-import {Link} from "gatsby"
+import Link from "@bradgarropy/gatsby-link"
 import PropTypes from "prop-types"
 import styled from "styled-components"
 import Tag from "styles/Tag"

src/components/Social/Social.js

@@ -1,3 +1,5 @@
+import Link from "@bradgarropy/gatsby-link"
+import {useSiteMetadata} from "hooks"
 import styled from "styled-components"
 import Instagram from "svg/instagram.svg"
 import Spotify from "svg/spotify.svg"
@@ -32,43 +34,34 @@ const StyledSpotify = styled(Spotify)`
 `
 
 const Social = () => {
+    const {twitter, youtube, instagram, spotify} = useSiteMetadata()
+
     return (
         <StyledSocial>
-            <a
-                aria-label="Twitter"
-                href="/twitter"
-                target="_blank"
-                rel="noopener noreferrer"
-            >
+            <Link aria-label="Twitter" to={`https://twitter.com/${twitter}`}>
                 <StyledTwitter />
-            </a>
+            </Link>
 
-            <a
+            <Link
                 aria-label="YouTube"
-                href="/youtube"
-                target="_blank"
-                rel="noopener noreferrer"
+                to={`https://youtube.com/channel/${youtube}`}
             >
                 <StyledYouTube />
-            </a>
+            </Link>
 
-            <a
+            <Link
                 aria-label="Instagram"
-                href="/instagram"
-                target="_blank"
-                rel="noopener noreferrer"
+                to={`https://instagram.com/${instagram}`}
             >
                 <StyledInstagram />
-            </a>
+            </Link>
 
-            <a
+            <Link
                 aria-label="Spotify"
-                href="/spotify"
-                target="_blank"
-                rel="noopener noreferrer"
+                to={`https://open.spotify.com/user/${spotify}`}
             >
                 <StyledSpotify />
-            </a>
+            </Link>
         </StyledSocial>
     )
 }

src/components/Social/Social.test.js

@@ -1,15 +1,42 @@
 import Social from "components/Social"
+import {useSiteMetadata} from "hooks"
+import {mockSiteMetadata} from "test-utils/mocks"
 import {render, screen} from "test-utils/render"
 
-test("shows social", () => {
+jest.mock("hooks")
+useSiteMetadata.mockReturnValue(mockSiteMetadata)
+
+test("shows twitter", () => {
+    render(<Social />)
+
+    expect(screen.getByLabelText("Twitter")).toHaveAttribute(
+        "href",
+        `https://twitter.com/${mockSiteMetadata.twitter}`,
+    )
+})
+
+test("shows youtube", () => {
     render(<Social />)
 
-    const socials = ["Twitter", "YouTube", "Instagram", "Spotify"]
+    expect(screen.getByLabelText("YouTube")).toHaveAttribute(
+        "href",
+        `https://youtube.com/channel/${mockSiteMetadata.youtube}`,
+    )
+})
+
+test("shows instagram", () => {
+    render(<Social />)
+
+    expect(screen.getByLabelText("Instagram")).toHaveAttribute(
+        "href",
+        `https://instagram.com/${mockSiteMetadata.instagram}`,
+    )
+})
+test("shows spotify", () => {
+    render(<Social />)
 
-    socials.forEach(social => {
-        expect(screen.getByLabelText(social)).toHaveAttribute(
-            "href",
-            `/${social.toLowerCase()}`,
-        )
-    })
+    expect(screen.getByLabelText("Spotify")).toHaveAttribute(
+        "href",
+        `https://open.spotify.com/user/${mockSiteMetadata.spotify}`,
+    )
 })

src/pages/index.js

@@ -1,8 +1,8 @@
+import Link from "@bradgarropy/gatsby-link"
 import SEO from "@bradgarropy/gatsby-plugin-seo"
 import FeaturedPlaylist from "components/FeaturedPlaylist"
 import FeaturedPosts from "components/FeaturedPosts"
 import YouTube from "components/YouTube"
-import {Link} from "gatsby"
 import {useEpisode, usePlaylist, usePosts} from "hooks"
 import styled from "styled-components"
 import Section from "styles/Section"

src/styles/Tag.js

@@ -1,4 +1,4 @@
-import {Link} from "gatsby"
+import Link from "@bradgarropy/gatsby-link"
 import styled from "styled-components"
 
 const fontSize = size => {