feat(archives): bootstrap what-is-archives from Github

src/components/ArchivesSidebar/index.tsx

@@ -0,0 +1,35 @@
+import { graphql, useStaticQuery } from "gatsby"
+import React, { FC, HTMLAttributes } from "react"
+import { IAllArchivesQuery, IFileOrFolder } from "../../types"
+import { humanize } from "../../utils"
+import { ColumnSidebar } from "../ColumnSidebar"
+import useBuildTree from "./../../hooks/useBuildTree"
+import * as SC from "./styles"
+
+const ALL_ARCHIVES = graphql`
+  query {
+    allFile(filter: { sourceInstanceName: { eq: "what-is-archive" } }) {
+      edges {
+        node {
+          relativePath
+        }
+      }
+    }
+  }
+`
+
+function plantTree(item: IFileOrFolder) {
+  return (
+    <SC.PageLink key={item.title} to={item.path} activeClassName="active">
+      {humanize(item.title)}
+    </SC.PageLink>
+  )
+}
+
+export const ArchivesSidebar: FC<HTMLAttributes<HTMLDivElement>> = props => {
+  const archives = useStaticQuery<IAllArchivesQuery>(ALL_ARCHIVES)
+  const tree = useBuildTree(archives, "/archives")
+  const sortedTree = tree.sort((a, b) => a.title.localeCompare(b.title))
+
+  return <ColumnSidebar {...props}>{sortedTree.map(plantTree)}</ColumnSidebar>
+}

src/components/ArchivesSidebar/styles.tsx

@@ -0,0 +1,31 @@
+import { Link } from "gatsby"
+import { transparentize } from "polished"
+import styled from "styled-components"
+
+export const PageLink = styled(Link)`
+  display: block;
+  padding: 4px 0 0;
+  margin-bottom: 4px;
+  color: ${props => props.theme.sidebar.foreground};
+  align-self: flex-start;
+  text-decoration: none;
+  border-bottom: 2px solid transparent;
+
+  &:hover {
+    border-color: ${props =>
+      transparentize(0.7, props.theme.sidebar.foreground)};
+  }
+
+  & + & {
+    margin-top: 4px;
+  }
+
+  &.active {
+    font-weight: 700;
+    color: ${props => props.theme.sidebar.active};
+  }
+
+  &.active:hover {
+    border-color: ${props => transparentize(0.7, props.theme.sidebar.active)};
+  }
+`