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%);
-  }
-`

src/components/PageSidebarLink/index.tsx

@@ -0,0 +1,37 @@
+import React, { FC } from "react"
+
+import { humanize } from "../../utils"
+import * as SC from "./styles"
+
+interface IPageSidebarLinkProps {
+  href: string
+  text?: string
+  external?: boolean
+  type?: "internal" | "external" | "anchor"
+}
+
+export const PageSidebarLink: FC<IPageSidebarLinkProps> = ({
+  href,
+  text,
+  type = "internal",
+}) => {
+  if (type === "anchor") {
+    return <SC.Anchor to={href}>{text}</SC.Anchor>
+  }
+
+  if (type === "external") {
+    return (
+      <SC.External href={href} target="_blank">
+        {text}
+      </SC.External>
+    )
+  }
+
+  const [internalText] = href.split("/").slice(-1)
+
+  return (
+    <SC.Internal to={`/resources/${href}.md`}>
+      {text || humanize(internalText)}
+    </SC.Internal>
+  )
+}

src/components/PageSidebarLink/styles.tsx

@@ -0,0 +1,26 @@
+import { AnchorLink } from "gatsby-plugin-anchor-links"
+import styled, { css } from "styled-components"
+import { Link } from "gatsby"
+
+const extraLink = css`
+  color: ${props => props.theme.main.foreground};
+  text-decoration: none;
+  word-break: break-word;
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
+`
+
+export const Anchor = styled(AnchorLink)`
+  ${extraLink};
+`
+
+export const Internal = styled(Link)`
+  ${extraLink};
+`
+
+export const External = styled.a`
+  ${extraLink};
+`

src/components/Toc/index.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from "react"
+import { PageSidebarLink } from "../PageSidebarLink"
 import { ITocItem } from "../../types"
 import * as SC from "./styles"
 
@@ -40,7 +41,7 @@ export const Toc: FC<ITocProps> = ({ header, items }) => {
         return (
           <SC.TocItem key={item.link} className={`depth-${item.depth}`}>
             {prefix}
-            <SC.TocLink to={`${pathname}${item.link}`}>{title}</SC.TocLink>
+            <PageSidebarLink href={`${pathname}${item.link}`} text={title} type="anchor" />
           </SC.TocItem>
         )
       })}

src/components/Toc/styles.tsx

@@ -1,4 +1,3 @@
-import { AnchorLink } from "gatsby-plugin-anchor-links"
 import styled from "styled-components"
 
 export const TocWrapper = styled.div`
@@ -18,13 +17,3 @@ export const TocItem = styled.div`
     margin-top: 8px;
   }
 `
-
-export const TocLink = styled(AnchorLink)`
-  color: ${props => props.theme.main.foreground};
-  text-decoration: none;
-
-  &:hover,
-  &:focus {
-    text-decoration: underline;
-  }
-`