feat(resources): tweak external resources & visuals

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};
+`