feat(resources): tweak external resources & visuals

src/components/PageContent/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC, Fragment } from "react"
+import React, { FC } from "react"
 
-import { ITocItem } from "../../types"
-import { humanize } from "../../utils"
+import { IExternalResource, ITocItem } from "../../types"
 import { Container } from "../Container"
+import { PageSidebarLink } from "../PageSidebarLink"
 import { Toc } from "../Toc"
 import * as SC from "./styles"
 
@@ -10,37 +10,7 @@ interface IPageContentProps {
   content: JSX.Element
   toc?: ITocItem[]
   recommendedReading?: string[]
-  externalResources?: string[]
-}
-
-function ExtraLink({
-  item,
-  external = false,
-}: {
-  item: string
-  external?: boolean
-}) {
-  const Inner = ({ text }: { text: string }) => (
-    <Fragment>
-      <SC.ExtraLinkText>{text}</SC.ExtraLinkText>
-    </Fragment>
-  )
-
-  if (external) {
-    return (
-      <SC.ExtraLinkExternal href={item} target="_blank">
-        <Inner text={item} />
-      </SC.ExtraLinkExternal>
-    )
-  }
-
-  const [internalText] = item.split("/").slice(-1)
-
-  return (
-    <SC.ExtraLinkInternal to={`/resources/${item}.md`}>
-      <Inner text={humanize(internalText)} />
-    </SC.ExtraLinkInternal>
-  )
+  externalResources?: IExternalResource[]
 }
 
 export const PageContent: FC<IPageContentProps> = ({
@@ -67,7 +37,7 @@ export const PageContent: FC<IPageContentProps> = ({
           <SC.RecommendedReading>
             <SC.SidebarHeader>Recommended reading</SC.SidebarHeader>
             {recommendedReading.map(item => {
-              return <ExtraLink key={item} item={item} />
+              return <PageSidebarLink key={item} href={item} type="internal" />
             })}
           </SC.RecommendedReading>
         )}
@@ -76,7 +46,7 @@ export const PageContent: FC<IPageContentProps> = ({
           <SC.ExternalResources>
             <SC.SidebarHeader>External Resources</SC.SidebarHeader>
             {externalResources.map(item => {
-              return <ExtraLink key={item} item={item} external />
+              return <PageSidebarLink key={item.href} href={item.href} text={item.text} type="external" />
             })}
           </SC.ExternalResources>
         )}

src/components/PageContent/styles.tsx

@@ -1,5 +1,4 @@
-import styled, { css } from "styled-components"
-import { Link } from "gatsby"
+import styled from "styled-components"
 import fontFamily from "../../design/typography"
 import { darken } from "polished"
 
@@ -53,6 +52,8 @@ export const SidebarHeader = styled.div`
 
 const ExtraLinks = styled.div`
   margin-top: 32px;
+  display: flex;
+  flex-direction: column;
 
   &:first-child {
     margin-top: 0;
@@ -62,53 +63,3 @@ const ExtraLinks = styled.div`
 export const RecommendedReading = styled(ExtraLinks)``
 
 export const ExternalResources = styled(ExtraLinks)``
-
-const extraLink = css`
-  display: flex;
-  align-items: center;
-  color: ${props => (props.theme.name === "dark" ? "#f9f9f9" : "#172129")};
-  cursor: pointer;
-  text-decoration: none;
-
-  & + & {
-    margin-top: 8px;
-  }
-
-  &:hover {
-    background: linear-gradient(92.97deg, #feaf6d 0%, #ff70a5 100%);
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-
-  svg {
-    width: 14px;
-    flex: 0 0 14px;
-    transform: rotate(90deg);
-    margin-left: 6px;
-  }
-
-  svg path {
-    fill: ${props => (props.theme.name === "dark" ? "#f9f9f9" : "#172129")};
-  }
-`
-
-export const ExtraLinkInternal = styled(Link)`
-  ${extraLink};
-`
-
-export const ExtraLinkExternal = styled.a`
-  ${extraLink};
-`
-
-export const ExtraLinkText = styled.div`
-  word-break: break-word;
-
-  &::after {
-    content: "";
-    display: block;
-    width: 100%;
-    height: 2px;
-    background: linear-gradient(92.97deg, #feaf6d 0%, #ff70a5 100%);
-  }
-`